diff --git a/src/components/SettingsScreen.tsx b/src/components/SettingsScreen.tsx
index e353062..2c169e6 100644
--- a/src/components/SettingsScreen.tsx
+++ b/src/components/SettingsScreen.tsx
@@ -32,11 +32,13 @@ export function SettingsScreen({ onBack }: { onBack: () => void }) {
capture,
controllerIconStyle,
directPartyTargeting,
+ combatTouchLocked,
beginCapture,
cancelCapture,
resetBindings,
setControllerIconStyle,
setDirectPartyTargeting,
+ setCombatTouchLocked,
} = useInput()
const {
enabled: dualScreenEnabled,
@@ -180,6 +182,14 @@ export function SettingsScreen({ onBack }: { onBack: () => void }) {
>
{directPartyTargeting ? 'Direct Targeting On' : 'Direct Targeting Off'}
+
Controller Icons
{(['xbox', 'playstation', 'nintendo'] as const).map((style) => (
diff --git a/src/components/SpellBars.tsx b/src/components/SpellBars.tsx
index 4ef1882..de7cef7 100644
--- a/src/components/SpellBars.tsx
+++ b/src/components/SpellBars.tsx
@@ -2,6 +2,7 @@ import { memo } from 'react'
import type { ControllerIconStyle } from '../input'
import type { Spell } from '../game'
import { ControllerBindingLabel } from './ControllerIcons'
+import { barFillStyle } from './barStyles'
export type SpellSlot = (Spell & {
cost: number
@@ -28,7 +29,7 @@ export const ResourceBar = memo(function ResourceBar({
{unavailableText ?? `${resourceName} ${Math.floor(resource)} / ${maxResource}`}
{speedMultiplier === 2 &&
2x speed}
-
+
)
})
diff --git a/src/components/barStyles.ts b/src/components/barStyles.ts
new file mode 100644
index 0000000..e65ac9a
--- /dev/null
+++ b/src/components/barStyles.ts
@@ -0,0 +1,16 @@
+import type { CSSProperties } from 'react'
+
+function clampScale(value: number) {
+ if (!Number.isFinite(value)) return 0
+ return Math.min(1, Math.max(0, value))
+}
+
+export function barFillStyle(
+ percent: number,
+ origin: 'left' | 'right' = 'left',
+): CSSProperties {
+ return {
+ transform: `scaleX(${clampScale(percent / 100)})`,
+ transformOrigin: `${origin} center`,
+ }
+}
diff --git a/src/dualScreen.tsx b/src/dualScreen.tsx
index 735deea..024df2f 100644
--- a/src/dualScreen.tsx
+++ b/src/dualScreen.tsx
@@ -22,6 +22,7 @@ import {
} from './input'
import { ControllerBindingLabel } from './components/ControllerIcons'
import { PartyMemberFrame } from './components/PartyFrames'
+import { barFillStyle } from './components/barStyles'
import { groupFloatingTextsByMember } from './combat/combatPresentation'
const STORAGE_KEY = 'ashen-halls-dual-screen-enabled'
@@ -480,7 +481,7 @@ export function DualScreenBottomDisplay() {
{Math.max(0, Math.floor(state.opponentEnemyHealth ?? 0))} / {state.encounterMaxHealth}
- {spellButtons}
+
)}
@@ -720,7 +731,7 @@ export function DualScreenTopCombat({
{state.resourceName} {Math.floor(state.resource)} / {state.maxResource}
-
+
diff --git a/src/hooks/useCooldownClock.ts b/src/hooks/useCooldownClock.ts
new file mode 100644
index 0000000..c42fa41
--- /dev/null
+++ b/src/hooks/useCooldownClock.ts
@@ -0,0 +1,36 @@
+import { useEffect, useState } from 'react'
+import { cooldownNow, hasActiveCooldowns } from '../combat/spellCasting'
+
+export function useCooldownClock(
+ cooldowns: Record
,
+ active: boolean,
+ intervalMs = 100,
+) {
+ const [now, setNow] = useState(cooldownNow)
+
+ useEffect(() => {
+ if (!active || !hasActiveCooldowns(cooldowns)) return undefined
+
+ let timer = 0
+ let startTimer = 0
+ const tick = () => {
+ const nextNow = cooldownNow()
+ setNow(nextNow)
+ if (timer && !hasActiveCooldowns(cooldowns, nextNow)) {
+ window.clearInterval(timer)
+ timer = 0
+ }
+ }
+
+ startTimer = window.setTimeout(() => {
+ tick()
+ timer = window.setInterval(tick, intervalMs)
+ }, 0)
+ return () => {
+ window.clearTimeout(startTimer)
+ if (timer) window.clearInterval(timer)
+ }
+ }, [active, cooldowns, intervalMs])
+
+ return now
+}
diff --git a/src/hooks/useFloatingCombatText.ts b/src/hooks/useFloatingCombatText.ts
index 4680d5f..5eff774 100644
--- a/src/hooks/useFloatingCombatText.ts
+++ b/src/hooks/useFloatingCombatText.ts
@@ -15,41 +15,63 @@ type FloatingCombatTextOptions = {
durationMs?: number
}
-const FLOATING_TEXT_CLEANUP_INTERVAL_MS = 100
-
export function useFloatingCombatText({
durationMs = 900,
}: FloatingCombatTextOptions = {}) {
const [floatingTexts, setFloatingTexts] = useState([])
const nextId = useRef(1)
const expirationsRef = useRef(new Map())
+ const cleanupTimerRef = useRef(null)
+
+ const clearCleanupTimer = useCallback(() => {
+ if (cleanupTimerRef.current === null) return
+ window.clearTimeout(cleanupTimerRef.current)
+ cleanupTimerRef.current = null
+ }, [])
+
+ const scheduleCleanup = useCallback(() => {
+ function scheduleNext() {
+ clearCleanupTimer()
+ let nextExpiry = Infinity
+ for (const expiresAt of expirationsRef.current.values()) {
+ nextExpiry = Math.min(nextExpiry, expiresAt)
+ }
+ if (!Number.isFinite(nextExpiry)) return
+
+ cleanupTimerRef.current = window.setTimeout(() => {
+ cleanupTimerRef.current = null
+ const now = performance.now()
+ let removed = false
+ for (const [id, expiresAt] of expirationsRef.current) {
+ if (expiresAt > now) continue
+ expirationsRef.current.delete(id)
+ removed = true
+ }
+ if (removed) {
+ setFloatingTexts((current) => current.filter((text) => expirationsRef.current.has(text.id)))
+ }
+ scheduleNext()
+ }, Math.max(0, nextExpiry - performance.now()))
+ }
+
+ scheduleNext()
+ }, [clearCleanupTimer])
const clearFloatingTexts = useCallback(() => {
+ clearCleanupTimer()
expirationsRef.current.clear()
setFloatingTexts([])
- }, [])
+ }, [clearCleanupTimer])
const addFloatingText = useCallback((entry: Omit) => {
if (entry.value <= 0) return
const id = nextId.current++
expirationsRef.current.set(id, performance.now() + durationMs)
setFloatingTexts((current) => appendFloatingText(current, { ...entry, id } as TText))
- }, [durationMs])
+ scheduleCleanup()
+ }, [durationMs, scheduleCleanup])
- useEffect(() => {
- const timer = window.setInterval(() => {
- const now = performance.now()
- let removed = false
- for (const [id, expiresAt] of expirationsRef.current) {
- if (expiresAt > now) continue
- expirationsRef.current.delete(id)
- removed = true
- }
- if (!removed) return
- setFloatingTexts((current) => current.filter((text) => expirationsRef.current.has(text.id)))
- }, FLOATING_TEXT_CLEANUP_INTERVAL_MS)
- return () => window.clearInterval(timer)
- }, [])
+ useEffect(() => () => clearCleanupTimer(), [clearCleanupTimer])
const floatingTextsByMember = useMemo(
() => groupFloatingTextsByMember(floatingTexts),
diff --git a/src/hooks/useSpellSlots.ts b/src/hooks/useSpellSlots.ts
new file mode 100644
index 0000000..b6d4ea3
--- /dev/null
+++ b/src/hooks/useSpellSlots.ts
@@ -0,0 +1,38 @@
+import { useMemo } from 'react'
+import type { Spell } from '../game'
+import type { SpellSlot } from '../components/SpellBars'
+import { cooldownRemaining } from '../combat/spellCasting'
+import { useCooldownClock } from './useCooldownClock'
+
+type UseSpellSlotsOptions = {
+ spells: readonly Spell[]
+ cooldowns: Record
+ active: boolean
+ cost: (spell: Spell) => number
+ abilitySlots?: readonly (number | null)[]
+}
+
+export function useSpellSlots({
+ spells,
+ cooldowns,
+ active,
+ cost,
+ abilitySlots,
+}: UseSpellSlotsOptions) {
+ const now = useCooldownClock(cooldowns, active)
+
+ return useMemo(() => {
+ const slotCount = abilitySlots?.length ?? spells.length
+ return Array.from({ length: slotCount }, (_, slotIndex) => {
+ if (abilitySlots && !abilitySlots[slotIndex]) return null
+ const spell = spells[slotIndex]
+ if (!spell) return null
+ return {
+ ...spell,
+ cost: cost(spell),
+ slotIndex,
+ remaining: cooldownRemaining(cooldowns, spell.id, now),
+ }
+ })
+ }, [abilitySlots, cooldowns, cost, now, spells])
+}
diff --git a/src/index.css b/src/index.css
index 6b7b7b3..7996f57 100644
--- a/src/index.css
+++ b/src/index.css
@@ -3,7 +3,9 @@
linear-gradient(rgba(8, 9, 12, 0.88), rgba(8, 9, 12, 0.88)),
repeating-linear-gradient(0deg, #171922 0 2px, #11131a 2px 4px);
color: #f4eed8;
- font-family: 'VT323', Consolas, monospace;
+ --body-font: ui-monospace, 'Roboto Mono', 'Droid Sans Mono', Consolas, monospace;
+ --pixel-font: ui-monospace, 'Roboto Mono', 'Droid Sans Mono', Consolas, monospace;
+ font-family: var(--body-font);
font-synthesis: none;
text-rendering: optimizeLegibility;
}
diff --git a/src/input.tsx b/src/input.tsx
index 5540a31..6bf58d4 100644
--- a/src/input.tsx
+++ b/src/input.tsx
@@ -37,6 +37,7 @@ export const INPUT_ACTIONS = [
'targetParty6',
'toggleTargetGroup',
'toggleSpeed',
+ 'toggleTouchLock',
'pause',
] as const
@@ -66,6 +67,7 @@ export const ACTION_LABELS: Record = {
targetParty6: 'Target Party Member 6',
toggleTargetGroup: 'Switch Raid Target Group',
toggleSpeed: 'Toggle 2x Speed',
+ toggleTouchLock: 'Toggle Combat Touch Lock',
pause: 'Pause Menu',
}
@@ -93,6 +95,7 @@ export const DEFAULT_BINDINGS: Record = {
targetParty6: 'F6',
toggleTargetGroup: 'Tab',
toggleSpeed: 'Backquote',
+ toggleTouchLock: 'F7',
pause: 'Escape',
},
controller: {
@@ -115,9 +118,10 @@ export const DEFAULT_BINDINGS: Record = {
targetParty3: 'Button15',
targetParty4: 'Button13',
targetParty5: 'Button4',
- targetParty6: 'Button10',
- toggleTargetGroup: 'Button6',
+ targetParty6: 'Button6',
+ toggleTargetGroup: 'Button8',
toggleSpeed: 'Button11',
+ toggleTouchLock: 'Button10',
pause: 'Button9',
},
}
@@ -144,11 +148,13 @@ type InputContextValue = {
lastDevice: InputDevice
controllerIconStyle: ControllerIconStyle
directPartyTargeting: boolean
+ combatTouchLocked: boolean
beginCapture: (device: InputDevice, action: InputAction) => void
cancelCapture: () => void
resetBindings: (device: InputDevice) => void
setControllerIconStyle: (style: ControllerIconStyle) => void
setDirectPartyTargeting: (enabled: boolean) => void
+ setCombatTouchLocked: (locked: boolean) => void
}
const InputContext = createContext(null)
@@ -187,6 +193,21 @@ function loadBindings(): Record {
if (savedController?.targetParty6 === 'Button11') {
controller.targetParty6 = DEFAULT_BINDINGS.controller.targetParty6
}
+ if (
+ savedController?.targetParty6 === undefined
+ || savedController.targetParty6 === 'Button10'
+ ) {
+ controller.targetParty6 = DEFAULT_BINDINGS.controller.targetParty6
+ }
+ if (
+ savedController?.toggleTargetGroup === undefined
+ || savedController.toggleTargetGroup === 'Button6'
+ ) {
+ controller.toggleTargetGroup = DEFAULT_BINDINGS.controller.toggleTargetGroup
+ }
+ if (savedController?.toggleTouchLock === undefined) {
+ controller.toggleTouchLock = DEFAULT_BINDINGS.controller.toggleTouchLock
+ }
return {
pc: { ...DEFAULT_BINDINGS.pc, ...saved.pc },
controller,
@@ -201,15 +222,18 @@ function loadPreferences() {
const saved = JSON.parse(localStorage.getItem(PREFERENCES_STORAGE_KEY) ?? '{}') as {
controllerIconStyle?: ControllerIconStyle
directPartyTargeting?: boolean
+ combatTouchLocked?: boolean
}
return {
controllerIconStyle: saved.controllerIconStyle ?? 'xbox',
directPartyTargeting: saved.directPartyTargeting ?? false,
+ combatTouchLocked: saved.combatTouchLocked ?? Capacitor.isNativePlatform(),
}
} catch {
return {
controllerIconStyle: 'xbox' as ControllerIconStyle,
directPartyTargeting: false,
+ combatTouchLocked: Capacitor.isNativePlatform(),
}
}
}
@@ -223,6 +247,7 @@ function bindingGroup(action: InputAction) {
if (action.startsWith('targetParty') || action === 'toggleTargetGroup') return 'direct-targeting'
if (action === 'previousTarget' || action === 'nextTarget') return 'relative-targeting'
if (action === 'pause') return 'pause'
+ if (action === 'toggleTouchLock' || action === 'toggleSpeed') return 'system'
return 'navigation'
}
@@ -428,6 +453,7 @@ export function InputProvider({ children }: { children: ReactNode }) {
const [preferences, setPreferences] = useState(loadPreferences)
const [keyboardInput, setKeyboardInput] = useState(null)
const [keyboardShift, setKeyboardShift] = useState(false)
+ const [touchLockMessage, setTouchLockMessage] = useState('')
const bindingsRef = useRef(bindings)
const preferencesRef = useRef(preferences)
const captureRef = useRef(capture)
@@ -435,6 +461,7 @@ export function InputProvider({ children }: { children: ReactNode }) {
const previousTokensRef = useRef(new Set())
const repeatRef = useRef>({})
const gamepadConnectedRef = useRef(Capacitor.isNativePlatform())
+ const touchLockMessageTimerRef = useRef(0)
useEffect(() => {
bindingsRef.current = bindings
@@ -485,7 +512,18 @@ export function InputProvider({ children }: { children: ReactNode }) {
setLastDevice(device)
document.documentElement.dataset.inputDevice = device
- if (action.startsWith('navigate')) {
+ if (action === 'toggleTouchLock') {
+ setPreferences((current) => ({
+ ...current,
+ combatTouchLocked: !current.combatTouchLocked,
+ }))
+ window.clearTimeout(touchLockMessageTimerRef.current)
+ const nextLocked = !preferencesRef.current.combatTouchLocked
+ setTouchLockMessage(`Combat touch ${nextLocked ? 'locked' : 'unlocked'}`)
+ touchLockMessageTimerRef.current = window.setTimeout(() => {
+ setTouchLockMessage('')
+ }, 1400)
+ } else if (action.startsWith('navigate')) {
if (uiOverlay || !combatActive) moveFocus(action)
} else if (action === 'confirm') {
const active = currentFocusableControl()
@@ -551,8 +589,10 @@ export function InputProvider({ children }: { children: ReactNode }) {
'targetParty6',
'toggleTargetGroup',
'toggleSpeed',
+ 'toggleTouchLock',
] satisfies InputAction[]
const combatPriority = [
+ 'toggleTouchLock',
'pause',
'toggleSpeed',
'ability1',
@@ -621,7 +661,9 @@ export function InputProvider({ children }: { children: ReactNode }) {
rememberFocusableControl(target)
}
const onPointerDown = (event: PointerEvent) => {
- document.documentElement.dataset.inputDevice = 'pc'
+ if (event.pointerType !== 'touch') {
+ document.documentElement.dataset.inputDevice = 'pc'
+ }
const target = event.target
if (!(target instanceof Element)) return
const control = target.closest(FOCUSABLE_SELECTOR)
@@ -645,8 +687,14 @@ export function InputProvider({ children }: { children: ReactNode }) {
return () => window.removeEventListener(NATIVE_CONTROLLER_EVENT, listener)
}, [dispatchControllerToken])
+ useEffect(() => () => {
+ window.clearTimeout(touchLockMessageTimerRef.current)
+ }, [])
+
useEffect(() => {
+ let focusFrame = 0
const ensureFocus = () => {
+ focusFrame = 0
const combatActive = document.querySelector('[data-combat-active="true"]')
if (combatActive) return
const candidates = focusableElements()
@@ -663,22 +711,37 @@ export function InputProvider({ children }: { children: ReactNode }) {
}
}
}
+ const scheduleEnsureFocus = () => {
+ if (focusFrame) return
+ focusFrame = window.requestAnimationFrame(ensureFocus)
+ }
const observer = new MutationObserver(() => {
- window.requestAnimationFrame(ensureFocus)
+ scheduleEnsureFocus()
})
observer.observe(document.getElementById('root') ?? document.body, {
attributes: true,
- attributeFilter: ['aria-hidden', 'class', 'disabled', 'hidden', 'style'],
+ attributeFilter: ['aria-hidden', 'class', 'disabled', 'hidden'],
childList: true,
subtree: true,
})
- window.requestAnimationFrame(ensureFocus)
- return () => observer.disconnect()
+ scheduleEnsureFocus()
+ return () => {
+ if (focusFrame) window.cancelAnimationFrame(focusFrame)
+ observer.disconnect()
+ }
}, [])
useEffect(() => {
let timer = 0
+ if (Capacitor.isNativePlatform() && capture?.device !== 'controller') {
+ previousTokensRef.current = new Set()
+ repeatRef.current = {}
+ return undefined
+ }
const nextDelay = () => {
+ if (Capacitor.isNativePlatform()) {
+ return GAMEPAD_COMBAT_POLL_MS
+ }
if (!Capacitor.isNativePlatform() && !gamepadConnectedRef.current) {
return GAMEPAD_BROWSER_DISCONNECTED_POLL_MS
}
@@ -735,7 +798,39 @@ export function InputProvider({ children }: { children: ReactNode }) {
window.removeEventListener('gamepadconnected', onGamepadConnected)
window.removeEventListener('gamepaddisconnected', onGamepadDisconnected)
}
- }, [assignBinding, dispatchControllerToken])
+ }, [assignBinding, capture, dispatchControllerToken])
+
+ useEffect(() => {
+ const shouldBlockTouch = () => (
+ Capacitor.isNativePlatform()
+ && preferencesRef.current.combatTouchLocked
+ && isCombatActive()
+ && !hasUiOverlay()
+ )
+ const blockTouch = (event: Event) => {
+ if (
+ typeof PointerEvent !== 'undefined'
+ && event instanceof PointerEvent
+ && event.pointerType !== 'touch'
+ ) return
+ if (!shouldBlockTouch()) return
+ event.preventDefault()
+ event.stopImmediatePropagation()
+ }
+ const options = { capture: true, passive: false }
+ document.addEventListener('pointerdown', blockTouch, options)
+ document.addEventListener('pointerup', blockTouch, options)
+ document.addEventListener('touchstart', blockTouch, options)
+ document.addEventListener('touchmove', blockTouch, options)
+ document.addEventListener('touchend', blockTouch, options)
+ return () => {
+ document.removeEventListener('pointerdown', blockTouch, options)
+ document.removeEventListener('pointerup', blockTouch, options)
+ document.removeEventListener('touchstart', blockTouch, options)
+ document.removeEventListener('touchmove', blockTouch, options)
+ document.removeEventListener('touchend', blockTouch, options)
+ }
+ }, [])
const contextValue = useMemo(() => ({
bindings,
@@ -743,6 +838,7 @@ export function InputProvider({ children }: { children: ReactNode }) {
lastDevice,
controllerIconStyle: preferences.controllerIconStyle,
directPartyTargeting: preferences.directPartyTargeting,
+ combatTouchLocked: preferences.combatTouchLocked,
beginCapture: (device, action) => setCapture({ device, action }),
cancelCapture: () => setCapture(null),
resetBindings: (device) => setBindings((current) => ({
@@ -757,6 +853,10 @@ export function InputProvider({ children }: { children: ReactNode }) {
...current,
directPartyTargeting,
})),
+ setCombatTouchLocked: (combatTouchLocked) => setPreferences((current) => ({
+ ...current,
+ combatTouchLocked,
+ })),
}), [bindings, capture, lastDevice, preferences])
function typeKeyboardKey(key: string) {
@@ -821,6 +921,11 @@ export function InputProvider({ children }: { children: ReactNode }) {