feat: implement avatar section (#153)

* feat: implement avatar section * fiex failing ci * Update README.md * fix: failing ci * fix: failing test * fix: warning of any --------- Co-authored-by: “Akshola00” <“akinniyishola07@gmail.com”> Co-authored-by: Strong Force <64266194+princeibs@users.noreply.github.com>
sivicstudio · Dec 26, 2024 · 1c7e6a1 · 1c7e6a1
1 parent 22ec84b
commit 1c7e6a1
Show file tree

Hide file tree

Showing 11 changed files with 279 additions and 171 deletions.
diff --git a/client/pnpm-lock.yaml b/client/pnpm-lock.yaml
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -32,6 +32,7 @@ import { StarkludoSchemaType } from "./dojo/gen/models.gen";
 import { SDK } from "@dojoengine/sdk";
 import Settings from "./components/Settings";
 import ToolboxPage from "./components/Toolbox";
+import { AvatarProvider } from "./context/avatar-context";
 
 const App = ({ sdk }: { sdk: SDK<StarkludoSchemaType> }) => {
 
@@ -126,6 +127,7 @@ const App = ({ sdk }: { sdk: SDK<StarkludoSchemaType> }) => {
                 <BoardContext.Provider value={{ board, toggleBoard }}>
                   <ColorProvider>
                     <DiceProvider>
+                    <AvatarProvider>
                       <Routes>
                         <Route
                           path="/color-settings"
@@ -241,6 +243,7 @@ const App = ({ sdk }: { sdk: SDK<StarkludoSchemaType> }) => {
                           }
                         />
                       </Routes>
+                     </AvatarProvider> 
                     </DiceProvider>
                   </ColorProvider>
                 </BoardContext.Provider>
@@ -254,4 +257,4 @@ const App = ({ sdk }: { sdk: SDK<StarkludoSchemaType> }) => {
   );
 };
 
-export default App;
+export default App;
diff --git a/client/src/components/AvatarCard.tsx b/client/src/components/AvatarCard.tsx
@@ -0,0 +1,20 @@
+export default function AvatarCard({
+  avatar,
+  active,
+  onSelect,
+}: {
+  avatar: string;
+  active: boolean;
+  onSelect: () => void;
+}) {
+  return (
+    <button
+      className={`option-container ${active ? "active" : ""}`}
+      onClick={onSelect}
+    >
+      <div className="option">
+        <img src={avatar} alt="avatar" className="avatar" />
+      </div>
+    </button>
+  );
+}
diff --git a/client/src/components/ControlWindows/Toolbox.tsx b/client/src/components/ControlWindows/Toolbox.tsx
@@ -3,6 +3,7 @@ import "../../styles/Toolbox.scss";
 import { BoardContext } from "../../context/board-context";
 import { DiceContext } from "../../context/dice-context";
 import { ColorContext } from "../../context/color-context";
+import { AvatarContext } from "../../context/avatar-context";
 import OptionCard from "../OptionCard";
 import DiceCard from "../DiceCard";
 import PieceDesignCard from "../PieceDesignCard";
@@ -16,6 +17,12 @@ import map from "../../assets/images/Eyedropper.svg";
 import king from "../../assets/images/Crown.svg";
 import square from "../../assets/images/Polygon.svg";
 import circle from "../../assets/images/Circle.svg";
+import AvatarCard from "../AvatarCard";
+
+import profile1 from "../../assets/images/profile1.jpg";
+import profile2 from "../../assets/images/profile2.jpg";
+import profile3 from "../../assets/images/profile3.jpg";
+import profile4 from "../../assets/images/profile4.jpg";
 
 interface ToolboxProps {
   activeCategory: string;
@@ -29,6 +36,7 @@ const Toolbox: React.FC<ToolboxProps> = ({
   const { board, toggleBoard } = useContext(BoardContext);
   const { dice, changeDice } = useContext(DiceContext);
   const { design, changeDesign } = useContext(ColorContext);
+  const { avatar, changeAvatar } = useContext(AvatarContext);
 
   const boardOptions = [
     { name: "Classic", option: "classic" },
@@ -52,6 +60,13 @@ const Toolbox: React.FC<ToolboxProps> = ({
     { name: "Circle", option: "circle", img: circle },
   ];
 
+  const avatarOptions = [
+    { option: "avatar1", avatar: profile1 },
+    { option: "avatar2", avatar: profile2 },
+    { option: "avatar3", avatar: profile3 },
+    { option: "avatar4", avatar: profile4 },
+  ];
+
   return (
     <div className="toolbox">
       <div className="categories">
@@ -68,10 +83,10 @@ const Toolbox: React.FC<ToolboxProps> = ({
           DICE
         </button>
         <button
-          className={`category ${activeCategory === "PIECE" ? "active" : ""}`}
-          onClick={() => onCategoryClick("AVATER")}
+          className={`category ${activeCategory === "AVATAR" ? "active" : ""}`}
+          onClick={() => onCategoryClick("AVATAR")}
         >
-          AVATER
+          AVATAR
         </button>
         <button
           className={`category ${activeCategory === "COLOR" ? "active" : ""}`}
@@ -125,8 +140,21 @@ const Toolbox: React.FC<ToolboxProps> = ({
           ))}
         </div>
       )}
+      {activeCategory === "AVATAR" && (
+        <div className="avatar-options">
+          {avatarOptions.map((item) => (
+            <AvatarCard
+              key={item.option}
+              avatar={item.avatar}
+              active={avatar === item.option}
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              onSelect={() => changeAvatar(item.option as any)}
+            />
+          ))}
+        </div>
+      )}
     </div>
   );
 };
 
-export default Toolbox;
+export default Toolbox;
diff --git a/client/src/components/Settings.tsx b/client/src/components/Settings.tsx
@@ -12,7 +12,7 @@ const Settings: React.FC = () => {
   const [soundLevel, setSoundLevel] = useState(5);
   const [musicLevel, setMusicLevel] = useState(5);
   const [difficultyLevel, setDifficultyLevel] = useState("beginner");
-
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
   const handleSettingChange = (type: string, value: any) => {
     switch (type) {
       case "sound":
@@ -28,7 +28,7 @@ const Settings: React.FC = () => {
         break;
     }
   };
-
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
   const renderLevelButtons = (type: string, currentValue: number | string, levels: any[]) =>
     levels.map((level, index) => (
       <button

diff --git a/client/src/components/Toolbox/components/Toolbox.tsx b/client/src/components/Toolbox/components/Toolbox.tsx
@@ -148,6 +148,7 @@ const Toolbox: React.FC<ToolboxProps> = ({
               key={item.option}
               option={item}
               active={design === item.option}
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
               onSelect={() => changeDesign(item.option as any)}
             />
           ))}

diff --git a/client/src/context/avatar-context.tsx b/client/src/context/avatar-context.tsx
@@ -0,0 +1,34 @@
+import React, { createContext, useState, useContext } from "react";
+
+type Avatar = "avatar1" | "avatar2" | "avatar3" | "avatar4";
+
+interface AvatarContextType {
+  avatar: Avatar;
+  changeAvatar: (newAvatar: Avatar) => void;
+}
+
+const AvatarContext = createContext<AvatarContextType>({
+  avatar: "avatar1",
+  changeAvatar: () => {},
+});
+
+// eslint-disable-next-line react-refresh/only-export-components
+export const useAvatar = () => useContext(AvatarContext);
+
+export const AvatarProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const [avatar, setAvatar] = useState<Avatar>("avatar1");
+
+  const changeAvatar = (newAvatar: Avatar) => {
+    setAvatar(newAvatar);
+  };
+
+  return (
+    <AvatarContext.Provider value={{ avatar, changeAvatar }}>
+      {children}
+    </AvatarContext.Provider>
+  );
+};
+
+export { AvatarContext };
diff --git a/client/src/styles/Toolbox.scss b/client/src/styles/Toolbox.scss
@@ -62,4 +62,14 @@
       width: 57px;
     }
   }
+  .avatar-options {
+    display: grid;
+    padding: 12px 0;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 12px;
+    img {
+      height: 70px;
+      width: 57px;
+    }
+  }
 }
diff --git a/onchain/manifest_dev.json b/onchain/manifest_dev.json
@@ -1252,8 +1252,8 @@
   },
   "contracts": [
     {
-      "address": "0x6b240e9a9239294ed1d07ff08ee8b1f32d9a2a87c782a7729965e7dabb486a9",
-      "class_hash": "0x6716e4b768301e39402a2fe2171dd9813bad8a82077c5039b8d0643859dcd55",
+      "address": "0x1fadb4983842c567c473e49695bbb4faec47c36472bb151c71f8d5fa26b96d3",
+      "class_hash": "0x689cceee0dc7a0dfda4f32873aaba41293dc785cb36bef032af726a10f1ad8c",
       "abi": [
         {
           "type": "impl",
@@ -1389,7 +1389,11 @@
               "type": "function",
               "name": "roll",
               "inputs": [],
-              "outputs": [],
+              "outputs": [
+                {
+                  "type": "(core::integer::u8, core::integer::u8)"
+                }
+              ],
               "state_mutability": "external"
             },
             {

diff --git a/package.json b/package.json
@@ -8,7 +8,9 @@
 	},
 	"type": "module",
 	"devDependencies": {
-		"@commitlint/cli": "^19.6.1",
-		"@commitlint/config-conventional": "^19.6.0"
-	}
+		"@commitlint/cli": "^19.5.0",
+		"@commitlint/config-conventional": "^19.5.0"
+	},
+	"packageManager": "pnpm@9.12.0+sha512.4abf725084d7bcbafbd728bfc7bee61f2f791f977fd87542b3579dcb23504d170d46337945e4c66485cd12d588a0c0e570ed9c477e7ccdd8507cf05f3f92eaca"
 }
+