Compare commits
6 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
4cfcefe6c3 | ||
|
|
8baccf3cd3 | ||
|
|
a9ca31e9bc | ||
|
|
64a1f0b8db | ||
|
|
5e5812bcaa | ||
|
|
9e09c8ae2a |
@@ -2,7 +2,7 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
||||
<meta name="theme-color" content="#0e1a2e" />
|
||||
<link rel="manifest" href="/manifest.json" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
|
||||
@@ -46,7 +46,10 @@ export function App() {
|
||||
<div className="relative mx-auto flex min-h-0 w-full flex-1 flex-col gap-3 sm:max-w-2xl sm:px-4">
|
||||
{!!actionBarAnim.showTopBar && (
|
||||
<div
|
||||
className={cn("shrink-0 sm:pt-8", actionBarAnim.topBarClass)}
|
||||
className={cn(
|
||||
"shrink-0 pt-[env(safe-area-inset-top)] sm:pt-[max(env(safe-area-inset-top),2rem)]",
|
||||
actionBarAnim.topBarClass,
|
||||
)}
|
||||
onAnimationEnd={actionBarAnim.onTopBarExitEnd}
|
||||
>
|
||||
<TurnNavigation />
|
||||
@@ -85,7 +88,10 @@ export function App() {
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={cn("shrink-0 sm:pb-8", actionBarAnim.settlingClass)}
|
||||
className={cn(
|
||||
"shrink-0 pb-[env(safe-area-inset-bottom)] sm:pb-[max(env(safe-area-inset-bottom),2rem)]",
|
||||
actionBarAnim.settlingClass,
|
||||
)}
|
||||
onAnimationEnd={actionBarAnim.onSettleEnd}
|
||||
>
|
||||
<ActionBar
|
||||
|
||||
@@ -279,7 +279,8 @@ export function ActionBar({
|
||||
const handleAddFromBestiary = useCallback(
|
||||
(result: SearchResult) => {
|
||||
const creatureId = addFromBestiary(result);
|
||||
if (creatureId && panelView.mode === "closed") {
|
||||
const isDesktop = globalThis.matchMedia("(min-width: 1024px)").matches;
|
||||
if (creatureId && panelView.mode === "closed" && isDesktop) {
|
||||
showCreature(creatureId);
|
||||
}
|
||||
},
|
||||
@@ -521,7 +522,7 @@ export function ActionBar({
|
||||
<div className="card-glow flex items-center gap-3 border-border border-t bg-card px-4 py-3 sm:rounded-lg sm:border">
|
||||
<form
|
||||
onSubmit={handleAdd}
|
||||
className="relative flex flex-1 items-center gap-2"
|
||||
className="relative flex flex-1 flex-wrap items-center gap-3 sm:flex-nowrap"
|
||||
>
|
||||
<div className="flex-1">
|
||||
<div className="relative max-w-xs">
|
||||
@@ -605,7 +606,7 @@ export function ActionBar({
|
||||
</div>
|
||||
</div>
|
||||
{!browseMode && nameInput.length >= 2 && !hasSuggestions && (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="hidden items-center gap-2 sm:flex">
|
||||
<Input
|
||||
type="text"
|
||||
inputMode="numeric"
|
||||
|
||||
@@ -157,7 +157,7 @@ function MaxHpDisplay({
|
||||
inputMode="numeric"
|
||||
value={draft}
|
||||
placeholder="Max"
|
||||
className="h-7 w-[7ch] text-center text-sm tabular-nums"
|
||||
className="h-7 w-[7ch] text-center tabular-nums"
|
||||
onChange={(e) => setDraft(e.target.value)}
|
||||
onBlur={commit}
|
||||
onKeyDown={(e) => {
|
||||
@@ -272,7 +272,7 @@ function AcDisplay({
|
||||
inputMode="numeric"
|
||||
value={draft}
|
||||
placeholder="AC"
|
||||
className="h-7 w-[6ch] text-center text-sm tabular-nums"
|
||||
className="h-7 w-[6ch] text-center tabular-nums"
|
||||
onChange={(e) => setDraft(e.target.value)}
|
||||
onBlur={commit}
|
||||
onKeyDown={(e) => {
|
||||
@@ -348,7 +348,7 @@ function InitiativeDisplay({
|
||||
value={draft}
|
||||
placeholder="--"
|
||||
className={cn(
|
||||
"h-7 w-full text-center text-sm tabular-nums",
|
||||
"h-7 w-full text-center tabular-nums",
|
||||
dimmed && "opacity-50",
|
||||
)}
|
||||
onChange={(e) => setDraft(e.target.value)}
|
||||
@@ -520,7 +520,7 @@ export function CombatantRow({
|
||||
isPulsing && "animate-concentration-pulse",
|
||||
)}
|
||||
>
|
||||
<div className="grid grid-cols-[2rem_3rem_auto_1fr_auto_2rem] items-center gap-1.5 py-2 sm:grid-cols-[2rem_3.5rem_auto_1fr_auto_2rem] sm:gap-3">
|
||||
<div className="grid grid-cols-[2rem_3rem_auto_1fr_auto_2rem] items-center gap-1.5 py-3 sm:grid-cols-[2rem_3.5rem_auto_1fr_auto_2rem] sm:gap-3 sm:py-2">
|
||||
{/* Concentration */}
|
||||
<button
|
||||
type="button"
|
||||
|
||||
@@ -106,7 +106,7 @@ export function HpAdjustPopover({
|
||||
inputMode="numeric"
|
||||
value={inputValue}
|
||||
placeholder="HP"
|
||||
className="h-7 w-[7ch] text-center text-sm tabular-nums"
|
||||
className="h-7 w-[7ch] text-center tabular-nums"
|
||||
onChange={(e) => {
|
||||
const v = e.target.value;
|
||||
if (v === "" || DIGITS_ONLY_REGEX.test(v)) {
|
||||
|
||||
@@ -12,7 +12,7 @@ export const Input = ({
|
||||
<input
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-foreground text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:cursor-not-allowed disabled:opacity-50",
|
||||
"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base text-foreground shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useEffect } from "react";
|
||||
import { useEffect, useRef } from "react";
|
||||
import { useEncounterContext } from "../contexts/encounter-context.js";
|
||||
import { useSidePanelContext } from "../contexts/side-panel-context.js";
|
||||
|
||||
@@ -8,10 +8,20 @@ export function useAutoStatBlock(): void {
|
||||
|
||||
const activeCreatureId =
|
||||
encounter.combatants[encounter.activeIndex]?.creatureId;
|
||||
const prevActiveIndexRef = useRef(encounter.activeIndex);
|
||||
|
||||
useEffect(() => {
|
||||
if (activeCreatureId && panelView.mode === "creature") {
|
||||
const prevIndex = prevActiveIndexRef.current;
|
||||
prevActiveIndexRef.current = encounter.activeIndex;
|
||||
|
||||
// Only auto-update when the active turn changes (advance/retreat),
|
||||
// not when the panel mode changes (user clicking a different creature).
|
||||
if (
|
||||
encounter.activeIndex !== prevIndex &&
|
||||
activeCreatureId &&
|
||||
panelView.mode === "creature"
|
||||
) {
|
||||
updateCreature(activeCreatureId);
|
||||
}
|
||||
}, [activeCreatureId, panelView.mode, updateCreature]);
|
||||
}, [encounter.activeIndex, activeCreatureId, panelView.mode, updateCreature]);
|
||||
}
|
||||
|
||||
@@ -39,6 +39,9 @@ function resolve(pref: ThemePreference): ResolvedTheme {
|
||||
|
||||
function applyTheme(resolved: ResolvedTheme): void {
|
||||
document.documentElement.dataset.theme = resolved;
|
||||
document
|
||||
.querySelector('meta[name="theme-color"]')
|
||||
?.setAttribute("content", resolved === "light" ? "#eeecea" : "#0e1a2e");
|
||||
}
|
||||
|
||||
function notifyAll(): void {
|
||||
|
||||
Reference in New Issue
Block a user