fabula-ultima-react/src/ui/CharacterStatus.tsx

import {animated, useSpring} from "@react-spring/web";
import {ReactElement, useMemo} from "react";
import {evaluateResourceBarStyles, ResourceBarColors, ResourceBarStyles} from "./ResourceBarGradient";
import {isDefined} from "../types/type_check";
import {SpringyValueInterpolatables, useSpringyValue} from "./SpringyValueHook";
import "./CharacterStatus.css";
import DefaultPortrait from "./default-portrait.svg";
import OverlayTrigger from "react-bootstrap/OverlayTrigger";
import Tooltip from "react-bootstrap/Tooltip";
import {altTo as to} from "./FixedInterpolation";
import {
    Character,
    CharacterHealth,
    CharacterTurnState,
    healthToBounds,
    healthToFraction,
    hpToHealth, SPType, spTypeToDescription, turnStateToDescription,
    turnStateToTitle
} from "../model/Character";

export function healthToColor(health: CharacterHealth | undefined): string {
    switch (health) {
        case CharacterHealth.Full:
            return "#cfc"
        case CharacterHealth.Healthy:
            return "#efe"
        case CharacterHealth.Crisis:
            return "#ffa"
        case CharacterHealth.Peril:
            return "#faa"
        case CharacterHealth.KO:
            return "#f66"
        case CharacterHealth.Wounded:
        default:
            return "#fff"
    }
}

const hpBarStyle: SpringyValueInterpolatables<ResourceBarStyles> = {
    foreground: 'linear-gradient(to bottom, rgb(255, 255, 255, 0.1) 0%, rgb(0, 0, 0, 0) 30% 50%, rgb(0, 0, 0, 0.1) 80%, rgb(0, 0, 0, 0.2) 95%, rgb(0, 0, 0, 0.3) 100%)',
    barDirection: "to right",
    barColors: ({flashValue}: {flashValue: number}): ResourceBarColors => {
        return {
            emptiedColor: `rgb(${Math.min(1, Math.max(flashValue, 0)) * 55 + 55}, 55, 55)`,
            toEmptyColor: 'rgb(200, 0, 0)',
            toFillColor: 'rgb(150, 250, 250)',
            filledColor: 'rgb(0, 200, 0)',
        }
    },
}

const mpBarStyle: SpringyValueInterpolatables<ResourceBarStyles> = {
    foreground: 'linear-gradient(to bottom, rgb(255, 255, 255, 0.1) 0%, rgb(0, 0, 0, 0) 30% 50%, rgb(0, 0, 0, 0.1) 80%, rgb(0, 0, 0, 0.2) 95%, rgb(0, 0, 0, 0.3) 100%)',
    barColors: ({flashValue}: {flashValue: number}): ResourceBarColors => {
        return {
            emptiedColor: `rgb(${Math.min(1, Math.max(flashValue, 0)) * 55 + 55}, 55, 55)`,
            toEmptyColor: 'rgb(250, 250, 60)',
            toFillColor: 'rgb(150, 250, 250)',
            filledColor: 'rgb(0, 150, 255)',
        }
    },
}

const ipBarStyle: SpringyValueInterpolatables<ResourceBarStyles> = {
    foreground: 'linear-gradient(to bottom, rgb(255, 255, 255, 0.1) 0%, rgb(0, 0, 0, 0) 30% 50%, rgb(0, 0, 0, 0.1) 80%, rgb(0, 0, 0, 0.2) 95%, rgb(0, 0, 0, 0.3) 100%)',
    barColors: ({flashValue}: {flashValue: number}): ResourceBarColors => {
        return {
            emptiedColor: `rgb(${Math.min(1, Math.max(flashValue, 0)) * 55 + 55}, 55, 55)`,
            toEmptyColor: 'rgb(160, 55, 195)',
            toFillColor: 'rgb(250, 250, 60)',
            filledColor: 'rgb(255, 150, 55)',
        }
    },
}

export function CharacterStatus({character, active}: {character: Character, active: boolean}): ReactElement {
    const {name, level, health, statuses} = character

    const {hp, maxHp} = character
    const effectiveMaxHp = maxHp ?? 100
    const effectiveHp = hp ?? (healthToFraction(health) * effectiveMaxHp)
    const {springs: [, , {v: hpRecentSpring}], flashSpring: {v: hpFlashSpring}, interpolate: hpInterpolate} = useSpringyValue({
        current: effectiveHp,
        max: effectiveMaxHp,
        starting: 0,
        flash: effectiveHp * 2 <= effectiveMaxHp && effectiveHp > 0,
    })
    const logged = function<T>(v:T): T {
        console.log(v)
        return v
    }
    const {hpText, hpTextStyleInterpolated, hpBarStyleInterpolated} = useMemo(() => {
        if ((isDefined(hp) && isDefined(maxHp)) || isDefined(health)) {
            return {
                hpText: isDefined(hp)
                    ? to([hpRecentSpring], recentValue => `${Math.round(logged(recentValue))}`)
                    : to([hpRecentSpring], recentValue => hpToHealth(recentValue, maxHp) ?? "???"),
                hpBarStyleInterpolated: evaluateResourceBarStyles(hpBarStyle, hpInterpolate),
                hpTextStyleInterpolated: {
                    color: to([hpRecentSpring], recentValue => healthToColor(hpToHealth(recentValue, maxHp)))
                }
            }
        } else {
            return {}
        }
    }, [hp, health, maxHp, hpRecentSpring, hpInterpolate])

    const {mp, maxMp} = character
    const {springs: [, , {v: mpRecentSpring}], interpolate: mpInterpolate} = useSpringyValue({
        current: mp,
        max: maxMp,
        starting: 0,
        flash: false,
    })
    const {mpText, mpBarStyleInterpolated} = useMemo(() => {
        if (isDefined(mp) && isDefined(maxMp) && maxMp > 0) {
            return {
                mpText: to([mpRecentSpring], (recentValue) => `${Math.round(recentValue)}`),
                mpBarStyleInterpolated: evaluateResourceBarStyles(mpBarStyle, mpInterpolate),
            }
        } else {
            return {}
        }
    }, [mp, maxMp, mpRecentSpring, mpInterpolate])

    const {ip, maxIp} = character
    const {springs: [, , {v: ipRecentSpring}], interpolate: ipInterpolate} = useSpringyValue({
        current: ip,
        max: maxIp,
        starting: 0,
        flash: false,
    })
    const {ipText, ipBarStyleInterpolated} = useMemo(() => {
        if (isDefined(ip) && isDefined(maxIp) && maxIp > 0) {
            return {
                ipText: to([ipRecentSpring], recentValue => `${Math.round(recentValue)}`),
                ipBarStyleInterpolated: evaluateResourceBarStyles(ipBarStyle, ipInterpolate),
            }
        } else {
            return {}
        }
    }, [ip, maxIp, ipRecentSpring, ipInterpolate])

    const {sp, spBank, spType} = character
    const {springs: [, , {v: spRecentSpring}]} = useSpringyValue({
        current: sp,
        starting: 0,
        flash: isDefined(spType) && isDefined(sp) && sp > 0,
    })
    const {spText} = useMemo(() => {
        if (isDefined(sp) && isDefined(spType)) {
            return {
                spText: to([spRecentSpring], (recentValue) => recentValue.toFixed(0))
            }
        } else {
            return {}
        }
    }, [sp, spType, spRecentSpring])

    const {turnsLeft, turnsTotal, canAct} = character
    const {turnsState, turnsText} = useMemo(() => {
        if (!isDefined(turnsTotal) || !isDefined(turnsLeft)) {
            return {
                turnsState: CharacterTurnState.None
            }
        } else if (active) {
            return {
                turnsState: CharacterTurnState.Active,
                turnsText: "🞂",
            }
        } else if (hp === 0 && isDefined(maxHp) && maxHp > 0) {
            return {
                turnsState: CharacterTurnState.Downed,
                turnsText: (isDefined(turnsTotal) && turnsLeft === 0) ? "✓" : "",
            }
        } else if (canAct === false || turnsTotal === 0) {
            return {
                turnsState: CharacterTurnState.CantAct,
            }
        } else if (turnsLeft === 0) {
            return {
                turnsState: CharacterTurnState.Done,
                turnsText: "✓"
            }
        } else if (turnsTotal > 1) {
            return {
                turnsState: CharacterTurnState.HighTurns,
                turnsText: `${turnsLeft}`
            }
        } else {
            return {
                turnsState: CharacterTurnState.Ready,
            }
        }
    }, [active, hp, maxHp, canAct, turnsLeft, turnsTotal])

    const {portraitUrl} = character
    const effectivePortraitUrl = portraitUrl ?? DefaultPortrait
    const portraitFilterInterpolated = useMemo(() => {
        return to([hpRecentSpring], recentValue => {
            const filter = {
                color: 100,
                brightness: 100,
            }
            if (isDefined(effectiveMaxHp) && Math.round(recentValue) < 1 && effectiveMaxHp > 0) {
                filter.color *= 0.50
                filter.brightness *= 0.25
            }
            if (canAct === false || turnsTotal === 0) {
                filter.color *= 0.50
                filter.brightness *= 0.50
            }
            if (isDefined(turnsTotal) && turnsLeft === 0) {
                filter.color *= 0.75
                filter.brightness *= 0.75
            }
            return filter
        })
    }, [hpRecentSpring, effectiveMaxHp, turnsTotal, turnsLeft, canAct])
    const {brightness: brightnessSpring, grayscale: grayscaleSpring} = useSpring({
        grayscale: to([portraitFilterInterpolated], ({color}) => 100 - color),
        brightness: to([portraitFilterInterpolated], ({brightness}) => brightness),
    })
    const characterPortraitStyleInterpolated = useMemo(() => {
        return {
            backgroundImage: to([hpFlashSpring], (flashValue: number) => {
                return `radial-gradient(closest-side, rgb(75% 0% 0% / ${Math.round(100 * flashValue)}%), transparent), url("${effectivePortraitUrl}")`
            }),
            filter: to([brightnessSpring, grayscaleSpring],
                (brightness: number, grayscale: number) =>
                    `grayscale(${grayscale}%) brightness(${brightness}%)`)
        }
    }, [brightnessSpring, grayscaleSpring, hpFlashSpring, effectivePortraitUrl])

    const hpTooltip = <Tooltip>
        <div className={"characterHelpHeader"}>
            <span className={"characterHelpName"}>{isDefined(maxHp) && isDefined(hp) ? "Health Points" : health}</span>
            <span className={"characterHelpValue"}>{isDefined(maxHp) && isDefined(hp) ? `${hp}/${maxHp}` : (healthToBounds(health))}</span></div>
        {<div className={"characterHelpDescription"}>
            {isDefined(hp)
                ? "Health Points, or HP. HP represent a character's determination and will. "
                +  "HP are lost when taking damage. When a character's HP reach 0, they are defeated."
                : "The enemy's condition, giving a rough estimate of its current HP."}
        </div>}
    </Tooltip>
    const mpTooltip = <Tooltip>
        <div className={"characterHelpHeader"}>
            <span className={"characterHelpName"}>Mind Points</span>
            {isDefined(maxMp) && isDefined(mp) && <span className={"characterHelpValue"}>{mp}/{maxMp}</span>}
        </div>
        <div className={"characterHelpDescription"}>
            Mind Points, or MP. MP represent a character's focus and energy. MP are spent to use all manner of abilities.
        </div>
    </Tooltip>
    const ipTooltip = <Tooltip>
        <div className={"characterHelpHeader"}>
            <span className={"characterHelpName"}>Inventory Points</span>
            {isDefined(maxIp) && isDefined(ip) && <span className={"characterHelpValue"}>{ip}/{maxIp}</span>}
        </div>
        <div className={"characterHelpDescription"}>
            Inventory Points, or IP. IP represent a character's stock of prepared items. IP are spent to use items.
        </div>
    </Tooltip>


    return <div className="characterStatus">
        <animated.div className={"characterPortrait"} style={characterPortraitStyleInterpolated} />
        {isDefined(turnsState) &&
            <OverlayTrigger delay={{show: 750, hide: 0}} trigger={["hover", "click", "focus"]} overlay={
                <Tooltip>
                    <div className={"characterHelpHeader"}>
                        <span className={"characterHelpName"}>{turnStateToTitle(turnsState)}</span>
                        {isDefined(turnsTotal) && isDefined(turnsLeft) && turnsTotal > 1 && <span className={"characterHelpValue"}>{turnsLeft}/{turnsTotal}</span>}</div>
                    {<div className={"characterHelpDescription"}>
                        {isDefined(turnsTotal) && isDefined(turnsLeft) &&
                            turnStateToDescription(turnsState)
                                .replaceAll("%c%", turnsLeft.toFixed(0))
                                .replaceAll("%m%", turnsTotal.toFixed(0))}
                    </div>}
                </Tooltip>
            } placement={"right"}>
                <div className={"characterTurns characterTurns" + turnsState}>{turnsText}</div>
            </OverlayTrigger>}
        <div className={"characterHeader"}>
            <div className="characterLevel">
                    <span className="characterLevelLabel">Lv</span>
                    <span className="characterLevelValue">{level ?? "??"}</span>
                </div>
            <div className={"characterName"}>{name ?? "???"}</div>
        </div>
        {isDefined(hpText) &&
            <div className={"characterHp"}>
                <OverlayTrigger delay={{show: 750, hide: 0}} trigger={["hover", "click", "focus"]} overlay={hpTooltip} placement={"top"}>
                    <animated.div className={"characterHpBar"} style={hpBarStyleInterpolated} />
                </OverlayTrigger>
                <animated.div
                    className={isDefined(hp) ? "characterHpValue" : "characterHealthText"}
                    style={hpTextStyleInterpolated}>{hpText}</animated.div>
            </div>}
        {isDefined(mpText) &&
            <div className={"characterMp"}>
                <OverlayTrigger delay={{show: 750, hide: 0}} trigger={["hover", "click", "focus"]} overlay={mpTooltip} placement={"top"}>
                    <animated.div className={"characterMpBar"} style={mpBarStyleInterpolated} />
                </OverlayTrigger>
                <animated.div className={"characterMpValue"}>{mpText}</animated.div>
            </div>}
        {isDefined(ipText) &&
                <div className={"characterIp"}>
                    <OverlayTrigger delay={{show: 750, hide: 0}} trigger={["hover", "click", "focus"]} overlay={ipTooltip} placement={"top"}>
                        <animated.div className={"characterIpBar"} style={ipBarStyleInterpolated} />
                    </OverlayTrigger>
                    <animated.div className={"characterIpValue"}>{ipText}</animated.div>
                </div>
}
        {isDefined(spText) &&
            <OverlayTrigger delay={{show: 750, hide: 0}} trigger={["hover", "click", "focus"]} overlay={
                <Tooltip>
                    <div className={"characterHelpHeader"}>
                        <span className={"characterHelpName"}>{spType} Points</span>
                        <span className={"characterHelpValue"}>{sp}{typeof spBank === "number" ? ` / ${spBank} banked`: null}</span></div>
                    {isDefined(spType) && <div className={"characterHelpDescription"}>
                        {spTypeToDescription(spType)}
                    </div>}
                </Tooltip>
            } placement={"right"}>
                <animated.div className={"characterSp characterSp" + spType}>
                    <animated.span className={"characterSpValue characterSpValue" + spType}>
                        {spText}</animated.span>
                </animated.div>
            </OverlayTrigger>}
        {isDefined(statuses) &&
            <div className={"characterStatuses"}>
                {statuses.map(({id, name, count, description, iconUrl}) =>
                    <OverlayTrigger key={id} delay={{show: 300, hide: 0}} trigger={["hover", "click", "focus"]} overlay={
                        <Tooltip>
                            <div className={"characterStatusHeader"}>
                                <span className={"characterStatusName"}>{name}</span>
                                {isDefined(count) && <span className={"characterStatusCount"}>{count}</span>}</div>
                            {isDefined(description) && <div className={"characterStatusDescription"}>
                                {isDefined(count) ? description.replaceAll("%c%", count.toFixed(0)) : description}
                            </div>}
                        </Tooltip>
                    } placement={"bottom"}>
                        <div className={"characterStatusIcon"} style={{backgroundImage: `url("${iconUrl}")`}}><span className={"characterStatusIconCountBadge"}>{count}</span></div>
                    </OverlayTrigger>
                )}
            </div>}
    </div>
}