Merge pull request #85 from Abeeujah/dev

Fix lint Errors and Client CI passing

client/.eslintrc.cjs

@@ -1,14 +1,15 @@
 module.exports = {
-    env: { browser: true, es2020: true },
-    extends: [
-        "eslint:recommended",
-        "plugin:@typescript-eslint/recommended",
-        "plugin:react-hooks/recommended",
-    ],
-    parser: "@typescript-eslint/parser",
-    parserOptions: { ecmaVersion: "latest", sourceType: "module" },
-    plugins: ["react-refresh"],
-    rules: {
-        "react-refresh/only-export-components": "warn",
-    },
+  env: { browser: true, es2020: true },
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended",
+  ],
+  parser: "@typescript-eslint/parser",
+  parserOptions: { ecmaVersion: "latest", sourceType: "module" },
+  plugins: ["react-refresh"],
+  rules: {
+    "react-refresh/only-export-components": "warn",
+  },
+  ignorePatterns: ["src/dojo/typescript/models.gen.ts"],
 };

client/src/App.tsx

@@ -52,7 +52,7 @@ const App = () => {
     setBoard(newBoard);
   };
 
-  const setGameData = useCallback((game: any) => {
+  const setGameData = useCallback((game: object) => {
     setGameState(game);
   }, []);
 

client/src/components/Control.tsx

@@ -66,6 +66,7 @@ const Control = ({
 }: {
   toggleActiveWindow: (window: string) => void;
 }) => {
+  /* eslint-disable @typescript-eslint/no-unused-vars */
   const [windows, setWindows] = useState(
     WINDOW_CONFIGS.map((config) => ({ ...config, show: false, zIndex: 0 }))
   );

client/src/components/ControlWindows/ControlWindowLayout.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import Draggable from "react-draggable";
 import { FiXSquare } from "react-icons/fi";
 import "../../styles/ControlWindowLayout.scss";
 

client/src/components/ControlWindows/GameAccount.tsx

@@ -1,20 +1,18 @@
-import React, { useEffect, useState } from "react";
 import {
   useAccount,
   useConnect,
   useDisconnect,
   useNetwork,
   useStarkProfile,
 } from "@starknet-react/core";
-import { useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
+import { FaArrowAltCircleRight } from "react-icons/fa";
+import { useDojo } from "../../dojo/useDojo";
 import "../../styles/GameAccount.scss";
 import {
   convertHexToText,
-  createGameProfile,
-  getGameProfilesFromAddress,
+  getGameProfilesFromAddress
 } from "../../utils/helpers";
-import { FaArrowAltCircleRight } from "react-icons/fa";
-import { useDojo } from "../../dojo/useDojo";
 
 const ConnectWallet = () => {
   const { connectors, connect } = useConnect();
@@ -39,6 +37,7 @@ const ConnectWallet = () => {
   );
 };
 
+/* eslint-disable @typescript-eslint/no-unused-vars */
 const ProfilePage = () => {
   return <div style={{ color: "white" }}>Profile page</div>;
 };
@@ -89,15 +88,15 @@ const GameAccount = () => {
       getGameProfilesFromAddress(address, setGameProfiles);
     }
 
-    return () => {};
+    return () => undefined;
   }, [address]);
 
   const enum pagesName {
     MAIN_PAGE = "MAIN_PAGE",
     PROFILE_PAGE = "PROFILE_PAGE",
   }
 
-  let mainPage = {
+  const mainPage = {
     name: pagesName.MAIN_PAGE,
     content: (
       <div>
@@ -216,16 +215,16 @@ const GameAccount = () => {
     ),
   };
 
-  let profilePage = {
+  const profilePage = {
     name: pagesName.PROFILE_PAGE,
     content: <div>Profile</div>,
   };
 
-  let pages = [mainPage, profilePage];
+  const pages = [mainPage, profilePage];
 
   const resolvePageToReturn = () => {
     // Get last page name
-    let lastPage =
+    const lastPage =
       pagesStack[pagesStack.length - 1 > 0 ? pagesStack.length - 1 : 0];
 
     let pageToReturn;

client/src/components/Dice.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useContext,useRef } from "react";
+import React, { useState, useContext, useRef } from "react";
 import { useGame } from "../hooks/game-hook";
 import { Row, Col } from "react-simple-flex-grid";
 import "../styles/Dice.scss";
@@ -53,13 +53,12 @@ const Dice = () => {
 
   // The is the argument for the rollDie function
   const randomRollAmount = () => {
-    let rollAmount = Math.floor(Math.random() * 30 + 15);
-    return rollAmount;
+    return Math.floor(Math.random() * 30 + 15);
   };
 
   // The end result is simply a random number picked between 1 and 6
   const randomRollResult = async () => {
-    let rollResult: number = 6;
+    let rollResult = 6;
 
     rollResult = Math.floor(Math.random() * 6 + 1);
 
@@ -77,7 +76,7 @@ const Dice = () => {
       if (counter >= numberOfRolls) {
         clearInterval(rolling);
         // The result on die
-        let x = await randomRollResult();
+        const x = await randomRollResult();
         makeDots(x);
         stopDiceSound();
         moveValidator(x); // Validate move after rolling

client/src/components/OptionCard.tsx

@@ -8,7 +8,7 @@ export default function OptionCard({
 }: {
   active?: boolean;
   onSelect?: () => void;
-  option?: any;
+  option?: { name: string };
 }) {
   return (
     <button
@@ -17,7 +17,7 @@ export default function OptionCard({
     >
       <div className="option">
         <img src={boardImg} alt="board" />
-        <div className="option-label">{option.name}</div>
+        <div className="option-label">{option?.name}</div>
       </div>
     </button>
   );

client/src/components/RestartGame.tsx

@@ -11,16 +11,16 @@ const RestartGame: React.FC = () => {
   const [restart, setRestart] = useState(false);
 
   function handleRestartGame() {
-	setRestart(true);
+    setRestart(true);
   }
 
   function handleConfirm() {
-	restartGame();
-	setRestart(false);
+    restartGame();
+    setRestart(false);
   }
 
   function handleCancle() {
-	setRestart(false);
+    setRestart(false);
   }
 
   return (
@@ -32,7 +32,13 @@ const RestartGame: React.FC = () => {
           </div>
         </div>
       )}
-	  {restart && <RestartModal message="Are you sure you want to restart the gane?" onConfirm={handleConfirm} onCancel={handleCancle} />}
+      {restart && (
+        <RestartModal
+          message="Are you sure you want to restart the gane?"
+          onConfirm={handleConfirm}
+          onCancel={handleCancle}
+        />
+      )}
     </React.Fragment>
   );
 };

client/src/context/board-context.tsx

@@ -9,5 +9,5 @@ interface BoardContextType {
 
 export const BoardContext = createContext<BoardContextType>({
   board: "",
-  toggleBoard: () => {},
+  toggleBoard: () => undefined,
 });

client/src/context/game-context.tsx

@@ -2,13 +2,15 @@ import { createContext } from "react";
 import { OptionsProps } from "../types";
 
 export const GameContext = createContext<{
+  /* eslint-disable  @typescript-eslint/no-explicit-any */
   gameState: { [key: string]: string | any };
   setGameData: (game: { [key: string]: string }) => void;
   options: OptionsProps;
-  setGameOptions: (newOption: {}) => void;
+  setGameOptions: (newOption: object) => void;
 }>({
   gameState: {},
-  setGameData: (game) => {},
+  /* eslint-disable @typescript-eslint/no-unused-vars */
+  setGameData: (game) => undefined,
   options: {
     gameIsOngoing: false,
     playersLength: 0,
@@ -18,5 +20,5 @@ export const GameContext = createContext<{
     winners: [],
     gameCondition: [],
   },
-  setGameOptions: (newOption) => {},
+  setGameOptions: (newOption) => undefined,
 });

client/src/dojo/createSystemCalls.ts

@@ -1,5 +1,5 @@
 import { getEvents } from "@dojoengine/utils";
-import { Account, AccountInterface } from "starknet";
+import { AccountInterface } from "starknet";
 import { ClientComponents } from "./createClientComponents";
 
 import type { IWorld } from "./typescript/contracts.gen";
@@ -8,8 +8,10 @@ export type SystemCalls = ReturnType<typeof createSystemCalls>;
 
 export function createSystemCalls(
   { client }: { client: IWorld },
+  /* eslint-disable @typescript-eslint/no-unused-vars */
   contractComponents: ClientComponents
 ) {
+  /* eslint-disable  @typescript-eslint/no-explicit-any */
   const createUsername = async (account: AccountInterface, username: any) => {
     try {
       const { transaction_hash } = await client.PlayerActions.create({

client/src/dojo/setup.ts

@@ -32,6 +32,7 @@ export async function setup({ ...config }: DojoConfig) {
 
   const eventSync = getSyncEvents(
     toriiClient,
+    /* eslint-disable  @typescript-eslint/no-explicit-any */
     contractComponents as any,
     undefined,
     []

client/src/dojo/typescript/contracts.gen.ts

@@ -1,8 +1,8 @@
 // Generated by dojo-bindgen on Mon, 30 Sep 2024 04:07:50 +0000. Do not modify this file manually.
 // Import the necessary types from the recs SDK
 // generate again with `sozo build --typescript`
-import { Account, AccountInterface, byteArray } from "starknet";
 import { DojoProvider } from "@dojoengine/core";
+import { Account, AccountInterface } from "starknet";
 import * as models from "./models.gen";
 
 export type IWorld = Awaited<ReturnType<typeof setupWorld>>;

client/src/hooks/game-hook.tsx

@@ -1,26 +1,24 @@
 import { useCallback, useContext } from "react";
 import { GameContext } from "../context/game-context";
-import { GameOptions, WinnerList } from "../types";
+import { GameOptions } from "../types";
 import {
-  capColors,
-  posReducer,
   BoardToPos,
   PosToBoard,
+  capColors,
+  coloredBlocks,
   markers,
+  posReducer,
   safePos,
   startState,
-  coloredBlocks,
 } from "./utils";
-import { toast } from "react-toastify";
-import { num } from "starknet";
 
 export const useGame = () => {
   const { gameState, setGameData, options, setGameOptions } =
     useContext(GameContext);
 
   const startGame = useCallback(
     async (playersLength: number) => {
-      let newGame: { [key: string]: string } = {};
+      const newGame: { [key: string]: string } = {};
       Object.entries(startState)
         .slice(0, playersLength * 4)
         .map((entry) => {
@@ -35,7 +33,7 @@ export const useGame = () => {
         gameCondition: new Array(16).fill(0),
       });
     },
-    [setGameData, options, setGameOptions, alert]
+    [setGameData, setGameOptions]
   );
 
   const incrementChance = useCallback(
@@ -72,7 +70,7 @@ export const useGame = () => {
   const moveValidator = useCallback(
     (diceThrow: number) => {
       setGameOptions({ diceFace: diceThrow });
-      let color = options.playerChance;
+      const color = options.playerChance;
       const sp = Object.values(startState);
       const colorState = Object.values(gameState).slice(
         color * 4,
@@ -82,7 +80,7 @@ export const useGame = () => {
         if (sp.includes(c) && diceThrow !== 6) {
           return 0;
         } else if (coloredBlocks.includes(c)) {
-          let x = parseInt(c.charAt(1));
+          const x = parseInt(c.charAt(1));
           if (x === 6 || x + diceThrow > 6) return 0;
         }
         return 1;
@@ -113,7 +111,7 @@ export const useGame = () => {
       ischance = true;
       isthrown = true;
     } else {
-      let testVal = val + diceThrow;
+      const testVal = val + diceThrow;
       if (testVal > 57) {
         newVal = val;
         ischance = true;
@@ -129,20 +127,20 @@ export const useGame = () => {
 
   const moveMarker = useCallback(
     async (pos: string, color: number) => {
-      let diceThrow = options.diceFace;
+      const diceThrow = options.diceFace;
 
-      let j = markers.indexOf(pos);
+      const j = markers.indexOf(pos);
 
       // Fetch Current Game Condition
-      let gameCondition = options.gameCondition;
+      const gameCondition = options.gameCondition;
 
       let currentGame: number[] = new Array(16).fill(0);
-      let isChance: boolean = false;
-      let isThrown: boolean = false;
+      let isChance = false;
+      let isThrown = false;
 
       currentGame = BoardToPos(gameCondition);
       let val = currentGame[j];
-      let { newVal, ischance, isthrown } = moveDeducer(val, diceThrow);
+      const { newVal, ischance, isthrown } = moveDeducer(val, diceThrow);
       isChance = ischance;
       isThrown = isthrown;
       currentGame[j] = newVal;
@@ -165,7 +163,7 @@ export const useGame = () => {
 
       // -- XX --
       setGameOptions({ gameCondition: currentGame });
-      let newGameState = posReducer(currentGame, options.playersLength);
+      const newGameState = posReducer(currentGame, options.playersLength);
       const colorState = Object.values(newGameState).slice(
         color * 4,
         color * 4 + 4