Merge pull request #5 from cacosta88/staging

slider for dice number selection
BuidlGuidl · Feb 10, 2024 · c45e637 · c45e637
2 parents d708e7f + 47dfe42
commit c45e637
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 41 deletions.
diff --git a/packages/backend/backend.config.ts b/packages/backend/backend.config.ts
diff --git a/packages/backend/controllers/Admin.ts b/packages/backend/controllers/Admin.ts
@@ -3,10 +3,10 @@ import Invites from "../models/Invites";
 import bcrypt from "bcrypt";
 import { Request, Response } from "express";
 import jwt from "jsonwebtoken";
-import { JWT_SECRET } from "../backend.config";
 import { ably } from "..";
 
 async function generateUniqueInvite(length: number) {
+  const JWT_SECRET = process.env.JWT_SECRET || "superhardstring";
   let invites = await Invites.findOne();
 
   if (!invites) {

diff --git a/packages/nextjs/components/GameCreateForm.tsx b/packages/nextjs/components/GameCreateForm.tsx
@@ -12,9 +12,7 @@ interface FormData {
   diceCount: number;
   mode: "auto" | "manual";
   privateKey: string;
-  hiddenChars: {
-    number?: string;
-  };
+  hiddenChars: { [key: number]: string };
   prize: string;
   adminAddress: string | undefined;
 }
@@ -24,26 +22,68 @@ const GameCreationForm = () => {
   const { address: adminAddress } = useAccount();
 
   const serverUrl = serverConfig.isLocal ? serverConfig.localUrl : serverConfig.liveUrl;
+  const initialPrivateKey = loadBurnerSK().toString().substring(2);
+  const firstCharacterHidden = initialPrivateKey.charAt(0) ? "*" : "";
+
 
   const [formData, setFormData] = useState<FormData>({
     maxPlayers: 5,
-    diceCount: 0,
+    diceCount: 1,
     mode: "manual",
     privateKey: loadBurnerSK().toString().substring(2),
-    hiddenChars: {},
+    hiddenChars: { 0: firstCharacterHidden },
     prize: "",
     adminAddress,
   });
-  const [selectedSlots, setSelectedSlots] = useState<number[]>([]);
+
+  const [selectedSlots, setSelectedSlots] = useState<number[]>([0]);
+  const [sliderValue, setSliderValue] = useState<number>(1); // State for slider value
   const [privateKey, setPrivateKey] = useState("");
   const [loading, setloading] = useState(false);
   const disabled = parseFloat(formData.prize) == 0 || formData.prize == "" || selectedSlots.length == 0;
 
   useEffect(() => {
+
     const pk = loadBurnerSK().toString().substring(2);
     setPrivateKey(pk);
+
+
+    const initialHiddenChars = {0: pk.charAt(0) ? "*" : ""};
+    const initialSelectedSlots = [0]; 
+
+    setFormData(prevFormData => ({
+      ...prevFormData,
+      privateKey: pk,
+      hiddenChars: initialHiddenChars,
+    }));
+
+    setSelectedSlots(initialSelectedSlots);
   }, []);
 
+  useEffect(() => {
+
+    const hiddenCount = sliderValue;
+    const hiddenChars: Record<number, string> = {}
+    for (let i = 0; i < hiddenCount; i++) {
+      hiddenChars[i] = privateKey[i] ? "*" : ""; 
+    }
+
+    setFormData(formData => ({
+      ...formData,
+      hiddenChars,
+      diceCount: hiddenCount, 
+    }));
+  }, [sliderValue, privateKey]);
+
+
+  useEffect(() => {
+    setFormData(formData => ({
+      ...formData,
+      adminAddress: adminAddress,
+    }));
+  }, [adminAddress]);
+
+
   const handlePlayersChange = (value: number) => {
     setFormData({ ...formData, maxPlayers: value });
   };
@@ -56,6 +96,7 @@ const GameCreationForm = () => {
     setFormData({ ...formData, mode: value });
   };
 
+
   const handleCharClick = (index: number) => {
     const updatedSelectedSlots = [...selectedSlots];
 
@@ -136,18 +177,54 @@ const GameCreationForm = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [adminAddress]);
 
+ const handleSliderChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = parseInt(event.target.value, 10);
+    setSliderValue(value);
+
+
+    const newSelectedSlots = Array.from({ length: value }, (_, i) => i);
+    setSelectedSlots(newSelectedSlots);
+
+    const newHiddenChars: { [key: number]: string } = {};
+    for (let i = 0; i < value; i++) {
+      newHiddenChars[i] = privateKey[i] ? "*" : "";
+    }
+
+    setFormData(prevFormData => ({
+      ...prevFormData,
+      diceCount: value,
+      hiddenChars: newHiddenChars,
+    }));
+};
+
+
   return (
     <div>
       <form onSubmit={handleSubmit}>
+        {/* Slider input for selecting a number between 1 and 64 */}
+        <label className="block">
+          <h1 className="text-lg font-semibold mb-4">Choose the Number of Dice (1-64)</h1>
+          <div className="flex items-center space-x-4">
+            <input
+              type="range"
+              min="1"
+              max="64"
+              value={sliderValue}
+              onChange={handleSliderChange}
+              className="slider appearance-none w-full h-2 bg-gray-200 rounded outline-none slider-thumb bg-blue-500"
+            />
+            <span className="slider-value p-2 bg-gray-100 text-blue-500 font-bold rounded-md">{sliderValue}</span>
+          </div>
+        </label>
+        <br />
         <label>
           <h1> Select Private Key Slots to Hide</h1>
           <div className="grid md:grid-cols-10 grid-cols-8 mt-5">
             {privateKey.split("").map((char, index) => (
               <div
                 key={index}
-                className={`cursor-pointer hover:scale-120 hover:bg-gray-300 border p-3 text-center ${
-                  selectedSlots.includes(index) ? "bg-primary hover:bg-primary" : ""
-                }`}
+                className={`cursor-pointer hover:scale-120 hover:bg-gray-300 border p-3 text-center ${selectedSlots.includes(index) ? "bg-primary hover:bg-primary" : ""
+                  }`}
                 onClick={() => handleCharClick(index)}
               >
                 {char}
@@ -211,4 +288,4 @@ const GameCreationForm = () => {
   );
 };
 
-export default GameCreationForm;
+export default GameCreationForm;
diff --git a/packages/nextjs/pages/game/[id].tsx b/packages/nextjs/pages/game/[id].tsx
@@ -421,33 +421,36 @@ function GamePage() {
                   {rolledResult.length > 0 && !spinning && <span className=""> {rolledResult.join(" , ")}</span>}
                 </div>
                 <div className="flex flex-wrap justify-center gap-2 mt-8">
-                  {Object.entries(game.hiddenChars).map(([key], index) =>
-                    rolled ? (
-                      isUnitRolling[index] ? (
-                        <video
-                          width={100}
-                          height={100}
-                          loop
-                          src="/rolls/Spin.webm"
-                          autoPlay
-                          onError={e => {
-                            console.log(key);
-                            console.error("Spin Error", index, e);
-                          }}
-                        />
-                      ) : (
-                        <video
-                          width={100}
-                          height={100}
-                          src={`/rolls/${rolls[index]}.webm`}
-                          autoPlay
-                          onError={e => console.error("Rolled Error", index, e)}
-                        />
-                      )
-                    ) : (
-                      <video ref={videoRef} width={100} height={100} src={`/rolls/0.webm`} />
-                    ),
-                  )}
+                {Object.entries(game.hiddenChars).map(([key], index) =>
+  rolled ? (
+    isUnitRolling[index] ? (
+      <video
+        key={key} // Add this line
+        width={100}
+        height={100}
+        loop
+        src="/rolls/Spin.webm"
+        autoPlay
+        onError={e => {
+          console.log(key);
+          console.error("Spin Error", index, e);
+        }}
+      />
+    ) : (
+      <video
+        key={key} // Add this line
+        width={100}
+        height={100}
+        src={`/rolls/${rolls[index]}.webm`}
+        autoPlay
+        onError={e => console.error("Rolled Error", index, e)}
+      />
+    )
+  ) : (
+    <video ref={videoRef} key={index} width={100} height={100} src={`/rolls/0.webm`} /> // Change here: key={index} because `key` is not defined in this context
+  ),
+)}
+
                 </div>
               </div>{" "}
               {game?.winner == address && (