Skip to content

feat() Cassette generation#60

Open
asturur wants to merge 11 commits intomainfrom
cassette-generation
Open

feat() Cassette generation#60
asturur wants to merge 11 commits intomainfrom
cassette-generation

Conversation

@asturur
Copy link
Copy Markdown
Member

@asturur asturur commented Oct 7, 2024

Summary by CodeRabbit

  • New Features
    • Added cassette box cover templates for multiple platforms (SufamiTurbo, PS2, Steam, MS‑DOS, MSX2, Xbox, NEC PC Engine, TurboGrafx‑16, Famicom, Famicom Disk) with customizable color variations and editable logo elements; these templates are now available in the app's template library.
  • Chores
    • Added a project script to generate cassette cover assets.
  • Type Definitions
    • Expanded editor placeholder options to support title, description, platform logo, screenshot, and main placements.

@netlify
Copy link
Copy Markdown

netlify Bot commented Oct 7, 2024

Deploy Preview for tapto-designer failed.

Name Link
🔨 Latest commit 9e21fcc
🔍 Latest deploy log https://app.netlify.com/sites/tapto-designer/deploys/67103544f066670008add5a9

@netlify
Copy link
Copy Markdown

netlify Bot commented Jan 30, 2025

Deploy Preview for zaparoo-designer failed. Why did it fail? →

Name Link
🔨 Latest commit 8a31943
🔍 Latest deploy log https://app.netlify.com/sites/zaparoo-designer/deploys/679b5db7e4eb350008dc94ed

@netlify
Copy link
Copy Markdown

netlify Bot commented Apr 17, 2026

Deploy Preview for zaparoo-designer failed. Why did it fail? →

Name Link
🔨 Latest commit 5afaab3
🔍 Latest deploy log https://app.netlify.com/projects/zaparoo-designer/deploys/69e1e33f2165c40008897432

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Apr 17, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: a9e0f057-aa72-44d6-a234-ed4ce1bf99ca

📥 Commits

Reviewing files that changed from the base of the PR and between 0d5360c and 5afaab3.

⛔ Files ignored due to path filters (11)
  • scripts/cassette/cassetteMasterFile.svg is excluded by !**/*.svg
  • src/assets/cassetteGenerated/SufamiTurbo.svg is excluded by !**/*.svg
  • src/assets/cassetteGenerated/famicom.svg is excluded by !**/*.svg
  • src/assets/cassetteGenerated/famicomdisk.svg is excluded by !**/*.svg
  • src/assets/cassetteGenerated/msdos.svg is excluded by !**/*.svg
  • src/assets/cassetteGenerated/msx2.svg is excluded by !**/*.svg
  • src/assets/cassetteGenerated/necpcengine.svg is excluded by !**/*.svg
  • src/assets/cassetteGenerated/ps2.svg is excluded by !**/*.svg
  • src/assets/cassetteGenerated/steam.svg is excluded by !**/*.svg
  • src/assets/cassetteGenerated/turbografx16.svg is excluded by !**/*.svg
  • src/assets/cassetteGenerated/xbox.svg is excluded by !**/*.svg
📒 Files selected for processing (5)
  • scripts/cassette/buildCassetteCover.mjs
  • scripts/cassette/cassetteColorVariations.mjs
  • src/cardsTemplates.ts
  • src/cassetteTemplates.ts
  • src/extensions/setupFabricJSCustomConfiguration.ts
✅ Files skipped from review due to trivial changes (1)
  • src/extensions/setupFabricJSCustomConfiguration.ts
🚧 Files skipped from review as they are similar to previous changes (4)
  • src/cardsTemplates.ts
  • src/cassetteTemplates.ts
  • scripts/cassette/buildCassetteCover.mjs
  • scripts/cassette/cassetteColorVariations.mjs

📝 Walkthrough

Walkthrough

Adds a cassette cover generation feature: new color-variation data and base template, an ESM build script that generates per-variation SVG assets and emits src/cassetteTemplates.ts, integrates those templates into src/cardsTemplates.ts, and adds an npm script to run the generator.

Changes

Cohort / File(s) Summary
Package script
package.json
Adds generate-cassette npm script: node scripts/cassette/buildCassetteCover.mjs.
Generator script
scripts/cassette/buildCassetteCover.mjs
New ESM build script that reads an SVG master and a base template, iterates cassetteColorVariations, substitutes colors/assets, writes per-variation SVGs to src/assets/cassetteGenerated/, and emits src/cassetteTemplates.ts with imports and cassetteTemplates export.
Color data & base template
scripts/cassette/cassetteColorVariations.mjs
New module exporting cassetteColorVariations (array of labeled color configs), referencColorTable, and cassetteBaseTemplate string template.
Base code imports
scripts/cassette/baseCodeFile.ts
Added imports for TapeBoxCover and Authors used by generated templates.
Generated templates
src/cassetteTemplates.ts
New generated module exporting cassetteTemplates with entries (SufamiTurbo, ps2, steam, msdos, msx2, xbox, necpcengine, turbografx16, famicom, famicomdisk) mapping to generated SVG assets and metadata fields.
Templates integration
src/cardsTemplates.ts
Now imports and spreads cassetteTemplates into the existing templates export so generated cassette templates are included at runtime.
Fabric augmentation
src/extensions/setupFabricJSCustomConfiguration.ts
Expanded FabricObject['zaparoo-placeholder'] union from 'main' to `'main'

Sequence Diagram(s)

sequenceDiagram
  participant Dev as Developer
  participant CLI as npm script
  participant Script as buildCassetteCover.mjs
  participant Data as cassetteColorVariations.mjs
  participant Master as master.svg
  participant FS as Filesystem (src/assets/, src/)
  Dev->>CLI: run npm run generate-cassette
  CLI->>Script: execute buildCassetteCover.mjs
  Script->>Data: import color variations & base template
  Script->>Master: load SVG master template
  loop for each variation
    Script->>Script: substitute placeholders (colors, logos, url)
    Script->>FS: write generated SVG to src/assets/cassetteGenerated/<label>.svg
    Script->>Script: append import and template entry to assembly
  end
  Script->>FS: write src/cassetteTemplates.ts (imports + export const cassetteTemplates)
  Script->>Dev: log "Generated <label>" per variation
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

Poem

🐰 I hopped through SVGs and color swirls,
Pixel tapes gleam for retro worlds,
Scripts hum softly, assets align,
Generated covers, neat and fine,
Hooray—now each console gets its shine!

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'feat() Cassette generation' directly describes the main changeset, which introduces new cassette generation functionality including build scripts, color variations, and template exports.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch cassette-generation

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 4

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@scripts/cassette/baseCodeFile.ts`:
- Around line 1-2: The lint failure is caused by unused TypeScript imports
TapeBoxCover and Authors in the stub baseCodeFile.ts; remove the TS header stub
and instead produce the header content from the generator
(buildCassetteCover.mjs) or change the stub to a non-TS template (e.g.,
.tpl/.txt) so ESLint won't parse unused symbols. Update buildCassetteCover.mjs
to emit the header string (including TapeBoxCover and Authors references where
needed) when writing the generated file, or replace baseCodeFile.ts with a plain
template file that the script copies without TypeScript parsing.

In `@scripts/cassette/buildCassetteCover.mjs`:
- Around line 13-15: Replace the incorrect mapping that uses
variation.frontcolorTop for the bottom front placeholder: in the chained
.replace calls in buildCassetteCover.mjs, change the second .replace which
currently uses referencColorTable.frontcolorBottom to pass
variation.frontcolorBottom (not variation.frontcolorTop) so
referencColorTable.frontcolorBottom is correctly replaced with
variation.frontcolorBottom.

In `@scripts/cassette/cassetteColorVariations.mjs`:
- Around line 172-181: The generated templates reference an undeclared
identifier logoResource (in cassetteBaseTemplate → edits[*].resource), causing
compilation failures; fix by adding a declaration or import for logoResource
into the shared header used by scripts/cassette/baseCodeFile.ts so emitted
src/cassetteTemplates.ts contains a valid symbol. Update the base header to
either import logoResource from its module (e.g., import { logoResource } from
'...') or define a local const logoResource = ... and ensure the name matches
the one used in cassetteBaseTemplate; regenerate templates to confirm the
unresolved identifier is gone.

In `@src/cardsTemplates.ts`:
- Line 70: Uncomment and wire the generated cassette templates into the exported
templates map by re-enabling the import of cassetteTemplates and merging its
entries into the templates export (restore the import of cassetteTemplates and
the spread where templates is composed), ensure each cassette template entry
includes required metadata fields (layout, author, compatible media sizes) so
they are registered correctly, and add corresponding preview SVGs into
src/assets/templatesPreviews/ with matching filenames so the preview loader can
find them.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 62a8a5d7-1a05-41ee-b89c-badb6101e83e

📥 Commits

Reviewing files that changed from the base of the PR and between 47fa390 and 0d5360c.

⛔ Files ignored due to path filters (11)
  • scripts/cassette/cassetteMasterFile.svg is excluded by !**/*.svg
  • src/assets/cassetteGenerated/SufamiTurbo.svg is excluded by !**/*.svg
  • src/assets/cassetteGenerated/famicom.svg is excluded by !**/*.svg
  • src/assets/cassetteGenerated/famicomdisk.svg is excluded by !**/*.svg
  • src/assets/cassetteGenerated/msdos.svg is excluded by !**/*.svg
  • src/assets/cassetteGenerated/msx2.svg is excluded by !**/*.svg
  • src/assets/cassetteGenerated/necpcengine.svg is excluded by !**/*.svg
  • src/assets/cassetteGenerated/ps2.svg is excluded by !**/*.svg
  • src/assets/cassetteGenerated/steam.svg is excluded by !**/*.svg
  • src/assets/cassetteGenerated/turbografx16.svg is excluded by !**/*.svg
  • src/assets/cassetteGenerated/xbox.svg is excluded by !**/*.svg
📒 Files selected for processing (6)
  • package.json
  • scripts/cassette/baseCodeFile.ts
  • scripts/cassette/buildCassetteCover.mjs
  • scripts/cassette/cassetteColorVariations.mjs
  • src/cardsTemplates.ts
  • src/cassetteTemplates.ts

Comment on lines +1 to +2
import { TapeBoxCover } from './printMediaTypes';
import { Authors } from './templateAuthors'; No newline at end of file
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

This raw .ts header fails lint before generation runs.

buildCassetteCover.mjs only copies these imports as text, so ESLint still sees TapeBoxCover and Authors as unused in scripts/cassette/baseCodeFile.ts. Use a non-TypeScript template file or generate the header string inside the script instead of keeping a linted .ts stub here.

🧰 Tools
🪛 ESLint

[error] 1-1: 'TapeBoxCover' is defined but never used.

(@typescript-eslint/no-unused-vars)


[error] 2-2: 'Authors' is defined but never used.

(@typescript-eslint/no-unused-vars)

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@scripts/cassette/baseCodeFile.ts` around lines 1 - 2, The lint failure is
caused by unused TypeScript imports TapeBoxCover and Authors in the stub
baseCodeFile.ts; remove the TS header stub and instead produce the header
content from the generator (buildCassetteCover.mjs) or change the stub to a
non-TS template (e.g., .tpl/.txt) so ESLint won't parse unused symbols. Update
buildCassetteCover.mjs to emit the header string (including TapeBoxCover and
Authors references where needed) when writing the generated file, or replace
baseCodeFile.ts with a plain template file that the script copies without
TypeScript parsing.

Comment on lines +13 to +15
.replace(referencColorTable.frontcolorTop, variation.frontcolorTop)
.replace(referencColorTable.frontcolorBottom, variation.frontcolorTop)
.replace(referencColorTable.loadingLogoBack, variation.loadingLogoBack)
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Use variation.frontcolorBottom for the bottom-front replacement.

Line 14 currently maps the bottom placeholder to variation.frontcolorTop, so frontcolorBottom is ignored.

🩹 Proposed fix
-    .replace(referencColorTable.frontcolorBottom, variation.frontcolorTop)
+    .replace(referencColorTable.frontcolorBottom, variation.frontcolorBottom)
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
.replace(referencColorTable.frontcolorTop, variation.frontcolorTop)
.replace(referencColorTable.frontcolorBottom, variation.frontcolorTop)
.replace(referencColorTable.loadingLogoBack, variation.loadingLogoBack)
.replace(referencColorTable.frontcolorTop, variation.frontcolorTop)
.replace(referencColorTable.frontcolorBottom, variation.frontcolorBottom)
.replace(referencColorTable.loadingLogoBack, variation.loadingLogoBack)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@scripts/cassette/buildCassetteCover.mjs` around lines 13 - 15, Replace the
incorrect mapping that uses variation.frontcolorTop for the bottom front
placeholder: in the chained .replace calls in buildCassetteCover.mjs, change the
second .replace which currently uses referencColorTable.frontcolorBottom to pass
variation.frontcolorBottom (not variation.frontcolorTop) so
referencColorTable.frontcolorBottom is correctly replaced with
variation.frontcolorBottom.

Comment thread scripts/cassette/cassetteColorVariations.mjs Outdated
Comment thread src/cardsTemplates.ts Outdated
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant