diff --git a/images/9_circles.jpg b/images/9_circles.jpg new file mode 100644 index 0000000..caa530c Binary files /dev/null and b/images/9_circles.jpg differ diff --git a/public/index.html b/public/index.html index 2ae7c5c..74a893c 100644 --- a/public/index.html +++ b/public/index.html @@ -10,6 +10,9 @@ /> + + + TTRPG Initiative Tracker diff --git a/src/App.js b/src/App.js index 831da8a..e60667a 100644 --- a/src/App.js +++ b/src/App.js @@ -227,7 +227,7 @@ function Modal({ onClose, title, children }) {
-

{title}

+

{title}

@@ -271,7 +271,7 @@ function ConfirmationModal({ isOpen, onClose, onConfirm, title, message }) { function LoadingSpinner({ message = "Loading..." }) { return (
-
+

{message}

); @@ -314,7 +314,7 @@ function CreateCampaignForm({ onCreate, onCancel }) { id="campaignName" value={name} onChange={(e) => setName(e.target.value)} - className="mt-1 block w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-md shadow-sm focus:outline-none focus:ring-sky-500 focus:border-sky-500 sm:text-sm text-white" + className="mt-1 block w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-md shadow-sm focus:outline-none focus:ring-amber-600 focus:border-amber-600 sm:text-sm text-white" required />
@@ -328,7 +328,7 @@ function CreateCampaignForm({ onCreate, onCancel }) { value={backgroundUrl} onChange={(e) => setBackgroundUrl(e.target.value)} placeholder="https://example.com/image.jpg" - className="mt-1 block w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-md shadow-sm focus:outline-none focus:ring-sky-500 focus:border-sky-500 sm:text-sm text-white" + className="mt-1 block w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-md shadow-sm focus:outline-none focus:ring-amber-600 focus:border-amber-600 sm:text-sm text-white" />
@@ -371,7 +371,7 @@ function CreateEncounterForm({ onCreate, onCancel }) { id="encounterName" value={name} onChange={(e) => setName(e.target.value)} - className="mt-1 block w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-md shadow-sm focus:outline-none focus:ring-sky-500 focus:border-sky-500 sm:text-sm text-white" + className="mt-1 block w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-md shadow-sm focus:outline-none focus:ring-amber-600 focus:border-amber-600 sm:text-sm text-white" required />
@@ -421,7 +421,7 @@ function EditParticipantModal({ participant, onClose, onSave }) { type="text" value={name} onChange={(e) => setName(e.target.value)} - className="mt-1 block w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-md shadow-sm focus:outline-none focus:ring-sky-500 focus:border-sky-500 sm:text-sm text-white" + className="mt-1 block w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-md shadow-sm focus:outline-none focus:ring-amber-600 focus:border-amber-600 sm:text-sm text-white" />
@@ -430,7 +430,7 @@ function EditParticipantModal({ participant, onClose, onSave }) { type="number" value={initiative} onChange={(e) => setInitiative(e.target.value)} - className="mt-1 block w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-md shadow-sm focus:outline-none focus:ring-sky-500 focus:border-sky-500 sm:text-sm text-white" + className="mt-1 block w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-md shadow-sm focus:outline-none focus:ring-amber-600 focus:border-amber-600 sm:text-sm text-white" />
@@ -440,7 +440,7 @@ function EditParticipantModal({ participant, onClose, onSave }) { type="number" value={currentHp} onChange={(e) => setCurrentHp(e.target.value)} - className="mt-1 block w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-md shadow-sm focus:outline-none focus:ring-sky-500 focus:border-sky-500 sm:text-sm text-white" + className="mt-1 block w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-md shadow-sm focus:outline-none focus:ring-amber-600 focus:border-amber-600 sm:text-sm text-white" />
@@ -449,7 +449,7 @@ function EditParticipantModal({ participant, onClose, onSave }) { type="number" value={maxHp} onChange={(e) => setMaxHp(e.target.value)} - className="mt-1 block w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-md shadow-sm focus:outline-none focus:ring-sky-500 focus:border-sky-500 sm:text-sm text-white" + className="mt-1 block w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-md shadow-sm focus:outline-none focus:ring-amber-600 focus:border-amber-600 sm:text-sm text-white" />
@@ -477,7 +477,7 @@ function EditParticipantModal({ participant, onClose, onSave }) { @@ -592,7 +592,7 @@ function CharacterManager({ campaignId, campaignCharacters }) { <>
-

+

Campaign Characters

@@ -629,7 +629,7 @@ function CharacterManager({ campaignId, campaignCharacters }) { id="defaultMaxHp" value={defaultMaxHp} onChange={(e) => setDefaultMaxHp(e.target.value)} - className="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-md shadow-sm focus:outline-none focus:ring-sky-500 focus:border-sky-500 sm:text-sm text-white" + className="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-md shadow-sm focus:outline-none focus:ring-amber-600 focus:border-amber-600 sm:text-sm text-white" />
@@ -641,12 +641,12 @@ function CharacterManager({ campaignId, campaignCharacters }) { id="defaultInitMod" value={defaultInitMod} onChange={(e) => setDefaultInitMod(e.target.value)} - className="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-md shadow-sm focus:outline-none focus:ring-sky-500 focus:border-sky-500 sm:text-sm text-white" + className="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-md shadow-sm focus:outline-none focus:ring-amber-600 focus:border-amber-600 sm:text-sm text-white" />
@@ -1120,7 +1120,7 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters }) { <>
-

Add Participants

+

Add Participants

@@ -1191,7 +1191,7 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters }) { id="monsterInitMod" value={monsterInitMod} onChange={(e) => setMonsterInitMod(e.target.value)} - className="mt-1 w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-md shadow-sm focus:outline-none focus:ring-sky-500 focus:border-sky-500 sm:text-sm text-white" + className="mt-1 w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-md shadow-sm focus:outline-none focus:ring-amber-600 focus:border-amber-600 sm:text-sm text-white" />
@@ -1203,7 +1203,7 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters }) { id="monsterMaxHp" value={maxHp} onChange={(e) => setMaxHp(e.target.value)} - className="mt-1 w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-md shadow-sm focus:outline-none focus:ring-sky-500 focus:border-sky-500 sm:text-sm text-white" + className="mt-1 w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-md shadow-sm focus:outline-none focus:ring-amber-600 focus:border-amber-600 sm:text-sm text-white" />
@@ -1242,7 +1242,7 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters }) { type="number" value={maxHp} onChange={(e) => setMaxHp(e.target.value)} - className="mt-1 w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-md shadow-sm focus:outline-none focus:ring-sky-500 focus:border-sky-500 sm:text-sm text-white" + className="mt-1 w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-md shadow-sm focus:outline-none focus:ring-amber-600 focus:border-amber-600 sm:text-sm text-white" />
@@ -1275,7 +1275,7 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters }) { const isDraggable = (!encounter.isStarted || encounter.isPaused) && tiedInitiatives.includes(Number(p.initiative)); const participantDisplayType = p.type === 'monster' ? (p.isNpc ? 'NPC' : 'Monster') : 'Character'; - let bgColor = p.type === 'character' ? 'bg-sky-800' : (p.isNpc ? 'bg-slate-600' : 'bg-[#8e351c]'); + let bgColor = p.type === 'character' ? 'bg-blue-950' : (p.isNpc ? 'bg-slate-600' : 'bg-[#8e351c]'); if (isCurrentTurn && !encounter.isPaused) bgColor = 'bg-green-600'; const isDead = p.currentHp === 0; @@ -1340,7 +1340,7 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters }) { placeholder="HP" value={hpChangeValues[p.id] || ''} onChange={(e) => setHpChangeValues(prev => ({ ...prev, [p.id]: e.target.value }))} - className="w-16 p-1 text-sm bg-slate-600 border border-slate-500 rounded-md text-white focus:ring-sky-500 focus:border-sky-500" + className="w-16 p-1 text-sm bg-slate-600 border border-slate-500 rounded-md text-white focus:ring-amber-600 focus:border-amber-600" aria-label={`HP change for ${p.name}`} /> {!isDead && ( @@ -1541,7 +1541,7 @@ function InitiativeControls({ campaignId, encounter, encounterPath }) { return ( <>
-

Combat Controls

+

Combat Controls

{!encounter.isStarted ? ( diff --git a/src/index.css b/src/index.css index d18da74..3ee4dc8 100644 --- a/src/index.css +++ b/src/index.css @@ -7,14 +7,9 @@ body { margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; + font-family: 'EB Garamond', Georgia, 'Times New Roman', serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - /* background-color: #1A202C; /* Tailwind Slate 900 */ - /* color: #E2E8F0; /* Tailwind Slate 200 */ - /* These will likely be overridden by the App component's Tailwind classes */ } code { diff --git a/tailwind.config.js b/tailwind.config.js index 26bb5e3..55346bf 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -6,7 +6,12 @@ module.exports = { "./public/index.html" ], theme: { - extend: {}, + extend: { + fontFamily: { + cinzel: ['Cinzel', 'serif'], + garamond: ['"EB Garamond"', 'Georgia', 'serif'], + }, + }, }, plugins: [], } \ No newline at end of file