BuidlGuidl · Avelous · Jul 25, 2024 · Jul 24, 2024 · Jul 25, 2024 · Jul 25, 2024
diff --git a/packages/backend/controllers/Admin.ts b/packages/backend/controllers/Admin.ts
@@ -41,7 +41,7 @@ async function generateUniqueInvite(length: number) {
 
 export const createGame = async (req: Request, res: Response) => {
   try {
-    const { diceCount, hiddenChars, privateKey, hiddenPrivateKey, mode, adminAddress } = req.body;
+    const { diceCount, privateKey, hiddenPrivateKey, mode, adminAddress } = req.body;
 
     const salt = await bcrypt.genSalt();
     // const privateKeyHash = await bcrypt.hash(privateKey, salt);
@@ -54,7 +54,6 @@ export const createGame = async (req: Request, res: Response) => {
       mode,
       privateKey,
       hiddenPrivateKey,
-      hiddenChars,
     });
 
     let token;
@@ -70,7 +69,7 @@ export const createGame = async (req: Request, res: Response) => {
 
 export const restartWithNewPk = async (req: Request, res: Response) => {
   try {
-    const { diceCount, hiddenChars, privateKey, hiddenPrivateKey, adminAddress } = req.body;
+    const { diceCount, privateKey, hiddenPrivateKey, adminAddress } = req.body;
     const { id } = req.params;
     const game = await Game.findById(id);
 
@@ -79,7 +78,6 @@ export const restartWithNewPk = async (req: Request, res: Response) => {
     }
 
     game.diceCount = diceCount;
-    game.hiddenChars = hiddenChars;
     game.privateKey = privateKey;
     game.hiddenPrivateKey = hiddenPrivateKey;
     game.mode = "manual";
@@ -247,7 +245,7 @@ export const kickPlayer = async (req: Request, res: Response) => {
 export const varyHiddenPrivatekey = async (req: Request, res: Response) => {
   try {
     const { id } = req.params;
-    const { hiddenChars, hiddenPrivateKey, diceCount } = req.body;
+    const { hiddenPrivateKey, diceCount } = req.body;
     const game = await Game.findById(id);
 
     if (!game) {
@@ -258,7 +256,6 @@ export const varyHiddenPrivatekey = async (req: Request, res: Response) => {
       return res.status(400).json({ error: "Invalid dice count." });
     }
 
-    game.hiddenChars = hiddenChars;
     game.hiddenPrivateKey = hiddenPrivateKey;
     game.diceCount = diceCount;
     const updatedGame = await game.save();

diff --git a/packages/backend/models/Game.ts b/packages/backend/models/Game.ts
@@ -34,10 +34,6 @@ const gameSchema = new mongoose.Schema(
       type: String,
       required: true,
     },
-    hiddenChars: {
-      type: Object,
-      required: true,
-    },
     players: {
       type: [String],
       default: [],

diff --git a/packages/nextjs/components/dicedemo/GameCreateForm.tsx b/packages/nextjs/components/dicedemo/GameCreateForm.tsx
@@ -11,7 +11,6 @@ interface FormData {
   mode: "auto" | "manual" | "brute";
   privateKey: string;
   hiddenPrivateKey: string;
-  hiddenChars: { [key: number]: string };
   adminAddress: string | undefined;
 }
 
@@ -27,7 +26,6 @@ const GameCreationForm = () => {
     mode: "manual",
     hiddenPrivateKey: "*" + initialPrivateKey.slice(1),
     privateKey: initialPrivateKey,
-    hiddenChars: { 0: initialPrivateKey.charAt(0) },
     adminAddress,
   });
 
@@ -53,7 +51,6 @@ const GameCreationForm = () => {
 
     setFormData(formData => ({
       ...formData,
-      hiddenChars: characterObject,
       diceCount: selectedSlots.length,
       hiddenPrivateKey: "*".repeat(selectedSlots.length) + privateKey.slice(selectedSlots.length),
     }));
@@ -86,7 +83,6 @@ const GameCreationForm = () => {
       diceCount: 0,
       mode: "auto",
       privateKey: loadBurnerSK(),
-      hiddenChars: {},
       hiddenPrivateKey: "",
       adminAddress,
     });

diff --git a/packages/nextjs/components/dicedemo/HostAnnouncement.tsx b/packages/nextjs/components/dicedemo/HostAnnouncement.tsx
@@ -26,9 +26,6 @@ const HostAnnouncement = ({
             </label>
             <p className="text-center">The Winner is</p>
             <Address address={game.winner as string} format="long" />
-            <p className="mt-5 text-2xl text-center">
-              The hidden characters are: {Object.values(game.hiddenChars).join(", ").toUpperCase()}
-            </p>
           </div>
         </div>
       )}

diff --git a/packages/nextjs/components/dicedemo/RestartWithNewPk.tsx b/packages/nextjs/components/dicedemo/RestartWithNewPk.tsx
@@ -11,7 +11,6 @@ interface FormData {
   diceCount: number;
   privateKey: string;
   hiddenPrivateKey: string;
-  hiddenChars: { [key: number]: string };
   adminAddress: string | undefined;
 }
 
@@ -29,7 +28,6 @@ const RestartWithNewPk = ({ isOpen, setIsOpen }: { isOpen: boolean; setIsOpen: D
     diceCount: 0,
     hiddenPrivateKey: "",
     privateKey: "",
-    hiddenChars: {},
     adminAddress: undefined,
   });
 
@@ -79,7 +77,6 @@ const RestartWithNewPk = ({ isOpen, setIsOpen }: { isOpen: boolean; setIsOpen: D
     setFormData(formData => ({
       ...formData,
       diceCount: selectedSlots.length,
-      hiddenChars: characterObject,
       hiddenPrivateKey: "*".repeat(selectedSlots.length) + newPk.slice(selectedSlots.length),
     }));
   };
@@ -96,7 +93,6 @@ const RestartWithNewPk = ({ isOpen, setIsOpen }: { isOpen: boolean; setIsOpen: D
       adminAddress: account.address,
       hiddenPrivateKey: "*" + pk.slice(1),
       privateKey: pk,
-      hiddenChars: { 0: pk.charAt(0) },
     }));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);

diff --git a/packages/nextjs/components/dicedemo/WelcomeRoll.tsx b/packages/nextjs/components/dicedemo/WelcomeRoll.tsx
@@ -75,18 +75,16 @@ const WelcomeRoll = () => {
   }, [rolledResult]);
 
   return (
-    <div className="flex justify-center flex-col gap-2 bg-white">
-      <button
-        className="btn btn-sm btn-primary mx-auto "
-        onClick={rollTheDice}
-        disabled={isRolling || spinning || isHacked}
-      >
-        {spinning && <span className="loading loading-spinner"></span>}
-        Roll
-      </button>
+    <div className="bg-white overflow-hidden h-fit">
+      <div className="flex justify-center mt-2">
+        <button className="btn btn-sm btn-primary " onClick={rollTheDice} disabled={isRolling || spinning || isHacked}>
+          {spinning && <span className="loading loading-spinner"></span>}
+          Roll
+        </button>
+      </div>
       <div className="h-10">
         {rolledAddress != "" && (
-          <div className="flex justify-center items-center gap-2   mt-2 ">
+          <div className="flex justify-center items-center gap-2 mt-2 ">
             <span>
               <Address address={rolledAddress}></Address>
             </span>
@@ -96,45 +94,34 @@ const WelcomeRoll = () => {
           </div>
         )}
       </div>
-      <div className="grid grid-cols-8 w-full mt-2 mx-auto opacity-100">
-        {Array.from({ length: 64 }).map((_, index) =>
-          rolled ? (
-            isUnitRolling[index] ? (
-              <div
-                key={index}
-                className="w-[95%] h-[95%] overflow-hidden rounded-lg mx-auto flex justify-center items-center"
-              >
-                <div className="scale-125">
-                  <Image className="scale-150" src="/rolls-gif/Spin.gif" alt="spinning" width={350} height={350} />
-                </div>
-              </div>
-            ) : (
-              <div
-                key={index}
-                className="w-[95%] h-[95%] overflow-hidden rounded-lg mx-auto flex justify-center items-center"
-              >
-                <div className="scale-125">
-                  <Image
-                    className="scale-150"
-                    src={`/rolls-jpg/${rolls[index]}.jpg`}
-                    alt="rolled"
-                    width={350}
-                    height={350}
-                  />
-                </div>
-              </div>
-            )
-          ) : (
+      <div className="grid grid-cols-8 mt-2 opacity-100">
+        {Array.from({ length: 64 }).map((_, index) => {
+          let src, alt;
+
+          if (rolled) {
+            if (isUnitRolling[index]) {
+              src = "/rolls-gif/Spin.gif";
+              alt = "spinning";
+            } else {
+              src = `/rolls-jpg/${rolls[index]}.jpg`;
+              alt = "rolled";
+            }
+          } else {
+            src = "/rolls-jpg/0.jpg";
+            alt = "zero roll";
+          }
+
+          return (
             <div
               key={index}
               className="w-[95%] h-[95%] overflow-hidden rounded-lg mx-auto flex justify-center items-center"
             >
               <div className="scale-125">
-                <Image className=" scale-150" src={`/rolls-jpg/0.jpg`} alt="zero roll" width={400} height={400} />
+                <Image className="scale-150" src={src} alt={alt} width={350} height={350} />
               </div>
             </div>
-          ),
-        )}
+          );
+        })}
       </div>
     </div>
   );

diff --git a/packages/nextjs/pages/game/[id].tsx b/packages/nextjs/pages/game/[id].tsx
@@ -20,7 +20,8 @@ import useGameData from "~~/hooks/useGameData";
 import useSweepWallet from "~~/hooks/useSweepWallet";
 import { Game } from "~~/types/game/game";
 import { kickPlayer, pauseResumeGame, toggleMode, varyHiddenPrivatekey } from "~~/utils/diceDemo/apiUtils";
-import { calculateLength, compareResult, generateRandomHex } from "~~/utils/diceDemo/gameUtils";
+import { calculateLength, generateRandomHex } from "~~/utils/diceDemo/gameUtils";
+import { privateKeyToAccount } from "viem/accounts";
 
 function GamePage() {
   const router = useRouter();
@@ -127,8 +128,10 @@ function GamePage() {
   useEffect(() => {
     let isHiiddenChars;
 
-    if (rolled && rolledResult.length > 0 && game?.hiddenChars) {
-      isHiiddenChars = compareResult(rolledResult, game?.hiddenChars);
+    if (rolled && rolledResult.length > 0 && game?.hiddenPrivateKey) {
+      const pk: `0x{string}` = `0x${rolledResult.join("")}${game?.hiddenPrivateKey.replaceAll("*", "")}` as `0x{string}`;
+      const account = privateKeyToAccount(pk);
+      isHiiddenChars = account.address == game?.adminAddress;
     }
 
     if (isHiiddenChars) {
@@ -477,8 +480,8 @@ function GamePage() {
                   game.mode === "auto"
                     ? setAutoRolling(true)
                     : game.mode === "brute"
-                    ? setBruteRolling(true)
-                    : rollTheDice();
+                      ? setBruteRolling(true)
+                      : rollTheDice();
                 }}
                 disabled={
                   isRolling ||
@@ -502,12 +505,12 @@ function GamePage() {
                   </div>
                 )}
                 <div className="flex flex-wrap justify-center gap-2 mt-8 py-2">
-                  {Object.entries(game.hiddenChars).map(([key], index) =>
+                  {rolls.map((value, index) =>
                     rolled ? (
                       isUnitRolling[index] || (isRolling && game.mode == "brute") ? (
                         <Image
                           className="transition duration-500 opacity-100 rounded-lg"
-                          key={key}
+                          key={index}
                           src="/rolls-gif/Spin.gif"
                           alt="spinning"
                           width={length}
@@ -516,8 +519,8 @@ function GamePage() {
                       ) : (
                         <Image
                           className="transition  duration-500 ease-in rounded-lg"
-                          key={key}
-                          src={`/rolls-jpg/${rolls[index]}.jpg`}
+                          key={index}
+                          src={`/rolls-jpg/${value}.jpg`}
                           alt="rolled"
                           width={length}
                           height={length}
@@ -526,7 +529,7 @@ function GamePage() {
                     ) : (
                       <Image
                         className="rounded-lg"
-                        key={key}
+                        key={index}
                         src={`/rolls-jpg/0.jpg`}
                         alt="zero roll"
                         width={length}

diff --git a/packages/nextjs/pages/index.tsx b/packages/nextjs/pages/index.tsx
@@ -34,7 +34,9 @@ const Home: NextPage = () => {
 
         <div>
           <div className="mx-auto mt-5 border p-6 rounded-md bg-base-100 shadow-2xl flex flex-col">
-            <WelcomeRoll />
+            <div className="box">
+              <WelcomeRoll />
+            </div>
             <div className="flex justify-center mt-10">
               <ul className="menu menu-horizontal justify-center p-2 bg-base-300 rounded-full mb-8 w-fit mx-auto">
                 <li onClick={() => setGameState("joinGame")}>

diff --git a/packages/nextjs/types/game/game.ts b/packages/nextjs/types/game/game.ts
@@ -7,7 +7,6 @@ export interface Game {
   mode: "auto" | "manual" | "brute";
   privateKey: string;
   hiddenPrivateKey: string;
-  hiddenChars: Record<string, any>;
   players: string[];
   winner?: string | null;
 }
diff --git a/packages/nextjs/utils/diceDemo/apiUtils.ts b/packages/nextjs/utils/diceDemo/apiUtils.ts
@@ -68,19 +68,14 @@ export const kickPlayer = async (game: Game, token: string, playerAddress: strin
 
 export const varyHiddenPrivatekey = async (game: Game, token: string, vary: "increase" | "decrease") => {
   let hiddenPrivateKey = game?.hiddenPrivateKey;
-  const hiddenChars = game?.hiddenChars;
   const privateKey = game?.privateKey;
   let diceCount = game?.diceCount;
 
-  const hiddCharsCopy = { ...hiddenChars };
-
   if (vary === "increase") {
     hiddenPrivateKey = "*".repeat(diceCount + 1) + privateKey.slice(diceCount + 1);
-    hiddCharsCopy[diceCount] = privateKey[diceCount];
     diceCount++;
   } else {
     hiddenPrivateKey = "*".repeat(diceCount - 1) + privateKey.slice(diceCount - 1);
-    delete hiddCharsCopy[diceCount - 1];
     diceCount--;
   }
 
@@ -96,7 +91,7 @@ export const varyHiddenPrivatekey = async (game: Game, token: string, vary: "inc
         Authorization: `Bearer ${token}`,
         "Content-Type": "application/json",
       },
-      body: JSON.stringify({ hiddenChars: hiddCharsCopy, hiddenPrivateKey: hiddenPrivateKey, diceCount: diceCount }),
+      body: JSON.stringify({ hiddenPrivateKey: hiddenPrivateKey, diceCount: diceCount }),
     });
 
     notification.success("Updated hidden characters");