Skip to content

v0.5.6

Choose a tag to compare

@markforster markforster released this 15 Mar 17:28
· 219 commits to main since this release
33eb0f3

Overview

Release 0.5.6 expands HeroQuest Card Creator with a new background tint system across all card templates, body text color controls, a redesigned treasure artwork window layout, an in‑app PNG→JPEG asset conversion tool, a compact backup format, major thumbnail storage optimizations, contextual Stockpile hints, a new System information panel, and an internal API abstraction layer preparing the application for future remote storage backends.

In addition to these visible changes, the release introduces several storage and performance improvements including JPEG thumbnail migration and IndexedDB library size estimation, along with improvements to download bundles for easier local use.

This document summarizes both user‑visible changes and internal
technical changes
. For deeper implementation details see
technical-change-log.md.

Baseline: origin/release/0.5.5Target: release/0.5.6


Breaking / Behavioral Changes & Migrations

Thumbnail Storage Format Migration

Card thumbnails are now stored as JPEG instead of PNG.

  • New thumbnails generated using image/jpeg (quality 0.8).
  • Existing PNG thumbnails are migrated automatically on application
    startup.
  • Migration runs in background batches to avoid UI blocking.
  • Conversion skipped if the resulting JPEG would be larger.
  • Migration progress and storage savings are reported in Debug
    Tools
    .

Typical observed reduction:

26.0 MB → 3.2 MB (~87.7% reduction)

Backup Format Update

Library exports now default to a compact .hqcc backup format.

Changes include:

  • metadata encoded using MessagePack instead of JSON
  • asset filenames obfuscated
  • ZIP container retained

Older backups remain fully supported for import.


Feature Details by Subsystem

Card Rendering & Template System

Global Background Tint

All card templates now support configurable background tinting.

User-facing behavior - Tint can be applied via the card inspector. -
Tint affects background layers only. - Artwork, overlays, borders,
and text remain unchanged. - Rendering is unchanged when no tint is
specified.

Key implementation points - New card data field:
backgroundTint?: string - Background blueprint layers support
tintKey?: string - Tint rendered via <rect> overlay using
mix-blend-mode: multiply - Background layers isolated using
isolation: isolate - Hero back templates include overlay
(hero-back-border-and-text.png) above tinted background.


Body Text Colour Controls

Card templates now allow customization of body text color.

User-facing behavior - Description/body text can be assigned a
custom color. - Back templates retain background color controls.

Key implementation points - New data field:
bodyTextColor?: string - Inspector includes dedicated text color
picker. - UI visually distinguishes controls: - circular swatch = text
color - square swatch = background color - Rendering applies the value
across all description text elements.


Treasure Card Artwork Window System

Treasure Window Rework

The artwork window used by Small Artwork and Large Artwork
treasure cards has been redesigned.

User-facing behavior - Artwork clipped cleanly within parchment
window. - Frame overlays align correctly with the artwork area. - Small
and Large Artwork templates behave consistently.

Key implementation points Layer structure:

background-base
background-frame (parchment with cutout)
artwork (clipped)
artwork-frame (overlay)
border-texture
text layers

Technical changes include:

  • parchment backgrounds support cutoutBounds
  • artwork clipped via SVG clipPath
  • overlay frame uses preserveAspectRatio="none"
  • shared background asset window-parchment.png

Asset Management

PNG → JPEG Conversion Tool

The asset inspector now provides a Convert to JPEG action for opaque
PNG images.

User-facing behavior - Conversion option appears for PNG assets
without transparency. - Preview modal displays compression results. -
Adjustable quality slider allows size/quality tuning. - Estimated
file size comparison shown before applying.

Key implementation points - Conversion performed entirely
client-side. - Asset record updated with new blob and MIME type. -
Metadata (name, timestamps, dimensions) preserved.


Storage & Library Management

Thumbnail Storage Optimization

Card thumbnails now stored as JPEG.

Key implementation points - Thumbnail generation updated to produce
JPEG (quality=0.8). - Migration scans cards store for PNG
thumbnails. - Conversion skipped if JPEG larger than PNG. - Debug panel
displays:

processed / converted / skipped
start size / current size / saved size


IndexedDB Library Size Estimation

The application can now estimate the size of the stored library.

User-facing behavior Displayed in System settings panel:

  • total library size
  • records scanned
  • per‑store breakdown

Key implementation points Estimation formula:

total size = blob sizes + JSON.stringify(record without blobs).length

Updates processed during idle time so the UI remains responsive.

Bulk imports temporarily pause the estimation queue.


System Settings & Diagnostics

System Info Panel

A new System tab has been added to Settings.

Displays:

  • App name
  • Version
  • Developer
  • Browser storage usage estimate
  • Library size estimate
  • Records scanned
  • Per‑store storage breakdown
  • Last updated timestamp

Key implementation points - Browser storage usage retrieved via
navigator.storage.estimate() - Library size calculated across all
hqcc object stores. - Single Refresh button recomputes both
estimates.


Stockpile UX Improvements

Stockpile Footer Hints

Stockpile footer now displays contextual hints for common actions.

No selection - select a card - multi‑select cards - open a card

With selection - drag cards into collections - export selected cards

Behavior - hints cycle every 8 seconds - crossfade transitions -
sequence resets when selection state changes

All hints localized across supported languages.


Architecture & Internal Refactors

API Abstraction Layer

Data access refactored behind a typed API abstraction layer.

UI can now operate against:

  • local IndexedDB backend
  • future remote API backend

Key implementation points - Zodios API definitions - local adapter
translates API calls into IndexedDB operations - debug logging added for
local API calls

This refactor prepares the project for potential hosted storage or
multi‑device synchronization
.


Download Bundle Improvements

The downloadable build now includes a bundled local server to simplify
running the application outside itch.io.

Bundle includes:

  • miniserve binary
  • Windows and macOS launchers
  • shell launcher for Linux/macOS
  • printable README with startup instructions

A separate clean archive is generated for itch.io deployment.


Storage / Config Changes

New LocalStorage Keys

Used by library size estimation system:

hqcc.dbEstimate.queue.v1
hqcc.dbEstimate.totals.v1
hqcc.dbEstimate.recordSizes.v1

Migration Tracking

Thumbnail migration completion tracked in localStorage to prevent
repeated scanning.


API / Type Surface Changes

New card data fields:

backgroundTint?: string
bodyTextColor?: string

Blueprint background layers now support:

tintKey?: string
cutoutBounds?: Bounds

These enable background tinting and parchment window masking.


QA / Validation Checklist

Rendering

  • background tint affects background layers only
  • hero back border/logo unaffected by tint
  • body text color applied correctly across templates

Treasure cards

  • artwork clipped to window bounds
  • frame overlay aligned with artwork
  • reset artwork centers image

Asset conversion

  • JPEG conversion only available for opaque PNG assets
  • preview reflects quality setting
  • metadata preserved

Thumbnail migration

  • migration runs automatically on startup
  • debug panel shows progress and size reduction

System panel

  • storage estimate refresh works
  • library estimate updates after edits

Stockpile hints

  • correct hint set shown based on selection state
  • hints cycle with crossfade transitions