Merge branch 'pr-3' into wtf2

web/components/squares/squares-list-feature.tsx

@@ -1,48 +1,38 @@
 'use client';
 
 import { useWallet } from '@solana/wallet-adapter-react';
-import { WalletButton } from '../solana/solana-provider';
 import { AppHero, ellipsify } from '../ui/ui-layout';
 import { ExplorerLink } from '../cluster/cluster-ui';
-import { useSquaresProgram, useAllGames } from './squares-data-access';
+import { useAllGames } from './squares-data-access';
 import { SquaresCreate } from './squares-ui';
+import { WalletButton } from '../solana/solana-provider';
 
 export default function SquaresListFeature() {
-  const { publicKey } = useWallet();
+  const { connected } = useWallet();
   const gamesData = useAllGames();
 
-  console.log("Games data:", gamesData.games.data);
-
   return (
     <div>
-      {publicKey ? (
-        <>
-          <AppHero
-            title="Squares"
-            subtitle={
-              'You can create a new game of Squares by clicking the "Create" button. The state of the game is stored on-chain.'
-            }
-          >
-            <SquaresCreate />
-          </AppHero>
-          <div className="games-list">
-            {gamesData?.games?.data?.map((game) => (
-              <div key={game.publicKey.toBase58()} className="game-item">
-                <ExplorerLink path={game.publicKey.toBase58()} label={game.publicKey.toBase58()} />
+      <AppHero
+        title="Squares"
+        subtitle={
+          'View all available games or create a new one.'
+        }
+      >
+        {connected ? <SquaresCreate /> : <WalletButton />}
+      </AppHero>
+      <div className="games-list flex flex-wrap justify-center">
+        {gamesData?.games?.data?.map((game) => (
+          <div key={game.publicKey.toBase58()} className="w-full md:w-1/2 lg:w-1/3 p-4">
+            <a href={`/games/${game.publicKey.toBase58()}`} className="block">
+              <div className="border rounded-lg p-4 hover:shadow-lg transition-shadow">
+                <h2 className="text-xl font-semibold mb-2">Game #{game.publicKey.toBase58().slice(0, 8)}</h2>
+                <ExplorerLink path={`address/${game.publicKey.toBase58()}`} label={ellipsify(game.publicKey.toBase58())} />
               </div>
-            ))}
+            </a>
           </div>
-        </>
-      ) : (
-          <AppHero
-            title="Squares"
-            subtitle={
-              'You can create a new game of Squares after you select your wallet. The state of the game is stored on-chain.'
-            }
-          >
-            <WalletButton />
-          </AppHero>
-      )}
+        ))}
+      </div>
     </div>
   );
 }

web/components/ui/ui-layout.tsx

@@ -16,7 +16,7 @@ import {
 import toast, { Toaster } from 'react-hot-toast';
 
 const pages: { label: string; path: string }[] = [
-  { label: 'Squares', path: '/games' },
+  { label: 'Games', path: '/games' },
 ];
 
 export function UiLayout({ children }: { children: ReactNode }) {
@@ -47,6 +47,9 @@ export function UiLayout({ children }: { children: ReactNode }) {
           </ul>
         </div>
         <div className="flex-none space-x-2">
+          <Link href="/games/new" className="btn btn-primary">
+            + New Game
+          </Link>
           <WalletButton />
           <ClusterUiSelect />
         </div>
@@ -69,7 +72,7 @@ export function UiLayout({ children }: { children: ReactNode }) {
       <footer className="footer footer-center p-4 bg-base-300 text-base-content">
         <aside>
           <p>
-            schizobuilt by{' '}
+            schizobuilt using{' '}
             <a
               className="link hover:text-white"
               href="https://x.com/rhizanthemum"