Merge pull request #141 from RuneLabsxyz/add-names

feat: display enemy address
RuneLabsxyz · Oct 15, 2024 · 6dfb6b6 · 6dfb6b6
2 parents 66e7d1a + dc849fe
commit 6dfb6b6
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 51 deletions.
diff --git a/client/src/lib/games/GameList.svelte b/client/src/lib/games/GameList.svelte
@@ -29,6 +29,7 @@
       >
         <p class="flex-grow text-left p-5">
           {session.value}
+          {session.enemy}
           {#if session.isStarted && session.isYourTurn}
             <span class="ml-2 text-green-600 font-bold">Your Turn</span>
           {/if}

diff --git a/client/src/routes/[slug]/client/games/openGames/+page.svelte b/client/src/routes/[slug]/client/games/openGames/+page.svelte
@@ -1,48 +1,87 @@
 <script lang="ts">
-  import { dojoStore } from '$stores/dojoStore'
-  import { componentValueStore } from '$dojo/componentValueStore'
-  import GameList from '$lib/games/GameList.svelte'
-  import { type Entity } from '@dojoengine/recs'
-  import Button from '$lib/ui/Button.svelte'
-  import { cn } from '$lib/css/cn'
-  import { goToSession, joinSession } from '$lib/game'
-  import { account } from '$stores/account'
+  import { dojoStore } from '$stores/dojoStore';
+  import { componentValueStore } from '$dojo/componentValueStore';
+  import GameList from '$lib/games/GameList.svelte';
+  import { type Entity } from '@dojoengine/recs';
+  import Button from '$lib/ui/Button.svelte';
+  import { cn } from '$lib/css/cn';
+  import { joinSession } from '$lib/game';
+  import { account } from '$stores/account';
   import { env } from '$stores/network';
-  let availableSessions: any = null
-  let currentSessions: any = null
-  let playerEntity: Entity
 
-  $: ({ clientComponents, torii, client } = $dojoStore as any)
+  type Session = {
+    value: any;
+    isYourTurn: boolean;
+    isStarted: boolean;
+    isFinished: boolean;
+    enemy: string;
+  };
 
+  let sessions: Session[] = [];
+  let playerEntity: Entity;
 
-  $: globalentity = torii.poseidonHash([BigInt(0).toString()])
+  $: ({ clientComponents, torii } = $dojoStore as any);
 
-  $: if ($account) playerEntity = torii.poseidonHash([$account?.address])
+  $: globalEntity = torii.poseidonHash([BigInt(0).toString()]);
 
-  $: global = componentValueStore(clientComponents.Global, globalentity)
-  $: player = componentValueStore(clientComponents.Player, playerEntity)
+  $: if ($account) playerEntity = torii.poseidonHash([$account.address]);
+
+  $: global = componentValueStore(clientComponents.Global, globalEntity);
+  $: player = componentValueStore(clientComponents.Player, playerEntity);
+
+  function compressAddress(address: string): string {
+    if (!address) return 'Not available';
+    return `${address.slice(0, 6)}...${address.slice(-4)}`;
+  }
 
   $: if ($global) {
-    if ($player) {
-      console.log('player', $player)
-      currentSessions = $player.games.map((game: { value: any }) => game.value)
+    let currentSessions = [];
+    let availableSessions = [];
 
-      let playerGames = new Set(currentSessions)
+    if ($player) {
+      // Get the games the player is already in
+      currentSessions = $player.games.map((game: { value: any }) => game.value);
 
-      currentSessions = currentSessions.map((e: any) => ({ value: e }))
+      const playerGamesSet = new Set(currentSessions);
 
+      // Filter out the sessions the player is already in
       availableSessions = $global.pending_sessions.filter(
-        (session: { value: unknown }) => !playerGames.has(session.value)
-      )
-
-      console.log('currentSessions', currentSessions, currentSessions.length)
-      console.log(
-        'availableSessions',
-        availableSessions,
-        availableSessions.length
-      )
+        (session: { value: any }) => !playerGamesSet.has(session.value)
+      );
     } else {
-      availableSessions = $global.pending_sessions
+      availableSessions = $global.pending_sessions;
+    }
+
+    sessions = [];
+
+    for (const session of availableSessions) {
+      const sessionEntity = torii.poseidonHash([BigInt(session.value).toString()]);
+
+      if (sessionEntity) {
+        const sessionDataStore = componentValueStore(clientComponents.Session, sessionEntity);
+        const sessionMetaDataStore = componentValueStore(clientComponents.SessionMeta, sessionEntity);
+
+        sessionDataStore.subscribe((data) => {
+          if (data) {
+            const enemyAddress = `0x${BigInt(data.player1).toString(16)}`;
+            const newSession: Session = {
+              value: session.value,
+              isYourTurn: false, 
+              isStarted: false, 
+              isFinished: data.state === 3,
+              enemy: compressAddress(enemyAddress),
+            };
+
+            sessionMetaDataStore.subscribe((metaData) => {
+              if (metaData) {
+                newSession.isStarted = metaData.p1_character !== 0;
+              }
+            });
+
+            sessions = [...sessions, newSession];
+          }
+        });
+      }
     }
   }
 </script>
@@ -53,22 +92,18 @@
     <span class="flex-grow"></span>
     <Button href={`/${$env}/client/games/create`}>+ New Game</Button>
   </div>
-    <div
-      class={cn('flex flex-col', {
-        'justify-center': !availableSessions,
-      })}
-    >
-      {#if availableSessions && availableSessions.length > 0}
-        <h1 class="text-xl ml-5 mb-3 font-bold">Games available</h1>
-        <GameList
-          {availableSessions}
-          on:select={(session) => joinSession(session.detail)}
-        />
-      {:else}
-        <div class="self-center align-middle flex flex-col gap-2">
-          <p>No games are currently available.</p>
-          <Button href={`/${$env}/client/games/create`}>+ New Game</Button>
-        </div>
-      {/if}
-    </div>
+  <div class={cn('flex flex-col', { 'justify-center': sessions.length === 0 })}>
+    {#if sessions && sessions.length > 0}
+      <h1 class="text-xl ml-5 mb-3 font-bold">Games available</h1>
+      <GameList
+        availableSessions={sessions}
+        on:select={(session) => joinSession(session.detail)}
+      />
+    {:else}
+      <div class="self-center align-middle flex flex-col gap-2">
+        <p>No games are currently available.</p>
+        <Button href={`/${$env}/client/games/create`}>+ New Game</Button>
+      </div>
+    {/if}
   </div>
+</div>
diff --git a/client/src/routes/[slug]/client/games/yourGames/+page.svelte b/client/src/routes/[slug]/client/games/yourGames/+page.svelte
@@ -14,11 +14,17 @@
     isYourTurn: boolean;
     isStarted: boolean;
     isFinished: boolean;
+    enemy: string;
   };
 
   let playerEntity: Entity
   let sessions: Session[] = []
 
+  function compressAddress(address: string): string {
+    if (!address) return 'Not available';
+    return `${address.slice(0, 6)}...${address.slice(-4)}`;
+  }
+
   $: ({ clientComponents, torii } = $dojoStore as any)
   $: if ($account) playerEntity = torii.poseidonHash([$account?.address])
   $: player = componentValueStore(clientComponents.Player, playerEntity)
@@ -34,13 +40,15 @@
         const sessionDataStore = componentValueStore(clientComponents.Session, sessionEntity)
         const sessionMetaDataStore = componentValueStore(clientComponents.SessionMeta, sessionEntity)
         
-        sessionDataStore.subscribe((data) => {
+        sessionDataStore.subscribe(async (data) => {
           if (data) {
+            let enemy = areAddressesEqual(data.player1, $account.address) ? `0x${BigInt(data.player2).toString(16)}` : `0x${BigInt(data.player1).toString(16)}`;
             const newSession: Session = {
               value: session.value,
               isYourTurn: false,
               isStarted: false,
-              isFinished: data.state === 3
+              isFinished: data.state === 3,
+              enemy: compressAddress(enemy)
             }
             sessionMetaDataStore.subscribe((metaData) => {
               if (metaData) {