Merge pull request #52 from Vankata453/summary-show-solution

Show solution recipe in summary pop-up

src/components/CraftingTable.component.tsx

@@ -5,11 +5,15 @@ import { useEffect, useState } from "react";
 import Slot from "./Slot.component";
 
 export default function CraftingTable({
-  active,
-  tableNum,
+  solved = false,
+  active = true,
+  noBackground = false,
+  tableNum = 0,
 }: {
-  active: boolean;
-  tableNum: number;
+  solved?: boolean;
+  active?: boolean;
+  noBackground?: boolean;
+  tableNum?: number;
 }) {
   const {
     cursorItem,
@@ -23,13 +27,22 @@ export default function CraftingTable({
     setColorTables,
     setGameState,
     recipes,
+    remainingSolutionVariants,
     options: { highContrast },
   } = useGlobal();
 
   const [currentRecipe, setCurrentRecipe] = useState<string | undefined>();
-  const colorTable = colorTables[tableNum];
 
-  const currentTable = craftingTables[tableNum];
+  const colorTable = solved
+    ? [
+        [undefined, undefined, undefined],
+        [undefined, undefined, undefined],
+        [undefined, undefined, undefined],
+      ]
+    : colorTables[tableNum];
+  const currentTable = solved
+    ? remainingSolutionVariants[0]
+    : craftingTables[tableNum];
 
   const [isDown, setIsDown] = useState(false); // TODO: remove this
   const [isDragging, setIsDragging] = useState(false);
@@ -112,6 +125,8 @@ export default function CraftingTable({
   };
 
   const processGuess = () => {
+    if (solved) return;
+
     console.log("processGuess", currentRecipe, solution);
     if (
       currentRecipe?.replace("minecraft:", "") ===
@@ -163,7 +178,10 @@ export default function CraftingTable({
   return (
     <>
       <div
-        className="flex inv-background justify-between items-center w-[22rem]"
+        className={
+          "flex box justify-between items-center w-[22rem]" +
+          (noBackground ? "" : " inv-background")
+        }
         onClick={(e: any) => e.stopPropagation()}
       >
         <div className="w-36 h-36 flex flex-wrap">
@@ -176,7 +194,7 @@ export default function CraftingTable({
                   backgroundColor={
                     COLOR_MAP[colorTable[rowIndex][columnIndex] ?? 0]
                   }
-                  clickable={active}
+                  clickable={!solved && active}
                   onMouseDown={() => onMouseDown(rowIndex, columnIndex)}
                   onMouseUp={() => onMouseUp(rowIndex, columnIndex)}
                   onMouseMove={() => onMouseMove(rowIndex, columnIndex)}
@@ -189,9 +207,9 @@ export default function CraftingTable({
         <p className="text-5xl m-4 text-slot-background">→</p>
         <div className="crafting-output">
           <Slot
-            item={currentRecipe}
+            item={solved ? recipes[solution].output : currentRecipe}
             backgroundColor={undefined}
-            clickable={active && !!currentRecipe}
+            clickable={!solved && active && !!currentRecipe}
             onClick={processGuess}
           />
         </div>

src/components/Inventory.component.tsx

@@ -114,7 +114,7 @@ export default function Inventory({ guessCount }: { guessCount: number }) {
 
   return (
     <div
-      className="inv-background max-w-[21rem] flex flex-col items-center gap-3"
+      className="box inv-background max-w-[21rem] flex flex-col items-center gap-3"
       onClick={(e: any) => e.stopPropagation()}
     >
       <h2>Crafting Ingredients</h2>

src/components/Popup.component.tsx

@@ -3,7 +3,7 @@ import { Dialog, Transition } from "@headlessui/react";
 import Link from "next/link";
 import { Fragment, useState } from "react";
 import MCButton from "./MCButton.component";
-import Slot from "./Slot.component";
+import CraftingTable from "@/components/CraftingTable.component";
 
 export default function Popup({
   isOpen,
@@ -96,9 +96,12 @@ export default function Popup({
                 leaveFrom="opacity-100 scale-100"
                 leaveTo="opacity-0 scale-95"
               >
-                <Dialog.Panel className="w-full max-w-sm transform overflow-hidden rounded-2xl inv-background text-left align-middle shadow-xl transition-all">
+                <Dialog.Panel className="w-full max-w-sm transform overflow-hidden rounded-2xl box inv-background text-left align-middle shadow-xl transition-all">
                   <div className="flex flex-col items-center gap-2">
-                    <Slot item={recipes[solution].output} clickable={false} />
+                    <CraftingTable
+                      solved
+                      noBackground
+                    />
                     <Dialog.Description className="text-med font-medium leading-6 text-gray-900">
                       {`Solution: ` + solutionName}
                     </Dialog.Description>

src/context/Global/context.tsx

@@ -30,6 +30,7 @@ export type GlobalContextProps = {
   setOptions: Dispatch<SetStateAction<Options>>;
   resetGame: (isRandom: boolean) => void;
   gameDate: Date;
+  remainingSolutionVariants: Table[];
 };
 
 const GlobalContext = createContext<GlobalContextProps>({
@@ -55,6 +56,7 @@ const GlobalContext = createContext<GlobalContextProps>({
   setOptions: () => {},
   resetGame: () => {},
   gameDate: new Date(),
+  remainingSolutionVariants: [],
 });
 
 export const GlobalContextProvider = GlobalContext.Provider;

src/context/Global/index.tsx

@@ -233,6 +233,10 @@ const GlobalProvider = ({ children }: { children: ReactNode }) => {
     return undefined;
   };
 
+  const getFirstSolutionVariant = (): Table => {
+    return remainingSolutionVariants[0];
+  };
+
   const trimVariants = (guess: Table) => {
     let [matchmaps, matchcounts] = checkRemainingSolutionVariants(guess);
     // find remaining variants, correctSlots only has green slots
@@ -379,13 +383,15 @@ const GlobalProvider = ({ children }: { children: ReactNode }) => {
       setColorTables,
       recipes,
       checkAllVariants,
+      getFirstSolutionVariant,
       trimVariants,
       gameState,
       setGameState,
       options,
       setOptions,
       resetGame,
       gameDate,
+      remainingSolutionVariants,
     }),
     [
       userId,
@@ -397,6 +403,7 @@ const GlobalProvider = ({ children }: { children: ReactNode }) => {
       setCraftingTables,
       recipes,
       checkAllVariants,
+      getFirstSolutionVariant,
       trimVariants,
       colorTables,
       setColorTables,
@@ -406,6 +413,7 @@ const GlobalProvider = ({ children }: { children: ReactNode }) => {
       setOptions,
       resetGame,
       gameDate,
+      remainingSolutionVariants,
     ]
   );
 

src/pages/how-to-play.tsx

@@ -3,7 +3,7 @@ import Link from "next/link";
 export default function HowToPlay() {
   return (
     <main>
-      <div className="inv-background">
+      <div className="box inv-background">
         <h2 className="text-center">How To Play</h2>
         <p className="text-center font-bold">
           Your goal is to try to craft the secret item from the ingredients in
@@ -40,7 +40,7 @@ export default function HowToPlay() {
           </Link>
         </p>
       </div>
-      <div className="inv-background">
+      <div className="box inv-background">
         <h2>About</h2>
         <p>
           Originally created by Tamura Boog, Zach Manson, Harrison Oates, Ivan

src/pages/index.tsx

@@ -100,7 +100,7 @@ export default function Home() {
           ))}
         </div>
       ) : (
-        <div className="inv-background">
+        <div className="box inv-background">
           <LoadingSpinner />
         </div>
       )}

src/styles/globals.css

@@ -109,13 +109,16 @@ header {
   color: var(--inv-background);
 }
 
+.box {
+  padding: 1.5rem;
+}
+
 .inv-background {
   background: var(--inv-background);
   color: var(--slot-shadow);
   border-radius: 3px;
   box-shadow: 5px 5px 0px var(--slot-shadow),
     inset 4px 4px 0px var(--slot-inset);
-  padding: 1.5rem;
   margin-bottom: 10px;
 }
 
@@ -155,4 +158,4 @@ header {
   background-size: cover;
   image-rendering: pixelated;
   z-index: 100000;
-}
+}