chore: tweaks (#26)

lefthook.yml

@@ -0,0 +1,5 @@
+pre-commit:
+  parallel: true
+  commands:
+    compress-map:
+      run: yarn compress-map && git add .

package.json

@@ -6,7 +6,8 @@
   "scripts": {
     "vdev": "vercel dev",
     "build": "tsc && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "compress-map": "node ./scripts/compress-map.js"
   },
   "devDependencies": {
     "@iconify-json/heroicons": "^1.1.8",
@@ -26,10 +27,12 @@
     "@vercel/node-bridge": "^3.1.8",
     "eslint": "^8.25.0",
     "isomorphic-unfetch": "^4.0.2",
+    "lefthook": "^1.3.3",
     "serve": "^14.1.2",
     "typescript": "^4.6.4",
     "vercel": "^28.16.2",
-    "vite": "^3.1.0"
+    "vite": "^3.1.0",
+    "zipson": "^0.2.12"
   },
   "dependencies": {
     "@fontsource/chakra-petch": "^4.5.9",

public/config.json

@@ -1,6 +1,9 @@
 {
   "main": "map",
   "maps": {
-    "map": "/tiles/map.json"
+    "map": {
+      "raw": "/tiles/map.json",
+      "compress": "/tiles/map-compressed.json"
+    }
   }
 }

scripts/compress-map.js

@@ -0,0 +1,17 @@
+import { stringify } from "zipson";
+import { readFile, writeFile } from "fs/promises";
+import config from "../public/config.json" assert { type: "json" };
+import p from "path";
+
+console.log("Begin compressing maps");
+Object.values(config.maps).forEach((mapConfig) => {
+  readFile(p.join("./public", mapConfig.raw), { encoding: "utf8" }).then(
+    (jsonString) => {
+      const json = JSON.parse(jsonString);
+      writeFile(p.join("./public", mapConfig.compress), stringify(json));
+      console.log(
+        `Done compress map ${mapConfig.raw} -> ${mapConfig.compress}`
+      );
+    }
+  );
+});

src/components/Profile/index.tsx

@@ -3,12 +3,11 @@ import { SceneKey } from "constants/scenes";
 import { useGameState } from "stores/game";
 import { Transition } from "@headlessui/react";
 import clsx from "clsx";
-
-const Overview = React.lazy(() => import("./Overview/index.js"));
-const Inventory = React.lazy(() => import("./Inventory.js"));
+import Overview from "./Overview";
+import Inventory from "./Inventory";
 
 export const Profile = () => {
-  const { activeSceneKey, setActiveSceneKey } = useGameState();
+  const { setActiveSceneKey } = useGameState();
   const [close, setClose] = useState(false);
   const [viewKey, setViewKey] = useState<"overview" | "inventory">("overview");
 
@@ -34,7 +33,7 @@ export const Profile = () => {
 
   return (
     <Transition
-      show={activeSceneKey === SceneKey.PROFILE && !close}
+      show={!close}
       appear
       enter="transition-all duration-150"
       enterFrom="opacity-0 scale-104"
@@ -64,6 +63,7 @@ export const Profile = () => {
               className="text-white -mt-16 pt-20 px-12 text-xl flex-1 flex justify-evenly items-center"
             >
               <button
+                type="button"
                 onClick={() => setClose(true)}
                 className="flex flex-col items-center flex-1 opacity-30 hover:opacity-100 transition-opacity duration-75 ease-in-out"
               >
@@ -86,6 +86,7 @@ export const Profile = () => {
                   <React.Fragment key={`profile-${b.id}`}>
                     <div className="w-1px bg-gray h-1/2" />
                     <button
+                      type="button"
                       onClick={() => setViewKey(b.id as any)}
                       className={clsx(
                         "flex flex-col items-center flex-1 transition-opacity duration-75 ease-in-out",

src/objects/TitleBg.ts

@@ -2,6 +2,7 @@ import Phaser from "phaser";
 
 export class TitleBg {
   instance!: Phaser.GameObjects.Image;
+  logo!: Phaser.GameObjects.Image;
 
   constructor(props: { scene: Phaser.Scene }) {
     const { scene } = props;
@@ -21,16 +22,19 @@ export class TitleBg {
         cameraHeight / this.instance.height
       )
     );
+    this.instance.setDepth(9999);
 
-    const logo = scene.add.image(0, 0, "logo");
+    this.logo = scene.add.image(0, 0, "logo");
 
-    logo.setScale(
+    this.logo.setScale(
       Math.max(
         cameraWidth / this.instance.width,
         cameraHeight / this.instance.height
-      ) * 0.85
+      ) * 0.75
     );
 
-    logo.setPosition(window.innerWidth / 2, logo.height / 1.5);
+    this.logo.setDepth(9999);
+
+    this.logo.setPosition(window.innerWidth / 2, this.logo.height / 2);
   }
 }

src/scenes/Game/Map.ts

@@ -39,7 +39,6 @@ export default class GameMap extends Phaser.Scene {
 
   preload() {
     this.bg = new TitleBg({ scene: this });
-    this.bg.instance.setDepth(9999);
     // Launch interaction scene
     const interactionScene = this.scene.get(
       SceneKey.GAME_INTERACTION
@@ -241,28 +240,38 @@ export default class GameMap extends Phaser.Scene {
         this.matter.add.gameObject(instance);
         instance.setFixedRotation();
 
-        this.cameras.main
-          .once(Phaser.Cameras.Scene2D.Events.FADE_OUT_COMPLETE, () => {
-            this.bg.instance.destroy(true);
-
-            // Follow the first character
-            this.cameras.main.startFollow(instance, true, 0.05, 0.05);
-
-            // Fade in
+        this.tweens
+          .create({
+            targets: this.bg.logo,
+            props: {
+              alpha: 0,
+            },
+            duration: 200,
+            ease: "easeInOut",
+          })
+          .once(Phaser.Tweens.Events.TWEEN_COMPLETE, () => {
             this.cameras.main
-              .once(Phaser.Cameras.Scene2D.Events.FADE_IN_COMPLETE, () => {
-                useGameState.setState({ activeSceneKey: SceneKey.GAME });
+              .once(Phaser.Cameras.Scene2D.Events.FADE_OUT_COMPLETE, () => {
+                // Follow the first character
+                this.cameras.main.startFollow(instance, true, 0.05, 0.05);
+
+                // Fade in
+                this.cameras.main
+                  .once(Phaser.Cameras.Scene2D.Events.FADE_IN_COMPLETE, () => {
+                    useGameState.setState({ activeSceneKey: SceneKey.GAME });
 
-                this.scene.launch(SceneKey.MINIMAP, {
-                  player: this.player,
-                  layers: createdLayers,
-                  w: this.map.widthInPixels,
-                  h: this.map.heightInPixels,
-                });
+                    this.scene.launch(SceneKey.MINIMAP, {
+                      player: this.player,
+                      layers: createdLayers,
+                      w: this.map.widthInPixels,
+                      h: this.map.heightInPixels,
+                    });
+                  })
+                  .fadeIn(200);
               })
-              .fadeIn(200);
+              .fadeOut(200);
           })
-          .fadeOut(200);
+          .play();
       });
     }
   }

src/scenes/WorldLoader.ts

@@ -4,6 +4,7 @@ import Phaser from "phaser";
 import { Ad } from "types/ads";
 import { SceneKey } from "../constants/scenes";
 import { useGameState } from "stores/game";
+import { parse } from "zipson";
 
 export default class WorldLoader extends Phaser.Scene {
   constructor() {
@@ -25,14 +26,15 @@ export default class WorldLoader extends Phaser.Scene {
     )
       return;
 
-    Object.entries<string>(config.maps).forEach((entry) => {
-      this.load.tilemapTiledJSON(entry[0], entry[1]);
+    Object.entries<{ compress: string }>(config.maps).forEach((entry) => {
+      this.load.text(entry[0], entry[1].compress);
     });
 
     this.load.json("ads", `${API_BASE_URL}/ads?map_id=${0}`);
   }
 
   create() {
+    const config = this.cache.json.get("config");
     this.load.once(Phaser.Loader.Events.COMPLETE, () => {
       this.cache.json.remove("ads");
       this.scene.start(SceneKey.GAME);
@@ -45,6 +47,12 @@ export default class WorldLoader extends Phaser.Scene {
     ads.forEach((ad: Ad) => {
       this.load.image(`ads_${ad.code}`, ad.image_url);
     });
+
+    Object.keys(config.maps).forEach((mapId) => {
+      const jsonMap = this.cache.text.get(mapId);
+      this.load.tilemapTiledJSON(mapId, parse(jsonMap));
+    });
+
     this.load.start();
   }
 }

src/ui/components/ProfileBar.tsx

@@ -26,26 +26,6 @@ export const ProfileBar = () => {
               <Avatar address={account} size={43} />
             </div>
           </button>
-          <div
-            style={{
-              background:
-                "linear-gradient(to bottom, #B0B0B0, #858485, #717071, #494949)",
-            }}
-            className="flex items-center shadow-xl rounded-r-md relative border-1.5 border-#424343 w-100px h-20px -ml-1 pl-1"
-          >
-            <div
-              style={{
-                background:
-                  "linear-gradient(to bottom, #D8C2FD, #9656FF, #8049D9, #563093)",
-              }}
-              className="absolute top-0 h-full left-0 w-2/3"
-            />
-            <img
-              src="/assets/images/xp.png"
-              className="z-10 absolute h-8 -left-1"
-              alt=""
-            />
-          </div>
         </div>
       </div>
     </>

yarn.lock

@@ -6902,6 +6902,60 @@ kolorist@^1.7.0:
   resolved "https://registry.yarnpkg.com/kolorist/-/kolorist-1.7.0.tgz#8e22bc470ea2d2743dbd461808f8b5246b19f5f4"
   integrity sha512-ymToLHqL02udwVdbkowNpzjFd6UzozMtshPQKVi5k1EjKRqKqBrOnE9QbLEb0/pV76SAiIT13hdL8R6suc+f3g==
 
+[email protected]:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/lefthook-darwin-arm64/-/lefthook-darwin-arm64-1.3.3.tgz#93ef3f9d5509fd199f2ea94fc90d06e64441910d"
+  integrity sha512-dtfgqtoY7/6V5p3nTZ88+sQluTrc80ZXjZb7VNg1JYcUybKt5dSvhipj03LRmAdmMbmI4T88vKgOwAAxSiJqcg==
+
+[email protected]:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/lefthook-darwin-x64/-/lefthook-darwin-x64-1.3.3.tgz#5d86e1be24056d58ffedc02750778557db40edf7"
+  integrity sha512-TshLjcQWUeQ+xwnkAEStKSCoidLLAg2/Esbog3h7wuBCskAXvD/0WcFM1uSdAOQrVT+LVeJ2STvLviK8xvvavw==
+
+[email protected]:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/lefthook-freebsd-arm64/-/lefthook-freebsd-arm64-1.3.3.tgz#8da364379fddc6728c3dd1e9b4ff32a2ce295431"
+  integrity sha512-dx4kW4O+dExhZFdwnqsCIXwPpgYiPmQnlqxpqdVLC+ITPmp1NrflgLyBAsfPkrlwRrwRmUmvocXRYcrH4l6exQ==
+
+[email protected]:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/lefthook-freebsd-x64/-/lefthook-freebsd-x64-1.3.3.tgz#257dfa35fd4d85fc66fb3cb219519136b58d81ea"
+  integrity sha512-XcyrklF59sht7n6j/P7ke3hFpqI5wm2xHfAArhhkimXxmL4/aBTYCecew2t4eIiXtjWio2Dij/sxCK5roEjUiQ==
+
+[email protected]:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/lefthook-linux-arm64/-/lefthook-linux-arm64-1.3.3.tgz#3851d15e4236f60f92f271349e7602c9f2f7c638"
+  integrity sha512-yvS8Qg3eDXl1bXpihURTJivVNspW4ZVXVyj7U+sb5cTa+bvzv4GeJpftBAprK2kLUSdzsvNXPEi3EdUDj1CJQQ==
+
+[email protected]:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/lefthook-linux-x64/-/lefthook-linux-x64-1.3.3.tgz#888a09b9f1a2193ffa24696b6784cb8034b36c71"
+  integrity sha512-e1t85k/kS+NmfUIG6D4X8us4JZIwuI4zoZkuYZDLRiqGh4gpFd8+Edr2E3pJU5Xncd+7sFdGq5RqVpC+yLtQXg==
+
+[email protected]:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/lefthook-windows-arm64/-/lefthook-windows-arm64-1.3.3.tgz#dba65be625890daae73717d46d9169ea18cb9aef"
+  integrity sha512-WFdPKfvet7pqyDtaKi89opcox8eiz/QtPOmzRc1ZcDQTpIghavFYxswdEJtEpghoYzZ6Yt44EevBu8PFEmPMDg==
+
+[email protected]:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/lefthook-windows-x64/-/lefthook-windows-x64-1.3.3.tgz#e8c8e925268dc8e1c17607a9bfb463e61329bc94"
+  integrity sha512-9ab4HuCAsLVs+0gWDwJCnKDdsX7fBZ7iuK/hmhEuwyQmrkC1adac+USGLoRATg50rvy4FjclHrNMcu+tZ8rXYQ==
+
+lefthook@^1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/lefthook/-/lefthook-1.3.3.tgz#096e78c0a98de9007e8de844a50bcdc23d0cad6f"
+  integrity sha512-ZBqsjirNDlNts0L2pKKKcZwSVE0bFNHMupq9/7E0ETagdxoJFVYFxg+zEaAoyKJqGuc1i+k70sB9t1A6Z0EiTA==
+  optionalDependencies:
+    lefthook-darwin-arm64 "1.3.3"
+    lefthook-darwin-x64 "1.3.3"
+    lefthook-freebsd-arm64 "1.3.3"
+    lefthook-freebsd-x64 "1.3.3"
+    lefthook-linux-arm64 "1.3.3"
+    lefthook-linux-x64 "1.3.3"
+    lefthook-windows-arm64 "1.3.3"
+    lefthook-windows-x64 "1.3.3"
+
 levn@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade"
@@ -10573,6 +10627,11 @@ yocto-queue@^0.1.0:
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
 
+zipson@^0.2.12:
+  version "0.2.12"
+  resolved "https://registry.yarnpkg.com/zipson/-/zipson-0.2.12.tgz#501f92e93f1c602ff908ad2c1c602e72746ecebb"
+  integrity sha512-+u+fyZQXJUJDTf4NGCChW+LoWGqCrhwHAfvtCtcmE0e40KmQt4YSP4l3TOay1WjRNv+VfODgBD/vNwaSSGnDwA==
+
 zustand@^4.3.1:
   version "4.3.3"
   resolved "https://registry.yarnpkg.com/zustand/-/zustand-4.3.3.tgz#c9113499074dde2d6d99c1b5f591e9329572c224"