use gzipped card data

package.json

@@ -3,7 +3,8 @@
   "private": true,
   "version": "0.1.0",
   "scripts": {
-    "start": "vite"
+    "start": "vite",
+    "build": "vite build"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",

src/index.ts

@@ -1,22 +1,12 @@
 import { $el } from '@hamcha/domutil';
 import { convert_to_hiragana } from '@hamcha/weeblib';
 
-import cardData from './card-data.json';
+import { loadCardData } from './read-data';
+
 import './index.css';
 
-interface Card {
-  manaCost: string;
-  name: string;
-  type: string;
-  text: string;
-  flavorText: string;
-  power?: number;
-  toughness?: number;
-  italianImage: string;
-  image: string;
-}
-
-const cards = cardData as Card[];
+const scryfallURL = (scryfallId: string) =>
+  `https://cards.scryfall.io/large/front/${scryfallId?.charAt(0)}/${scryfallId?.charAt(1)}/${scryfallId}.jpg`;
 
 const parseMC = (mc: string) =>
   mc
@@ -24,11 +14,17 @@ const parseMC = (mc: string) =>
     .split('}{')
     .map((v) => $el('span.manapip', v));
 
-let main = $el('main');
+let main = $el(
+  'main',
+  $el('h1', convert_to_hiragana('Caricamento in corso...')),
+);
+document.body.appendChild(main);
+
+const cards = await loadCardData();
 
 const render = () => {
   const randomCard = cards[Math.floor(Math.random() * cards.length)];
-  const cardImage = $el('img.bg', { src: randomCard.italianImage });
+  const cardImage = $el('img.bg', { src: scryfallURL(randomCard.id) });
 
   main.remove();
   main = $el(
@@ -48,9 +44,7 @@ const render = () => {
       randomCard.flavorText
         ? $el('p.flavor', convert_to_hiragana(randomCard.flavorText))
         : '',
-      randomCard.power
-        ? $el('p.power', `${randomCard.power} / ${randomCard.toughness}`)
-        : '',
+      randomCard.power ? $el('p.power', `${randomCard.power}`) : '',
     ),
     $el(
       'section.actions',

src/read-data.ts

@@ -0,0 +1,54 @@
+//@ts-expect-error asset
+import cardDataURL from './card-data.jsonz';
+
+interface Card {
+  manaCost: string;
+  name: string;
+  type: string;
+  text: string;
+  flavorText: string;
+  power?: string;
+  id: string;
+}
+
+const nextFrame = async () =>
+  new Promise((resolve) => requestAnimationFrame(resolve));
+
+export async function loadCardData(): Promise<Card[]> {
+  // Fetch the gzipped JSON file
+  const response = await fetch(cardDataURL);
+
+  if (!response.ok) {
+    throw new Error(
+      `HTTP request failed: ${response.status} ${response.statusText}`,
+    );
+  }
+
+  if (!response.body) {
+    throw new Error('No body found');
+  }
+
+  // Create a DecompressionStream
+  const decompressionStream = new DecompressionStream('gzip');
+  const textReader = new TextDecoderStream();
+  const reader = response.body
+    .pipeThrough(decompressionStream)
+    .pipeThrough(textReader)
+    .getReader();
+
+  // Read the decompressed text
+  let text = '';
+  while (true) {
+    // I like my browser not being stuck, unlike VScode...
+    await nextFrame();
+
+    // Read next chunk
+    const { done, value } = await reader.read();
+    text += value ?? '';
+    if (done) {
+      break;
+    }
+  }
+
+  return JSON.parse(text);
+}

vite.config.ts

@@ -2,4 +2,9 @@ import wasm from 'vite-plugin-wasm';
 
 export default {
   plugins: [wasm()],
+  build: {
+    target: 'esnext',
+  },
+  assetsInclude: ['**/*.jsonz'],
+  base: './',
 };