From bf553db99a449c8ec37919d03b1a771e9bbd1028 Mon Sep 17 00:00:00 2001 From: Igor Serebryany Date: Tue, 11 Nov 2025 18:31:40 -0800 Subject: [PATCH 1/9] infra: give deploy user pulumi KMS access --- pulumi/infra/index.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/pulumi/infra/index.ts b/pulumi/infra/index.ts index 56e45db..e8c68de 100644 --- a/pulumi/infra/index.ts +++ b/pulumi/infra/index.ts @@ -159,6 +159,14 @@ if (stack === "prod") { member: pulumi.interpolate`serviceAccount:${deploySA.email}`, }) + // Grant deploy SA access to decrypt Pulumi state secrets + // The KMS key was created manually: csheet-pulumi/infra in us-central1 + new gcp.kms.CryptoKeyIAMMember("deploy-kms-decrypt", { + cryptoKeyId: "projects/csheet-475917/locations/us-central1/keyRings/csheet-pulumi/cryptoKeys/infra", + role: "roles/cloudkms.cryptoKeyDecrypter", + member: pulumi.interpolate`serviceAccount:${deploySA.email}`, + }) + // Allow admin user to impersonate the deploy service account (for local testing) new gcp.serviceaccount.IAMMember("admin-impersonates-deploy", { serviceAccountId: deploySA.name, From 02b75b473e5f5f2885de4282aab79419b28901d7 Mon Sep 17 00:00:00 2001 From: Igor Serebryany Date: Tue, 11 Nov 2025 21:21:21 -0800 Subject: [PATCH 2/9] feat: show spell cast results both afterwards for attacks, and reed learns the stuff also --- pulumi/infra/index.ts | 3 +- src/components/SpellCastResult.tsx | 74 +++++++++++++++- src/lib/spellFormatters.ts | 14 +++ src/routes/character.tsx | 6 +- src/services/castSpell.ts | 136 ++++++++++++++++++++++++++++- 5 files changed, 227 insertions(+), 6 deletions(-) diff --git a/pulumi/infra/index.ts b/pulumi/infra/index.ts index e8c68de..10251fe 100644 --- a/pulumi/infra/index.ts +++ b/pulumi/infra/index.ts @@ -162,7 +162,8 @@ if (stack === "prod") { // Grant deploy SA access to decrypt Pulumi state secrets // The KMS key was created manually: csheet-pulumi/infra in us-central1 new gcp.kms.CryptoKeyIAMMember("deploy-kms-decrypt", { - cryptoKeyId: "projects/csheet-475917/locations/us-central1/keyRings/csheet-pulumi/cryptoKeys/infra", + cryptoKeyId: + "projects/csheet-475917/locations/us-central1/keyRings/csheet-pulumi/cryptoKeys/infra", role: "roles/cloudkms.cryptoKeyDecrypter", member: pulumi.interpolate`serviceAccount:${deploySA.email}`, }) diff --git a/src/components/SpellCastResult.tsx b/src/components/SpellCastResult.tsx index 09899d5..8e414c8 100644 --- a/src/components/SpellCastResult.tsx +++ b/src/components/SpellCastResult.tsx @@ -1,13 +1,15 @@ import { spells } from "@src/lib/dnd/spells" +import type { AttackInfo } from "@src/services/castSpell" import { SpellDetail } from "./SpellDetail" import { ModalContent } from "./ui/ModalContent" export interface SpellCastResultProps { message: string spellId: string + attackInfo?: AttackInfo } -export const SpellCastResult = ({ message, spellId }: SpellCastResultProps) => { +export const SpellCastResult = ({ message, spellId, attackInfo }: SpellCastResultProps) => { const spell = spells.find((s) => s.id === spellId) if (!spell) { @@ -37,6 +39,76 @@ export const SpellCastResult = ({ message, spellId }: SpellCastResultProps) => { {message} + {/* Attack/Combat Results */} + {attackInfo && ( +
+
+ + Cast Results +
+
+ {/* Attack bonus for attack spells */} + {attackInfo.attackBonus !== undefined && ( +
+ Attack Roll:{" "} + + {attackInfo.attackBonus >= 0 ? "+" : ""} + {attackInfo.attackBonus} to hit + + (ranged spell attack) +
+ )} + + {/* Save DC for save spells */} + {attackInfo.saveDC !== undefined && attackInfo.saveAbility && ( +
+ Saving Throw:{" "} + DC {attackInfo.saveDC} + + {attackInfo.saveAbility.charAt(0).toUpperCase() + + attackInfo.saveAbility.slice(1)}{" "} + save + {attackInfo.onSaveSuccess && attackInfo.onSaveSuccess !== "none" && ( + <> ({attackInfo.onSaveSuccess} on success) + )} + +
+ )} + + {/* Damage */} + {attackInfo.damage && attackInfo.damage.length > 0 && ( +
+ Damage: +
    + {attackInfo.damage.map((dmg) => ( +
  • + {dmg.formula} + {dmg.type} + {dmg.notes && ({dmg.notes})} +
    • + ))} +
+ {attackInfo.scalingExplanation && ( +
+ + {attackInfo.scalingExplanation} +
+ )} +
+ )} + + {/* Healing */} + {attackInfo.healing && ( +
+ Healing:{" "} + {attackInfo.healing} + hit points +
+ )} +
+
+ )} + {/* Spell details with accordion */} diff --git a/src/lib/spellFormatters.ts b/src/lib/spellFormatters.ts index ac2ea2c..43e4b64 100644 --- a/src/lib/spellFormatters.ts +++ b/src/lib/spellFormatters.ts @@ -129,3 +129,17 @@ export function formatAreaOfEffect(area: AreaOfEffect): string { return `${area.length}-foot-long, ${area.width}-foot-wide line${origin}` } } + +export function formatDamageFormula(dice?: Dice, flatBonus?: number): string { + const parts: string[] = [] + + if (dice && dice.length > 0) { + parts.push(formatDice(dice)) + } + + if (flatBonus) { + parts.push(flatBonus > 0 ? `+${flatBonus}` : `${flatBonus}`) + } + + return parts.join(" ") +} diff --git a/src/routes/character.tsx b/src/routes/character.tsx index d32eea4..59fda95 100644 --- a/src/routes/character.tsx +++ b/src/routes/character.tsx @@ -820,7 +820,11 @@ characterRoutes.post("/characters/:id/castspell", async (c) => { const updatedChar = (await computeCharacter(getDb(c), characterId))! return c.html( <> - + ) diff --git a/src/services/castSpell.ts b/src/services/castSpell.ts index 9ce812f..02e257e 100644 --- a/src/services/castSpell.ts +++ b/src/services/castSpell.ts @@ -1,8 +1,10 @@ -import type { SpellLevelType } from "@src/lib/dnd" +import type { AbilityType, SpellLevelType } from "@src/lib/dnd" +import type { DamageType, Spell } from "@src/lib/dnd/spells" import { spells } from "@src/lib/dnd/spells" import { zodToFormErrors } from "@src/lib/formErrors" import { Checkbox, NumberField, OptionalString } from "@src/lib/formSchemas" import type { ServiceResult } from "@src/lib/serviceResult" +import { formatDamageFormula } from "@src/lib/spellFormatters" import { tool } from "ai" import type { SQL } from "bun" import { z } from "zod" @@ -30,7 +32,123 @@ export const CastSpellApiSchema = z.object({ is_check: Checkbox().optional().default(false), }) -export type CastSpellResult = ServiceResult<{ note: string; spellId: string }> +export type DamageInfo = { + type: DamageType + formula: string + notes?: string +} + +export type AttackInfo = { + attackBonus?: number + saveDC?: number + saveAbility?: AbilityType + onSaveSuccess?: string + damage?: DamageInfo[] + healing?: string + scalingExplanation?: string +} + +export type CastSpellResult = ServiceResult<{ + note: string + spellId: string + attackInfo?: AttackInfo +}> + +/** + * Compute attack/damage information for a spell based on character stats + */ +function computeAttackInfo( + char: ComputedCharacter, + spell: Spell, + slotLevel: number | null +): AttackInfo | undefined { + // Only compute attack info if the spell has combat mechanics + if (spell.resolution.kind === "none" && !spell.damage && !spell.healingDice) { + return undefined + } + + const attackInfo: AttackInfo = {} + + // Get the appropriate spell info for this character + const spellInfo = char.spells.find( + (s) => + s.preparedSpells.some((ps) => ps.spell_id === spell.id) || + s.cantripSlots.some((cs) => cs.spell_id === spell.id) + ) + + // Attack spell - show attack bonus + if (spell.resolution.kind === "attack") { + attackInfo.attackBonus = spellInfo?.spellAttackBonus ?? 0 + } + + // Save spell - show DC and save ability + if (spell.resolution.kind === "save") { + attackInfo.saveDC = spellInfo?.spellSaveDC ?? 0 + attackInfo.saveAbility = spell.resolution.ability + attackInfo.onSaveSuccess = spell.resolution.onSuccess || "none" + } + + // Calculate damage (with scaling if applicable) + if (spell.damage && spell.damage.length > 0) { + const effectiveLevel = slotLevel || spell.level + const damageInfo: DamageInfo[] = [] + let scalingExplanation: string | undefined + + // Check if spell scales with slot level + if (spell.damageScaling?.mode === "perSlotLevel" && effectiveLevel > spell.level) { + const scaledDice = spell.damageScaling.progression[effectiveLevel] + if (scaledDice) { + // Use scaled damage + for (const damageEntry of spell.damage) { + const formula = formatDamageFormula(scaledDice, damageEntry.flatBonus) + damageInfo.push({ + type: damageEntry.type, + formula, + notes: damageEntry.notes, + }) + } + + // Build scaling explanation + const baseDice = spell.damage[0]?.dice + if (baseDice) { + const baseFormula = formatDamageFormula(baseDice) + const scaledFormula = formatDamageFormula(scaledDice) + const dicePerLevel = scaledDice.length - baseDice.length + scalingExplanation = `Base: ${baseFormula}, +${dicePerLevel}d${scaledDice[0]} per level above ${spell.level} = ${scaledFormula}` + } + } + } else { + // Use base damage (no scaling or cast at base level) + for (const damageEntry of spell.damage) { + const formula = formatDamageFormula(damageEntry.dice, damageEntry.flatBonus) + damageInfo.push({ + type: damageEntry.type, + formula, + notes: damageEntry.notes, + }) + } + } + + if (damageInfo.length > 0) { + attackInfo.damage = damageInfo + } + if (scalingExplanation) { + attackInfo.scalingExplanation = scalingExplanation + } + } + + // Calculate healing + if (spell.healingDice) { + attackInfo.healing = formatDamageFormula(spell.healingDice) + } + + // Only return attackInfo if it has meaningful data + if (Object.keys(attackInfo).length === 0) { + return undefined + } + + return attackInfo +} /** * Cast a spell, consuming a spell slot if not cast as a ritual @@ -141,11 +259,13 @@ export async function castSpell( // No spell slot used if (isCantrip || result.data.as_ritual) { + const attackInfo = computeAttackInfo(char, spell, null) return { complete: true, result: { note: `You cast ${spell.name}${asRitual ? " as a ritual" : ""}. No spell slot was used.`, spellId: spell.id, + attackInfo, }, } } else if (!result.data.slot_level) { @@ -175,11 +295,13 @@ export async function castSpell( throw new Error("Failed to use spell slot") } + const attackInfo = computeAttackInfo(char, spell, result.data.slot_level) return { complete: true, result: { note: `You cast ${spell.name} using a level ${result.data.slot_level} spell slot.`, spellId: spell.id, + attackInfo, }, } } @@ -188,7 +310,15 @@ export async function castSpell( export const castSpellToolName = "cast_spell" as const export const castSpellTool = tool({ name: castSpellToolName, - description: `Cast a spell. Requires a spell id, which you must *always* get beforehand using lookup_spell tool. If casting a cantrip or casting as a ritual, this requires using a spell slot. Feel free to assume a spell slot level when appropriate.`, + description: `Cast a spell. Requires a spell id, which you must *always* get beforehand using lookup_spell tool. If casting a cantrip or casting as a ritual, this *does not* require using a spell slot. Feel free to assume a spell slot level if the spell has a minimum or if the character only has certain slots available. + +IMPORTANT: After casting an attack or damage spell, always inform the user of the combat results. Include: +- For attack spells: The attack bonus (e.g., "+7 to hit with a ranged spell attack") +- For save spells: The save DC and ability (e.g., "DC 15 Dexterity saving throw, half damage on success") +- For damage spells: The damage dice formula (e.g., "8d6 fire damage" or "3d8+5 lightning damage") +- For scaled spells: Mention the scaling (e.g., "Fireball cast at 5th level deals 10d6 fire damage") + +Format example: "You cast Fireball at 3rd level. Targets must make a DC 15 Dexterity saving throw, taking 8d6 fire damage on a failed save or half on a success."`, inputSchema: CastSpellApiSchema.omit({ note: true, is_check: true }).extend({ note: z.string().optional().describe("Optional additional notes about the casting"), }), From 778e6315e7ffb21f8e749984c27b0582691bf214 Mon Sep 17 00:00:00 2001 From: Igor Serebryany Date: Tue, 11 Nov 2025 21:58:11 -0800 Subject: [PATCH 3/9] fix: correct location for htmx-auth file --- {public/static => static}/htmx-auth.js | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename {public/static => static}/htmx-auth.js (100%) diff --git a/public/static/htmx-auth.js b/static/htmx-auth.js similarity index 100% rename from public/static/htmx-auth.js rename to static/htmx-auth.js From da007a8c6d862050070257fc772f226a2bf134a8 Mon Sep 17 00:00:00 2001 From: Igor Serebryany Date: Tue, 11 Nov 2025 21:58:11 -0800 Subject: [PATCH 4/9] feat: initial stab at multiple avatars we do the db work and some initial UI work, but the UI doesn't fully function --- .gitignore | 1 + bun.lock | 25 ++ db/schema.sql | 76 +++++- ...0251112060352_create_character_avatars.sql | 22 ++ ...0251112060400_migrate_existing_avatars.sql | 20 ++ ...60500_remove_avatar_id_from_characters.sql | 5 + package.json | 3 +- src/components/AvatarCropper.tsx | 68 ++++++ src/components/AvatarDisplay.tsx | 95 ++++++++ src/components/AvatarGallery.tsx | 96 ++++++++ src/components/CharacterInfo.tsx | 30 +-- src/components/Layout.tsx | 2 + src/components/UpdateAvatarForm.tsx | 18 +- src/db/character_avatars.ts | 222 ++++++++++++++++++ src/db/characters.ts | 1 - src/routes/character.tsx | 202 ++++++++++++++++ src/services/computeCharacter.ts | 21 ++ src/services/createCharacter.ts | 1 - src/services/importCharacter.ts | 1 - src/services/listCharacters.ts | 1 - src/services/updateAvatar.ts | 23 +- src/test/factories/character.ts | 1 - static/avatar-cropper.js | 90 +++++++ static/styles.css | 6 +- 24 files changed, 964 insertions(+), 66 deletions(-) create mode 100644 migrations/20251112060352_create_character_avatars.sql create mode 100644 migrations/20251112060400_migrate_existing_avatars.sql create mode 100644 migrations/20251112060500_remove_avatar_id_from_characters.sql create mode 100644 src/components/AvatarCropper.tsx create mode 100644 src/components/AvatarDisplay.tsx create mode 100644 src/components/AvatarGallery.tsx create mode 100644 src/db/character_avatars.ts create mode 100644 static/avatar-cropper.js diff --git a/.gitignore b/.gitignore index 65ee0c1..5abf482 100644 --- a/.gitignore +++ b/.gitignore @@ -5,6 +5,7 @@ node_modules/ static/htmx.min.js static/htmx-ext-sse.js static/idiomorph-ext.min.js +static/cropper.min.js # output out diff --git a/bun.lock b/bun.lock index f3df0ab..439a173 100644 --- a/bun.lock +++ b/bun.lock @@ -10,6 +10,7 @@ "@types/marked": "^6.0.0", "ai": "^5.0.82", "clsx": "^2.1.1", + "cropperjs": "^2.1.0", "hono": "^4.9.6", "htmx-ext-sse": "^2.2.4", "htmx.org": "^2.0.8", @@ -148,6 +149,28 @@ "@biomejs/cli-win32-x64": ["@biomejs/cli-win32-x64@2.2.6", "", { "os": "win32", "cpu": "x64" }, "sha512-yx0CqeOhPjYQ5ZXgPfu8QYkgBhVJyvWe36as7jRuPrKPO5ylVDfwVtPQ+K/mooNTADW0IhxOZm3aPu16dP8yNQ=="], + "@cropper/element": ["@cropper/element@2.1.0", "", { "dependencies": { "@cropper/utils": "^2.1.0" } }, "sha512-2zELddqHQNmlvkPoiYzE5nxEjPE+C8nXoTPuvV3FvLp3YjBinc7qb73Icg9UXP0o9qC4+h9q96JgGo0AyMO/Ng=="], + + "@cropper/element-canvas": ["@cropper/element-canvas@2.1.0", "", { "dependencies": { "@cropper/element": "^2.1.0", "@cropper/utils": "^2.1.0" } }, "sha512-el+rfJpZxsD2q5XxDBA4fRczcrOqB65Lb7roqXOq8LKufwf4bPWA9C6DjNJJahh/TP94dsLIEy3tSkgRMDv3Aw=="], + + "@cropper/element-crosshair": ["@cropper/element-crosshair@2.1.0", "", { "dependencies": { "@cropper/element": "^2.1.0", "@cropper/utils": "^2.1.0" } }, "sha512-0V589dAx8uZAfvJwdINLn76gfPQEafPH94ukjJ76uX0FCUovLaAVX+VRD/MDSYn0Mza/xejzmL9Dhd1DfemvmA=="], + + "@cropper/element-grid": ["@cropper/element-grid@2.1.0", "", { "dependencies": { "@cropper/element": "^2.1.0", "@cropper/utils": "^2.1.0" } }, "sha512-dEnk0rO+vp553LMvsPYgfrqVFcYXeVFrgFeavBYYEhAXtO40p7kN4rmLYLMMjaN+T/Mx2BATv6kUQpALKy2HLw=="], + + "@cropper/element-handle": ["@cropper/element-handle@2.1.0", "", { "dependencies": { "@cropper/element": "^2.1.0", "@cropper/utils": "^2.1.0" } }, "sha512-8BklWA4C/2GGAULupIWleSnGutECvYt3vx9flodqDfZpDEozws4LgLqmmzVuQmVkRVUdLnXdtx28kjgWLtzkHg=="], + + "@cropper/element-image": ["@cropper/element-image@2.1.0", "", { "dependencies": { "@cropper/element": "^2.1.0", "@cropper/element-canvas": "^2.1.0", "@cropper/utils": "^2.1.0" } }, "sha512-mXOV8ixJvG0XtTxLebYAKDjEkFbFOQnsF02hXPZk1yQSV0J+LLhN7a2NePrtKnoTsEV19fhhX3UorMoyGGxvzg=="], + + "@cropper/element-selection": ["@cropper/element-selection@2.1.0", "", { "dependencies": { "@cropper/element": "^2.1.0", "@cropper/element-canvas": "^2.1.0", "@cropper/element-image": "^2.1.0", "@cropper/utils": "^2.1.0" } }, "sha512-mtFtBl6HIa/s9TWohXw+Z5eJoeYTqylrIcHvS7oVv0uM7IyeRwBW65Q7z+KtLfq/LW+2Sw/XDyvR+VN/DawBPw=="], + + "@cropper/element-shade": ["@cropper/element-shade@2.1.0", "", { "dependencies": { "@cropper/element": "^2.1.0", "@cropper/element-canvas": "^2.1.0", "@cropper/element-selection": "^2.1.0", "@cropper/utils": "^2.1.0" } }, "sha512-zMdyqbb0lc0Vd1oj2Z1miIZvhyZG41OXMHvrNt0hNwblh0dVdrvtw48lnFDgRv+672vt2CNx7Q04GuvCQfPlgg=="], + + "@cropper/element-viewer": ["@cropper/element-viewer@2.1.0", "", { "dependencies": { "@cropper/element": "^2.1.0", "@cropper/element-canvas": "^2.1.0", "@cropper/element-image": "^2.1.0", "@cropper/element-selection": "^2.1.0", "@cropper/utils": "^2.1.0" } }, "sha512-XnxlQuqHitd1FOFZ6E0yXAF5NYd/LyIvONLLHI9p1rJw747WYKUPxQaSYtFKF7IOizJu/8mMj++Zc1dZ5ZP3YQ=="], + + "@cropper/elements": ["@cropper/elements@2.1.0", "", { "dependencies": { "@cropper/element": "^2.1.0", "@cropper/element-canvas": "^2.1.0", "@cropper/element-crosshair": "^2.1.0", "@cropper/element-grid": "^2.1.0", "@cropper/element-handle": "^2.1.0", "@cropper/element-image": "^2.1.0", "@cropper/element-selection": "^2.1.0", "@cropper/element-shade": "^2.1.0", "@cropper/element-viewer": "^2.1.0" } }, "sha512-qvzlYDn3VQgPPpsCu6Gi1XUO0v3vpXQFSjjxcVijbXeNsl/eiKrN7H9/CEiRgi5vr8kXfd7ZvgYxBjUBbH+y+w=="], + + "@cropper/utils": ["@cropper/utils@2.1.0", "", {}, "sha512-wLtpZ4/UWgo+fGmG8NBWge8x5ehjfDe9ovleDfLy8kpwFaw43XXOEXQtRL1UNr0u4JZxaeO8FcXcolRWUUrlRQ=="], + "@cspotcode/source-map-support": ["@cspotcode/source-map-support@0.8.1", "", { "dependencies": { "@jridgewell/trace-mapping": "0.3.9" } }, "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw=="], "@faker-js/faker": ["@faker-js/faker@10.1.0", "", {}, "sha512-C3mrr3b5dRVlKPJdfrAXS8+dq+rq8Qm5SNRazca0JKgw1HQERFmrVb0towvMmw5uu8hHKNiQasMaR/tydf3Zsg=="], @@ -496,6 +519,8 @@ "create-require": ["create-require@1.1.1", "", {}, "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ=="], + "cropperjs": ["cropperjs@2.1.0", "", { "dependencies": { "@cropper/elements": "^2.1.0", "@cropper/utils": "^2.1.0" } }, "sha512-SsSDqdVRl+mjbIBkGWlk1gCGcc+HzBqCbH5EQ+1tkAFUdxq2KUGukXF1RqhmvXrrdrX7PDwSUkWgXS7E36KvGQ=="], + "cross-spawn": ["cross-spawn@7.0.6", "", { "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", "which": "^2.0.1" } }, "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA=="], "css-select": ["css-select@5.2.2", "", { "dependencies": { "boolbase": "^1.0.0", "css-what": "^6.1.0", "domhandler": "^5.0.2", "domutils": "^3.0.1", "nth-check": "^2.0.1" } }, "sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw=="], diff --git a/db/schema.sql b/db/schema.sql index 695bdb0..a57fa50 100644 --- a/db/schema.sql +++ b/db/schema.sql @@ -1,4 +1,4 @@ -\restrict Ah1gzcmwaXniQw2dzIyVlrPF4EVIv28DgaOjh5TDOwpcDPd3dZKeX8QreYsxoVW +\restrict Dg0ksc8IIsh0chvkrHOQy7LtnwsmjF3WyModqIXmKLfbi99THWiNyWMb9U47Fk5 -- Dumped from database version 16.10 -- Dumped by pg_dump version 18.0 @@ -256,6 +256,28 @@ CREATE TABLE public.char_traits ( ); +-- +-- Name: character_avatars; Type: TABLE; Schema: public; Owner: - +-- + +CREATE TABLE public.character_avatars ( + id text NOT NULL, + character_id text NOT NULL, + upload_id text NOT NULL, + is_primary boolean DEFAULT false NOT NULL, + crop_x_percent real, + crop_y_percent real, + crop_width_percent real, + crop_height_percent real, + created_at timestamp without time zone DEFAULT CURRENT_TIMESTAMP NOT NULL, + updated_at timestamp without time zone DEFAULT CURRENT_TIMESTAMP NOT NULL, + CONSTRAINT character_avatars_crop_height_percent_check CHECK (((crop_height_percent IS NULL) OR ((crop_height_percent >= (0)::double precision) AND (crop_height_percent <= (1)::double precision)))), + CONSTRAINT character_avatars_crop_width_percent_check CHECK (((crop_width_percent IS NULL) OR ((crop_width_percent >= (0)::double precision) AND (crop_width_percent <= (1)::double precision)))), + CONSTRAINT character_avatars_crop_x_percent_check CHECK (((crop_x_percent IS NULL) OR ((crop_x_percent >= (0)::double precision) AND (crop_x_percent <= (1)::double precision)))), + CONSTRAINT character_avatars_crop_y_percent_check CHECK (((crop_y_percent IS NULL) OR ((crop_y_percent >= (0)::double precision) AND (crop_y_percent <= (1)::double precision)))) +); + + -- -- Name: characters; Type: TABLE; Schema: public; Owner: - -- @@ -271,7 +293,6 @@ CREATE TABLE public.characters ( created_at timestamp with time zone DEFAULT CURRENT_TIMESTAMP NOT NULL, updated_at timestamp with time zone DEFAULT CURRENT_TIMESTAMP NOT NULL, ruleset text DEFAULT 'srd51'::text NOT NULL, - avatar_id text, archived_at timestamp with time zone ); @@ -530,6 +551,22 @@ ALTER TABLE ONLY public.char_traits ADD CONSTRAINT char_traits_pkey PRIMARY KEY (id); +-- +-- Name: character_avatars character_avatars_character_id_upload_id_key; Type: CONSTRAINT; Schema: public; Owner: - +-- + +ALTER TABLE ONLY public.character_avatars + ADD CONSTRAINT character_avatars_character_id_upload_id_key UNIQUE (character_id, upload_id); + + +-- +-- Name: character_avatars character_avatars_pkey; Type: CONSTRAINT; Schema: public; Owner: - +-- + +ALTER TABLE ONLY public.character_avatars + ADD CONSTRAINT character_avatars_pkey PRIMARY KEY (id); + + -- -- Name: characters characters_pkey; Type: CONSTRAINT; Schema: public; Owner: - -- @@ -728,6 +765,20 @@ CREATE INDEX idx_char_spells_prepared_spell_id ON public.char_spells_prepared US CREATE INDEX idx_char_traits_char_id ON public.char_traits USING btree (character_id, created_at); +-- +-- Name: idx_character_avatars_character_id; Type: INDEX; Schema: public; Owner: - +-- + +CREATE INDEX idx_character_avatars_character_id ON public.character_avatars USING btree (character_id); + + +-- +-- Name: idx_character_avatars_is_primary; Type: INDEX; Schema: public; Owner: - +-- + +CREATE INDEX idx_character_avatars_is_primary ON public.character_avatars USING btree (character_id, is_primary) WHERE (is_primary = true); + + -- -- Name: idx_characters_user_id; Type: INDEX; Schema: public; Owner: - -- @@ -1037,11 +1088,19 @@ ALTER TABLE ONLY public.char_traits -- --- Name: characters characters_avatar_id_fkey; Type: FK CONSTRAINT; Schema: public; Owner: - +-- Name: character_avatars character_avatars_character_id_fkey; Type: FK CONSTRAINT; Schema: public; Owner: - -- -ALTER TABLE ONLY public.characters - ADD CONSTRAINT characters_avatar_id_fkey FOREIGN KEY (avatar_id) REFERENCES public.uploads(id); +ALTER TABLE ONLY public.character_avatars + ADD CONSTRAINT character_avatars_character_id_fkey FOREIGN KEY (character_id) REFERENCES public.characters(id) ON DELETE CASCADE; + + +-- +-- Name: character_avatars character_avatars_upload_id_fkey; Type: FK CONSTRAINT; Schema: public; Owner: - +-- + +ALTER TABLE ONLY public.character_avatars + ADD CONSTRAINT character_avatars_upload_id_fkey FOREIGN KEY (upload_id) REFERENCES public.uploads(id) ON DELETE CASCADE; -- @@ -1104,7 +1163,7 @@ ALTER TABLE ONLY public.items -- PostgreSQL database dump complete -- -\unrestrict Ah1gzcmwaXniQw2dzIyVlrPF4EVIv28DgaOjh5TDOwpcDPd3dZKeX8QreYsxoVW +\unrestrict Dg0ksc8IIsh0chvkrHOQy7LtnwsmjF3WyModqIXmKLfbi99THWiNyWMb9U47Fk5 -- @@ -1144,4 +1203,7 @@ INSERT INTO public.schema_migrations (version) VALUES ('20251030232843'), ('20251111071524'), ('20251111085621'), - ('20251111221748'); + ('20251111221748'), + ('20251112060352'), + ('20251112060400'), + ('20251112060500'); diff --git a/migrations/20251112060352_create_character_avatars.sql b/migrations/20251112060352_create_character_avatars.sql new file mode 100644 index 0000000..2a59c46 --- /dev/null +++ b/migrations/20251112060352_create_character_avatars.sql @@ -0,0 +1,22 @@ +-- migrate:up +CREATE TABLE character_avatars ( + id TEXT PRIMARY KEY, + character_id TEXT NOT NULL REFERENCES characters(id) ON DELETE CASCADE, + upload_id TEXT NOT NULL REFERENCES uploads(id) ON DELETE CASCADE, + is_primary BOOLEAN NOT NULL DEFAULT FALSE, + crop_x_percent REAL CHECK (crop_x_percent IS NULL OR (crop_x_percent >= 0 AND crop_x_percent <= 1)), + crop_y_percent REAL CHECK (crop_y_percent IS NULL OR (crop_y_percent >= 0 AND crop_y_percent <= 1)), + crop_width_percent REAL CHECK (crop_width_percent IS NULL OR (crop_width_percent >= 0 AND crop_width_percent <= 1)), + crop_height_percent REAL CHECK (crop_height_percent IS NULL OR (crop_height_percent >= 0 AND crop_height_percent <= 1)), + created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP, + updated_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP, + UNIQUE(character_id, upload_id) +); + +CREATE INDEX idx_character_avatars_character_id ON character_avatars(character_id); +CREATE INDEX idx_character_avatars_is_primary ON character_avatars(character_id, is_primary) WHERE is_primary = TRUE; + +-- migrate:down +DROP INDEX IF EXISTS idx_character_avatars_is_primary; +DROP INDEX IF EXISTS idx_character_avatars_character_id; +DROP TABLE IF EXISTS character_avatars; diff --git a/migrations/20251112060400_migrate_existing_avatars.sql b/migrations/20251112060400_migrate_existing_avatars.sql new file mode 100644 index 0000000..cc7f423 --- /dev/null +++ b/migrations/20251112060400_migrate_existing_avatars.sql @@ -0,0 +1,20 @@ +-- migrate:up +-- Migrate existing avatar_id from characters table to character_avatars table +-- Using md5 hash of character_id + timestamp to generate unique IDs (ULID-like) +INSERT INTO character_avatars (id, character_id, upload_id, is_primary, created_at, updated_at) +SELECT + SUBSTRING(MD5(id || EXTRACT(EPOCH FROM CURRENT_TIMESTAMP)::TEXT) FROM 1 FOR 26) as id, + id as character_id, + avatar_id as upload_id, + TRUE as is_primary, + CURRENT_TIMESTAMP as created_at, + CURRENT_TIMESTAMP as updated_at +FROM characters +WHERE avatar_id IS NOT NULL; + +-- migrate:down +-- Remove migrated avatars +DELETE FROM character_avatars +WHERE character_id IN ( + SELECT id FROM characters WHERE avatar_id IS NOT NULL +); diff --git a/migrations/20251112060500_remove_avatar_id_from_characters.sql b/migrations/20251112060500_remove_avatar_id_from_characters.sql new file mode 100644 index 0000000..e280ca8 --- /dev/null +++ b/migrations/20251112060500_remove_avatar_id_from_characters.sql @@ -0,0 +1,5 @@ +-- migrate:up +ALTER TABLE characters DROP COLUMN avatar_id; + +-- migrate:down +ALTER TABLE characters ADD COLUMN avatar_id TEXT REFERENCES uploads(id); diff --git a/package.json b/package.json index 563b1df..48e267f 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "type": "module", "private": true, "scripts": { - "postinstall": "mkdir -p static && cp node_modules/htmx.org/dist/htmx.min.js static/ && cp node_modules/htmx-ext-sse/sse.js static/htmx-ext-sse.js && cp node_modules/idiomorph/dist/idiomorph-ext.min.js static/idiomorph-ext.min.js" + "postinstall": "mkdir -p static && cp node_modules/htmx.org/dist/htmx.min.js static/ && cp node_modules/htmx-ext-sse/sse.js static/htmx-ext-sse.js && cp node_modules/idiomorph/dist/idiomorph-ext.min.js static/idiomorph-ext.min.js && cp node_modules/cropperjs/dist/cropper.min.js static/" }, "devDependencies": { "@biomejs/biome": "^2.2.6", @@ -37,6 +37,7 @@ "@types/marked": "^6.0.0", "ai": "^5.0.82", "clsx": "^2.1.1", + "cropperjs": "^2.1.0", "hono": "^4.9.6", "htmx-ext-sse": "^2.2.4", "htmx.org": "^2.0.8", diff --git a/src/components/AvatarCropper.tsx b/src/components/AvatarCropper.tsx new file mode 100644 index 0000000..c36d0db --- /dev/null +++ b/src/components/AvatarCropper.tsx @@ -0,0 +1,68 @@ +import { ModalContent } from "./ui/ModalContent" + +export interface AvatarCropperProps { + characterId: string + avatarId?: string + uploadUrl: string + existingCrop?: { + x: number + y: number + width: number + height: number + } | null + isNewUpload?: boolean +} + +export const AvatarCropper = ({ + characterId, + avatarId, + uploadUrl, + existingCrop, + isNewUpload = false, +}: AvatarCropperProps) => { + const action = avatarId + ? `/characters/${characterId}/avatars/${avatarId}/crop` + : `/characters/${characterId}/avatars` + + return ( + +
+ {/* Image container for Cropper.js */} +
+ Avatar to crop +
+ + {/* Form for submitting crop data */} +
+ {/* Hidden fields for crop percentages */} + + + + + + {/* For new uploads, include the upload_id */} + {isNewUpload && ( + + )} + + +
+
+ +
+ + +
+ + ) +} diff --git a/src/components/AvatarDisplay.tsx b/src/components/AvatarDisplay.tsx new file mode 100644 index 0000000..3181592 --- /dev/null +++ b/src/components/AvatarDisplay.tsx @@ -0,0 +1,95 @@ +import type { CropPercents } from "@src/db/character_avatars" +import type { ComputedCharacter } from "@src/services/computeCharacter" + +export interface AvatarDisplayProps { + // Clickable mode: pass character to render as button with gallery link + character?: ComputedCharacter + + // Display-only mode: pass these directly + uploadUrl?: string + cropPercents?: CropPercents | null + alt?: string + className?: string +} + +/** + * Calculate CSS object-position from crop percentages + * The object-position centers the crop area within the visible container + */ +function getCropStyle(cropPercents?: CropPercents | null) { + if (!cropPercents) { + return { + objectFit: "cover" as const, + objectPosition: "50% 50%", + } + } + + // Calculate the center point of the crop area + const centerX = (cropPercents.crop_x_percent + cropPercents.crop_width_percent / 2) * 100 + const centerY = (cropPercents.crop_y_percent + cropPercents.crop_height_percent / 2) * 100 + + return { + objectFit: "cover" as const, + objectPosition: `${centerX}% ${centerY}%`, + } +} + +/** + * Display an avatar image with optional soft-crop using CSS + * Supports two modes: + * - Clickable: Pass character prop to render as button with gallery modal trigger + * - Display-only: Pass uploadUrl/cropPercents to render just the image + */ +export const AvatarDisplay = ({ + character, + uploadUrl, + cropPercents, + alt = "Avatar", + className = "", +}: AvatarDisplayProps) => { + // Clickable mode: render as button with modal trigger and hover effects + if (character) { + const imgUrl = character.avatar_id ? `/uploads/${character.avatar_id}` : "/static/placeholder.png" + const cropStyle = getCropStyle(character.avatar_crop) + const imgAlt = `${character.name}'s avatar` + + return ( + + ) + } + + // Display-only mode: render just the image + const cropStyle = getCropStyle(cropPercents) + const imgUrl = uploadUrl || "/static/placeholder.png" + + return ( +
+ {alt} +
+ ) +} diff --git a/src/components/AvatarGallery.tsx b/src/components/AvatarGallery.tsx new file mode 100644 index 0000000..998e9b1 --- /dev/null +++ b/src/components/AvatarGallery.tsx @@ -0,0 +1,96 @@ +import type { CharacterAvatar } from "@src/db/character_avatars" +import { AvatarDisplay } from "./AvatarDisplay" +import { ModalContent } from "./ui/ModalContent" + +export interface AvatarGalleryProps { + characterId: string + avatars: Array +} + +export const AvatarGallery = ({ characterId, avatars }: AvatarGalleryProps) => { + const hasAvatars = avatars.length > 0 + + return ( + +
+ {!hasAvatars && ( +
+

No avatars uploaded yet.

+
+ )} + + {hasAvatars && ( +
+ {avatars.map((avatar) => ( +
+
+
+ {/* Avatar preview (show with crop) */} + + + {/* Primary badge/button */} +
+ {avatar.is_primary ? ( +
+ Primary +
+ ) : ( + + )} + +
+
+
+
+ ))} +
+ )} +
+ +
+ + +
+ + ) +} diff --git a/src/components/CharacterInfo.tsx b/src/components/CharacterInfo.tsx index 33f3bbd..834ec96 100644 --- a/src/components/CharacterInfo.tsx +++ b/src/components/CharacterInfo.tsx @@ -1,6 +1,7 @@ import { getEffectTooltip, hasEffect } from "@src/lib/effectTooltip" import type { ComputedCharacter } from "@src/services/computeCharacter" import type { EquippedComputedItem } from "@src/services/computeCharacterItems" +import { AvatarDisplay } from "./AvatarDisplay" import { HitDiceDisplay } from "./ui/HitDiceDisplay" import { HitPointsBar } from "./ui/HitPointsBar" import { LabeledValue } from "./ui/LabeledValue" @@ -89,34 +90,7 @@ export const CharacterInfo = ({ character, swapOob }: CharacterInfoProps) => {
- +

{character.name}

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx index 88e969e..af83242 100644 --- a/src/components/Layout.tsx +++ b/src/components/Layout.tsx @@ -84,6 +84,7 @@ export const Layout = ({ + @@ -130,6 +131,7 @@ export const Layout = ({ /> + ) diff --git a/src/components/UpdateAvatarForm.tsx b/src/components/UpdateAvatarForm.tsx index 05b6417..bfe6ec2 100644 --- a/src/components/UpdateAvatarForm.tsx +++ b/src/components/UpdateAvatarForm.tsx @@ -6,23 +6,9 @@ export interface UpdateAvatarFormProps { errors?: Record } -export const UpdateAvatarForm = ({ character, errors }: UpdateAvatarFormProps) => ( - +export const UpdateAvatarForm = ({ errors }: UpdateAvatarFormProps) => ( +
- {/* Current Avatar Preview */} -
-
- {`${character.name}'s -
-
-
diff --git a/src/components/AvatarDisplay.tsx b/src/components/AvatarDisplay.tsx index 3181592..0b27183 100644 --- a/src/components/AvatarDisplay.tsx +++ b/src/components/AvatarDisplay.tsx @@ -1,14 +1,10 @@ import type { CropPercents } from "@src/db/character_avatars" -import type { ComputedCharacter } from "@src/services/computeCharacter" +import type { CharacterAvatarWithUrl, ComputedCharacter } from "@src/services/computeCharacter" export interface AvatarDisplayProps { - // Clickable mode: pass character to render as button with gallery link - character?: ComputedCharacter - - // Display-only mode: pass these directly - uploadUrl?: string - cropPercents?: CropPercents | null - alt?: string + character: ComputedCharacter + avatarIndex?: number + mode: "clickable-gallery" | "clickable-lightbox" | "display-only" className?: string } @@ -36,23 +32,46 @@ function getCropStyle(cropPercents?: CropPercents | null) { /** * Display an avatar image with optional soft-crop using CSS - * Supports two modes: - * - Clickable: Pass character prop to render as button with gallery modal trigger - * - Display-only: Pass uploadUrl/cropPercents to render just the image + * Supports three modes: + * - clickable-gallery: Button that opens avatar gallery modal + * - clickable-lightbox: Button that opens lightbox at specific avatar index + * - display-only: Just renders the image */ export const AvatarDisplay = ({ character, - uploadUrl, - cropPercents, - alt = "Avatar", + avatarIndex, + mode, className = "", }: AvatarDisplayProps) => { - // Clickable mode: render as button with modal trigger and hover effects - if (character) { - const imgUrl = character.avatar_id ? `/uploads/${character.avatar_id}` : "/static/placeholder.png" - const cropStyle = getCropStyle(character.avatar_crop) - const imgAlt = `${character.name}'s avatar` + // For clickable-gallery mode, use primary avatar + // For other modes, use specified index or primary + let avatar: CharacterAvatarWithUrl | undefined + if (mode === "clickable-gallery") { + avatar = character.avatars.find((a) => a.is_primary) || character.avatars[0] + } else { + const index = avatarIndex ?? 0 + avatar = character.avatars[index] + } + + const imgUrl = avatar?.uploadUrl || "/static/placeholder.png" + const cropPercents = + avatar && + avatar.crop_x_percent !== null && + avatar.crop_y_percent !== null && + avatar.crop_width_percent !== null && + avatar.crop_height_percent !== null + ? { + crop_x_percent: avatar.crop_x_percent, + crop_y_percent: avatar.crop_y_percent, + crop_width_percent: avatar.crop_width_percent, + crop_height_percent: avatar.crop_height_percent, + } + : null + const cropStyle = getCropStyle(cropPercents) + const imgAlt = `${character.name}'s avatar` + // Clickable-gallery mode: Opens gallery modal + if (mode === "clickable-gallery") { return ( + ) + } + // Display-only mode: Just render the image return (
{alt} diff --git a/src/components/AvatarGallery.tsx b/src/components/AvatarGallery.tsx index 998e9b1..68364de 100644 --- a/src/components/AvatarGallery.tsx +++ b/src/components/AvatarGallery.tsx @@ -1,14 +1,13 @@ -import type { CharacterAvatar } from "@src/db/character_avatars" +import type { ComputedCharacter } from "@src/services/computeCharacter" import { AvatarDisplay } from "./AvatarDisplay" import { ModalContent } from "./ui/ModalContent" export interface AvatarGalleryProps { - characterId: string - avatars: Array + character: ComputedCharacter } -export const AvatarGallery = ({ characterId, avatars }: AvatarGalleryProps) => { - const hasAvatars = avatars.length > 0 +export const AvatarGallery = ({ character }: AvatarGalleryProps) => { + const hasAvatars = character.avatars.length > 0 return ( @@ -21,28 +20,21 @@ export const AvatarGallery = ({ characterId, avatars }: AvatarGalleryProps) => { {hasAvatars && (
- {avatars.map((avatar) => ( + {character.avatars.map((avatar, index) => (
- {/* Avatar preview (show with crop) */} - + {/* Avatar preview - click to open lightbox */} + - {/* Primary badge/button */} -
+ {/* Action buttons */} +
+ {/* Primary button/badge */} {avatar.is_primary ? (
Primary @@ -51,17 +43,30 @@ export const AvatarGallery = ({ characterId, avatars }: AvatarGalleryProps) => { )} + + {/* Crop button */} + + + {/* Delete button */} + + + )} +
+ +
+ + +
+ + ) +} diff --git a/src/components/CharacterInfo.tsx b/src/components/CharacterInfo.tsx index 834ec96..8b2744a 100644 --- a/src/components/CharacterInfo.tsx +++ b/src/components/CharacterInfo.tsx @@ -90,7 +90,7 @@ export const CharacterInfo = ({ character, swapOob }: CharacterInfoProps) => {
- +

{character.name}

diff --git a/src/routes/character.tsx b/src/routes/character.tsx index 93368b8..1c1e52d 100644 --- a/src/routes/character.tsx +++ b/src/routes/character.tsx @@ -2,6 +2,7 @@ import { AbilitiesEditForm } from "@src/components/AbilitiesEditForm" import { AbilityHistory } from "@src/components/AbilityHistory" import { AvatarCropper } from "@src/components/AvatarCropper" import { AvatarGallery } from "@src/components/AvatarGallery" +import { AvatarLightbox } from "@src/components/AvatarLightbox" import { CastSpellForm } from "@src/components/CastSpellForm" import { Character } from "@src/components/Character" import { CharacterImport } from "@src/components/CharacterImport" @@ -1133,13 +1134,25 @@ characterRoutes.get("/characters/:id/avatars", async (c) => { const authResult = await authorizeCharacter(c, characterId) if (!authResult.allowed) return handleUnallowed(c, authResult.reason) - const avatars = await CharacterAvatars.findByCharacterId(getDb(c), characterId) - const avatarsWithUrls = avatars.map((avatar) => ({ - ...avatar, - uploadUrl: `/uploads/${avatar.upload_id}`, - })) + const char = (await computeCharacter(getDb(c), characterId))! + return c.html() +}) + +// GET /characters/:id/avatars/lightbox - Show avatar lightbox at specific index +characterRoutes.get("/characters/:id/avatars/lightbox", async (c) => { + const characterId = c.req.param("id") + const indexParam = c.req.query("index") + const currentIndex = indexParam ? Number.parseInt(indexParam, 10) : 0 + + const authResult = await authorizeCharacter(c, characterId) + if (!authResult.allowed) return handleUnallowed(c, authResult.reason) - return c.html() + const char = (await computeCharacter(getDb(c), characterId))! + + // Validate index is in bounds + const validIndex = currentIndex >= 0 && currentIndex < char.avatars.length ? currentIndex : 0 + + return c.html() }) // POST /characters/:id/avatars - Create new avatar with optional crop @@ -1271,17 +1284,10 @@ characterRoutes.post("/characters/:id/avatars/:avatarId/set-primary", async (c) const updatedChar = (await computeCharacter(getDb(c), characterId))! - // Get updated avatars for the gallery - const avatars = await CharacterAvatars.findByCharacterId(getDb(c), characterId) - const avatarsWithUrls = avatars.map((a) => ({ - ...a, - uploadUrl: `/uploads/${a.upload_id}`, - })) - return c.html( <> - + ) }) @@ -1316,13 +1322,8 @@ characterRoutes.delete("/characters/:id/avatars/:avatarId", async (c) => { } // Return updated gallery - const avatars = await CharacterAvatars.findByCharacterId(getDb(c), characterId) - const avatarsWithUrls = avatars.map((a) => ({ - ...a, - uploadUrl: `/uploads/${a.upload_id}`, - })) - - return c.html() + const updatedChar = (await computeCharacter(getDb(c), characterId))! + return c.html() }) characterRoutes.get("/characters/:id/history/:field", async (c) => { diff --git a/src/services/computeCharacter.ts b/src/services/computeCharacter.ts index 5d3ec0c..7244ae6 100644 --- a/src/services/computeCharacter.ts +++ b/src/services/computeCharacter.ts @@ -6,8 +6,7 @@ import { findByCharacterId as getAllLevels, getCurrentLevels } from "@src/db/cha import { currentByCharacterId as getCurrentSkills } from "@src/db/char_skills" import { findByCharacterId as findSpellSlotChanges } from "@src/db/char_spell_slots" import { type CharTrait, findByCharacterId as findTraits } from "@src/db/char_traits" -import type { CropPercents } from "@src/db/character_avatars" -import { findPrimaryByCharacterId as getPrimaryAvatar } from "@src/db/character_avatars" +import { type CharacterAvatar, findByCharacterId as findAvatars } from "@src/db/character_avatars" import { type Character, findById } from "@src/db/characters" import { Abilities, @@ -56,6 +55,10 @@ export interface ItemEffectInfo { effectDescription: string } +export interface CharacterAvatarWithUrl extends CharacterAvatar { + uploadUrl: string +} + export interface ComputedCharacter extends Character { classes: CharacterClass[] totalLevel: number @@ -79,8 +82,7 @@ export interface ComputedCharacter extends Character { coins: CurrentCoins | null equippedItems: EquippedComputedItem[] affectedAttributes: Record - avatar_id: string | null - avatar_crop: CropPercents | null + avatars: CharacterAvatarWithUrl[] } // Calculate modifier and saving throw for each ability const calculateModifier = (score: number) => Math.floor((score - 10) / 2) @@ -441,8 +443,12 @@ export async function computeCharacter( } } - // Get primary avatar - const primaryAvatar = await getPrimaryAvatar(db, characterId) + // Get all avatars with upload URLs + const avatars = await findAvatars(db, characterId) + const avatarsWithUrls: CharacterAvatarWithUrl[] = avatars.map((avatar) => ({ + ...avatar, + uploadUrl: `/uploads/${avatar.upload_id}`, + })) const char = { ...character, @@ -468,20 +474,7 @@ export async function computeCharacter( coins: currentCoins, equippedItems, affectedAttributes, - avatar_id: primaryAvatar?.upload_id ?? null, - avatar_crop: - primaryAvatar && - primaryAvatar.crop_x_percent !== null && - primaryAvatar.crop_y_percent !== null && - primaryAvatar.crop_width_percent !== null && - primaryAvatar.crop_height_percent !== null - ? { - crop_x_percent: primaryAvatar.crop_x_percent, - crop_y_percent: primaryAvatar.crop_y_percent, - crop_width_percent: primaryAvatar.crop_width_percent, - crop_height_percent: primaryAvatar.crop_height_percent, - } - : null, + avatars: avatarsWithUrls, } return char From f9eb5f9fe1b5cb944c13eb4d5fc3812f5220edc2 Mon Sep 17 00:00:00 2001 From: Igor Serebryany Date: Wed, 12 Nov 2025 18:04:32 -0800 Subject: [PATCH 6/9] feat: correct cropping logic we actually manage to crop the images and save the cropped box details --- src/components/AvatarCropper.tsx | 58 +++++++-- src/components/Layout.tsx | 1 - static/avatar-cropper.js | 199 ++++++++++++++++++------------- 3 files changed, 163 insertions(+), 95 deletions(-) diff --git a/src/components/AvatarCropper.tsx b/src/components/AvatarCropper.tsx index e919284..5f5e56f 100644 --- a/src/components/AvatarCropper.tsx +++ b/src/components/AvatarCropper.tsx @@ -27,15 +27,34 @@ export const AvatarCropper = ({ return (
- {/* Image container for Cropper.js */} -
- Avatar to crop + {/* Cropper.js v2 web components */} +
+ + + + + + + + + + + + + + + + + + +
{/* Form for submitting crop data */} @@ -56,13 +75,28 @@ export const AvatarCropper = ({
- -
+ + ) } diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx index af83242..d973a81 100644 --- a/src/components/Layout.tsx +++ b/src/components/Layout.tsx @@ -131,7 +131,6 @@ export const Layout = ({ /> - ) diff --git a/static/avatar-cropper.js b/static/avatar-cropper.js index 31c3c9c..ccfebee 100644 --- a/static/avatar-cropper.js +++ b/static/avatar-cropper.js @@ -1,90 +1,125 @@ -// Avatar Cropper - Initialize Cropper.js when cropper image is present -(function() { - // Store cropper instance - let cropper = null; - - // Initialize cropper after HTMX swaps content - document.addEventListener('htmx:afterSwap', function(event) { - const cropperImage = document.getElementById('cropperImage'); - if (!cropperImage) return; - - // Clean up existing cropper if any - if (cropper) { - cropper.destroy(); - cropper = null; +function prepareCropperImage() { + const cropperImage = document.querySelector('cropper-image'); + if (!cropperImage) { + console.warn(`No ${selector} element found`); + return; + } + + cropperImage.$ready((img) => { + // resize canvas to be the height of the rendered image (max 500px) + const cropperCanvas = document.querySelector('cropper-canvas'); + if (!cropperCanvas) { + console.warn('No cropper canvas found'); + return; } - // Parse existing crop data if available - const existingCropData = cropperImage.dataset.existingCrop; - let existingCrop = null; + const rect = img.getBoundingClientRect(); + const renderedH = rect.height; + if (renderedH < 500) { + cropperCanvas.style.height = `${renderedH}px`; - if (existingCropData && existingCropData !== '' && existingCropData !== 'null') { - try { - existingCrop = JSON.parse(existingCropData); - } catch (e) { - console.error('Failed to parse existing crop data:', e); - } + const barWidth = (500 - renderedH) / 2; + cropperImage.$move(0, -barWidth); + } + + const cropForm = document.getElementById('cropForm'); + if (!cropForm) { + console.warn('No crop form found'); + return; + } + + + function setCropFormFields({ x, y, width, height }) { + const rect = img.getBoundingClientRect(); + const renderedH = rect.height; + const renderedW = rect.width; + + // canvas dimensions + const canvasW = cropperCanvas.getBoundingClientRect().width; + + const cropX = cropForm.querySelector('input[name="crop_x_percent"]'); + const cropY = cropForm.querySelector('input[name="crop_y_percent"]'); + const cropW = cropForm.querySelector('input[name="crop_width_percent"]'); + const cropH = cropForm.querySelector('input[name="crop_height_percent"]'); + + const yPercent = y / renderedH; + cropY.value = yPercent; + + const hPercent = height / renderedH; + cropH.value = hPercent; + + const canvasExtraV = (canvasW - renderedW) / 2; + const xPercent = (x - canvasExtraV) / renderedW; + cropX.value = xPercent; + + const wPercent = width / renderedW; + cropW.value = wPercent; } - // Initialize Cropper.js - cropper = new Cropper(cropperImage, { - aspectRatio: 1, - viewMode: 1, - autoCropArea: 1, - ready() { - // If we have existing crop data (as percentages), set it - if (existingCrop) { - const imageData = cropper.getImageData(); - - // Convert percentages back to pixels - const cropData = { - x: existingCrop.x * imageData.naturalWidth, - y: existingCrop.y * imageData.naturalHeight, - width: existingCrop.width * imageData.naturalWidth, - height: existingCrop.height * imageData.naturalHeight, - }; - - cropper.setData(cropData); - } - }, - }); - - // Attach save handler to button - const saveCropBtn = document.getElementById('saveCropBtn'); - if (saveCropBtn) { - saveCropBtn.addEventListener('click', function() { - if (!cropper) { - console.error('No cropper instance found'); - return; - } - - const cropData = cropper.getData(); - const imageData = cropper.getImageData(); - - // Convert pixel coordinates to percentages (0-1) - const xPercent = cropData.x / imageData.naturalWidth; - const yPercent = cropData.y / imageData.naturalHeight; - const widthPercent = cropData.width / imageData.naturalWidth; - const heightPercent = cropData.height / imageData.naturalHeight; - - // Populate hidden form fields - document.getElementById('crop_x_percent').value = xPercent; - document.getElementById('crop_y_percent').value = yPercent; - document.getElementById('crop_width_percent').value = widthPercent; - document.getElementById('crop_height_percent').value = heightPercent; - - // Submit the form via htmx - const form = document.getElementById('cropForm'); - htmx.trigger(form, 'submit'); - }); + function onCropperSelectionChange(event) { + const detail = event.detail; + + // prevent negative coordinates + if (detail.x < 0 || detail.y < 0) { + event.preventDefault(); + } + + // image dimensions + const rect = img.getBoundingClientRect(); + const renderedW = rect.width; + + // canvas dimensions + const canvasBox = cropperCanvas.getBoundingClientRect(); + const [canvasW, canvasH] = [canvasBox.width, canvasBox.height]; + + // don't allow selection to exceed image bounds + // we know the height of the canvas is the same as the image height + if (detail.y + detail.height > canvasH) { + event.preventDefault(); + } + + // we might have extra space on the sides if the image is narrow + const canvasExtraV = (canvasW - renderedW) / 2 + if (detail.x < canvasExtraV || detail.x + detail.width > canvasW - canvasExtraV) { + event.preventDefault(); + } + + // update the hidden form fields + setCropFormFields(event.detail); } - }); - // Clean up when modal is hidden - document.addEventListener('hidden.bs.modal', function() { - if (cropper) { - cropper.destroy(); - cropper = null; + // add the selection change listener + const cropperSelection = document.querySelector('cropper-selection'); + if (cropperSelection) { + // image dimensions + const rect = img.getBoundingClientRect(); + const renderedW = rect.width; + const renderedH = rect.height; + + const { existingx, existingy, existingw, existingh } = cropperSelection.dataset; + + // if existing crop data is present, set initial selection + if (existingx && existingy && existingw && existingh) { + // set initial selection based on existing data + const x = parseFloat(existingx) * renderedW; + const y = parseFloat(existingy) * renderedH; + const width = parseFloat(existingw) * renderedW; + const height = parseFloat(existingh) * renderedH; + cropperSelection.$change(x, y, width, height); + setCropFormFields({ x, y, width, height }); + + // otherwise, center a square selection + } else { + const sideLength = Math.min(renderedW, renderedH) * 0.8; + const x = (renderedW - sideLength) / 2; + const y = (renderedH - sideLength) / 2; + cropperSelection.$change(x, y, sideLength, sideLength); + setCropFormFields({ x, y, width: sideLength, height: sideLength }); + } + + cropperSelection.addEventListener('change', onCropperSelectionChange); } - }); -})(); + }) +} + +prepareCropperImage(); From 3df9f6162d2444b9f1c3c72fa2b28f8c64a582f7 Mon Sep 17 00:00:00 2001 From: Igor Serebryany Date: Thu, 13 Nov 2025 14:05:06 -0800 Subject: [PATCH 7/9] feat: correct avatar display post-scaling we use CSS to soft-crop the uploaded images --- src/components/AvatarCropper.tsx | 11 +++-- src/components/AvatarDisplay.tsx | 70 +++++++++++++++++++------------- src/routes/character.test.ts | 9 ++-- src/routes/character.tsx | 16 ++++++-- src/test/factories/character.ts | 1 - static/avatar-cropper.js | 14 ++++--- 6 files changed, 77 insertions(+), 44 deletions(-) diff --git a/src/components/AvatarCropper.tsx b/src/components/AvatarCropper.tsx index 5f5e56f..8e3979f 100644 --- a/src/components/AvatarCropper.tsx +++ b/src/components/AvatarCropper.tsx @@ -36,15 +36,20 @@ export const AvatarCropper = ({ + > - + diff --git a/src/components/AvatarDisplay.tsx b/src/components/AvatarDisplay.tsx index 0b27183..d82fa8a 100644 --- a/src/components/AvatarDisplay.tsx +++ b/src/components/AvatarDisplay.tsx @@ -9,25 +9,45 @@ export interface AvatarDisplayProps { } /** - * Calculate CSS object-position from crop percentages - * The object-position centers the crop area within the visible container + * Generate CSS custom properties for crop transform + * Uses translate + scale to display only the cropped region */ function getCropStyle(cropPercents?: CropPercents | null) { if (!cropPercents) { + // No crop - just center the image return { - objectFit: "cover" as const, - objectPosition: "50% 50%", + containerStyle: "", + imageStyle: "width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;", } } - // Calculate the center point of the crop area - const centerX = (cropPercents.crop_x_percent + cropPercents.crop_width_percent / 2) * 100 - const centerY = (cropPercents.crop_y_percent + cropPercents.crop_height_percent / 2) * 100 + // CSS custom properties for the transform + const containerStyle = ` + --crop-x: ${cropPercents.crop_x_percent}; + --crop-y: ${cropPercents.crop_y_percent}; + --crop-w: ${cropPercents.crop_width_percent}; + --crop-h: ${cropPercents.crop_height_percent}; + `.trim() - return { - objectFit: "cover" as const, - objectPosition: `${centerX}% ${centerY}%`, - } + // Transform to show only the cropped region + // Scale up the image so crop region fills container, then translate to position it + // translate percentages are relative to the image's own dimensions + const imageStyle = ` + width: 100%; + height: auto; + position: absolute; + top: 0; + left: 0; + transform-origin: top left; + transform: + translate( + calc(-1 * var(--crop-x) / var(--crop-w) * 100%), + calc(-1 * var(--crop-y) / var(--crop-w) * 100%) + ) + scale(calc(1 / var(--crop-w))); + `.trim() + + return { containerStyle, imageStyle } } /** @@ -82,16 +102,17 @@ export const AvatarDisplay = ({ hx-swap="innerHTML" data-bs-toggle="modal" data-bs-target="#editModal" + style={cropStyle.containerStyle} > {imgAlt} ) @@ -107,13 +128,11 @@ export const AvatarDisplay = ({ hx-target="#editModalContent" hx-swap="innerHTML" > -
- {imgAlt} +
+ {imgAlt}
) @@ -121,13 +140,8 @@ export const AvatarDisplay = ({ // Display-only mode: Just render the image return ( -
- {imgAlt} +
+ {imgAlt}
) } diff --git a/src/routes/character.test.ts b/src/routes/character.test.ts index bc3bdd8..5251901 100644 --- a/src/routes/character.test.ts +++ b/src/routes/character.test.ts @@ -211,11 +211,14 @@ describe("POST /characters/:id/avatar", () => { expect(html).toContain("hx-swap-oob") expect(html).toContain("character-info") - // Verify database was updated + // Verify avatar was created in character_avatars table const result = await testCtx.db` - SELECT avatar_id FROM characters WHERE id = ${character.id} + SELECT upload_id, is_primary FROM character_avatars + WHERE character_id = ${character.id} ` - expect(result[0].avatar_id).toBe(upload.id) + expect(result.length).toBe(1) + expect(result[0].upload_id).toBe(upload.id) + expect(result[0].is_primary).toBe(true) }) }) diff --git a/src/routes/character.tsx b/src/routes/character.tsx index 1c1e52d..5149804 100644 --- a/src/routes/character.tsx +++ b/src/routes/character.tsx @@ -1198,8 +1198,12 @@ characterRoutes.post("/characters/:id/avatars", async (c) => { } const updatedChar = (await computeCharacter(getDb(c), characterId))! - c.header("HX-Trigger", "closeEditModal") - return c.html() + return c.html( + <> + + + + ) }) // GET /characters/:id/avatars/:avatarId/crop-editor - Show cropper for existing avatar @@ -1263,8 +1267,12 @@ characterRoutes.post("/characters/:id/avatars/:avatarId/crop", async (c) => { await CharacterAvatars.updateCrop(getDb(c), avatarId, cropData) const updatedChar = (await computeCharacter(getDb(c), characterId))! - c.header("HX-Trigger", "closeEditModal") - return c.html() + return c.html( + <> + + + + ) }) // POST /characters/:id/avatars/:avatarId/set-primary - Set avatar as primary diff --git a/src/test/factories/character.ts b/src/test/factories/character.ts index ae315c3..dbdf061 100644 --- a/src/test/factories/character.ts +++ b/src/test/factories/character.ts @@ -67,7 +67,6 @@ const factory = Factory.define(({ params }) = alignment: params.alignment === undefined ? faker.helpers.arrayElement(alignments) : params.alignment, ruleset: params.ruleset ?? SRD51_ID, - avatar_id: null, archived_at: null, created_at: new Date(), updated_at: new Date(), diff --git a/static/avatar-cropper.js b/static/avatar-cropper.js index ccfebee..c444ce4 100644 --- a/static/avatar-cropper.js +++ b/static/avatar-cropper.js @@ -1,7 +1,7 @@ function prepareCropperImage() { const cropperImage = document.querySelector('cropper-image'); if (!cropperImage) { - console.warn(`No ${selector} element found`); + console.warn(`No cropper-image element found`); return; } @@ -48,8 +48,8 @@ function prepareCropperImage() { const hPercent = height / renderedH; cropH.value = hPercent; - const canvasExtraV = (canvasW - renderedW) / 2; - const xPercent = (x - canvasExtraV) / renderedW; + const canvasExtraW = (canvasW - renderedW) / 2; + const xPercent = (x - canvasExtraW) / renderedW; cropX.value = xPercent; const wPercent = width / renderedW; @@ -100,8 +100,12 @@ function prepareCropperImage() { // if existing crop data is present, set initial selection if (existingx && existingy && existingw && existingh) { - // set initial selection based on existing data - const x = parseFloat(existingx) * renderedW; + // Calculate canvas padding for narrow images + const canvasW = cropperCanvas.getBoundingClientRect().width; + const canvasExtraW = (canvasW - renderedW) / 2; + + // Convert percentages to canvas pixels (add padding to x) + const x = parseFloat(existingx) * renderedW + canvasExtraW; const y = parseFloat(existingy) * renderedH; const width = parseFloat(existingw) * renderedW; const height = parseFloat(existingh) * renderedH; From 75e0624a3e02a6a55de6e28e5e08e29fe7b282ff Mon Sep 17 00:00:00 2001 From: Igor Serebryany Date: Thu, 13 Nov 2025 14:27:11 -0800 Subject: [PATCH 8/9] refactor: only a single avatar upload endpoint --- ...ateAvatarForm.tsx => UploadAvatarForm.tsx} | 6 +- src/routes/character.test.ts | 17 +-- src/routes/character.tsx | 104 +++++++++--------- static/avatar-cropper.js | 10 +- static/character.js | 11 +- 5 files changed, 70 insertions(+), 78 deletions(-) rename src/components/{UpdateAvatarForm.tsx => UploadAvatarForm.tsx} (90%) diff --git a/src/components/UpdateAvatarForm.tsx b/src/components/UploadAvatarForm.tsx similarity index 90% rename from src/components/UpdateAvatarForm.tsx rename to src/components/UploadAvatarForm.tsx index bfe6ec2..6ff36de 100644 --- a/src/components/UpdateAvatarForm.tsx +++ b/src/components/UploadAvatarForm.tsx @@ -1,12 +1,12 @@ import type { Character } from "@src/db/characters" import { ModalContent } from "./ui/ModalContent" -export interface UpdateAvatarFormProps { +export interface UploadAvatarFormProps { character: Character errors?: Record } -export const UpdateAvatarForm = ({ errors }: UpdateAvatarFormProps) => ( +export const UploadAvatarForm = ({ character, errors }: UploadAvatarFormProps) => (
@@ -55,7 +55,7 @@ export const UpdateAvatarForm = ({ errors }: UpdateAvatarFormProps) => ( type="button" class="btn btn-primary" id="uploadAvatarBtn" - onclick="handleAvatarUpload()" + onclick={`handleAvatarUpload('${character.id}')`} > Upload diff --git a/src/routes/character.test.ts b/src/routes/character.test.ts index 5251901..95fb1a6 100644 --- a/src/routes/character.test.ts +++ b/src/routes/character.test.ts @@ -147,12 +147,12 @@ describe("GET /characters", () => { }) }) -describe("POST /characters/:id/avatar", () => { +describe("POST /characters/:id/avatars", () => { const testCtx = useTestApp() describe("when user is not authenticated", () => { test("returns 401", async () => { - const response = await makeRequest(testCtx.app, "/characters/test-id/avatar", { + const response = await makeRequest(testCtx.app, "/characters/test-id/avatars", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ upload_id: "test-upload" }), @@ -194,11 +194,11 @@ describe("POST /characters/:id/avatar", () => { ` }) - test("sets the character avatar", async () => { + test("creates avatar and returns gallery", async () => { const formData = new FormData() formData.append("upload_id", upload.id) - const response = await makeRequest(testCtx.app, `/characters/${character.id}/avatar`, { + const response = await makeRequest(testCtx.app, `/characters/${character.id}/avatars`, { user, method: "POST", body: formData, @@ -206,10 +206,11 @@ describe("POST /characters/:id/avatar", () => { expect(response.status).toBe(200) - // Should return HTML with OOB swap + // Should return gallery view and character info OOB swap const html = await response.text() expect(html).toContain("hx-swap-oob") expect(html).toContain("character-info") + expect(html).toContain("Avatar Gallery") // Gallery title // Verify avatar was created in character_avatars table const result = await testCtx.db` @@ -237,7 +238,7 @@ describe("POST /characters/:id/avatar", () => { const formData = new FormData() formData.append("upload_id", upload.id) - const response = await makeRequest(testCtx.app, `/characters/${character.id}/avatar`, { + const response = await makeRequest(testCtx.app, `/characters/${character.id}/avatars`, { user, method: "POST", body: formData, @@ -274,7 +275,7 @@ describe("POST /characters/:id/avatar", () => { const formData = new FormData() formData.append("upload_id", upload.id) - const response = await makeRequest(testCtx.app, `/characters/${character.id}/avatar`, { + const response = await makeRequest(testCtx.app, `/characters/${character.id}/avatars`, { user, method: "POST", body: formData, @@ -290,7 +291,7 @@ describe("POST /characters/:id/avatar", () => { test("returns error in modal", async () => { const formData = new FormData() - const response = await makeRequest(testCtx.app, `/characters/${character.id}/avatar`, { + const response = await makeRequest(testCtx.app, `/characters/${character.id}/avatars`, { user, method: "POST", body: formData, diff --git a/src/routes/character.tsx b/src/routes/character.tsx index 5149804..bc01ca3 100644 --- a/src/routes/character.tsx +++ b/src/routes/character.tsx @@ -44,7 +44,7 @@ import { SpellSlotsEditForm } from "@src/components/SpellSlotsEditForm" import { SpellSlotsHistory } from "@src/components/SpellSlotsHistory" import { TraitEditForm } from "@src/components/TraitEditForm" import { TraitHistory } from "@src/components/TraitHistory" -import { UpdateAvatarForm } from "@src/components/UpdateAvatarForm" +import { UploadAvatarForm } from "@src/components/UploadAvatarForm" import { ModalContent } from "@src/components/ui/ModalContent" import { getDb } from "@src/db" import { findByCharacterId as findAbilityChanges } from "@src/db/char_abilities" @@ -92,13 +92,13 @@ import { saveNotes } from "@src/services/saveNotes" import { shortRest } from "@src/services/shortRest" import { unarchiveCharacter } from "@src/services/unarchiveCharacter" import { updateAbilities } from "@src/services/updateAbilities" -import { updateAvatar } from "@src/services/updateAvatar" import { updateCoins } from "@src/services/updateCoins" import { updateHitDice } from "@src/services/updateHitDice" import { updateHitPoints } from "@src/services/updateHitPoints" import { updateItem } from "@src/services/updateItem" import { updateSkills } from "@src/services/updateSkills" import { updateSpellSlots } from "@src/services/updateSpellSlots" +import { validateUploadForUse } from "@src/services/uploads" import { Hono } from "hono" export const characterRoutes = new Hono() @@ -1011,7 +1011,7 @@ characterRoutes.get("/characters/:id/edit/:field", async (c) => { } if (field === "avatar") { - return c.html() + return c.html() } if (field === "abilities") { @@ -1107,26 +1107,6 @@ characterRoutes.post("/characters/:id/edit/coins", async (c) => { return c.html() }) -// POST /characters/:id/avatar - Set character avatar -characterRoutes.post("/characters/:id/avatar", async (c) => { - const characterId = c.req.param("id") - const body = (await c.req.parseBody()) as Record - - const authResult = await authorizeCharacter(c, characterId) - if (!authResult.allowed) return handleUnallowed(c, authResult.reason) - const char = authResult.character - - const result = await updateAvatar(getDb(c), char, body) - - if (!result.complete) { - return c.html() - } - - const updatedChar = (await computeCharacter(getDb(c), characterId))! - c.header("HX-Trigger", "closeEditModal") - return c.html() -}) - // GET /characters/:id/avatars - Show avatar gallery characterRoutes.get("/characters/:id/avatars", async (c) => { const characterId = c.req.param("id") @@ -1166,44 +1146,60 @@ characterRoutes.post("/characters/:id/avatars", async (c) => { // Validate upload_id const uploadId = body.upload_id if (!uploadId) { - return c.json({ error: "upload_id is required" }, 400) + return c.html( + + ) } - // Parse crop coordinates if provided - const cropData: Partial = { - character_id: characterId, - upload_id: uploadId, - } + try { + // Validate upload exists, is owned by user, and is complete + await validateUploadForUse(getDb(c), uploadId, authResult.character.user_id) - if (body.crop_x_percent) { - cropData.crop_x_percent = Number.parseFloat(body.crop_x_percent) - cropData.crop_y_percent = Number.parseFloat(body.crop_y_percent!) - cropData.crop_width_percent = Number.parseFloat(body.crop_width_percent!) - cropData.crop_height_percent = Number.parseFloat(body.crop_height_percent!) - } + // Parse crop coordinates if provided + const cropData: Partial = { + character_id: characterId, + upload_id: uploadId, + } - // If this is the first avatar, make it primary - const existingAvatars = await CharacterAvatars.findByCharacterId(getDb(c), characterId) - cropData.is_primary = existingAvatars.length === 0 + if (body.crop_x_percent) { + cropData.crop_x_percent = Number.parseFloat(body.crop_x_percent) + cropData.crop_y_percent = Number.parseFloat(body.crop_y_percent!) + cropData.crop_width_percent = Number.parseFloat(body.crop_width_percent!) + cropData.crop_height_percent = Number.parseFloat(body.crop_height_percent!) + } - // Create the avatar - const avatar = await CharacterAvatars.create( - getDb(c), - cropData as CharacterAvatars.CreateCharacterAvatar - ) + // If this is the first avatar, make it primary + const existingAvatars = await CharacterAvatars.findByCharacterId(getDb(c), characterId) + cropData.is_primary = existingAvatars.length === 0 - // If set as primary, update it atomically - if (cropData.is_primary) { - await CharacterAvatars.setPrimary(getDb(c), characterId, avatar.id) - } + // Create the avatar + const avatar = await CharacterAvatars.create( + getDb(c), + cropData as CharacterAvatars.CreateCharacterAvatar + ) - const updatedChar = (await computeCharacter(getDb(c), characterId))! - return c.html( - <> - - - - ) + // If set as primary, update it atomically + if (cropData.is_primary) { + await CharacterAvatars.setPrimary(getDb(c), characterId, avatar.id) + } + + const updatedChar = (await computeCharacter(getDb(c), characterId))! + return c.html( + <> + + + + ) + } catch (error) { + // Return error in UpdateAvatarForm + const errorMessage = error instanceof Error ? error.message : "Failed to create avatar" + return c.html( + + ) + } }) // GET /characters/:id/avatars/:avatarId/crop-editor - Show cropper for existing avatar diff --git a/static/avatar-cropper.js b/static/avatar-cropper.js index c444ce4..5b04fe5 100644 --- a/static/avatar-cropper.js +++ b/static/avatar-cropper.js @@ -98,12 +98,12 @@ function prepareCropperImage() { const { existingx, existingy, existingw, existingh } = cropperSelection.dataset; + // Calculate canvas padding for narrow images + const canvasW = cropperCanvas.getBoundingClientRect().width; + const canvasExtraW = (canvasW - renderedW) / 2; + // if existing crop data is present, set initial selection if (existingx && existingy && existingw && existingh) { - // Calculate canvas padding for narrow images - const canvasW = cropperCanvas.getBoundingClientRect().width; - const canvasExtraW = (canvasW - renderedW) / 2; - // Convert percentages to canvas pixels (add padding to x) const x = parseFloat(existingx) * renderedW + canvasExtraW; const y = parseFloat(existingy) * renderedH; @@ -115,7 +115,7 @@ function prepareCropperImage() { // otherwise, center a square selection } else { const sideLength = Math.min(renderedW, renderedH) * 0.8; - const x = (renderedW - sideLength) / 2; + const x = (renderedW - sideLength) / 2 + canvasExtraW; const y = (renderedH - sideLength) / 2; cropperSelection.$change(x, y, sideLength, sideLength); setCropFormFields({ x, y, width: sideLength, height: sideLength }); diff --git a/static/character.js b/static/character.js index d0452f6..80ab597 100644 --- a/static/character.js +++ b/static/character.js @@ -47,7 +47,7 @@ document.body.addEventListener('htmx:afterSwap', (e) => { }); // Avatar Upload Flow -async function handleAvatarUpload() { +async function handleAvatarUpload(characterId) { const uploadBtn = document.getElementById('uploadAvatarBtn'); const fileInput = document.getElementById('avatarFileInput'); const progressDiv = document.getElementById('uploadProgress'); @@ -125,17 +125,12 @@ async function handleAvatarUpload() { } // Step 4: Assign avatar to character using htmx - const characterId = document.querySelector('[data-character-id]')?.dataset.characterId; - if (!characterId) { - throw new Error('Character ID not found'); - } - // Hide progress, show success temporarily progressDiv.classList.add('d-none'); successDiv.classList.remove('d-none'); - // Use htmx to assign avatar and update UI - htmx.ajax('POST', `/characters/${characterId}/avatar`, { + // Use htmx to assign avatar and update UI (shows gallery) + htmx.ajax('POST', `/characters/${characterId}/avatars`, { target: '#editModalContent', swap: 'innerHTML', values: { upload_id } From 58a4ce11bd94ef39622b35baa72c3cba90c17d9e Mon Sep 17 00:00:00 2001 From: Igor Serebryany Date: Thu, 13 Nov 2025 15:47:16 -0800 Subject: [PATCH 9/9] refactor: avatar cropper consistent with other components mostly, similar props as the others --- src/components/AvatarCropper.tsx | 56 ++++++++--------- src/components/AvatarGallery.tsx | 2 +- src/db/character_avatars.ts | 9 ++- src/routes/character.tsx | 104 +++++++------------------------ src/services/updateAvatar.ts | 16 +---- 5 files changed, 58 insertions(+), 129 deletions(-) diff --git a/src/components/AvatarCropper.tsx b/src/components/AvatarCropper.tsx index 8e3979f..3cc19d1 100644 --- a/src/components/AvatarCropper.tsx +++ b/src/components/AvatarCropper.tsx @@ -1,31 +1,30 @@ +import type { ComputedCharacter } from "@src/services/computeCharacter" import { ModalContent } from "./ui/ModalContent" export interface AvatarCropperProps { - characterId: string - avatarId?: string - uploadUrl: string - existingCrop?: { - x: number - y: number - width: number - height: number - } | null - isNewUpload?: boolean + character: ComputedCharacter + avatarIndex: number } -export const AvatarCropper = ({ - characterId, - avatarId, - uploadUrl, - existingCrop, - isNewUpload = false, -}: AvatarCropperProps) => { - const action = avatarId - ? `/characters/${characterId}/avatars/${avatarId}/crop` - : `/characters/${characterId}/avatars` +export const AvatarCropper = ({ character, avatarIndex }: AvatarCropperProps) => { + const avatar = character.avatars[avatarIndex] + if (!avatar) { + throw new Error(`Avatar at index ${avatarIndex} not found`) + } + + const uploadUrl = avatar.uploadUrl + + const existingCrop = { + x: avatar.crop_x_percent, + y: avatar.crop_y_percent!, + width: avatar.crop_width_percent!, + height: avatar.crop_height_percent!, + } + + const action = `/characters/${character.id}/avatars/${avatar.id}/crop` return ( - +
{/* Cropper.js v2 web components */}
@@ -39,10 +38,10 @@ export const AvatarCropper = ({ movable resizable zoomable - data-existingx={existingCrop ? existingCrop.x : undefined} - data-existingy={existingCrop ? existingCrop.y : undefined} - data-existingw={existingCrop ? existingCrop.width : undefined} - data-existingh={existingCrop ? existingCrop.height : undefined} + data-existingx={existingCrop.x || undefined} + data-existingy={existingCrop.y || undefined} + data-existingw={existingCrop.width || undefined} + data-existingh={existingCrop.height || undefined} > @@ -70,11 +69,6 @@ export const AvatarCropper = ({ - {/* For new uploads, include the upload_id */} - {isNewUpload && ( - - )} -
@@ -83,7 +77,7 @@ export const AvatarCropper = ({