feat() Cassette generation

package.json

@@ -8,7 +8,8 @@
     "prebuild": "cp ./src/utils/blob-stream.js ./node_modules/blob-stream/",
     "build": "yarn prebuild && tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "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,32 @@
+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)
+    .replace(referencColorTable.nfcLogoBack, variation.nfcLogoBack)
+    .replace(referencColorTable.nfcLogoSpine, variation.nfcLogoSpine)
+    .replace(referencColorTable.nfcLogoFront, variation.nfcLogoFront);
+  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,187 @@
+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',
+  nfcLogoBack: '#FF0010',
+  nfcLogoSpine: '#FF0020',
+  nfcLogoFront: '#FF0030',
+}
+
+export const cassetteBaseTemplate = `  {
+    layout: 'horizontal',
+    label: 'Casset box cover',
+    overlay: {
+      layerWidth: 1233,
+      layerHeight: 1200,
+      url: cassetTape,
+      height: 1 - 123/1200,
+      width: 1 - 454/1233,
+      y: 123/1200,
+      x: 454/1233,
+      isSvg: true,
+      strategy: 'cover',
+    },
+    edits: [{
+      id: 'placeholder_logo_1',
+      resource: logoResource,
+    }, {
+      id: 'placeholder_logo_2',
+      resource: logoResource,
+    }, {
+      id: 'placeholder_logo_3',
+      resource: logoResource,
+    }],
+    canEdit: true,
+    author: Authors.animeotaku, // to be changed with Phoneix data
+    media: TapeBoxCover,
+    key: 'cassetteBoxV2',
+  },
+`