Merge pull request #16 from zCloak-Network/feat/bgm

feat: bgm

package.json

@@ -12,51 +12,53 @@
     "postinstall": "husky install"
   },
   "dependencies": {
-    "@dfinity/agent": "^1.0.0",
-    "@dfinity/candid": "^1.0.0",
-    "@dfinity/principal": "^1.0.0",
+    "@dfinity/agent": "^1.0.1",
+    "@dfinity/candid": "^1.0.1",
+    "@dfinity/principal": "^1.0.1",
     "@rwh/keystrokes": "^1.5.4",
     "@solana/wallet-adapter-base": "0.9.23",
     "@solana/wallet-adapter-react": "0.15.35",
     "@solana/wallet-adapter-react-ui": "0.9.35",
-    "@solana/wallet-adapter-wallets": "0.19.26",
-    "@solana/web3.js": "^1.90.0",
-    "@tanstack/react-query": "^5.20.5",
+    "@solana/wallet-adapter-wallets": "0.19.31",
+    "@solana/web3.js": "^1.91.0",
+    "@tanstack/react-query": "^5.25.0",
     "@types/file-saver": "^2.0.7",
+    "@types/howler": "^2.2.11",
     "@types/isomorphic-fetch": "^0.0.39",
-    "@web3modal/wagmi": "4.0.5",
+    "@web3modal/wagmi": "4.0.13",
     "@zcloak/crypto": "^2.0.0",
     "@zcloak/miden": "^2.0.0",
     "axios": "^1.6.7",
     "borsh": "^2.0.0",
     "daisyui": "^4.7.2",
     "file-saver": "^2.0.5",
+    "howler": "^2.2.4",
     "isomorphic-fetch": "^3.0.0",
-    "pixi.js": "7.4.0",
+    "pixi.js": "8.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.22.0",
+    "react-router-dom": "^6.22.3",
     "react-toastify": "^10.0.4",
     "tailwindcss": "^3.4.1",
-    "viem": "^2.7.9",
+    "viem": "^2.7.20",
     "vite-plugin-node-polyfills": "^0.21.0",
     "wagmi": "^2.5.7"
   },
   "devDependencies": {
-    "@types/react": "^18.2.55",
-    "@types/react-dom": "^18.2.19",
-    "@typescript-eslint/eslint-plugin": "^7.0.1",
-    "@typescript-eslint/parser": "^7.0.1",
+    "@types/react": "^18.2.64",
+    "@types/react-dom": "^18.2.21",
+    "@typescript-eslint/eslint-plugin": "^7.1.1",
+    "@typescript-eslint/parser": "^7.1.1",
     "@vitejs/plugin-react": "^4.2.1",
-    "autoprefixer": "^10.4.17",
-    "eslint": "^8.56.0",
-    "eslint-plugin-react": "^7.33.2",
+    "autoprefixer": "^10.4.18",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react": "^7.34.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
     "husky": "^9.0.11",
     "postcss": "^8.4.35",
-    "typescript": "^5.3.3",
-    "vite": "^5.1.3",
+    "typescript": "5.4.0",
+    "vite": "^5.1.5",
     "vite-plugin-svgr": "^4.2.0"
   }
 }

src/pages/game/_components/Game.tsx

@@ -11,6 +11,7 @@ import {
   Container,
   TilingSprite,
   AnimatedSprite,
+  Ticker,
 } from "pixi.js";
 import * as keystrokes from "@rwh/keystrokes";
 import { Keystrokes } from "@rwh/keystrokes";
@@ -39,12 +40,12 @@ export const Game = () => {
   const { bindKey } = keystrokes as unknown as Keystrokes;
   const [gameIsOver, setGameOver] = useState(false);
 
-  const app = useRef<Application>();
+  const app = useRef<Application>(new Application());
 
   useEffect(() => {
     console.log("Game run");
     void Promise.all([getMap(), Assets.load("/spritesheet.json")])
-      .then(([mapInfo, sheet]) => {
+      .then(async ([mapInfo, sheet]) => {
         setLoading(false);
         if (!mapInfo.data) {
           return console.error("get map fail");
@@ -56,21 +57,21 @@ export const Game = () => {
         const StageWidthCells = Map[0].length;
         const StageHeight = StageHeightCells * CellSize;
         const StageWidth = StageWidthCells * CellSize;
-        app.current = new Application({
+        await app.current.init({
           width: StageWidth,
           height: StageHeight,
         });
-        wrapRef.current?.appendChild(app.current.view as HTMLCanvasElement);
+        wrapRef.current?.appendChild(app.current.canvas);
 
         const gameScene = new Container();
         app.current.stage.addChild(gameScene);
 
         // map
-        const land = new TilingSprite(
-          sheet.textures[TypeTextureMap[0]],
-          StageWidth,
-          StageHeight
-        );
+        const land = new TilingSprite({
+          texture: sheet.textures[TypeTextureMap[0]],
+          width: StageWidth,
+          height: StageHeight,
+        });
         gameScene.addChild(land);
         const container = new Container();
         gameScene.addChild(container);
@@ -180,7 +181,8 @@ export const Game = () => {
         bindKey("a", handleKeyLeft);
 
         //Start the game loop
-        const gameLoop = (delta: number) => {
+        const gameLoop = (ticker: Ticker) => {
+          const delta = ticker.deltaTime;
           const { moveTarget, moving, gameOver, character } = gameState;
           if (character && moveTarget && moving) {
             if (isOutOfBound(Map, moveTarget)) {

src/pages/game/_components/GameOver.tsx

@@ -113,7 +113,7 @@ export const GameOver = ({
   // SBT
   const [mintHash, setMintHash] = useState<string | undefined>();
   const { hasSBT, mint, mintLoading, refetchSBT } = useEvmSbt();
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+   
   const SBTBrowser = useEVMSBTBrowser(Number(hasSBT), mintHash);
   const mintSBTResult = useWaitForTransactionReceipt({
     hash: mintHash as `0x${string}`,

src/pages/game/page.tsx

@@ -4,6 +4,7 @@ import { useAccountEffect } from "wagmi";
 import { useState, useEffect } from "react";
 import { useWallet } from "@solana/wallet-adapter-react";
 import { useDispatchStore, useStateStore } from "@/store";
+import { Howl } from "howler";
 
 export default function GamePage() {
   const [isConnected, setIsconnected] = useState(false);
@@ -30,5 +31,20 @@ export default function GamePage() {
     }
   }, [connected, dispatch, network]);
 
+  const sound = new Howl({
+    src: ["/bgm.mp3"],
+    volume: 0.7,
+    loop: true,
+  });
+
+  useEffect(() => {
+    console.log("isConnected", isConnected);
+    if (isConnected) {
+      sound.play();
+    } else {
+      sound.stop();
+    }
+  }, [isConnected]);
+
   return isConnected ? <Game /> : <Hero />;
 }