feat() Cassette generation

package.json

@@ -10,7 +10,8 @@
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "make-logos": "node scripts/logos-data.mjs && prettier --write ./src/assets/logos/*.ts",
     "preview": "vite preview",
-    "test": "vitest run"
+    "test": "vitest run",
+    "generate-cassette": "node scripts/cassette/buildCassetteCover.mjs"
   },
   "dependencies": {
     "@emotion/react": "11.14.0",

scripts/cassette/baseCodeFile.ts

@@ -0,0 +1,2 @@
+import { TapeBoxCover } from './printMediaTypes';
+import { Authors } from './templateAuthors';

scripts/cassette/buildCassetteCover.mjs

@@ -0,0 +1,47 @@
+import {
+  cassetteColorVariations,
+  referencColorTable,
+  cassetteBaseTemplate,
+} from './cassetteColorVariations.mjs';
+import { readFileSync, writeFileSync } from 'fs';
+
+const templateSvg = readFileSync(
+  './scripts/cassette/cassetteMasterFile.svg',
+  'utf-8',
+);
+let importFile = readFileSync('./scripts/cassette/baseCodeFile.ts', 'utf-8');
+let templateObject = '';
+
+for (const variation of cassetteColorVariations) {
+  const newTemplate = templateSvg
+    .replace(referencColorTable.backColor, variation.backColor)
+    .replace(referencColorTable.colorSpineTop, variation.colorSpineTop)
+    .replace(referencColorTable.colorSpineBottom, variation.colorSpineBottom)
+    .replace(referencColorTable.frontcolorTop, variation.frontcolorTop)
+    .replace(referencColorTable.frontcolorBottom, variation.frontcolorTop)
+    .replace(referencColorTable.loadingLogoBack, variation.loadingLogoBack)
+    .replace(referencColorTable.loadingLogoSpine, variation.loadingLogoSpine)
+    .replace(referencColorTable.loadingLogoFront, variation.loadingLogoFront);
+  writeFileSync(
+    `./src/assets/cassetteGenerated/${variation.label}.svg`,
+    newTemplate,
+  );
+  importFile = `${importFile}
+import ${variation.label} from './assets/cassetteGenerated/${variation.label}.svg';`;
+
+  templateObject = `${templateObject}${
+    variation.label
+  }:${cassetteBaseTemplate.replace(
+    'url: cassetTape,',
+    `url: ${variation.label},`,
+  )}`;
+
+  console.log(`Generated ${variation.label}`);
+}
+
+writeFileSync(
+  `./src/cassetteTemplates.ts`,
+  `${importFile} export const cassetteTemplates = {
+${templateObject}
+};`,
+);

scripts/cassette/cassetteColorVariations.mjs

@@ -0,0 +1,168 @@
+export const cassetteColorVariations = [
+  {
+    label: 'SufamiTurbo',
+    backColor: '#a8a8a8',
+    colorSpineTop: '#6dbf5b',
+    colorSpineBottom: '#a8a8a8',
+    frontcolorTop: '#6dbf5b',
+    frontcolorBottom: '#6dbf5b',
+    loadingLogoBack: '#000000',
+    loadingLogoSpine: '#FFFFFF',
+    loadingLogoFront: '#FFFFFF',
+    nfcLogoBack: '#000000',
+    nfcLogoSpine: '#FFFFFF',
+    nfcLogoFront: '#FFFFFF',
+  },
+  {
+    label: 'ps2',
+    backColor: '#000000',
+    colorSpineTop: '#000000',
+    colorSpineBottom: '#FFFFFF',
+    frontcolorTop: '#000000',
+    frontcolorBottom: '#000000',
+    loadingLogoBack: '#FFFFFF',
+    loadingLogoSpine: '#FFFFFF',
+    loadingLogoFront: '#FFFFFF',
+    nfcLogoBack: '#0000FF',
+    nfcLogoSpine: '#0000FF',
+    nfcLogoFront: '#0000FF',
+  },
+  {
+    label: 'steam',
+    backColor: '#000000',
+    colorSpineTop: '#102241',
+    colorSpineBottom: '#000000',
+    frontcolorTop: '#102241',
+    frontcolorBottom: '#102241',
+    loadingLogoBack: '#FFFFFF',
+    loadingLogoSpine: '#FFFFFF',
+    loadingLogoFront: '#FFFFFF',
+    nfcLogoBack: '#FFFFFF',
+    nfcLogoSpine: '#FFFFFF',
+    nfcLogoFront: '#FFFFFF',
+  },
+  {
+    label: 'msdos',
+    backColor: '#A9A9A9',
+    colorSpineTop: '#A9A9A9',
+    colorSpineBottom: '#A9A9A9',
+    frontcolorTop: '#A9A9A9',
+    frontcolorBottom: '#A9A9A9',
+    loadingLogoBack: '#000000',
+    loadingLogoSpine: '#000000',
+    loadingLogoFront: '#000000',
+    nfcLogoBack: '#000000',
+    nfcLogoSpine: '#000000',
+    nfcLogoFront: '#000000',
+  },
+  {
+    label: 'msx2',
+    backColor: '#A9A9A9',
+    colorSpineTop: '#1717D2',
+    colorSpineBottom: '#1717D2',
+    frontcolorTop: '#1717D2',
+    frontcolorBottom: '#1717D2',
+    loadingLogoBack: '#FFFFFF',
+    loadingLogoSpine: '#FFFFFF',
+    loadingLogoFront: '#FFFFFF',
+    nfcLogoBack: '#FFFFFF',
+    nfcLogoSpine: '#FFFFFF',
+    nfcLogoFront: '#FFFFFF',
+  },
+  {
+    label: 'xbox',
+    backColor: '#000000',
+    colorSpineTop: '#000000',
+    colorSpineBottom: '#000000',
+    frontcolorTop: '#000000',
+    frontcolorBottom: '#000000',
+    loadingLogoBack: '#60D03E',
+    loadingLogoSpine: '#60D03E',
+    loadingLogoFront: '#60D03E',
+    nfcLogoBack: '#60D03E',
+    nfcLogoSpine: '#60D03E',
+    nfcLogoFront: '#60D03E',
+  },
+  {
+    label: 'necpcengine',
+    backColor: '#F2F2EB',
+    colorSpineTop: '#F2F2EB',
+    colorSpineBottom: '#F2F2EB',
+    frontcolorTop: '#F2F2EB',
+    frontcolorBottom: '#F2F2EB',
+    loadingLogoBack: '#D83B37',
+    loadingLogoSpine: '#D83B37',
+    loadingLogoFront: '#D83B37',
+    nfcLogoBack: '#426F59',
+    nfcLogoSpine: '#426F59',
+    nfcLogoFront: '#426F59',
+  },
+  {
+    label: 'turbografx16',
+    backColor: '#FAF0DB',
+    colorSpineTop: '#000000',
+    colorSpineBottom: '#000000',
+    frontcolorTop: '#000000',
+    frontcolorBottom: '#000000',
+    loadingLogoBack: '#000000',
+    loadingLogoSpine: '#FFFFFF',
+    loadingLogoFront: '#FFFFFF',
+    nfcLogoBack: '#F2AC3C',
+    nfcLogoSpine: '#F2AC3C',
+    nfcLogoFront: '#F2AC3C',
+  },
+  {
+    label: 'famicom',
+    backColor: '#FEFCF1',
+    colorSpineTop: '#AE3130',
+    colorSpineBottom: '#B3975C',
+    frontcolorTop: '#AE3130',
+    frontcolorBottom: '#AE3130',
+    loadingLogoBack: '#000000',
+    loadingLogoSpine: '#FFFFFF',
+    loadingLogoFront: '#FFFFFF',
+    nfcLogoBack: '#000000',
+    nfcLogoSpine: '#FFFFFF',
+    nfcLogoFront: '#FFFFFF',
+  },
+  {
+    label: 'famicomdisk',
+    backColor: '#FEFCF1',
+    colorSpineTop: '#FFFFFF',
+    colorSpineBottom: '#FFFFFF',
+    frontcolorTop: '#FFFFFF',
+    frontcolorBottom: '#FFFFFF',
+    loadingLogoBack: '#000000',
+    loadingLogoSpine: '#000000',
+    loadingLogoFront: '#000000',
+    nfcLogoBack: '#000000',
+    nfcLogoSpine: '#EBBF45',
+    nfcLogoFront: '#EBBF45',
+  },
+];
+
+export const referencColorTable = {
+  backColor: '#FFFF00',
+  colorSpineTop: '#00FF00',
+  colorSpineBottom: '#FF00FF',
+  frontcolorTop: '#00FFFF',
+  frontcolorBottom: '#FF0000',
+  loadingLogoBack: '#1000FF',
+  loadingLogoSpine: '#2000FF',
+  loadingLogoFront: '#3000FF',
+};
+
+export const cassetteBaseTemplate = `  {
+    layout: 'horizontal',
+    label: 'Casset box cover',
+    canFill: true,
+    url: cassetTape,
+    version: 2,
+    canEdit: true,
+    author: Authors.animeotaku, // to be changed with Phoneix data
+    media: TapeBoxCover,
+    compatibleMedia: [TapeBoxCover],
+    key: 'cassetteBoxV2',
+    // preview: template_CassetteTapeCase_CassetBoxCover_16,
+  },
+`;

src/cardsTemplates.ts

@@ -67,6 +67,7 @@ import blackFramePreview from './assets/templatesPreviews/template_Standard NFC
 // import upgradeStickerStdFull from './assets/UpgradeStandard_Single_Full.svg';
 // import upgradeStickerStdFrame from './assets/UpgradeStandard_Single_Frame.svg';
 import { Authors } from './templateAuthors';
+import { cassetteTemplates } from './cassetteTemplates';
 import type { templateTypeV2 } from './resourcesTypedef';
 // import { logoResource } from './logos';
 
@@ -312,6 +313,7 @@ export const templates: Record<string, templateTypeV2> = {
     key: 'miniNfcAlice',
     preview: template_MiniNFCCard_Steam3by5cm_17,
   },
+  ...cassetteTemplates,
   retroRemakePcb1: {
     canEdit: true,
     version: 2,

src/cassetteTemplates.ts

@@ -0,0 +1,144 @@
+import { TapeBoxCover } from './printMediaTypes';
+import { Authors } from './templateAuthors';
+import SufamiTurbo from './assets/cassetteGenerated/SufamiTurbo.svg';
+import ps2 from './assets/cassetteGenerated/ps2.svg';
+import steam from './assets/cassetteGenerated/steam.svg';
+import msdos from './assets/cassetteGenerated/msdos.svg';
+import msx2 from './assets/cassetteGenerated/msx2.svg';
+import xbox from './assets/cassetteGenerated/xbox.svg';
+import necpcengine from './assets/cassetteGenerated/necpcengine.svg';
+import turbografx16 from './assets/cassetteGenerated/turbografx16.svg';
+import famicom from './assets/cassetteGenerated/famicom.svg';
+import famicomdisk from './assets/cassetteGenerated/famicomdisk.svg'; export const cassetteTemplates = {
+SufamiTurbo:  {
+    layout: 'horizontal',
+    label: 'Casset box cover',
+    canFill: true,
+    url: SufamiTurbo,
+    version: 2,
+    canEdit: true,
+    author: Authors.animeotaku, // to be changed with Phoneix data
+    media: TapeBoxCover,
+    compatibleMedia: [TapeBoxCover],
+    key: 'cassetteBoxV2',
+    // preview: template_CassetteTapeCase_CassetBoxCover_16,
+  },
+ps2:  {
+    layout: 'horizontal',
+    label: 'Casset box cover',
+    canFill: true,
+    url: ps2,
+    version: 2,
+    canEdit: true,
+    author: Authors.animeotaku, // to be changed with Phoneix data
+    media: TapeBoxCover,
+    compatibleMedia: [TapeBoxCover],
+    key: 'cassetteBoxV2',
+    // preview: template_CassetteTapeCase_CassetBoxCover_16,
+  },
+steam:  {
+    layout: 'horizontal',
+    label: 'Casset box cover',
+    canFill: true,
+    url: steam,
+    version: 2,
+    canEdit: true,
+    author: Authors.animeotaku, // to be changed with Phoneix data
+    media: TapeBoxCover,
+    compatibleMedia: [TapeBoxCover],
+    key: 'cassetteBoxV2',
+    // preview: template_CassetteTapeCase_CassetBoxCover_16,
+  },
+msdos:  {
+    layout: 'horizontal',
+    label: 'Casset box cover',
+    canFill: true,
+    url: msdos,
+    version: 2,
+    canEdit: true,
+    author: Authors.animeotaku, // to be changed with Phoneix data
+    media: TapeBoxCover,
+    compatibleMedia: [TapeBoxCover],
+    key: 'cassetteBoxV2',
+    // preview: template_CassetteTapeCase_CassetBoxCover_16,
+  },
+msx2:  {
+    layout: 'horizontal',
+    label: 'Casset box cover',
+    canFill: true,
+    url: msx2,
+    version: 2,
+    canEdit: true,
+    author: Authors.animeotaku, // to be changed with Phoneix data
+    media: TapeBoxCover,
+    compatibleMedia: [TapeBoxCover],
+    key: 'cassetteBoxV2',
+    // preview: template_CassetteTapeCase_CassetBoxCover_16,
+  },
+xbox:  {
+    layout: 'horizontal',
+    label: 'Casset box cover',
+    canFill: true,
+    url: xbox,
+    version: 2,
+    canEdit: true,
+    author: Authors.animeotaku, // to be changed with Phoneix data
+    media: TapeBoxCover,
+    compatibleMedia: [TapeBoxCover],
+    key: 'cassetteBoxV2',
+    // preview: template_CassetteTapeCase_CassetBoxCover_16,
+  },
+necpcengine:  {
+    layout: 'horizontal',
+    label: 'Casset box cover',
+    canFill: true,
+    url: necpcengine,
+    version: 2,
+    canEdit: true,
+    author: Authors.animeotaku, // to be changed with Phoneix data
+    media: TapeBoxCover,
+    compatibleMedia: [TapeBoxCover],
+    key: 'cassetteBoxV2',
+    // preview: template_CassetteTapeCase_CassetBoxCover_16,
+  },
+turbografx16:  {
+    layout: 'horizontal',
+    label: 'Casset box cover',
+    canFill: true,
+    url: turbografx16,
+    version: 2,
+    canEdit: true,
+    author: Authors.animeotaku, // to be changed with Phoneix data
+    media: TapeBoxCover,
+    compatibleMedia: [TapeBoxCover],
+    key: 'cassetteBoxV2',
+    // preview: template_CassetteTapeCase_CassetBoxCover_16,
+  },
+famicom:  {
+    layout: 'horizontal',
+    label: 'Casset box cover',
+    canFill: true,
+    url: famicom,
+    version: 2,
+    canEdit: true,
+    author: Authors.animeotaku, // to be changed with Phoneix data
+    media: TapeBoxCover,
+    compatibleMedia: [TapeBoxCover],
+    key: 'cassetteBoxV2',
+    // preview: template_CassetteTapeCase_CassetBoxCover_16,
+  },
+famicomdisk:  {
+    layout: 'horizontal',
+    label: 'Casset box cover',
+    canFill: true,
+    url: famicomdisk,
+    version: 2,
+    canEdit: true,
+    author: Authors.animeotaku, // to be changed with Phoneix data
+    media: TapeBoxCover,
+    compatibleMedia: [TapeBoxCover],
+    key: 'cassetteBoxV2',
+    // preview: template_CassetteTapeCase_CassetBoxCover_16,
+  },
+
+};