Merge branch 'dev' into anonfedora

.github/pull_request_template.md

@@ -4,7 +4,7 @@ _Detailed description of proposed changes_
 
 ## Related Issue(s)
 
-_Closes #<!-- issue number-->_
+Closes #<!-- issue number-->
 ## Checklist:
 
 - [ ] Read the [contributing docs](../CONTRIBUTING.md) (if this is your first contribution)
@@ -16,4 +16,4 @@ _Closes #<!-- issue number-->_
 - [ ] Documented the changes in code (API docs will be generated automatically)
 
 
-<!-- _Note: If your changes are small and straightforward, you may skip the creation of an issue beforehand and remove this section. However, for medium-to-large changes, it is recommended to have an open issue for discussion and approval prior to submitting a pull request._-->
+<!-- _Note: If your changes are small and straightforward, you may skip the creation of an issue beforehand and remove this section. However, for medium-to-large changes, it is recommended to have an open issue for discussion and approval prior to submitting a pull request._-->

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/package.json

@@ -13,13 +13,13 @@
   },
   "dependencies": {
     "@apollo/client": "^3.11.8",
-    "@dojoengine/core": "1.0.0-alpha.5",
-    "@dojoengine/create-burner": "1.0.0-alpha.5",
-    "@dojoengine/react": "1.0.0-alpha.5",
+    "@dojoengine/core": "1.0.0-alpha.14",
+    "@dojoengine/create-burner": "1.0.0-alpha.14",
+    "@dojoengine/react": "1.0.0-alpha.14",
     "@dojoengine/recs": "2.0.13",
-    "@dojoengine/state": "1.0.0-alpha.5",
-    "@dojoengine/torii-client": "1.0.0-alpha.5",
-    "@dojoengine/utils": "1.0.0-alpha.5",
+    "@dojoengine/state": "1.0.0-alpha.14",
+    "@dojoengine/torii-client": "1.0.0-alpha.14",
+    "@dojoengine/utils": "1.0.0-alpha.14",
     "@latticexyz/react": "^2.0.12",
     "@latticexyz/utils": "^2.0.12",
     "@starknet-react/chains": "^0.1.7",
@@ -57,4 +57,4 @@
     "typescript": "^5.5.4",
     "vite": "^4.3.9"
   }
-}
+}

client/scripts/gen.sh

@@ -0,0 +1 @@
+DOJO_MANIFEST_PATH=../onchain/scarb.toml sozo build --typescript --bindings-output=./src/dojo

client/scripts/gen_cc.sh

@@ -0,0 +1 @@
+npx @dojoengine/core ../onchain/manifests/dev/deployment/manifest.json ./_dojo http://localhost:5050 0x4e4a8cb96198772361acc30c71d81768bccc6c29501f211b0f0ca7045b194a4

client/src/App.tsx

@@ -63,7 +63,7 @@ const App = () => {
     setActiveCategory(category);
   };
 
-  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,19 +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";
 
 const ConnectWallet = () => {
   const { connectors, connect } = useConnect();
@@ -38,6 +37,7 @@ const ConnectWallet = () => {
   );
 };
 
+/* eslint-disable @typescript-eslint/no-unused-vars */
 const ProfilePage = () => {
   return <div style={{ color: "white" }}>Profile page</div>;
 };
@@ -63,6 +63,8 @@ const GameAccount = () => {
     disconnect();
   };
 
+  const { system } = useDojo();
+
   const addGameProfile = async () => {
     if (newProfileName === undefined || newProfileName?.length < 2) {
       alert("profile name must be greater than 2");
@@ -74,8 +76,9 @@ const GameAccount = () => {
       return;
     }
 
-    await createGameProfile(newProfileName, account);
-    setNewProfileName("");
+    // await createGameProfile(newProfileName, account);
+    await system.createUsername(account, newProfileName);
+    await setNewProfileName("");
 
     await getGameProfilesFromAddress(address, setGameProfiles);
   };
@@ -85,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>
@@ -166,22 +169,62 @@ const GameAccount = () => {
               <button>DELETE</button>
               <button>SELL</button>
             </div>
+
+            <div className="game-profiles">
+              <div className="profile-heading">Game Profiles</div>
+              <div className="game-profiles-outer-list">
+                {gameProfiles !== undefined ? (
+                  <div className="game-profiles-inner-list">
+                    {gameProfiles?.length > 0 ? (
+                      <div className="games-profiles-core-list">
+                        {gameProfiles.map((gameProfile) => (
+                          <div className="list-profile">
+                            <span>{convertHexToText(gameProfile)}</span>
+
+                            <FaArrowAltCircleRight cursor={"pointer"} />
+                          </div>
+                        ))}
+                      </div>
+                    ) : (
+                      <div style={{ color: "gray" }}>--no profile found--</div>
+                    )}
+                  </div>
+                ) : (
+                  <div style={{ color: "gray" }} className="loading-txt">
+                    Loading...
+                  </div>
+                )}
+              </div>
+              <div className="add-profile">
+                <input
+                  placeholder="username"
+                  value={newProfileName}
+                  onChange={(e) => setNewProfileName(e.target.value)}
+                />
+                <button
+                  className="add-profile-btn"
+                  onClick={() => addGameProfile()}
+                >
+                  Add new profile
+                </button>
+              </div>
+            </div>
           </div>
         )}
       </div>
     ),
   };
 
-  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;