celebration

src/App.css

@@ -72,7 +72,7 @@
 }
 
 .puzzle {
-  --unit: min(0.5rem, 1.15vw);
+  --unit: min(0.5rem, 1vw);
   display: flex;
   flex-direction: column;
   gap: calc(1 * var(--unit));
@@ -101,7 +101,7 @@
 .puzzle-row {
   display: flex;
   justify-content: center;
-  height: calc(15 * var(--unit));
+  height: calc(12 * var(--unit));
   gap: calc(1 * var(--unit));
 }
 .puzzle-item {
@@ -213,3 +213,42 @@ button:focus-visible, button:hover {
 button:active {
   box-shadow: 0 0 3em -1.5em inset var(--color-foreground)
 }
+@keyframes spin {
+  from { transform: scale(1.5) rotate(-10deg) }
+  to { transform: scale(1.5) rotate(10deg) }
+}
+.celebration {
+  z-index: -1;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: hidden;
+  &:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-image: repeating-conic-gradient(
+      var(--group-yellow) 0deg 5deg,
+      var(--group-green) 5deg 10deg,
+      var(--group-blue) 10deg 15deg,
+      var(--group-purple) 15deg 20deg
+    );
+    animation: spin 2s linear infinite;
+  }
+  &:after {
+    content: '';
+    position: absolute;
+    top: 2rem;
+    right: 2rem;
+    bottom: 2rem;
+    left: 2rem;
+    background-color: var(--color-background);
+    box-shadow: 0 0 1rem 1rem var(--color-background);
+    border-radius: 1rem;
+  }
+}

src/App.tsx

@@ -133,6 +133,7 @@ function App() {
           </button>
         </div>
       </div>
+      { store.solvedGroups.length === 4 && <div class="celebration" /> }
     </main>
   );
 }

src/useAppModel.ts

@@ -64,7 +64,8 @@ export default function useAppModel() {
   };
 
   const handleGuess = () => {
-    const selectedAnswers = store.selected.map((x) => getFromPuzzle(x));
+    const selected = store.puzzle.length === 4 ? [0, 1, 2, 3] : store.selected
+    const selectedAnswers = selected.map((x) => getFromPuzzle(x));
     const { level } = selectedAnswers[0];
     const isCorrect = selectedAnswers.every((x) => x.level === level);
     if (!isCorrect) {
@@ -72,14 +73,14 @@ export default function useAppModel() {
       alert("wrong");
       return;
     }
-    const selectedPinnedCount = store.selected.reduce(
+    const selectedPinnedCount = selected.reduce(
       (acc, cur) => acc + (cur < store.pinnedCount ? 1 : 0),
       0
     );
     setStore({
       pinnedCount: store.pinnedCount - selectedPinnedCount,
       puzzle: store.puzzle.filter((x) =>
-        store.selected.every((s) => store.puzzle[s] !== x)
+        selected.every((s) => store.puzzle[s] !== x)
       ),
       selected: [],
     });