From d93a2f5ffec92a9baf9e5a81543ba747198c661d Mon Sep 17 00:00:00 2001
From: Cheelax <thomas.belloc@gmail.com>
Date: Wed, 27 Sep 2023 09:12:19 +0200
Subject: [PATCH] turn status

---
 client/src/dojo/createSystemCalls.ts | 32 ++++++++++++++--------------
 client/src/ui/Canvas.tsx             | 11 +++++++---
 client/src/ui/PassTurnButton.tsx     |  4 ++--
 client/src/ui/TurnStatus.tsx         |  9 ++++++++
 client/src/utils/animation.ts        | 26 +++++++++++-----------
 5 files changed, 48 insertions(+), 34 deletions(-)
 create mode 100644 client/src/ui/TurnStatus.tsx

diff --git a/client/src/dojo/createSystemCalls.ts b/client/src/dojo/createSystemCalls.ts
index 9bf6b61..b3e509e 100644
--- a/client/src/dojo/createSystemCalls.ts
+++ b/client/src/dojo/createSystemCalls.ts
@@ -29,7 +29,7 @@ export function createSystemCalls(
     try {
       const tx = await execute(signer, 'Create', [ip, seed, pseudo]);
 
-      console.log(tx);
+      // console.log(tx);
       const receipt = (await signer.waitForTransaction(tx.transaction_hash, {
         retryInterval: 100,
       })) as InvokeTransactionReceiptResponse;
@@ -61,7 +61,7 @@ export function createSystemCalls(
     try {
       const tx = await execute(signer, 'Play', [ip, x, y]);
 
-      console.log(tx);
+      // console.log(tx);
       const receipt = (await signer.waitForTransaction(tx.transaction_hash, {
         retryInterval: 100,
       })) as InvokeTransactionReceiptResponse;
@@ -91,14 +91,14 @@ export function createSystemCalls(
     try {
       const tx = await execute(signer, 'Spawn', [ip]);
 
-      console.log(tx);
+      // console.log(tx);
       const receipt = (await signer.waitForTransaction(tx.transaction_hash, {
         retryInterval: 100,
       })) as InvokeTransactionReceiptResponse;
 
       const events = receipt.events;
 
-      console.log(events);
+      // console.log(events);
       if (events) {
         const eventsTransformed = await setComponentsFromEvents(contractComponents, events);
         await executeEvents(eventsTransformed, add_hole, set_size, reset_holes, set_hit_mob, set_turn);
@@ -154,7 +154,7 @@ export async function executeEvents(
   }
 
   const characterEvents = events.filter((e): e is CharacterEvent & ComponentData => e.type === 'Character');
-  console.log('characterEvents', characterEvents);
+  // console.log('characterEvents', characterEvents);
   for (const e of characterEvents) {
     if (e.hitter !== 0) {
       set_turn(e.hitter);
@@ -163,7 +163,7 @@ export async function executeEvents(
       if (e._type === TileType.Barbarian) hit_mob = 'barbarian';
       else if (e._type === TileType.Bowman) hit_mob = 'bowman';
       else if (e._type === TileType.Wizard) hit_mob = 'wizard';
-      console.log('set_hit_mob', hit_mob);
+      // console.log('set_hit_mob', hit_mob);
       set_hit_mob(hit_mob);
     } else {
       set_turn(e._type);
@@ -279,11 +279,11 @@ function handleCharacterEvent(
 ): Omit<CharacterEvent, 'component' | 'componentValues' | 'entityIndex'> {
   const [game_id, _type] = keys.map((k) => Number(k));
   const [health, index, hitter, hit] = values.map((v) => Number(v));
-  console.log(
-    `[Character: KEYS: (game_id: ${game_id}, _type: ${_type}) - VALUES: (health: ${Number(health)}, index: ${Number(
-      index
-    )}, hitter: ${Number(hitter)}, hit: ${Number(hit)})]`
-  );
+  // console.log(
+  //   `[Character: KEYS: (game_id: ${game_id}, _type: ${_type}) - VALUES: (health: ${Number(health)}, index: ${Number(
+  //     index
+  //   )}, hitter: ${Number(hitter)}, hit: ${Number(hit)})]`
+  // );
   return {
     type: 'Character',
     game_id,
@@ -311,11 +311,11 @@ function handleTileEvent(
 ): Omit<TileEvent, 'component' | 'componentValues' | 'entityIndex'> {
   const [game_id, map_id, index] = keys.map((k) => Number(k));
   const [_type, x, y] = values.map((v) => Number(v));
-  console.log(
-    `[Tile: KEYS: (game_id: ${game_id}, map_id: ${map_id}, index: ${index}) - VALUES: (_type: ${Number(
-      _type
-    )}, (x: ${Number(x)}, y: ${Number(y)}))]`
-  );
+  // console.log(
+  //   `[Tile: KEYS: (game_id: ${game_id}, map_id: ${map_id}, index: ${index}) - VALUES: (_type: ${Number(
+  //     _type
+  //   )}, (x: ${Number(x)}, y: ${Number(y)}))]`
+  // );
   return {
     type: 'Tile',
     game_id,
diff --git a/client/src/ui/Canvas.tsx b/client/src/ui/Canvas.tsx
index a34e95d..09a30ba 100644
--- a/client/src/ui/Canvas.tsx
+++ b/client/src/ui/Canvas.tsx
@@ -20,6 +20,7 @@ import NewGame from './NewGame';
 import PassTurnButton from './PassTurnButton';
 import ResetButton from './ResetButton';
 import Sword from './Sword';
+import TurnStatus from './TurnStatus';
 
 interface CanvasProps {
   setMusicPlaying: (bool: boolean) => void;
@@ -339,9 +340,13 @@ const Canvas: React.FC<CanvasProps> = ({ setMusicPlaying }) => {
           {map.size !== 0 && <Sword targetY={getYFromMob(turn)} />}
         </Container>
       </Stage>
-
-      {map.size !== 0 && <ResetButton onClick={generateNewGame}></ResetButton>}
-      {map.size !== 0 && <PassTurnButton onClick={passTurn}></PassTurnButton>}
+      {map.size !== 0 && (
+        <div className="flex justify-between items-center -mt-20">
+          <ResetButton onClick={generateNewGame}></ResetButton>
+          <TurnStatus isProcessing={hasPlayed} />
+          <PassTurnButton onClick={passTurn}></PassTurnButton>
+        </div>
+      )}
       {map.size === 0 && <NewGame onClick={generateNewGame} onPseudoChange={setPseudo} />}
 
       <GameOverModal score={score} isOpen={isGameOver} onClose={() => setIsGameOver(false)} />
diff --git a/client/src/ui/PassTurnButton.tsx b/client/src/ui/PassTurnButton.tsx
index 42ab658..42452ae 100644
--- a/client/src/ui/PassTurnButton.tsx
+++ b/client/src/ui/PassTurnButton.tsx
@@ -7,8 +7,8 @@ interface NewGameButtonProps {
 const PassTurnButton: React.FC<NewGameButtonProps> = ({ onClick }) => {
   return (
     <button
-      className="bg-blue-500 hover:bg-blue-700 mx-10 my-10 text-white font-bold py-2 px-4 rounded"
-      style={{ width: '160px', position: 'absolute', bottom: '0', right: '2rem' }}
+      className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+      style={{ width: '160px', margin: '10px' }}
       onClick={onClick}
     >
       Pass turn
diff --git a/client/src/ui/TurnStatus.tsx b/client/src/ui/TurnStatus.tsx
new file mode 100644
index 0000000..73ce9b0
--- /dev/null
+++ b/client/src/ui/TurnStatus.tsx
@@ -0,0 +1,9 @@
+type Props = {
+  isProcessing: boolean;
+};
+
+const TurnStatus = ({ isProcessing }: Props) => {
+  return <div className="w-50">{isProcessing ? <p>Processing turn...</p> : <p>Your turn!</p>}</div>;
+};
+
+export default TurnStatus;
diff --git a/client/src/utils/animation.ts b/client/src/utils/animation.ts
index 7e7d7a2..110bd62 100644
--- a/client/src/utils/animation.ts
+++ b/client/src/utils/animation.ts
@@ -33,39 +33,39 @@ export const getFramesFromType = (
   const frames = Object.keys(resource.data.frames);
   let filtered = [];
   if (type === Animation.Idle) {
-    console.log('[', mob_name, ']', 'Idle Frame');
+    // console.log('[', mob_name, ']', 'Idle Frame');
     filtered = frames.filter((e) => e.includes('idle'));
   } else if (type === Animation.Walk) {
-    console.log('[', mob_name, ']', 'Walk Frame');
+    // console.log('[', mob_name, ']', 'Walk Frame');
     filtered = frames.filter((e) => e.includes('walk'));
   } else if (type === Animation.Carry) {
-    console.log('[', mob_name, ']', 'Carry Frame');
+    // console.log('[', mob_name, ']', 'Carry Frame');
     filtered = frames.filter((e) => e.includes('carry'));
   } else if (type === Animation.Jump) {
-    console.log('[', mob_name, ']', 'Jump Frame');
+    // console.log('[', mob_name, ']', 'Jump Frame');
     filtered = frames.filter((e) => e.includes('jump'));
   } else if (type === Animation.SwordAttack) {
-    console.log('[', mob_name, ']', 'SwordAttack Frame');
+    // console.log('[', mob_name, ']', 'SwordAttack Frame');
     filtered = frames.filter((e) => e.includes('sword'));
   } else if (type === Animation.BowAttack) {
-    console.log('[', mob_name, ']', 'BowAttack Frame');
+    // console.log('[', mob_name, ']', 'BowAttack Frame');
     filtered = frames.filter((e) => e.includes('-bow'));
   } else if (type === Animation.StaffAttack) {
-    console.log('[', mob_name, ']', 'StaffAttack Frame');
+    // console.log('[', mob_name, ']', 'StaffAttack Frame');
     filtered = frames.filter((e) => e.includes('staff'));
   } else if (type === Animation.Throw) {
-    console.log('[', mob_name, ']', 'Throw Frame');
+    // console.log('[', mob_name, ']', 'Throw Frame');
     filtered = frames.filter((e) => e.includes('throw'));
   } else if (type === Animation.Hurt) {
-    console.log('[', mob_name, ']', 'Hurt Frame');
+    // console.log('[', mob_name, ']', 'Hurt Frame');
     filtered = frames.filter((e) => e.includes('hurt'));
   } else if (type === Animation.Death) {
-    console.log('[', mob_name, ']', 'Death Frame');
+    // console.log('[', mob_name, ']', 'Death Frame');
     filtered = frames.filter((e) => e.includes('death'));
   } else {
     throw new Error('Invalid AnimationType');
   }
-  console.log('FILTERED', filtered);
+  // console.log('FILTERED', filtered);
   if (direction === Direction.SE) {
     filtered = filtered.filter((e) => /-SE-/.test(e));
   } else if (direction === Direction.SW) {
@@ -84,11 +84,11 @@ export const getFramesFromType = (
     filtered = filtered.filter((e) => /-W-/.test(e) && !/-SW-/.test(e) && !/-NW-/.test(e));
   }
 
-  console.log(filtered);
+  // console.log(filtered);
 
   return filtered.map((frame: any) => {
     const texture = Texture.from(frame);
-    console.log(texture);
+    // console.log(texture);
     texture.baseTexture.scaleMode = SCALE_MODES.NEAREST;
     return texture;
   }) as Texture[];