From 98a3054b93cbb302872bab0236af3e6922a24b88 Mon Sep 17 00:00:00 2001 From: Aaron Wood Date: Thu, 9 Apr 2026 22:32:21 -0400 Subject: [PATCH] Mobile layout, campaign name, dropdown theme fix, and z-index fixes - Mobile: full-screen character sheet, stacked banner, compact header - Mobile: roll log with 3 states (hidden/peek/half-screen), cycle button - Mobile: long-press dice buttons for advantage/disadvantage popup - Show actual campaign name instead of hardcoded "Campaign" - Fix item/talent picker dropdowns using hardcoded dark backgrounds - Fix z-index: dice tray (10001) > character sheet (10000) > header (9999) - Compact app header on mobile Co-Authored-By: Claude Opus 4.6 (1M context) --- client/src/App.module.css | 17 ++++ .../src/components/CharacterDetail.module.css | 16 ++++ .../src/components/CharacterSheet.module.css | 15 ++++ client/src/components/DiceButton.module.css | 44 ++++++++++ client/src/components/DiceButton.tsx | 81 ++++++++++++++++--- client/src/components/DiceTray.module.css | 2 +- client/src/components/ItemPicker.module.css | 13 +-- client/src/components/RollLog.module.css | 38 +++++++++ client/src/components/RollLog.tsx | 45 +++++++++-- client/src/components/TalentPicker.module.css | 13 +-- client/src/pages/CampaignView.module.css | 17 ++++ client/src/pages/CampaignView.tsx | 10 ++- 12 files changed, 272 insertions(+), 39 deletions(-) diff --git a/client/src/App.module.css b/client/src/App.module.css index 3cfe0da..fcb54e0 100644 --- a/client/src/App.module.css +++ b/client/src/App.module.css @@ -70,3 +70,20 @@ body { 0 0 30px rgba(var(--gold-rgb), 0.25), 0 2px 4px rgba(var(--shadow-rgb), 0.5); } + +@media (max-width: 768px) { + .header { + padding: 0.75rem 0; + margin-bottom: 1rem; + } + + .header h1 { + font-size: 1.4rem; + } + + .header::before, + .header::after { + margin-bottom: 0.5rem; + margin-top: 0.25rem; + } +} diff --git a/client/src/components/CharacterDetail.module.css b/client/src/components/CharacterDetail.module.css index 82d0f94..432f0d9 100644 --- a/client/src/components/CharacterDetail.module.css +++ b/client/src/components/CharacterDetail.module.css @@ -95,3 +95,19 @@ .closeBtn:hover { color: var(--text-primary); } + +@media (max-width: 768px) { + .overlay { + position: fixed; + z-index: 10000; + } + + .modal { + max-width: 100%; + max-height: 100%; + height: 100%; + border-radius: 0; + padding: 1rem; + border: none; + } +} diff --git a/client/src/components/CharacterSheet.module.css b/client/src/components/CharacterSheet.module.css index 6239766..18ade56 100644 --- a/client/src/components/CharacterSheet.module.css +++ b/client/src/components/CharacterSheet.module.css @@ -185,6 +185,21 @@ .panels { grid-template-columns: 1fr; } + + .banner { + flex-direction: column; + align-items: flex-start; + gap: 0.5rem; + } + + .vitals { + width: 100%; + justify-content: space-around; + } + + .name { + font-size: 1.2rem; + } } .deleteSection { diff --git a/client/src/components/DiceButton.module.css b/client/src/components/DiceButton.module.css index 2c87cad..4a79d6d 100644 --- a/client/src/components/DiceButton.module.css +++ b/client/src/components/DiceButton.module.css @@ -51,3 +51,47 @@ inset 0 0 6px rgba(var(--danger-rgb), 0.4); } } + +.wrapper { + position: relative; +} + +.menu { + position: absolute; + bottom: 100%; + left: 50%; + transform: translateX(-50%); + margin-bottom: 0.25rem; + background-color: var(--bg-modal); + border: 1px solid rgba(var(--gold-rgb), 0.3); + border-radius: 4px; + padding: 0.2rem; + display: flex; + gap: 0.2rem; + z-index: 200; + box-shadow: 0 2px 8px rgba(var(--shadow-rgb), 0.4); + white-space: nowrap; +} + +.menuBtn { + padding: 0.25rem 0.5rem; + background: none; + border: 1px solid rgba(var(--gold-rgb), 0.2); + border-radius: 3px; + color: var(--text-primary); + font-size: 0.65rem; + font-family: "Cinzel", Georgia, serif; + cursor: pointer; +} + +.menuBtn:hover { + background: rgba(var(--gold-rgb), 0.1); +} + +.menuBtnAdv { + color: var(--hp); +} + +.menuBtnDis { + color: var(--danger); +} diff --git a/client/src/components/DiceButton.tsx b/client/src/components/DiceButton.tsx index a1a1f7a..b4a35d0 100644 --- a/client/src/components/DiceButton.tsx +++ b/client/src/components/DiceButton.tsx @@ -1,3 +1,4 @@ +import { useState, useRef } from "react"; import socket from "../socket"; import styles from "./DiceButton.module.css"; @@ -26,16 +27,18 @@ export default function DiceButton({ title: titleProp, forceCrit, }: DiceButtonProps) { - function handleClick(e: React.MouseEvent) { - const advantage = e.shiftKey; - const disadvantage = e.ctrlKey || e.metaKey; + const [showMenu, setShowMenu] = useState(false); + const longPressRef = useRef>(); + const longPressTriggered = useRef(false); + + function rollWith(advantage: boolean, disadvantage: boolean) { + setShowMenu(false); let actualDice = dice; let actualLabel = label; let sendAdvantage = advantage && !disadvantage; let sendDisadvantage = disadvantage && !advantage; - // For damage rolls (non-d20), shift or forceCrit = crit (double dice) const isD20 = dice.toLowerCase().includes("d20"); if (!isD20 && (advantage || forceCrit)) { const match = dice.match(/^(\d*)d(\d+)(.*)/i); @@ -60,13 +63,69 @@ export default function DiceButton({ }); } + function handleClick(e: React.MouseEvent) { + if (longPressTriggered.current) { + longPressTriggered.current = false; + return; + } + const advantage = e.shiftKey; + const disadvantage = e.ctrlKey || e.metaKey; + rollWith(advantage, disadvantage); + } + + function handleTouchStart() { + longPressTriggered.current = false; + longPressRef.current = setTimeout(() => { + longPressTriggered.current = true; + setShowMenu(true); + }, 500); + } + + function handleTouchEnd() { + if (longPressRef.current) clearTimeout(longPressRef.current); + } + + function handleTouchMove() { + if (longPressRef.current) clearTimeout(longPressRef.current); + } + return ( - +
+ + {showMenu && ( +
+ + + +
+ )} +
); } diff --git a/client/src/components/DiceTray.module.css b/client/src/components/DiceTray.module.css index 883e6be..69ed0ed 100644 --- a/client/src/components/DiceTray.module.css +++ b/client/src/components/DiceTray.module.css @@ -1,7 +1,7 @@ .tray { position: fixed; inset: 0; - z-index: 500; + z-index: 10001; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; diff --git a/client/src/components/ItemPicker.module.css b/client/src/components/ItemPicker.module.css index e6c49cb..c94b296 100644 --- a/client/src/components/ItemPicker.module.css +++ b/client/src/components/ItemPicker.module.css @@ -25,15 +25,10 @@ right: 0; max-height: 220px; overflow-y: auto; - background: - repeating-linear-gradient( - 0deg, - transparent, - transparent 3px, - rgba(180, 155, 100, 0.02) 3px, - rgba(180, 155, 100, 0.02) 4px - ), - linear-gradient(175deg, #221e18 0%, #1e1b16 50%, #201c17 100%); + background-color: var(--bg-modal); + background-image: var(--texture-surface); + background-size: 256px 256px; + background-repeat: repeat; border: 1px solid rgba(var(--gold-rgb), 0.25); border-radius: 4px; margin-bottom: 0.25rem; diff --git a/client/src/components/RollLog.module.css b/client/src/components/RollLog.module.css index a3b20a5..141e7bb 100644 --- a/client/src/components/RollLog.module.css +++ b/client/src/components/RollLog.module.css @@ -38,6 +38,11 @@ text-shadow: 0 1px 2px rgba(var(--shadow-rgb), 0.3); } +.headerBtns { + display: flex; + gap: 0.3rem; +} + .collapseBtn { background: none; border: none; @@ -51,6 +56,14 @@ color: var(--gold); } +.mobileOnly { + display: none; +} + +.desktopOnly { + display: inline-flex; +} + .collapsedContent { display: flex; flex-direction: column; @@ -134,6 +147,23 @@ height: 200px; border-left: none; border-top: 2px solid rgba(var(--gold-rgb), 0.2); + transition: height 0.25s ease; + } + + /* Peek: header + input + one roll visible */ + .panel:not(.mobileHidden):not(.mobileOpen) { + height: 200px; + } + + /* Hidden: just the header bar */ + .panel.mobileHidden { + height: 36px; + overflow: hidden; + } + + /* Open: half the viewport */ + .panel.mobileOpen { + height: 50vh; } .panel.collapsed { @@ -150,4 +180,12 @@ writing-mode: horizontal-tb; max-height: none; } + + .mobileOnly { + display: inline-flex; + } + + .desktopOnly { + display: none; + } } diff --git a/client/src/components/RollLog.tsx b/client/src/components/RollLog.tsx index 8d3a818..8beccdb 100644 --- a/client/src/components/RollLog.tsx +++ b/client/src/components/RollLog.tsx @@ -10,8 +10,11 @@ interface RollLogProps { freshIds: Set; } +type MobileState = "hidden" | "peek" | "open"; + export default function RollLog({ campaignId, rolls, freshIds }: RollLogProps) { const [collapsed, setCollapsed] = useState(false); + const [mobileState, setMobileState] = useState("peek"); const [input, setInput] = useState(""); function handleRoll(e: React.FormEvent) { @@ -26,6 +29,15 @@ export default function RollLog({ campaignId, rolls, freshIds }: RollLogProps) { setInput(""); } + function cycleMobile() { + setMobileState((prev) => { + if (prev === "hidden") return "peek"; + if (prev === "peek") return "open"; + return "hidden"; + }); + } + + // Desktop collapsed if (collapsed) { return (
+
Roll Log - +
+ + +
@@ -62,7 +89,9 @@ export default function RollLog({ campaignId, rolls, freshIds }: RollLogProps) { placeholder="Roll dice... (e.g. 2d6+1)" />
-
Shift: advantage · Ctrl: disadvantage
+
+ Long-press dice for advantage/disadvantage +
{rolls.length === 0 &&

No rolls yet

} diff --git a/client/src/components/TalentPicker.module.css b/client/src/components/TalentPicker.module.css index a9f8bd9..740fa40 100644 --- a/client/src/components/TalentPicker.module.css +++ b/client/src/components/TalentPicker.module.css @@ -25,15 +25,10 @@ right: 0; max-height: 220px; overflow-y: auto; - background: - repeating-linear-gradient( - 0deg, - transparent, - transparent 3px, - rgba(180, 155, 100, 0.02) 3px, - rgba(180, 155, 100, 0.02) 4px - ), - linear-gradient(175deg, #221e18 0%, #1e1b16 50%, #201c17 100%); + background-color: var(--bg-modal); + background-image: var(--texture-surface); + background-size: 256px 256px; + background-repeat: repeat; border: 1px solid rgba(var(--gold-rgb), 0.25); border-radius: 4px; margin-bottom: 0.25rem; diff --git a/client/src/pages/CampaignView.module.css b/client/src/pages/CampaignView.module.css index 253b795..9027498 100644 --- a/client/src/pages/CampaignView.module.css +++ b/client/src/pages/CampaignView.module.css @@ -39,6 +39,23 @@ flex: 1; padding-right: 0; } + + .header { + flex-wrap: wrap; + gap: 0.5rem; + } + + .campaignName { + font-size: 1.1rem; + width: 100%; + text-align: center; + order: -1; + } + + .addBtn { + font-size: 0.8rem; + padding: 0.4rem 0.75rem; + } } .header { diff --git a/client/src/pages/CampaignView.tsx b/client/src/pages/CampaignView.tsx index 697dc0e..83cda54 100644 --- a/client/src/pages/CampaignView.tsx +++ b/client/src/pages/CampaignView.tsx @@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from "react"; import { useParams, Link } from "react-router-dom"; import socket from "../socket"; import { + getCampaigns, getCharacters, createCharacter, updateCharacter, @@ -35,6 +36,7 @@ export default function CampaignView() { ancestry: "Human", hp_max: 1, }); + const [campaignName, setCampaignName] = useState(""); const [rolls, setRolls] = useState([]); const [freshIds, setFreshIds] = useState>(new Set()); const [critKeys, setCritKeys] = useState>(new Set()); @@ -50,6 +52,10 @@ export default function CampaignView() { useEffect(() => { getCharacters(campaignId).then(setCharacters); getRolls(campaignId).then(setRolls); + getCampaigns().then((camps) => { + const c = camps.find((x) => x.id === campaignId); + if (c) setCampaignName(c.name); + }); socket.emit("join-campaign", String(campaignId)); return () => { socket.emit("leave-campaign", String(campaignId)); @@ -327,7 +333,9 @@ export default function CampaignView() { ← Campaigns - Campaign + + {campaignName || "Campaign"} +