parent
d908dfb0d2
commit
fbe0ff722c
File diff suppressed because it is too large
Load Diff
@ -1,372 +0,0 @@ |
|||||||
import {GameState, getCharacterById} from "./GameState"; |
|
||||||
import {CharacterId} from "./Character"; |
|
||||||
|
|
||||||
export interface BaseDoable { |
|
||||||
readonly type: string |
|
||||||
} |
|
||||||
|
|
||||||
export type LogEntry = { |
|
||||||
readonly markdown: string |
|
||||||
readonly children: readonly LogEntry[] |
|
||||||
} |
|
||||||
|
|
||||||
export interface DoableResults { |
|
||||||
readonly resultState: GameState |
|
||||||
readonly logEntry: LogEntry|null |
|
||||||
} |
|
||||||
|
|
||||||
export interface DoablesResults { |
|
||||||
readonly resultState: GameState |
|
||||||
readonly logEntries: readonly LogEntry[] |
|
||||||
} |
|
||||||
|
|
||||||
export interface DoableEvaluator<DataType extends BaseDoable> { |
|
||||||
readonly type: DataType["type"] |
|
||||||
evaluate(data: DataType, state: GameState, direction: DoableDirection): DoableResults |
|
||||||
} |
|
||||||
|
|
||||||
export interface GenericAction extends BaseDoable { |
|
||||||
readonly type: "generic", |
|
||||||
readonly text: string |
|
||||||
readonly user: CharacterId|null |
|
||||||
readonly target: CharacterId|null |
|
||||||
readonly effects: readonly Doable[] |
|
||||||
} |
|
||||||
|
|
||||||
export const GenericActionEvaluator = { |
|
||||||
type: "generic", |
|
||||||
evaluate(data: GenericAction, state: GameState, direction: DoableDirection): DoableResults { |
|
||||||
function runEffects(currentState: GameState): DoablesResults { |
|
||||||
return evaluateDoables(data.effects, state, direction) |
|
||||||
} |
|
||||||
function logSelf(currentState: GameState): string { |
|
||||||
return data.text.replaceAll(/@[TU]/g, (substring: string): string => { |
|
||||||
switch (substring) { |
|
||||||
case "@T": |
|
||||||
// TODO: make "character links" a function, likely with identifier characters
|
|
||||||
return data.target !== null ? `[${getCharacterById(currentState, data.target)?.name ?? "???"}](#character/${data.target})` : "@T" |
|
||||||
case "@U": |
|
||||||
return data.user !== null ? `[${getCharacterById(currentState, data.user)?.name ?? "???"}](#character/${data.user})` : "@U" |
|
||||||
default: |
|
||||||
return substring |
|
||||||
} |
|
||||||
}) |
|
||||||
} |
|
||||||
switch (direction) { |
|
||||||
case DoableDirection.Do: { |
|
||||||
const markdown = logSelf(state) |
|
||||||
const {resultState, logEntries} = runEffects(state) |
|
||||||
return { |
|
||||||
resultState, |
|
||||||
logEntry: { |
|
||||||
markdown, |
|
||||||
children: logEntries |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
case DoableDirection.Undo: { |
|
||||||
const {resultState, logEntries} = runEffects(state) |
|
||||||
const markdown = logSelf(resultState) |
|
||||||
return { |
|
||||||
resultState, |
|
||||||
logEntry: { |
|
||||||
markdown, |
|
||||||
children: logEntries |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
} as const satisfies DoableEvaluator<GenericAction> |
|
||||||
/** |
|
||||||
* @dataclass(**JsonableDataclassArgs) |
|
||||||
* class AbilityAction(Doable): |
|
||||||
* name: str |
|
||||||
* user: Target | None |
|
||||||
* costs: tuple[DamageEffect, ...] |
|
||||||
* effects: tuple[Effect, ...] |
|
||||||
* |
|
||||||
* |
|
||||||
* @dataclass(**JsonableDataclassArgs) |
|
||||||
* class ModifyCharacterEffect(Doable): |
|
||||||
* index: int |
|
||||||
* old_character_data: Character | None |
|
||||||
* new_character_data: Character | None |
|
||||||
* |
|
||||||
* def __post_init__(self): |
|
||||||
* if self.old_character_data is None and self.new_character_data is None: |
|
||||||
* raise ValueError("At least one of old_character_data or new_character_data must be non-None") |
|
||||||
* |
|
||||||
* @dataclass(**JsonableDataclassArgs) |
|
||||||
* class ModifyClockEffect(Doable): |
|
||||||
* index: int |
|
||||||
* old_clock_data: Clock | None |
|
||||||
* new_clock_data: Clock | None |
|
||||||
* |
|
||||||
* def __post_init__(self): |
|
||||||
* if self.old_clock_data is None and self.new_clock_data is None: |
|
||||||
* raise ValueError("At least one of old_clock_data or new_clock_data must be non-None") |
|
||||||
* |
|
||||||
* |
|
||||||
* @dataclass(**JsonableDataclassArgs) |
|
||||||
* class EndTurnAction(Doable): |
|
||||||
* turn_ending_index: int |
|
||||||
* activating_side: CombatSide |
|
||||||
* |
|
||||||
* |
|
||||||
* @dataclass(**JsonableDataclassArgs) |
|
||||||
* class StartTurnAction(Doable): |
|
||||||
* turn_starting_index: int |
|
||||||
* old_active_side: CombatSide |
|
||||||
* |
|
||||||
* |
|
||||||
* @dataclass(**JsonableDataclassArgs) |
|
||||||
* class StartRoundAction(Doable): |
|
||||||
* last_round: int |
|
||||||
* old_active_side: CombatSide |
|
||||||
* old_turns_remaining: tuple[int, ...] |
|
||||||
* next_round: int |
|
||||||
* activating_side: CombatSide |
|
||||||
* |
|
||||||
* |
|
||||||
* @dataclass(**JsonableDataclassArgs) |
|
||||||
* class StartBattleAction(Doable): |
|
||||||
* starting_side: CombatSide |
|
||||||
* starting_round: int |
|
||||||
* |
|
||||||
* |
|
||||||
* @dataclass(**JsonableDataclassArgs) |
|
||||||
* class EndBattleAction(Doable): |
|
||||||
* old_round_number: int |
|
||||||
* old_active_side: CombatSide |
|
||||||
* old_starting_side: CombatSide |
|
||||||
* old_turns_remaining: tuple[int, ...] |
|
||||||
* |
|
||||||
* @dataclass(**JsonableDataclassArgs) |
|
||||||
* class OpportunityEffect(LogOnly, Effect): |
|
||||||
* target: Target | None |
|
||||||
* opportunity_text: str |
|
||||||
* |
|
||||||
* def log_message(self, user: Target | None = None) -> str: |
|
||||||
* return f'**Opportunity!!** {log_substitute(self.opportunity_text, user=user, target=self.target)}' |
|
||||||
* |
|
||||||
* @dataclass(**JsonableDataclassArgs) |
|
||||||
* class DamageEffect(Effect): |
|
||||||
* target: Target |
|
||||||
* target_type: CharacterType |
|
||||||
* attribute: Counter |
|
||||||
* damage: int |
|
||||||
* old_value: int |
|
||||||
* new_value: int |
|
||||||
* max_value: int | None |
|
||||||
* element: Element |
|
||||||
* affinity: Affinity |
|
||||||
* piercing: bool |
|
||||||
* |
|
||||||
* def do(self, combat: "CombatStatus", source: Union[Action, "Effect", None] = None) -> "CombatStatus": |
|
||||||
* return combat.alter_character(self.target, lambda c: c.set_counter_current(self.attribute, self.new_value)) |
|
||||||
* |
|
||||||
* def undo(self, combat: "CombatStatus", source: Union[Action, "Effect", None] = None) -> "CombatStatus": |
|
||||||
* return combat.alter_character(self.target, lambda c: c.set_counter_current(self.attribute, self.old_value)) |
|
||||||
* |
|
||||||
* def log_message(self, user: Target | None = None) -> str: |
|
||||||
* state_change = None |
|
||||||
* if self.attribute == Counter.HP: |
|
||||||
* if self.old_value > self.new_value == 0: |
|
||||||
* state_change = ['+ **KO**'] |
|
||||||
* elif self.new_value > self.old_value == 0: |
|
||||||
* if self.new_value * 2 > self.max_value: |
|
||||||
* state_change = ['- **KO**'] |
|
||||||
* else: |
|
||||||
* state_change = ['- **KO**', '+ **Crisis**'] |
|
||||||
* elif self.old_value * 2 > self.max_value >= self.new_value * 2: |
|
||||||
* state_change = '+ **Crisis**' |
|
||||||
* elif self.new_value * 2 > self.max_value >= self.old_value * 2: |
|
||||||
* state_change = '- **Crisis**' |
|
||||||
* affinity = '' |
|
||||||
* if self.affinity == Affinity.Absorb: |
|
||||||
* affinity = "?" |
|
||||||
* elif self.affinity == Affinity.Immune: |
|
||||||
* affinity = " ✖" |
|
||||||
* elif self.affinity == Affinity.Resistant: |
|
||||||
* affinity = "…" |
|
||||||
* elif self.affinity == Affinity.Vulnerable: |
|
||||||
* affinity = "‼" |
|
||||||
* attribute = (f'{self.element.value}{"!" if self.piercing else ""}' |
|
||||||
* if self.attribute == Counter.HP |
|
||||||
* else f'{self.attribute.ctr_name_abbr(self.target_type)}') |
|
||||||
* sign = '-' if self.damage >= 0 else '+' |
|
||||||
* return '\n'.join( |
|
||||||
* [log_substitute( |
|
||||||
* f'@T: [{sign}{abs(self.damage)}{affinity}] {attribute}', |
|
||||||
* user=user, target=self.target)] + |
|
||||||
* [log_substitute(f'@T: [{s}]') for s in state_change]) |
|
||||||
* |
|
||||||
* |
|
||||||
* @dataclass(**JsonableDataclassArgs) |
|
||||||
* class StatusEffect(Effect): |
|
||||||
* target: Target |
|
||||||
* old_status: str | None |
|
||||||
* new_status: str | None |
|
||||||
* |
|
||||||
* @staticmethod |
|
||||||
* def alter_status(c: Character, old_status: str | None, new_status: str | None) -> Character: |
|
||||||
* if old_status is None and new_status is not None: |
|
||||||
* return c.add_status(new_status) |
|
||||||
* elif new_status is None and old_status is not None: |
|
||||||
* return c.remove_status(old_status) |
|
||||||
* elif new_status is not None and old_status is not None: |
|
||||||
* return c.replace_status(old_status, new_status) |
|
||||||
* else: |
|
||||||
* return c |
|
||||||
* |
|
||||||
* def __post_init__(self): |
|
||||||
* if self.old_status is None and self.new_status is None: |
|
||||||
* raise ValueError("At least one of old_status or new_status must be non-None") |
|
||||||
* |
|
||||||
* def do(self, combat: CombatStatus, source: Union[Action, Effect, None] = None) -> CombatStatus: |
|
||||||
* return combat.alter_character( |
|
||||||
* self.target, lambda c: StatusEffect.alter_status(c, self.old_status, self.new_status)) |
|
||||||
* |
|
||||||
* def undo(self, combat: CombatStatus, source: Union[Action, Effect, None] = None) -> CombatStatus: |
|
||||||
* return combat.alter_character( |
|
||||||
* self.target, lambda c: StatusEffect.alter_status(c, self.new_status, self.old_status)) |
|
||||||
* |
|
||||||
* def log_message(self, user: Target | None = None) -> str | None: |
|
||||||
* if self.old_status is not None and self.new_status is None: |
|
||||||
* return log_substitute(v=f'@T: [- {self.old_status}]', user=user, target=self.target) |
|
||||||
* if self.new_status is not None and self.old_status is None: |
|
||||||
* return log_substitute(v=f'@T: [+ {self.old_status}]', user=user, target=self.target) |
|
||||||
* if self.old_status is not None and self.new_status is not None: |
|
||||||
* return log_substitute(v=f'@T: [{self.old_status} -> {self.new_status}]', user=user, target=self.target) |
|
||||||
* pass |
|
||||||
* |
|
||||||
* |
|
||||||
* @dataclass(**JsonableDataclassArgs) |
|
||||||
* class FPBonusEffect(Effect): |
|
||||||
* user: Target |
|
||||||
* rerolls: int |
|
||||||
* modifier: int |
|
||||||
* fp_spent: int |
|
||||||
* old_fp: int |
|
||||||
* new_fp: int |
|
||||||
* |
|
||||||
* def do(self, combat: CombatStatus, source: Union[Action, Effect, None] = None) -> CombatStatus: |
|
||||||
* return combat.alter_character( |
|
||||||
* self.user, |
|
||||||
* lambda c: c.set_counter_current(Counter.SP, self.new_fp) |
|
||||||
* ).add_fp_spent(self.fp_spent) |
|
||||||
* |
|
||||||
* def undo(self, combat: CombatStatus, source: Union[Action, Effect, None] = None) -> CombatStatus: |
|
||||||
* return combat.alter_character( |
|
||||||
* self.user, |
|
||||||
* lambda c: c.set_counter_current(Counter.SP, self.old_fp) |
|
||||||
* ).add_fp_spent(-self.fp_spent) |
|
||||||
* |
|
||||||
* def log_message(self, user: Target | None = None) -> str | None: |
|
||||||
* bonuses = [] |
|
||||||
* if self.rerolls > 0: |
|
||||||
* if self.rerolls > 1: |
|
||||||
* bonuses.append(f"{self.rerolls} rerolls") |
|
||||||
* else: |
|
||||||
* bonuses.append("a reroll") |
|
||||||
* if self.modifier != 0: |
|
||||||
* bonuses.append(f"a {self.modifier:+} {'bonus' if self.modifier > 0 else 'penalty'}") |
|
||||||
* if len(bonuses) == 0: |
|
||||||
* return None |
|
||||||
* affected = '' |
|
||||||
* if self.user != user: |
|
||||||
* affected = log_substitute(" on @U's roll", user=user, target=self.user) |
|
||||||
* return f"{log_substitute('@T', user=user, target=self.user)} " \ |
|
||||||
* f"spent **{self.fp_spent} FP** for {' and '.join(bonuses)}{affected}!" |
|
||||||
* |
|
||||||
* TODO: add an FP gain effect for villains (affects all party members) and fumbles and trait failures |
|
||||||
* |
|
||||||
* @dataclass(**JsonableDataclassArgs) |
|
||||||
* class MissEffect(LogOnly, Effect): |
|
||||||
* miss_type: MissType |
|
||||||
* target: Target |
|
||||||
* |
|
||||||
* def log_message(self, user: Target | None = None) -> str | None: |
|
||||||
* if self.miss_type == MissType.Missed: |
|
||||||
* return log_substitute(f"It missed @T!", user=user, target=self.target) |
|
||||||
* elif self.miss_type == MissType.Dodged: |
|
||||||
* return log_substitute(f"@T dodged it!", user=user, target=self.target) |
|
||||||
* elif self.miss_type == MissType.Avoided: |
|
||||||
* return log_substitute(f"@T avoided it!", user=user, target=self.target) |
|
||||||
* elif self.miss_type == MissType.Blocked: |
|
||||||
* return log_substitute("@T blocked it!", user=user, target=self.target) |
|
||||||
* elif self.miss_type == MissType.Immunity: |
|
||||||
* return log_substitute("@T is immune!", user=user, target=self.target) |
|
||||||
* elif self.miss_type == MissType.Repelled: |
|
||||||
* return log_substitute("@T repelled it!", user=user, target=self.target) |
|
||||||
* elif self.miss_type == MissType.Countered: |
|
||||||
* return log_substitute("@T countered it!", user=user, target=self.target) |
|
||||||
* elif self.miss_type == MissType.Parried: |
|
||||||
* return log_substitute("@T parried it!", user=user, target=self.target) |
|
||||||
* elif self.miss_type == MissType.Protected: |
|
||||||
* return log_substitute("@T was protected from it!", user=user, target=self.target) |
|
||||||
* elif self.miss_type == MissType.Resisted: |
|
||||||
* return log_substitute("@T resisted it!", user=user, target=self.target) |
|
||||||
* elif self.miss_type == MissType.Shielded: |
|
||||||
* return log_substitute("@T shielded against it!", user=user, target=self.target) |
|
||||||
* else: |
|
||||||
* return log_substitute(f"@T: {self.miss_type.value}", user=user, target=self.target) |
|
||||||
* |
|
||||||
* |
|
||||||
* @dataclass(**JsonableDataclassArgs) |
|
||||||
* class ClockTickEffect(Effect): |
|
||||||
* clock_index: int |
|
||||||
* old_definition: Clock |
|
||||||
* new_value: int |
|
||||||
* delta: int |
|
||||||
* |
|
||||||
* def do(self, combat: "CombatStatus", source: Union[Action, "Effect", None] = None) -> "CombatStatus": |
|
||||||
* return combat.alter_clock(self.clock_index, lambda c: c.set_value(self.new_value)) |
|
||||||
* |
|
||||||
* def undo(self, combat: "CombatStatus", source: Union[Action, "Effect", None] = None) -> "CombatStatus": |
|
||||||
* return combat.alter_clock(self.clock_index, lambda c: c.set_value(self.old_definition.current)) |
|
||||||
* |
|
||||||
* def log_message(self, user: Target | None = None) -> str | None: |
|
||||||
* return (f'The clock **{self.old_definition.name}** ticked {"up" if self.delta > 0 else "down"} {self.delta} ' |
|
||||||
* f'tick{"" if abs(self.delta) == 1 else "s"}.') |
|
||||||
*/ |
|
||||||
|
|
||||||
const DoableEvaluators = [ |
|
||||||
GenericActionEvaluator, |
|
||||||
] as const satisfies readonly DoableEvaluator<unknown & BaseDoable>[] |
|
||||||
|
|
||||||
export type Doable = typeof DoableEvaluators[number] extends DoableEvaluator<infer ActionType> ? ActionType : never |
|
||||||
|
|
||||||
export enum DoableDirection { |
|
||||||
Do = "do", |
|
||||||
Undo = "undo", |
|
||||||
} |
|
||||||
|
|
||||||
export function evaluateDoable<T extends Doable>(doable: T, gameState: GameState, direction: DoableDirection): DoableResults { |
|
||||||
const evaluator: DoableEvaluator<T>|undefined = DoableEvaluators.find((evaluator) => evaluator.type === doable.type) |
|
||||||
if (!evaluator) { |
|
||||||
return { |
|
||||||
resultState: gameState, |
|
||||||
logEntry: null |
|
||||||
} |
|
||||||
} |
|
||||||
return evaluator.evaluate(doable, gameState, direction) |
|
||||||
} |
|
||||||
|
|
||||||
export function evaluateDoables(doables: readonly Doable[], gameState: GameState, direction: DoableDirection): DoablesResults { |
|
||||||
let currentState = gameState |
|
||||||
const sortedDoables = direction === DoableDirection.Undo ? doables.slice().reverse() : doables |
|
||||||
const logEntries: LogEntry[] = [] |
|
||||||
for (const doable of sortedDoables) { |
|
||||||
const {resultState, logEntry} = evaluateDoable(doable, gameState, direction) |
|
||||||
currentState = resultState |
|
||||||
if (logEntry) { |
|
||||||
logEntries.push(logEntry) |
|
||||||
} |
|
||||||
} |
|
||||||
return { |
|
||||||
resultState: currentState, |
|
||||||
logEntries: direction === DoableDirection.Undo ? logEntries.reverse() : logEntries, |
|
||||||
} |
|
||||||
} |
|
||||||
@ -0,0 +1,22 @@ |
|||||||
|
import {useCallback, useEffect, useRef} from "react"; |
||||||
|
|
||||||
|
export function useAnimationFrame(callback: (delta: number, current: number) => void): void { |
||||||
|
// Use useRef for mutable variables that we want to persist
|
||||||
|
// without triggering a re-render on their change
|
||||||
|
const requestRef = useRef<number>(0); |
||||||
|
const previousTimeRef = useRef(0); |
||||||
|
|
||||||
|
const animate = useCallback(function animate(time: number) { |
||||||
|
if (previousTimeRef.current != 0) { |
||||||
|
const deltaTime = time - previousTimeRef.current; |
||||||
|
callback(deltaTime, time) |
||||||
|
} |
||||||
|
previousTimeRef.current = time; |
||||||
|
requestRef.current = requestAnimationFrame(animate); |
||||||
|
}, [callback]) |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
requestRef.current = requestAnimationFrame(animate); |
||||||
|
return () => cancelAnimationFrame(requestRef.current); |
||||||
|
}, [animate]); |
||||||
|
} |
||||||
@ -0,0 +1,122 @@ |
|||||||
|
.ally-head, .enemy-head, .session-head { |
||||||
|
color: white; |
||||||
|
position: sticky; |
||||||
|
text-align: center; |
||||||
|
padding: 2px 0 5px; |
||||||
|
text-shadow: 0 0 5px black; |
||||||
|
align-self: stretch; |
||||||
|
user-select: none; |
||||||
|
border-bottom: 1px solid; |
||||||
|
top: 0; |
||||||
|
z-index: 90; |
||||||
|
} |
||||||
|
|
||||||
|
.ally-head.inactive, .enemy-head.inactive { |
||||||
|
color: #aaa; |
||||||
|
} |
||||||
|
|
||||||
|
.totalFPSpent, .totalUPSpent { |
||||||
|
color: white; |
||||||
|
line-height: 60px; |
||||||
|
-webkit-text-stroke: 2px black; |
||||||
|
text-shadow: 2px 2px 2px black; |
||||||
|
font-size: 45px; |
||||||
|
letter-spacing: -3px; |
||||||
|
text-align: center; |
||||||
|
font-weight: bold; |
||||||
|
height: 60px; |
||||||
|
width: 60px; |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-position: center; |
||||||
|
user-select: none; |
||||||
|
flex: 0 0 auto; |
||||||
|
} |
||||||
|
|
||||||
|
.totalFPSpent { |
||||||
|
background-image: url("fabula-points.svg"); |
||||||
|
} |
||||||
|
|
||||||
|
.totalUPSpent { |
||||||
|
background-image: url("ultima-points.svg"); |
||||||
|
} |
||||||
|
|
||||||
|
.totalSPSpent { |
||||||
|
color: white; |
||||||
|
line-height: 60px; |
||||||
|
text-shadow: 1px 1px 3px black; |
||||||
|
font-size: 30px; |
||||||
|
text-align: center; |
||||||
|
font-weight: bold; |
||||||
|
height: 60px; |
||||||
|
width: 200px; |
||||||
|
white-space: nowrap; |
||||||
|
user-select: none; |
||||||
|
flex: 0 0 auto; |
||||||
|
} |
||||||
|
|
||||||
|
.ally-head.inactive { |
||||||
|
background: linear-gradient(to right, transparent 0%, darkcyan 50%, transparent 100%); |
||||||
|
border-bottom-color: darkcyan; |
||||||
|
} |
||||||
|
|
||||||
|
.session-head { |
||||||
|
background: linear-gradient(to right, transparent 0%, goldenrod 10%, gold 50%, goldenrod 90%, transparent 100%); |
||||||
|
border-bottom-color: gold; |
||||||
|
} |
||||||
|
|
||||||
|
.enemy-head.inactive { |
||||||
|
background: linear-gradient(to right, transparent 0%, maroon 50%, transparent 100%); |
||||||
|
border-bottom: 1px solid maroon; |
||||||
|
} |
||||||
|
|
||||||
|
.ally-head { |
||||||
|
background: linear-gradient(to right, transparent 0%, darkcyan 10%, cyan 50%, darkcyan 90%, transparent 100%); |
||||||
|
border-bottom-color: cyan; |
||||||
|
} |
||||||
|
|
||||||
|
.enemy-head { |
||||||
|
background: linear-gradient(to right, transparent 0%, maroon 10%, red 50%, maroon 90%, transparent 100%); |
||||||
|
border-bottom: 1px solid red; |
||||||
|
} |
||||||
|
|
||||||
|
.ally-head.active::before, .ally-head.active::after { |
||||||
|
color: lightpink; |
||||||
|
} |
||||||
|
|
||||||
|
.enemy-head.active::before, .enemy-head.active::after { |
||||||
|
color: lightskyblue; |
||||||
|
} |
||||||
|
|
||||||
|
.ally-head.active::before, .enemy-head.active::before { |
||||||
|
content: "❮"; |
||||||
|
} |
||||||
|
|
||||||
|
.ally-head.active::after, .enemy-head.active::after { |
||||||
|
content: "❯"; |
||||||
|
} |
||||||
|
|
||||||
|
.appHelpName { |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
|
||||||
|
.appHelpValue { |
||||||
|
margin-left: 5px; |
||||||
|
font-style: italic; |
||||||
|
font-size: smaller; |
||||||
|
} |
||||||
|
|
||||||
|
.appHelpHeader { |
||||||
|
text-align: left; |
||||||
|
} |
||||||
|
|
||||||
|
.appHelpDescription { |
||||||
|
text-align: left; |
||||||
|
font-size: smaller; |
||||||
|
} |
||||||
|
|
||||||
|
.appHelpValue::before { |
||||||
|
content: "(" |
||||||
|
} |
||||||
|
.appHelpValue::after { |
||||||
|
content: ")" |
||||||
|
} |
||||||
@ -0,0 +1,20 @@ |
|||||||
|
.turnTimer { |
||||||
|
min-width: 320px; |
||||||
|
color: white; |
||||||
|
text-shadow: 1px 1px 3px black; |
||||||
|
} |
||||||
|
|
||||||
|
.turnTimerTitle { |
||||||
|
font-size: 25px; |
||||||
|
text-align: center; |
||||||
|
margin: 0; |
||||||
|
user-select: none; |
||||||
|
} |
||||||
|
|
||||||
|
.turnTimerTime { |
||||||
|
margin: 0; |
||||||
|
font-size: 60px; |
||||||
|
text-align: center; |
||||||
|
font-weight: bold; |
||||||
|
user-select: none; |
||||||
|
} |
||||||
@ -0,0 +1,56 @@ |
|||||||
|
import {ReactElement, useCallback, useRef, useState} from "react"; |
||||||
|
import {ProgressBar, Stack} from "react-bootstrap"; |
||||||
|
import {useAnimationFrame} from "./AnimationHook"; |
||||||
|
import {isDefined} from "../types/type_check"; |
||||||
|
import "./TurnTimer.css"; |
||||||
|
import formatDuration from "format-duration"; |
||||||
|
|
||||||
|
export interface TurnTimerArgs { |
||||||
|
readonly title?: string |
||||||
|
readonly startTime?: number |
||||||
|
readonly endTime?: number |
||||||
|
readonly displayedTime?: number |
||||||
|
readonly resolutionMs?: number |
||||||
|
} |
||||||
|
|
||||||
|
const DEFAULT_RESOLUTION_MS = 100; |
||||||
|
|
||||||
|
export function TurnTimer({title, startTime, endTime, displayedTime, resolutionMs = DEFAULT_RESOLUTION_MS}: TurnTimerArgs): ReactElement { |
||||||
|
const [currentTime, setCurrentTime] = useState(() => displayedTime ?? Date.now()) |
||||||
|
const accumulatedTime = useRef(0) |
||||||
|
const animationCallback = useCallback(isDefined(displayedTime) |
||||||
|
? () => null |
||||||
|
: (delta: number) => { |
||||||
|
accumulatedTime.current += delta |
||||||
|
if (accumulatedTime.current > resolutionMs) { |
||||||
|
accumulatedTime.current %= resolutionMs |
||||||
|
setCurrentTime(Date.now()) |
||||||
|
} |
||||||
|
}, [displayedTime, setCurrentTime, accumulatedTime]) |
||||||
|
useAnimationFrame(animationCallback) |
||||||
|
|
||||||
|
if (isDefined(displayedTime) && displayedTime !== currentTime) { |
||||||
|
setCurrentTime(displayedTime) |
||||||
|
accumulatedTime.current = resolutionMs |
||||||
|
} |
||||||
|
|
||||||
|
let totalTime: number|null = null |
||||||
|
let timeRemaining: number|null = null |
||||||
|
let timeElapsed: number|null = null |
||||||
|
if (isDefined(startTime)) { |
||||||
|
if (isDefined(endTime)) { |
||||||
|
totalTime = endTime - startTime |
||||||
|
timeRemaining = endTime - currentTime |
||||||
|
} else { |
||||||
|
timeElapsed = currentTime - startTime |
||||||
|
} |
||||||
|
} else if (isDefined(endTime)) { |
||||||
|
timeRemaining = endTime - currentTime |
||||||
|
} |
||||||
|
|
||||||
|
return <Stack className={"turnTimer"} direction="vertical"> |
||||||
|
<h2 className={"turnTimerTitle"}>{title}</h2> |
||||||
|
{(timeRemaining !== null || timeElapsed !== null) && <div className={"turnTimerTime"}>{formatDuration(timeRemaining ?? timeElapsed ?? 0)}</div>} |
||||||
|
{timeRemaining !== null && totalTime !== null && <ProgressBar className={"turnTimerBar"} now={timeRemaining} max={totalTime} />} |
||||||
|
</Stack> |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 860 B |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
Loading…
Reference in new issue