-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Adding changes to Frontend visual + GuessRandomNumberGame (#18)
* adding nice visual to fhewordle * feat: add fhewordle mock to the frontend * change sample * adding a guess random number game to the hardhat examples * adding guess random number game
- Loading branch information
1 parent
154b351
commit b16af88
Showing
25 changed files
with
43,056 additions
and
13,484 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| "use client"; | ||
|
|
||
| import Header from "@/components/Header"; | ||
| import Link from "next/link"; | ||
| import Image from "next/image"; | ||
| import WordleGame from "@/components/fheWordle/WordleGame"; | ||
|
|
||
| export default function DAppPage() { | ||
| return ( | ||
| <> | ||
| <Header /> | ||
| <main className="flex-grow container mx-auto px-4 py-16"> | ||
| <Link href="/" className="text-black hover:underline mb-4 inline-block"> | ||
| ← Back to dApps | ||
| </Link> | ||
| <div className="w-full max-w-2xl mx-auto mt-8"> | ||
| <div className="bg-white shadow-[6px_6px_0_0_rgba(0,0,0,1)] p-8 relative overflow-hidden"> | ||
| <h1 className="text-4xl font-bold mb-4 text-gray-800 font-telegraf relative z-10"> | ||
| FHEWordle | ||
| </h1> | ||
| <p className="text-gray-600 relative z-10"> | ||
| FHEWordle is a privacy-preserving version of the popular word game | ||
| Wordle, powered by Fully Homomorphic Encryption (FHE). In this | ||
| game, your guesses and the target word remain encrypted at all | ||
| times, ensuring complete privacy while still allowing you to play | ||
| the classic word-guessing game. Try to guess the 5-letter word in | ||
| 6 attempts or less! | ||
| </p> | ||
| <WordleGame /> | ||
| </div> | ||
| </div> | ||
| </main> | ||
| <footer className="bg-yellow-400 py-6 text-center text-gray-800"> | ||
| <p>© 2023 Zama dApps. All rights reserved.</p> | ||
| </footer> | ||
| </> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,104 @@ | ||
| import { useState, useEffect } from "react"; | ||
| import { Button } from "@/components/ui/button"; | ||
| import { Input } from "@/components/ui/input"; | ||
| import { AlertCircle } from "lucide-react"; | ||
| import { VALID_WORDS } from "./validWordsList"; | ||
|
|
||
| const WORD_LENGTH = 5; | ||
| const MAX_GUESSES = 6; | ||
| const WORDS = VALID_WORDS.map((word) => word.toUpperCase()); | ||
|
|
||
| export default function WordleGame() { | ||
| const [targetWord, setTargetWord] = useState(""); | ||
| const [currentGuess, setCurrentGuess] = useState(""); | ||
| const [guesses, setGuesses] = useState<string[]>([]); | ||
| const [feedback, setFeedback] = useState<string[][]>([]); | ||
| const [gameOver, setGameOver] = useState(false); | ||
| const [message, setMessage] = useState(""); | ||
|
|
||
| useEffect(() => { | ||
| setTargetWord(WORDS[Math.floor(Math.random() * WORDS.length)]); | ||
| }, []); | ||
|
|
||
| const handleGuess = () => { | ||
| if (currentGuess.length !== WORD_LENGTH) { | ||
| setMessage("Please enter a 5-letter word"); | ||
| return; | ||
| } | ||
|
|
||
| if (!WORDS.includes(currentGuess)) { | ||
| setMessage("Not a valid word"); | ||
| return; | ||
| } | ||
|
|
||
| const newFeedback = currentGuess.split("").map((letter, index) => { | ||
| if (letter === targetWord[index]) return "correct"; | ||
| if (targetWord.includes(letter)) return "present"; | ||
| return "absent"; | ||
| }); | ||
|
|
||
| setGuesses([...guesses, currentGuess]); | ||
| setFeedback([...feedback, newFeedback]); | ||
| setCurrentGuess(""); | ||
| setMessage(""); | ||
|
|
||
| if (currentGuess === targetWord) { | ||
| setGameOver(true); | ||
| setMessage("Congratulations! You guessed the word!"); | ||
| } else if (guesses.length + 1 === MAX_GUESSES) { | ||
| setGameOver(true); | ||
| setMessage(`Game over! The word was ${targetWord}`); | ||
| } | ||
| }; | ||
|
|
||
| const renderGuess = (guess: string, feedbackRow: string[]) => { | ||
| return guess.split("").map((letter, index) => ( | ||
| <div | ||
| key={index} | ||
| className={`w-12 h-12 border-2 flex items-center justify-center text-2xl font-bold | ||
| ${ | ||
| feedbackRow[index] === "correct" | ||
| ? "bg-green-500 border-green-600" | ||
| : feedbackRow[index] === "present" | ||
| ? "bg-yellow-500 border-yellow-600" | ||
| : "bg-gray-300 border-gray-400" | ||
| }`} | ||
| > | ||
| {letter} | ||
| </div> | ||
| )); | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="flex flex-col items-center justify-center"> | ||
| <div className="space-y-2 mt-4 mb-4"> | ||
| {guesses.map((guess, i) => ( | ||
| <div key={i} className="flex space-x-2"> | ||
| {renderGuess(guess, feedback[i])} | ||
| </div> | ||
| ))} | ||
| </div> | ||
| {!gameOver && ( | ||
| <div className="flex space-x-2 mb-4"> | ||
| <Input | ||
| type="text" | ||
| value={currentGuess} | ||
| onChange={(e) => setCurrentGuess(e.target.value.toUpperCase())} | ||
| maxLength={WORD_LENGTH} | ||
| className="w-40 text-center text-2xl uppercase" | ||
| disabled={gameOver} | ||
| /> | ||
| <Button onClick={handleGuess} disabled={gameOver}> | ||
| Guess | ||
| </Button> | ||
| </div> | ||
| )} | ||
| {message && ( | ||
| <div className="flex items-center space-x-2 text-red-500"> | ||
| <AlertCircle className="h-5 w-5" /> | ||
| <span>{message}</span> | ||
| </div> | ||
| )} | ||
| </div> | ||
| ); | ||
| } |
Oops, something went wrong.