feat: better loader

Mississippi-Labs · Nov 12, 2023 · b689738 · b689738
1 parent 6732b2f
commit b689738
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 76 deletions.
diff --git a/packages/client/src/components/Chests/index.tsx b/packages/client/src/components/Chests/index.tsx
@@ -3,6 +3,7 @@ import { Container, Sprite } from '@pixi/react';
 import { MapConfig } from '@/config/map';
 import * as PIXI from 'pixi.js';
 import ProgressBar from '@/components/Chests/ProgressBar';
+import { loadAssets } from '@/utils';
 const { cellSize, spriteCellSize, visualWidth, visualHeight } = MapConfig;
 
 interface IChest {
@@ -21,11 +22,13 @@ interface IProps {
 const Chests = (props: IProps) => {
   const { offsetX = 0, offsetY = 0, data = [] } = props;
 
-  const [texture, setTexture] = useState<PIXI.Texture<PIXI.Resource>>();
+  const [texture, setTexture] = useState<PIXI.Texture>();
 
   useEffect(() => {
-    const chestTexture = PIXI.Texture.from('/assets/img/chest.png');
-    setTexture(chestTexture);
+    loadAssets('/assets/img/chest.png', (assets) => {
+      const chestTexture = PIXI.Texture.from(assets);
+      setTexture(chestTexture);
+    })
   }, []);
 
   if (!texture) {
@@ -40,7 +43,9 @@ const Chests = (props: IProps) => {
         data.map((item) => {
           return (
             <Container position={[item.x * cellSize, item.y * cellSize]} key={item.id}>
-              <ProgressBar width={cellSize} animate={item.id === 1}/>
+              {
+                item.opening && <ProgressBar width={cellSize} animate={item.id === 1}/>
+              }
               <Sprite
                 width={cellSize}
                 height={cellSize * 64 / 94}

diff --git a/packages/client/src/components/PIXIAPP/index.tsx b/packages/client/src/components/PIXIAPP/index.tsx
@@ -17,11 +17,12 @@ const { cellSize, spriteCellSize, visualWidth, visualHeight } = MapConfig;
 
 interface IProps {
   players: IPlayer[];
+  chests: [];
 }
 
 const PIXIAPP = (props: IProps) => {
 
-  const { players = [] } = props;
+  const { players = [], chests = [] } = props;
 
   // const [players, setPlayers] = useState([{ x: 1, y: 1 }]);
   //
@@ -32,6 +33,8 @@ const PIXIAPP = (props: IProps) => {
   //   }, 3000)
   // }, [])
 
+  console.log(chests, 'chests')
+
   return (
     <Stage
       width={cellSize * visualWidth}
@@ -58,7 +61,7 @@ const PIXIAPP = (props: IProps) => {
           },
         ]}
       />
-      <Chests data={TreasureChestMockData}/>
+      <Chests data={chests}/>
       <PIXIPlayers data={players}/>
       <PIXIFog/>
 

diff --git a/packages/client/src/components/PIXIPlayers/Player.tsx b/packages/client/src/components/PIXIPlayers/Player.tsx
@@ -1,9 +1,10 @@
 import React, { useEffect, useState } from 'react';
-import { Container, AnimatedSprite, Graphics } from '@pixi/react';
+import { Container, AnimatedSprite } from '@pixi/react';
 import * as PIXI from 'pixi.js';
 
 import { Actions, FrameOffsetY, FrameSize } from '@/config/hero';
 import { MapConfig } from '@/config/map';
+import { loadAssets } from '@/utils';
 const { cellSize } = MapConfig;
 
 export type PlayerToward = 'Left' | 'Right';
@@ -61,10 +62,8 @@ const Player = (props: IPlayer) => {
 
     let sheet;
     const textures = [];
-    const img = new Image();
-    img.src = `/assets/img/hero/${region}/${type}.png`;
-    img.onload = () => {
-      sheet = PIXI.Texture.from(`/assets/img/hero/${region}/${type}.png`);
+    loadAssets(`/assets/img/hero/${region}/${type}.png`, (assets) => {
+      sheet = PIXI.Texture.from(assets);
       for (let i = 0; i < Actions[action].step; i++) {
         const frame = new PIXI.Rectangle(i * FrameSize, Actions[action].row * FrameSize + FrameOffsetY, FrameSize, FrameSize);
         textures.push(new PIXI.Texture(sheet, frame));
@@ -73,11 +72,7 @@ const Player = (props: IPlayer) => {
       setTextureMap({
         ...textureMap
       })
-    }
-
-    img.onerror = () => {
-      console.error(`${region}/${type} not found`);
-    }
+    })
   }
 
   useEffect(() => {
@@ -137,63 +132,6 @@ const Player = (props: IPlayer) => {
             )
         })
       }
-      {/*<AnimatedSprite*/}
-      {/*  key={'body'}*/}
-      {/*  textures={body}*/}
-      {/*  {...commonProps}*/}
-      {/*/>*/}
-
-      {/*<AnimatedSprite*/}
-      {/*  key={'head'}*/}
-      {/*  textures={head}*/}
-      {/*  {...commonProps}*/}
-      {/*/>*/}
-
-      {/*<AnimatedSprite*/}
-      {/*  key={'hair'}*/}
-      {/*  textures={hair}*/}
-      {/*  {...commonProps}*/}
-      {/*/>*/}
-
-      {/*<AnimatedSprite*/}
-      {/*  key={'eyes'}*/}
-      {/*  textures={eyes}*/}
-      {/*  {...commonProps}*/}
-      {/*/>*/}
-
-      {/*<AnimatedSprite*/}
-      {/*  key={'arms'}*/}
-      {/*  textures={arms}*/}
-      {/*  {...commonProps}*/}
-      {/*/>*/}
-
-      {/*<AnimatedSprite*/}
-      {/*  key={'armor'}*/}
-      {/*  textures={armor}*/}
-      {/*  {...commonProps}*/}
-      {/*/>*/}
-
-      {/*<AnimatedSprite*/}
-      {/*  key={'helmet'}*/}
-      {/*  textures={helmet}*/}
-      {/*  {...commonProps}*/}
-      {/*/>*/}
-
-      {/*<AnimatedSprite*/}
-      {/*  key={'weapon'}*/}
-      {/*  textures={weapon}*/}
-      {/*  {...commonProps}*/}
-      {/*/>*/}
-
-      {/*<Graphics*/}
-      {/*  draw={g => {*/}
-      {/*    g.clear();*/}
-      {/*    const color = 0xFF0000;*/}
-      {/*    g.beginFill(color, 0.2);*/}
-      {/*    g.lineStyle(1, color, 1);*/}
-      {/*    g.drawRect(0, 0, cellSize, cellSize);*/}
-      {/*  }}*/}
-      {/*/>*/}
     </Container>
   );
 };

diff --git a/packages/client/src/components/PIXIPlayers/index.tsx b/packages/client/src/components/PIXIPlayers/index.tsx
@@ -10,8 +10,6 @@ const PIXIPlayers = (props: IProps) => {
 
   const { data = [] } = props;
 
-  console.log(data, 'data')
-
   return (
     <Container>
       {

diff --git a/packages/client/src/pages/game/index.tsx b/packages/client/src/pages/game/index.tsx
@@ -478,6 +478,8 @@ const Game = () => {
     }
   }
 
+  console.log(boxs, 'boxs')
+
   return (
     <GameContext.Provider
       value={{
@@ -518,6 +520,7 @@ const Game = () => {
         {/*/>*/}
         <PIXIAPP
           players={players}
+          chests={boxs}
         />
         {
           startBattleData ? <Battle curPlayer={battleCurPlayer} targetPlayer={targetPlayer} battleId={battleId} finishBattle={finishBattle} /> : null

diff --git a/packages/client/src/utils/index.ts b/packages/client/src/utils/index.ts
@@ -1,2 +1,3 @@
 export { cutMapData, loadMapData, getCellClass, isMovable } from './map';
-export { delay } from './delay';
+export { delay } from './delay';
+export { loadAssets } from './pixi';
diff --git a/packages/client/src/utils/pixi.ts b/packages/client/src/utils/pixi.ts
@@ -0,0 +1,12 @@
+
+export const loadAssets = (src, cb) => {
+  const img = new Image();
+  img.src = src;
+  img.onload = () => {
+    cb(img);
+  }
+
+  img.onerror = () => {
+    console.error(`${src} not found`);
+  }
+}