wip

components/answer.tsx

@@ -1,31 +1,37 @@
-import { useEffect, useRef, useState } from "react";
-import { AnswerProp } from "./types";
+import { AnswerProp } from './types';
+import { useEffect, useRef, useState } from 'react';
 
-function Answer({ word, wasFound }: AnswerProp) {
+function Answer({ word, wasFound, wasRevealed = false }: AnswerProp) {
     const labelRef = useRef<HTMLLabelElement>(null);
 
     let [wasScrolled, setWasScrolled] = useState(false);
 
-    useEffect(() => {
-        if (wasFound && !wasScrolled && labelRef?.current) {
-            labelRef.current.scrollIntoView({
-                behavior: "smooth",
-                inline: "center",
-            });
+    if (!wasRevealed && wasFound && !wasScrolled) {
+        useEffect(() => {
+            if (labelRef?.current) {
+                labelRef.current.scrollIntoView({
+                    behavior: 'smooth',
+                    inline: 'center',
+                });
 
-            setWasScrolled(true);
-        }
-    });
+                setWasScrolled(true);
+            }
+        });
+    }
 
     return (
-        <label ref={labelRef}>
-            {wasFound ? word : "-".repeat(word.length)}
+        <label className={wasRevealed ? 'revealed' : ''} ref={labelRef}>
+            {wasFound ? word : '-'.repeat(word.length)}
             <style jsx>{`
                 label {
                     margin: 0 8px;
                     text-transform: uppercase;
                     white-space: nowrap;
                 }
+
+                label.revealed {
+                    opacity: 0.35;
+                }
             `}</style>
         </label>
     );

components/tile.tsx

@@ -11,7 +11,10 @@ function Tile({ value, onTap }: Props) {
             </button>
             <style jsx>{`
                 div {
+                    align-items: center;
+                    display: flex;
                     flex: 1 1 0;
+                    justify-content: center;
                 }
 
                 div.letter {
@@ -23,14 +26,14 @@ function Tile({ value, onTap }: Props) {
                 }
 
                 button {
-                    background: #333030e8;
+                    background: transparent;
                     color: white;
                     cursor: pointer;
                     display: inline-block;
-                    font-size: 170%;
+                    font-size: 200%;
                     font-weight: bold;
                     height: 50px;
-                    padding: 4px;
+                    padding-bottom: 2px;
                     text-transform: uppercase;
                     width: calc(100% - 8px);
                 }

components/types.d.ts

@@ -1,6 +1,7 @@
 interface AnswerProp {
     shouldScroll: boolean;
     wasFound: boolean;
+    wasRevealed: boolean;
     word: string;
 }
 

pages/index.tsx

@@ -1,12 +1,12 @@
-import Answer from "../components/answer";
-import GameManager from "../lib/gameManager";
-import Grade from "../components/grade";
-import Head from "next/head";
-import InteractiveWord from "../components/interactiveWord";
-import Score from "../components/score";
-import Tile from "../components/tile";
-import { useState } from "react";
-import { AnswerProp, TileProp } from "../components/types";
+import Answer from '../components/answer';
+import GameManager from '../lib/gameManager';
+import Grade from '../components/grade';
+import Head from 'next/head';
+import InteractiveWord from '../components/interactiveWord';
+import Score from '../components/score';
+import Tile from '../components/tile';
+import { AnswerProp, TileProp } from '../components/types';
+import { useState } from 'react';
 
 let game = GameManager.nextGame();
 
@@ -42,6 +42,17 @@ function Home() {
         setScramble(scramble.concat(tile).sort((a, b) => a.index - b.index));
     }
 
+    function revealAnswers() {
+        answers.forEach(answer => {
+            if (!answer.wasFound) {
+                answer.wasFound = true;
+                answer.wasRevealed = true;
+            }
+        });
+
+        setAnswers(answers);
+    }
+
     function tryEnterWord() {
         const word = entry.map((m) => m.letter).join("");
         const answerIndex = answers.findIndex((f) => f.word === word && !f.wasFound);
@@ -72,7 +83,7 @@ function Home() {
                 <main>
                     <div className="score-container">
                         <Score label="Score" score={score}></Score>
-                        <Grade max={maxScore} score={0}></Grade>
+                        <Grade max={maxScore} score={score}></Grade>
                         <Score label="Max" score={maxScore} align="right"></Score>
                     </div>
 
@@ -88,6 +99,7 @@ function Home() {
                     </div>
 
                     <div className="enter-container">
+                        <Tile value="Reveal" onTap={revealAnswers}></Tile>
                         <Tile value="Enter" onTap={tryEnterWord}></Tile>
                     </div>
                 </main>
@@ -139,7 +151,7 @@ function Home() {
                     display: flex;
                     flex-grow: 1;
                     font-size: 60px;
-                    padding: 16px 0;
+                    padding: 16px 15%;
                     overflow-x: auto;
                     -ms-overflow-style: none; /* IE and Edge */
                     scrollbar-width: none; /* Firefox */
@@ -164,7 +176,7 @@ function Home() {
                 }
 
                 .entry-container > * {
-                    height: 100px;
+                    height: 75px;
                 }
 
                 .main-container > * {
@@ -175,16 +187,16 @@ function Home() {
                 .enter-container {
                     align-items: center;
                     display: flex;
-                    justify-content: flex-end;
-                    padding: 4px 4px 16px 4px;
+                    justify-content: space-between;
+                    padding: 32px 6px 16px 6px;
                 }
 
                 footer {
                     align-items: center;
                     display: flex;
                     font-variant: small-caps;
                     justify-content: space-between;
-                    padding: 16px;
+                    padding: 16px 10px;
                     width: 100%;
                 }