diff --git a/client/.eslintrc.cjs b/client/.eslintrc.cjs index 6885d76..6adba53 100644 --- a/client/.eslintrc.cjs +++ b/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"], }; diff --git a/client/src/App.tsx b/client/src/App.tsx index 866624e..18b701f 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -52,7 +52,7 @@ const App = () => { setBoard(newBoard); }; - const setGameData = useCallback((game: any) => { + const setGameData = useCallback((game: object) => { setGameState(game); }, []); diff --git a/client/src/components/Control.tsx b/client/src/components/Control.tsx index 23ef96f..04bbd98 100644 --- a/client/src/components/Control.tsx +++ b/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 })) ); diff --git a/client/src/components/ControlWindows/ControlWindowLayout.tsx b/client/src/components/ControlWindows/ControlWindowLayout.tsx index 49225b6..eb6cbe4 100644 --- a/client/src/components/ControlWindows/ControlWindowLayout.tsx +++ b/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"; diff --git a/client/src/components/ControlWindows/GameAccount.tsx b/client/src/components/ControlWindows/GameAccount.tsx index 344f53f..80e4656 100644 --- a/client/src/components/ControlWindows/GameAccount.tsx +++ b/client/src/components/ControlWindows/GameAccount.tsx @@ -1,4 +1,3 @@ -import React, { useEffect, useState } from "react"; import { useAccount, useConnect, @@ -6,15 +5,14 @@ import { 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
Profile page
; }; @@ -89,7 +88,7 @@ const GameAccount = () => { getGameProfilesFromAddress(address, setGameProfiles); } - return () => {}; + return () => undefined; }, [address]); const enum pagesName { @@ -97,7 +96,7 @@ const GameAccount = () => { PROFILE_PAGE = "PROFILE_PAGE", } - let mainPage = { + const mainPage = { name: pagesName.MAIN_PAGE, content: (
@@ -216,16 +215,16 @@ const GameAccount = () => { ), }; - let profilePage = { + const profilePage = { name: pagesName.PROFILE_PAGE, content:
Profile
, }; - 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; diff --git a/client/src/components/Dice.tsx b/client/src/components/Dice.tsx index 5cfc490..422591d 100644 --- a/client/src/components/Dice.tsx +++ b/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 diff --git a/client/src/components/OptionCard.tsx b/client/src/components/OptionCard.tsx index 57912ad..64a819d 100644 --- a/client/src/components/OptionCard.tsx +++ b/client/src/components/OptionCard.tsx @@ -8,7 +8,7 @@ export default function OptionCard({ }: { active?: boolean; onSelect?: () => void; - option?: any; + option?: { name: string }; }) { return ( ); diff --git a/client/src/components/RestartGame.tsx b/client/src/components/RestartGame.tsx index acc279c..f9c67df 100644 --- a/client/src/components/RestartGame.tsx +++ b/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 = () => {
)} - {restart && } + {restart && ( + + )} ); }; diff --git a/client/src/context/board-context.tsx b/client/src/context/board-context.tsx index 84de5cb..282b674 100644 --- a/client/src/context/board-context.tsx +++ b/client/src/context/board-context.tsx @@ -9,5 +9,5 @@ interface BoardContextType { export const BoardContext = createContext({ board: "", - toggleBoard: () => {}, + toggleBoard: () => undefined, }); diff --git a/client/src/context/game-context.tsx b/client/src/context/game-context.tsx index 723bd2b..3ff7ade 100644 --- a/client/src/context/game-context.tsx +++ b/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, }); diff --git a/client/src/dojo/createSystemCalls.ts b/client/src/dojo/createSystemCalls.ts index 9a6ca5f..d0b0a20 100644 --- a/client/src/dojo/createSystemCalls.ts +++ b/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; 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({ diff --git a/client/src/dojo/setup.ts b/client/src/dojo/setup.ts index abb9263..771d748 100644 --- a/client/src/dojo/setup.ts +++ b/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, [] diff --git a/client/src/dojo/typescript/contracts.gen.ts b/client/src/dojo/typescript/contracts.gen.ts index 813582c..6a65dbf 100644 --- a/client/src/dojo/typescript/contracts.gen.ts +++ b/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>; diff --git a/client/src/hooks/game-hook.tsx b/client/src/hooks/game-hook.tsx index 4ec3844..3726c1b 100644 --- a/client/src/hooks/game-hook.tsx +++ b/client/src/hooks/game-hook.tsx @@ -1,18 +1,16 @@ 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 } = @@ -20,7 +18,7 @@ export const useGame = () => { 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 diff --git a/client/src/hooks/size-hook.tsx b/client/src/hooks/size-hook.tsx index 679729f..7a4d5ea 100644 --- a/client/src/hooks/size-hook.tsx +++ b/client/src/hooks/size-hook.tsx @@ -99,7 +99,7 @@ export interface TileNode { export const useSize = () => { const [size, setSize] = useState(() => { // if (window.innerWidth > 600) { - return 500; + return 500; // } else if (window.innerWidth > 460) { // return 400; // } else { @@ -109,7 +109,7 @@ export const useSize = () => { const [tileMap, setTileMap] = useState(() => { // if (window.innerWidth > 600) { - return TM500; + return TM500; // } else if (window.innerWidth > 460) { // return TM400; // } else { @@ -120,8 +120,8 @@ export const useSize = () => { useEffect(() => { function handleResize() { // if (window.innerWidth > 600) { - setSize(500); - setTileMap(TM500); + setSize(500); + setTileMap(TM500); // } else if (window.innerWidth > 460) { // setSize(400); // setTileMap(TM400); @@ -141,6 +141,7 @@ export const useSize = () => { return { size, tileMap }; }; +/* eslint-disable react-refresh/only-export-components */ const TM500 = { "1": [0.4, 0.82], "2": [0.4, 0.76], @@ -236,6 +237,7 @@ const TM500 = { B04: [0.84, 0.8], }; +/* eslint-disable @typescript-eslint/no-unused-vars */ const TM400 = { "1": [0.395, 0.81], "2": [0.395, 0.74], @@ -331,6 +333,7 @@ const TM400 = { B04: [0.83, 0.79], }; +/* eslint-disable @typescript-eslint/no-unused-vars */ const TM300 = { "1": [0.45, 0.92], "2": [0.45, 0.84], diff --git a/client/src/hooks/utils.ts b/client/src/hooks/utils.ts index 31827b0..3e9fcc6 100644 --- a/client/src/hooks/utils.ts +++ b/client/src/hooks/utils.ts @@ -1,7 +1,7 @@ export const capColors: string[] = ["R", "G", "Y", "B"]; export const posReducer = (data: number[], playersLength: number) => { - let game: { [key: string]: string } = {}; + const game: { [key: string]: string } = {}; data.map((d, i) => { if (i < playersLength * 4) { if (d === 0) { @@ -21,7 +21,7 @@ const startPoints: number[] = [0, 13, 26, 39]; export const BoardToPos = (arr: number[]) => { const newArr: number[] = arr?.map((val, i) => { - let color: number = Math.floor(i / 4); + const color: number = Math.floor(i / 4); if (val > 52) { return 51 + (val % 1000); } else if (val === 0) { @@ -37,13 +37,13 @@ export const BoardToPos = (arr: number[]) => { export const PosToBoard = (arr: number[]) => { const newArr: number[] = arr?.map((val, i) => { - let color: number = Math.floor(i / 4); + const color: number = Math.floor(i / 4); if (val > 51) { return (color + 1) * 1000 + (val % 50) - 1; } else if (val === 0) { return 0; } else { - let a = (startPoints[color] + val) % 52; + const a = (startPoints[color] + val) % 52; return a === 0 ? 52 : a; } }); @@ -95,36 +95,35 @@ export const safePos: number[] = [ export const animateCustomEase = ( duration: number, + /* eslint-disable @typescript-eslint/no-explicit-any */ easing: any, element: HTMLSpanElement, + /* eslint-disable @typescript-eslint/no-explicit-any */ property: any, currentValue: number, - toValue: number, + toValue: number ) => { - let d = duration, + const d = duration, ea = easing, e = element, // eslint-disable-next-line p = property, fromV = currentValue, - toV = toValue, - lastStart: number | any = null, - animate = function (timestamp: number) { - debug++; - // check if this is a new animation - if (!lastStart) { - lastStart = timestamp; - } - // check still in animation range - if (timestamp - lastStart <= d) { - // do animation - e.style[property] = ea(timestamp - lastStart, 0, d, fromV, toV); - // call next frame - window.requestAnimationFrame(animate); - } - }, - // eslint-disable-next-line - debug = 0; + toV = toValue; + let lastStart: number | null = null; + const animate = function (timestamp: number) { + // check if this is a new animation + if (!lastStart) { + lastStart = timestamp; + } + // check still in animation range + if (timestamp - lastStart <= d) { + // do animation + e.style[property] = ea(timestamp - lastStart, 0, d, fromV, toV); + // call next frame + window.requestAnimationFrame(animate); + } + }; return animate; }; @@ -134,7 +133,7 @@ const Utils: { fromMin: number, fromMax: number, toMin: number, - toMax: number, + toMax: number ) => number; } = { modulate: (val, fromMin, fromMax, toMin, toMax) => { @@ -147,16 +146,22 @@ export const flicker = ( durationLow: number, durationHigh: number, valLow: number, - valHigh: number, + valHigh: number ) => { // get normalized progress value from 0 - 1 - let n = Utils.modulate(progress, durationLow, durationHigh, valLow, valHigh); - let upperCap = (Math.random() * 7) / 10; + const n = Utils.modulate( + progress, + durationLow, + durationHigh, + valLow, + valHigh + ); + const upperCap = (Math.random() * 7) / 10; if (Boolean(n) === !!n || n > upperCap) { return n; } - let result: number = Math.abs( - n * Math.sin((n - 0.13) * ((0.2 * Math.PI) / 0.4)), + const result: number = Math.abs( + n * Math.sin((n - 0.13) * ((0.2 * Math.PI) / 0.4)) ); return result > 0 ? result : result * -1; }; diff --git a/client/src/types/react-simple-flex-grid.d.ts b/client/src/types/react-simple-flex-grid.d.ts index aa53988..a52e869 100644 --- a/client/src/types/react-simple-flex-grid.d.ts +++ b/client/src/types/react-simple-flex-grid.d.ts @@ -1,4 +1,42 @@ declare module "react-simple-flex-grid" { - export const Row: React.ComponentType; - export const Col: React.ComponentType; + import { HTMLProps, PureComponent } from "react"; + + type JustifyContent = + | "start" + | "end" + | "center" + | "space-around" + | "space-between"; + + type AlignItems = "top " | "middle " | "bottom"; + + type Breakpoint = { + span?: number; + offset?: number; + }; + + export interface IRowProps { + gutter?: number; + justify?: JustifyContent; + align?: AlignItems; + } + + interface IColProps { + span?: number; + offset?: number; + order?: number; + xs?: number | Breakpoint; + sm?: number | Breakpoint; + md?: number | Breakpoint; + lg?: number | Breakpoint; + xl?: number | Breakpoint; + } + + export class Row extends PureComponent< + IRowProps & HTMLProps + > {} + + export class Col extends PureComponent< + IColProps & HTMLProps + > {} } diff --git a/client/src/utils/constants/constants.ts b/client/src/utils/constants/constants.ts index fc2626a..08a5b03 100644 --- a/client/src/utils/constants/constants.ts +++ b/client/src/utils/constants/constants.ts @@ -19,7 +19,7 @@ export const getERC721Contract = (account?: AccountInterface): Contract => { // throw new Error("no ERC721 abi"); // } - let contract = new Contract(ERC721_ABI, ERC721_ADDRESS, RPC_PROVIDER); + const contract = new Contract(ERC721_ABI, ERC721_ADDRESS, RPC_PROVIDER); if (account) { contract.connect(account); @@ -39,7 +39,7 @@ export const getNftNameResolverContract = ( // if (NFT_NAME_RESOLVER_ABI === undefined) { // throw new Error("no NFT_NAME_RESOLVER abi"); // } - let contract = new Contract( + const contract = new Contract( NFT_NAME_RESOLVER_ABI, NFT_NAME_RESOLVER_ADDRESS, RPC_PROVIDER diff --git a/client/src/utils/helpers.tsx b/client/src/utils/helpers.tsx index 73d5383..908e6df 100644 --- a/client/src/utils/helpers.tsx +++ b/client/src/utils/helpers.tsx @@ -7,7 +7,7 @@ import { } from "./constants/constants"; export const convertHexToText = (hexValue: string) => { - let stripHex = hexValue[0].slice(2); + const stripHex = hexValue[0].slice(2); if (!stripHex) { return "--Error--"; @@ -22,22 +22,22 @@ export const convertHexToText = (hexValue: string) => { export const getGameProfilesFromAddress = async ( address: string, - setGameProfiles: any + setGameProfiles: (args: string[]) => void ) => { try { // Get all NFT Ids belonging to address - let ids: any[] = + let ids: string[] = await getERC721Contract().get_token_ids_of_address(address); // Convert Ids to string ids = ids.map((id) => new BigNumber(id).toString()); - let names: string[] = []; + const names: string[] = []; // Loop through Ids and get the corresponding name associated with the Id // Reverse the list for (let i = ids.length; i > 0; i--) { - let name = await getNftNameResolverContract().get_name_of_id(ids[i - 1], { + const name = await getNftNameResolverContract().get_name_of_id(ids[i - 1], { parseResponse: false, }); @@ -55,7 +55,7 @@ export const createGameProfile = async ( account: AccountInterface ) => { try { - let addProfileTxn = + const addProfileTxn = await getNftNameResolverContract(account).create_nft_name(profileName); await RPC_PROVIDER.waitForTransaction(addProfileTxn.transaction_hash); diff --git a/onchain/manifests/dev/deployment/manifest.json b/onchain/manifests/dev/deployment/manifest.json index 2d3de89..f4e87a5 100644 --- a/onchain/manifests/dev/deployment/manifest.json +++ b/onchain/manifests/dev/deployment/manifest.json @@ -1235,7 +1235,7 @@ } ], "address": "0x4e4a8cb96198772361acc30c71d81768bccc6c29501f211b0f0ca7045b194a4", - "transaction_hash": "0x3513bbae0a1a028eca7f1f1accd8a78fc4a101abfecf4d511b9d14573823bb0", + "transaction_hash": "0x6c8c96163c93a23251256cedd16c15751b44196a7cff29726198f65aba14f70", "block_number": 3, "seed": "starkludo", "metadata": { diff --git a/onchain/manifests/dev/deployment/manifest.toml b/onchain/manifests/dev/deployment/manifest.toml index 7fabcca..dddbba6 100644 --- a/onchain/manifests/dev/deployment/manifest.toml +++ b/onchain/manifests/dev/deployment/manifest.toml @@ -4,7 +4,7 @@ class_hash = "0x5c4271c8cd454ceb8049d2b0724c99d12c2ef8077fc6ad325b18978f614aab0" original_class_hash = "0x5c4271c8cd454ceb8049d2b0724c99d12c2ef8077fc6ad325b18978f614aab0" abi = "manifests/dev/deployment/abis/dojo-world.json" address = "0x4e4a8cb96198772361acc30c71d81768bccc6c29501f211b0f0ca7045b194a4" -transaction_hash = "0x3513bbae0a1a028eca7f1f1accd8a78fc4a101abfecf4d511b9d14573823bb0" +transaction_hash = "0x6c8c96163c93a23251256cedd16c15751b44196a7cff29726198f65aba14f70" block_number = 3 seed = "starkludo" manifest_name = "dojo-world"