chore: test serverless func (#18)

.gitignore

@@ -23,3 +23,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+.vercel

api/atlas.js

@@ -0,0 +1,24 @@
+/* eslint-disable no-undef */
+import { Buffer } from "node:buffer";
+import fetch from "isomorphic-unfetch";
+
+export default async function handler(req, res) {
+  const id = req.query.id;
+  const spine = req.query.spine;
+
+  const atlasRes = await fetch(
+    `${process.env.VITE_CHARACTER_ASSET_PATH}/${spine}/Web/${
+      spine === "TV-head" ? "" : `${id}/`
+    }${spine}.atlas`
+  );
+
+  if (atlasRes.ok) {
+    let text = await atlasRes.text();
+    text = text.replace(`${spine}.png`, `${spine}/${id}.png`);
+    const buffer = Buffer.from(text);
+
+    return res.status(200).end(buffer);
+  } else {
+    return res.status(404).end();
+  }
+}

package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "vdev": "vercel dev",
     "build": "tsc && vite build",
     "preview": "vite preview"
   },
@@ -14,9 +14,12 @@
     "@types/react-dom": "^18.0.10",
     "@typescript-eslint/eslint-plugin": "^5.40.0",
     "@typescript-eslint/parser": "^5.40.0",
+    "@vercel/node-bridge": "^3.1.8",
     "eslint": "^8.25.0",
+    "isomorphic-unfetch": "^4.0.2",
     "serve": "^14.1.2",
     "typescript": "^4.6.4",
+    "vercel": "^28.12.4",
     "vite": "^3.1.0"
   },
   "dependencies": {

src/characters/character.ts

@@ -45,9 +45,7 @@ export class Character extends Phaser.GameObjects.GameObject {
     super(scene, "character");
 
     this.scene = scene;
-    const atlas = `${CHARACTER_ASSET_PATH}/${spine}/Web/${
-      spine === "TV-head" ? "" : `${id}/`
-    }${spine}.atlas`;
+    const atlas = `/api/atlas?spine=${spine}&id=${id}`;
     const texture = `${CHARACTER_ASSET_PATH}/${spine}/Web/${
       spine === "TV-head" ? "" : `${id}/`
     }${spine}.png`;
@@ -105,7 +103,7 @@ export class Character extends Phaser.GameObjects.GameObject {
         }
       });
 
-      this.scene.load.image(`${spine}.png`, texture);
+      this.scene.load.image(`${spine}/${id}.png`, texture);
 
       this.scene.load.spine(
         `${spine}/${id}-character`,

src/characters/player.ts

@@ -30,6 +30,11 @@ export class Player extends Phaser.GameObjects.GameObject {
     });
   }
 
+  destroy(...args: any[]) {
+    this.character?.instance?.destroy(...args);
+    super.destroy(...args);
+  }
+
   // TODO: move this
   // loadCharacters(
   //   characters: CharacterType[],

src/ui/hud/CharSelect.tsx

@@ -7,7 +7,8 @@ import { CharacterSpine } from "types/character";
 import CharSelectScene from "scenes/CharSelect";
 
 const COLLECTION_TO_SPINE: Record<string, CharacterSpine> = {
-  "0x7D1070fdbF0eF8752a9627a79b00221b53F231fA": "Neko",
+  "0x7aCeE5D0acC520faB33b3Ea25D4FEEF1FfebDE73": "Neko",
+  "0x7D1070fdbF0eF8752a9627a79b00221b53F231fA": "Rabby",
   "": "TV-head",
 };