more trash code

.gitignore

@@ -44,4 +44,5 @@ anchor/target/.rustc_info.json
 !anchor/target/idl/*.json
 !anchor/target/types/*.ts
 test-ledger
-.yarn
+.yarn
+.vercel

web/components/squares/BoxScoreHeader.tsx

@@ -0,0 +1,26 @@
+// BoxScoreHeader.tsx
+import React from 'react';
+
+const BoxScoreHeader: React.FC = () => {
+  return (
+    <div className="bg-base-700 text-white p-4">
+      <div className="flex flex-col items-center">
+        <div className="text-4xl font-bold mb-4">NFC vs AFC</div>
+        <div className="text-lg font-medium">
+          <span className="mx-2">1st</span>
+          <span className="mx-2">2nd</span>
+          <span className="mx-2">3rd</span>
+          <span className="mx-2">4th</span>
+        </div>
+        <div className="text-2xl font-semibold mt-2">
+          <span className="mx-2">-</span>
+          <span className="mx-2">-</span>
+          <span className="mx-2">-</span>
+          <span className="mx-2">-</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BoxScoreHeader;

web/components/squares/BuySquaresButton.tsx

@@ -14,7 +14,7 @@ const BuySquaresButton = ({ selectedSquares, setSelectedSquares, gridSize, purch
           },
         });
       }}
-      className="btn btn-primary mt-4 ml-40"
+      className="btn btn-primary mt-20"
     >
       Buy Squares
     </button>

web/components/squares/FinalizeBoardButton.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 const FinalizeBoardButton = ({ isCreator, finalizeGame, setFinalizeStatus }) => {
   return (
     <button 
-      className="btn btn-primary mt-4 ml-40" 
+      className="btn btn-primary mt-20" 
       disabled={!isCreator}
       onClick={() => {
         finalizeGame.mutate(null, {

web/components/squares/GridRow.tsx

@@ -1,6 +1,21 @@
 import React from 'react';
 
 const GridRow = ({ row, rowIndex, selectedSquares, setSelectedSquares, colors, gridSize, gameState }) => {
+  function parseBase58(str) {
+    const BASE58_ALPHABET = "123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz";
+    let num = 0; // Using BigInt for handling large numbers
+    for (let i = 0; i < str.length; i++) {
+      const char = str[i];
+      const value = BASE58_ALPHABET.indexOf(char);
+      if (value === -1) {
+        // Invalid character for base58
+        return NaN;
+      }
+      num = num * 58 + value;
+    }
+    return num;
+  }
+
 
   return (
     <div className="flex">
@@ -9,17 +24,21 @@ const GridRow = ({ row, rowIndex, selectedSquares, setSelectedSquares, colors, g
       </div>
       {row.map((cell, cellIndex) => {
         const isSelected = selectedSquares.some(square => square.rowIndex === rowIndex && square.cellIndex === cellIndex);
-        const color = cell.owner ? colors[parseInt(cell.owner.toBase58().slice(0,2), 16) % colors.length] : 'bg-gray-200';
+        const color = cell.owner ? colors[parseBase58(cell.owner.toBase58().slice(0,4)) % 7] : 'bg-gray-700';
         return (
           <div
             key={cellIndex}
-            className={`w-10 h-10 flex justify-center items-center border border-gray-500 ${color} ${isSelected ? 'ring-2 ring-black' : ''}`}
+            className={`w-10 h-10 flex justify-center items-center border border-gray-500 ${color} ${isSelected ? 'ring-2 ring-black-900 bg-yellow-200' : ''}`}
             onClick={() => {
               if (cell.owner) return;
-              setSelectedSquares(prev => [...prev, { rowIndex, cellIndex }]);
-            }}
+              const isSelected = selectedSquares.some(square => square.rowIndex === rowIndex && square.cellIndex === cellIndex);
+              if (isSelected) {
+                setSelectedSquares(prev => prev.filter(square => !(square.rowIndex === rowIndex && square.cellIndex === cellIndex)));
+              } else {
+                setSelectedSquares(prev => [...prev, { rowIndex, cellIndex }]);
+              }            }}
           >
-            {cell.owner ? cell.owner.toBase58().slice(0,2) : ''}
+            <span className="text-white">{cell.owner ? cell.owner.toBase58().slice(0,2) : ''}</span>
           </div>
         );
       })}

web/components/squares/SquaresGrid.tsx

@@ -23,10 +23,14 @@ const SquaresGrid = ({ gameState, setPurchaseStatus }) => {
     return <div>Awaiting game data...</div>;
   }
 
+  if (!wallet.publicKey) {
+    return <div>Connect your wallet to play</div>;
+  }
+
   const isBoardFilled = !gameState.data.squares.some(square => square.owner === null);
   const isCreator = gameState.data.owner.equals(wallet.publicKey);
   const isBoardFinalized = gameState.data.gameStatus.finalized;
-
+  
   const gridSize = 10;
   const gridRows = Array.from({ length: gridSize }, (_, rowIndex) => {
     const row = gameState.data.squares.slice(rowIndex * gridSize, (rowIndex + 1) * gridSize);
@@ -44,14 +48,14 @@ const SquaresGrid = ({ gameState, setPurchaseStatus }) => {
       <div className="flex justify-center items-center mb-2">
         <div className="w-10 h-10"></div>
         <div className="flex">
-          <div className="font-bold text-2xl ml-10">Home Team</div>
+          <div className="font-bold text-2xl ml-10"></div>
         </div>
       </div>
       <div className="flex">
         <div className="flex flex-col items-center">
           {/* Placeholder for "Away Team" header, adjusted position */}
           <div className="h-10"></div>
-          <div className="text-2xl font-bold mr-2">Away Team</div>
+          <div className="text-2xl font-bold mr-2"></div>
         </div>
         <div>
           {/* Placeholder row for numbers, shifted to the right */}

web/components/squares/squares-data-access.tsx

@@ -95,6 +95,7 @@ export function usePurchaseSquare({ game }: { game: PublicKey }) {
   const { program } = useSquaresProgram();
   const transactionToast = useTransactionToast();
   const wallet = useWallet();
+  const { refetch } = useGetGameState({ game });
 
   const buySquare = useMutation({
     mutationKey: ['football_squares', 'buySquare', { game }],
@@ -110,6 +111,7 @@ export function usePurchaseSquare({ game }: { game: PublicKey }) {
     },
     onSuccess: (signature) => {
       transactionToast(signature);
+      return refetch();
     },
     onError: (error) => {
       console.error('Failed to buy square:', error);
@@ -125,6 +127,7 @@ export function useFinalizeGame({ game }: { game: PublicKey }) {
   const { program } = useSquaresProgram();
   const transactionToast = useTransactionToast();
   const wallet = useWallet();
+  const { refetch } = useGetGameState({ game });
 
   const finalizeGame = useMutation({
     mutationKey: ['football_squares', 'finalizeGame', { game }],
@@ -139,7 +142,7 @@ export function useFinalizeGame({ game }: { game: PublicKey }) {
     },
     onSuccess: (signature) => {
       transactionToast(signature);
-      refetch(); // Add this line
+      return refetch(); // Add this line
     },
     onError: (error) => {
       console.error('Failed to finalize game:', error);

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

@@ -8,6 +8,7 @@ import { PublicKey } from '@solana/web3.js';
 import { useGetGameState } from './squares-data-access'; // Adjust this path as necessary
 import SquaresGrid from './SquaresGrid'; // Adjust this path as necessary
 import { usePurchaseSquare, useFinalizeGame } from './squares-data-access'; // Adjust this path as necessary
+import BoxScoreHeader from './BoxScoreHeader'; // Adjust this path as necessary
 
 export default function SquaresDetailFeature() {
   const params = useParams();
@@ -49,7 +50,8 @@ export default function SquaresDetailFeature() {
   }
 
   return (
-    <div>
+    <div className="flex flex-col items-stretch">
+      <BoxScoreHeader />
       {gameState ? <SquaresGrid gameState={gameState} setPurchaseStatus={setPurchaseStatus} /> : <div>No game data available.</div>}
     </div>
   );

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

@@ -34,13 +34,14 @@ export default function SquaresListFeature() {
           </div>
         </>
       ) : (
-        <div className="max-w-4xl mx-auto">
-          <div className="hero py-[64px]">
-            <div className="hero-content text-center">
-              <WalletButton />
-            </div>
-          </div>
-        </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>
   );

web/components/ui/ui-layout.tsx

@@ -16,9 +16,6 @@ import {
 import toast, { Toaster } from 'react-hot-toast';
 
 const pages: { label: string; path: string }[] = [
-  { label: 'Account', path: '/account' },
-  { label: 'Clusters', path: '/clusters' },
-  { label: 'Counter', path: '/counter' },
   { label: 'Squares', path: '/games' },
 ];
 

web/tailwind.config.js

@@ -14,4 +14,8 @@ module.exports = {
     extend: {},
   },
   plugins: [require('daisyui')],
+  daisyui: {
+    themes: ["dark"], // Define your themes
+    darkTheme: "dark", // If you want to specify which theme is the dark mode
+  },
 };