+
+ )
+}
+
+// HUD View — simplified player-facing display
+function HUDView() {
+ const characters = useAppSelector(state => state.characters.present.list)
+ const initiative = useAppSelector(state => state.initiative)
+ const stats = useAppSelector(state => state.stats.definitions)
+ const settings = useAppSelector(state => state.settings)
+
+ const sortedChars = [...characters]
+ .filter(c => !c.deleted)
+ .sort((a, b) => {
+ const posA = a.manualPos > 0 ? a.manualPos : a.position
+ const posB = b.manualPos > 0 ? b.manualPos : b.position
+ return posB - posA
+ })
+
+ const hudStats = stats.filter(s => s.showOnHUD && !s.deleted)
+
+ return (
+
+
+ )
+}
diff --git a/app/src/components/AboutDialog/AboutDialog.tsx b/app/src/components/AboutDialog/AboutDialog.tsx
new file mode 100644
index 0000000..a27d242
--- /dev/null
+++ b/app/src/components/AboutDialog/AboutDialog.tsx
@@ -0,0 +1,41 @@
+import { useAppDispatch } from '../../store'
+import { closeDialog } from '../../store/slices/uiSlice'
+
+export function AboutDialog() {
+ const dispatch = useAppDispatch()
+
+ return (
+
+ Turn Watcher — Player HUD
+ {initiative.inRounds && ` | Round: ${initiative.roundNumber}`}
+
+
+
+
+
+
+ | Name | + {hudStats.map(s => ( +{s.name} | + ))} +Status | +|
|---|---|---|---|
| + + {isCurrent && →} + {displayName} + + | + {hudStats.map(s => { + if (ch.monster && !s.showMonsterOnHUD) { + return— | + } + const val = ch.stats[s.id] + return{val?.roll ?? '—'} | + })} +{getStatusString(ch, settings.deathThreshold)} | +
+
+
+ {initiative.inRounds ? `Round: ${initiative.roundNumber}` : 'Not in rounds'}
+
+ dispatch(closeDialog())}>
+
+ )
+}
diff --git a/app/src/components/CharacterView/CharacterTable.tsx b/app/src/components/CharacterView/CharacterTable.tsx
new file mode 100644
index 0000000..7f560bb
--- /dev/null
+++ b/app/src/components/CharacterView/CharacterTable.tsx
@@ -0,0 +1,128 @@
+import { useAppDispatch, useAppSelector } from '../../store'
+import { setSelectedCharacters, openDialog } from '../../store/slices/uiSlice'
+import { Status, Health, Character } from '../../types'
+import { getHealth, getHPDisplay, getStatusString } from '../../utils/health'
+import { sortByInitiative } from '../../utils/initiative'
+
+export function CharacterTable() {
+ const dispatch = useAppDispatch()
+ const characters = useAppSelector(state => state.characters.present.list)
+ const initiative = useAppSelector(state => state.initiative)
+ const selectedIds = useAppSelector(state => state.ui.selectedCharacterIds)
+ const settings = useAppSelector(state => state.settings)
+ const stats = useAppSelector(state => state.stats.definitions)
+
+ // Visible columns: stats that appear on the table (toolbar stats + HP)
+ const visibleStats = stats
+ .filter(s => !s.deleted && !s.ability && s.id !== 'HITPOINTS_ID' && s.id !== 'LEVEL_ID')
+ .sort((a, b) => a.order - b.order)
+
+ // Sort characters by initiative if in rounds, otherwise by insertion order
+ const sortedChars = initiative.inRounds
+ ? sortByInitiative(characters.filter(c => !c.deleted))
+ : characters.filter(c => !c.deleted)
+
+ const handleRowClick = (ch: Character, e: React.MouseEvent) => {
+ if (e.ctrlKey || e.metaKey) {
+ // Toggle selection
+ const newSel = selectedIds.includes(ch.id)
+ ? selectedIds.filter(id => id !== ch.id)
+ : [...selectedIds, ch.id]
+ dispatch(setSelectedCharacters(newSel))
+ } else {
+ dispatch(setSelectedCharacters([ch.id]))
+ }
+ }
+
+ const handleRowDoubleClick = (ch: Character) => {
+ dispatch(openDialog({ dialog: 'editCharacter', characterId: ch.id }))
+ }
+
+ const getRowClasses = (ch: Character): string => {
+ const classes: string[] = []
+ const pos = ch.manualPos > 0 ? ch.manualPos : ch.position
+ const health = getHealth(ch, settings.deathThreshold)
+
+ if (selectedIds.includes(ch.id)) classes.push('selected')
+ if (initiative.inRounds && pos === initiative.currentInit) classes.push('current-init')
+ if (ch.monster) classes.push('monster-row')
+ if (ch.status === Status.Delayed) classes.push('delayed-row')
+ if (ch.status === Status.Readied) classes.push('readied-row')
+ if (health === Health.Dead) classes.push('dead-row')
+ if (health === Health.Dying) classes.push('dying-row')
+
+ return classes.join(' ')
+ }
+
+ return (
+ e.stopPropagation()}>
+
+
+ About Turn Watcher
+
+
+
+
+
+ 
+
+
+ Turn Watcher™
+Version 2.0.0
++ A tabletop RPG combat initiative tracker. +
++ © 2005–2026 Made to Order Software Corporation +
++ Licensed under the GNU General Public License v2.0 +
+ +
+
+
+
+
+
+
+
+ )
+}
diff --git a/app/src/components/DamageDialog/DamageDialog.tsx b/app/src/components/DamageDialog/DamageDialog.tsx
new file mode 100644
index 0000000..e0bcd39
--- /dev/null
+++ b/app/src/components/DamageDialog/DamageDialog.tsx
@@ -0,0 +1,77 @@
+import { useState } from 'react'
+import { useAppDispatch, useAppSelector } from '../../store'
+import { applyDamage, healCharacter, fullHeal } from '../../store/slices/charactersSlice'
+import { closeDialog } from '../../store/slices/uiSlice'
+import { getHPDisplay } from '../../utils/health'
+
+export function DamageDialog() {
+ const dispatch = useAppDispatch()
+ const selectedIds = useAppSelector(state => state.ui.selectedCharacterIds)
+ const characters = useAppSelector(state => state.characters.present.list)
+ const [value, setValue] = useState(0)
+
+ const selectedChars = characters.filter(c => selectedIds.includes(c.id))
+
+ const handleDamage = () => {
+ selectedIds.forEach(id => {
+ dispatch(applyDamage({ id, amount: value }))
+ })
+ dispatch(closeDialog())
+ }
+
+ const handleHeal = () => {
+ selectedIds.forEach(id => {
+ dispatch(healCharacter({ id, amount: value }))
+ })
+ dispatch(closeDialog())
+ }
+
+ const handleFullHeal = () => {
+ selectedIds.forEach(id => {
+ dispatch(fullHeal(id))
+ })
+ dispatch(closeDialog())
+ }
+
+ return (
+ | Name | +Type | + {visibleStats.map(s => ( +{s.name.substring(0, 6)} | + ))} +Hit Points | +Status | +
|---|---|---|---|---|
|
+
+ {isCurrent && →}
+ |
+
+ |
+ {visibleStats.map(s => {
+ const val = ch.stats[s.id]
+ return (
+ + {val?.roll !== undefined && val.roll !== 0 ? val.roll : '—'} + | + ) + })} +{getHPDisplay(ch)} | +{getStatusString(ch, settings.deathThreshold)} | +
| + No characters. Click "Add" to create one, or open an existing file. + | +
dispatch(closeDialog())}>
+
+ )
+}
diff --git a/app/src/components/EditCharacter/EditCharacterDialog.tsx b/app/src/components/EditCharacter/EditCharacterDialog.tsx
new file mode 100644
index 0000000..a5c586e
--- /dev/null
+++ b/app/src/components/EditCharacter/EditCharacterDialog.tsx
@@ -0,0 +1,192 @@
+import { useState, useEffect } from 'react'
+import { useAppDispatch, useAppSelector } from '../../store'
+import { addCharacter, updateCharacter } from '../../store/slices/charactersSlice'
+import { closeDialog } from '../../store/slices/uiSlice'
+import { Character, Status, StatValue } from '../../types'
+import { v4 as uuidv4 } from 'uuid'
+
+export function EditCharacterDialog() {
+ const dispatch = useAppDispatch()
+ const editingId = useAppSelector(state => state.ui.editingCharacterId)
+ const characters = useAppSelector(state => state.characters.present.list)
+ const statDefs = useAppSelector(state => state.stats.definitions)
+ const isNew = !editingId
+
+ const existingChar = editingId ? characters.find(c => c.id === editingId) : null
+
+ const [name, setName] = useState('')
+ const [publicName, setPublicName] = useState('')
+ const [notes, setNotes] = useState('')
+ const [monster, setMonster] = useState(false)
+ const [baseHP, setBaseHP] = useState(10)
+ const [hitDice, setHitDice] = useState(1)
+ const [statValues, setStatValues] = useState e.stopPropagation()}>
+
+
+
+ {selectedChars.length === 1
+ ? `Damage / Heal: ${selectedChars[0].name}`
+ : `Damage / Heal: ${selectedChars.length} characters`
+ }
+
+
+
+
+
+ {selectedChars.length === 1 && (
+
+
+
+ Current HP: {getHPDisplay(selectedChars[0])}
+
+ )}
+
+
+
+ setValue(parseInt(e.target.value) || 0)}
+ autoFocus
+ min={0}
+ />
+
+
+
+
+
+
+
+ dispatch(closeDialog())}>
+
e.stopPropagation()}>
+
+ {isNew ? 'Add Character' : `Edit: ${existingChar?.name}`}
+
+
+
+
+
+
+
+
+
+
+
+ {activeTab === 'base' && (
+ <>
+
+
+ setName(e.target.value)} autoFocus />
+
+
+
+ setPublicName(e.target.value)} />
+
+
+
+
+
+ setBaseHP(parseInt(e.target.value) || 0)} />
+
+
+
+ setHitDice(parseInt(e.target.value) || 1)} min={1} />
+
+
+
+
+ setMonster(e.target.checked)} />
+
+
+
+
+ updateStatMod('INIT_ID', parseInt(e.target.value) || 0)}
+ />
+
+
+ )}
+
+ {activeTab === 'abilities' && (
+ <>
+ {abilityStats.map(stat => (
+
+
+ ))}
+
+ )}
+
+ {activeTab === 'skills' && (
+ <>
+ {skillStats.map(stat => (
+
+
+ setStatValues(prev => ({
+ ...prev,
+ [stat.id]: { ...(prev[stat.id] || { mod: 0, roll: 0, notes: '' }), roll: parseInt(e.target.value) || 0 },
+ }))}
+ />
+
+
+
+ updateStatMod(stat.id, parseInt(e.target.value) || 0)}
+ />
+
+
+
+ ))}
+
+ )}
+
+ {activeTab === 'notes' && (
+
+
+
+
+
+ updateStatMod(stat.id, parseInt(e.target.value) || 0)}
+ />
+
+
+
+