Wordle2

client/components/Main.js

@@ -10,6 +10,7 @@ import { fetchAcceptedGuesses } from '../store/wordle'
 
 import { letters } from './letters'
 import PopUp from './PopUp'
+import Wordle2 from './Wordle2/Wordle2'
 /**
  * COMPONENT
  */
@@ -198,8 +199,8 @@ export const Main = props => {
 					marginLeft: 'auto',
 					position: 'absolute',
 					zIndex: 9,
-					width: 540,
-					height: 480,
+					width: 300,
+					height: 300,
 					backgroundColor: 'black'
 				}}
 			/>
@@ -211,8 +212,8 @@ export const Main = props => {
 					position: 'absolute',
 					textAlign: 'center',
 					zIndex: 9,
-					width: 540,
-					height: 480
+					width: 300,
+					height: 300
 				}}
 			/>
 			<div
@@ -221,7 +222,7 @@ export const Main = props => {
 					color: 'black',
 					fontSize: 30,
 
-					marginLeft: 600
+					marginLeft: 300
 				}}>
 				Detecting:
 				{translation}
@@ -232,12 +233,13 @@ export const Main = props => {
 					color: 'black',
 					fontSize: 30,
 
-					marginLeft: 600
+					marginLeft: 300
 				}}>
 				Guessed word is: {guess}
 				<div id="timer"></div>
 				{!isValid ? <div>Not a valid guess</div> : null}
 				<div>Accepted guessed word: {acceptedGuess}</div>
+				<Wordle2 translation={translation} />
 			</div>
 		</div>
 	)

client/components/Wordle2/Board2.js

@@ -0,0 +1,55 @@
+import React, { useState } from 'react'
+
+import Letter2 from './Letter2'
+
+const Board2 = () => {
+
+	return (
+		<div className="board">
+			<div className="row">
+				<Letter2 letterPos={0} attemptVal={0} />
+				<Letter2 letterPos={1} attemptVal={0} />
+				<Letter2 letterPos={2} attemptVal={0} />
+				<Letter2 letterPos={3} attemptVal={0} />
+				<Letter2 letterPos={4} attemptVal={0} />
+			</div>
+			<div className="row">
+				<Letter2 letterPos={0} attemptVal={1} />
+				<Letter2 letterPos={1} attemptVal={1} />
+				<Letter2 letterPos={2} attemptVal={1} />
+				<Letter2 letterPos={3} attemptVal={1} />
+				<Letter2 letterPos={4} attemptVal={1} />
+			</div>
+			<div className="row">
+				<Letter2 letterPos={0} attemptVal={2} />
+				<Letter2 letterPos={1} attemptVal={2} />
+				<Letter2 letterPos={2} attemptVal={2} />
+				<Letter2 letterPos={3} attemptVal={2} />
+				<Letter2 letterPos={4} attemptVal={2} />
+			</div>
+			<div className="row">
+				<Letter2 letterPos={0} attemptVal={3} />
+				<Letter2 letterPos={1} attemptVal={3} />
+				<Letter2 letterPos={2} attemptVal={3} />
+				<Letter2 letterPos={3} attemptVal={3} />
+				<Letter2 letterPos={4} attemptVal={3} />
+			</div>
+			<div className="row">
+				<Letter2 letterPos={0} attemptVal={4} />
+				<Letter2 letterPos={1} attemptVal={4} />
+				<Letter2 letterPos={2} attemptVal={4} />
+				<Letter2 letterPos={3} attemptVal={4} />
+				<Letter2 letterPos={4} attemptVal={4} />
+			</div>
+			<div className="row">
+				<Letter2 letterPos={0} attemptVal={5} />
+				<Letter2 letterPos={1} attemptVal={5} />
+				<Letter2 letterPos={2} attemptVal={5} />
+				<Letter2 letterPos={3} attemptVal={5} />
+				<Letter2 letterPos={4} attemptVal={5} />
+			</div>
+		</div>
+	)
+}
+
+export default Board2

client/components/Wordle2/Key2.js

@@ -0,0 +1,32 @@
+import React, { useContext } from 'react'
+import { Wordle2Context } from './Wordle2'
+
+function Key2({ keyVal, bigKey }) {
+	const {
+		board,
+		setBoard,
+		currAttempt,
+		setCurrAttempt,
+		onSelectLetter,
+		onDelete,
+		onEnter
+	} = useContext(Wordle2Context)
+
+	const selectLetter = () => {
+		if (keyVal === 'ENTER') {
+			onEnter()
+		} else if (keyVal === 'DELETE') {
+			onDelete()
+		} else {
+			onSelectLetter(keyVal)
+		}
+	}
+
+	return (
+		<div className="key" id={bigKey && 'big'} onClick={selectLetter}>
+			{keyVal}
+		</div>
+	)
+}
+
+export default Key2

client/components/Wordle2/Keyboard2.js

@@ -0,0 +1,80 @@
+import React, { useEffect, useContext, useCallback } from 'react'
+import Key2 from './Key2'
+import { Wordle2Context } from './Wordle2'
+
+const Keyboard2 = props => {
+	const keys1 = ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P']
+	const keys2 = ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L']
+	const keys3 = ['Z', 'X', 'C', 'V', 'B', 'N', 'M']
+	console.log('props in keyboard=====', props)
+	const {
+		board,
+		setBoard,
+		currAttempt,
+		setCurrAttempt,
+		onSelectLetter,
+		onDelete,
+		onEnter,
+		setDisabledLetters,
+		disabledLetters,
+		gameOver
+	} = useContext(Wordle2Context)
+
+	const handleKeyboard = useCallback(
+		event => {
+			if (props.transaltion) {
+				event.key = props.transaltion
+			}
+			if (gameOver.gameOver) return
+			if (event.key === 'Enter') {
+				onEnter()
+			} else if (event.key === 'Backspace') {
+				onDelete()
+			} else {
+				keys1.forEach(key => {
+					if (event.key.toLowerCase() === key.toLowerCase()) {
+						onSelectLetter(key)
+					}
+				})
+				keys2.forEach(key => {
+					if (event.key.toLowerCase() === key.toLowerCase()) {
+						onSelectLetter(key)
+					}
+				})
+				keys3.forEach(key => {
+					if (event.key.toLowerCase() === key.toLowerCase()) {
+						onSelectLetter(key)
+					}
+				})
+			}
+		},
+		[currAttempt]
+	)
+
+	useEffect(() => {}, [handleKeyboard])
+
+	console.log(disabledLetters)
+	return (
+		<div className="keyboard" onKeyDown={handleKeyboard}>
+			<div className="line1">
+				{keys1.map(key => {
+					return <Key2 keyVal={key} disabled={disabledLetters.includes(key)} />
+				})}
+			</div>
+			<div className="line2">
+				{keys2.map(key => {
+					return <Key2 keyVal={key} disabled={disabledLetters.includes(key)} />
+				})}
+			</div>
+			<div className="line3">
+				<Key2 keyVal={'ENTER'} bigKey />
+				{keys3.map(key => {
+					return <Key2 keyVal={key} disabled={disabledLetters.includes(key)} />
+				})}
+				<Key2 keyVal={'DELETE'} bigKey />
+			</div>
+		</div>
+	)
+}
+
+export default Keyboard2

client/components/Wordle2/Letter2.js

@@ -0,0 +1,11 @@
+import React, { useState, useContext, useEffect } from 'react'
+import { Wordle2Context } from './Wordle2'
+
+const Letter2 = ({ letterPos, attemptVal }) => {
+	const { board } = useContext(Wordle2Context)
+	const letter = board[attemptVal][letterPos]
+	return <div className="letter">{letter}</div>
+}
+
+export default Letter2
+

client/components/Wordle2/Wordle2.css

@@ -0,0 +1,127 @@
+.wordle2 {
+	text-align: center;
+	background-color: #121212;
+	width: 100vw;
+	height: 100vh;
+	/* display: flex; */
+	color: white;
+}
+
+body {
+	padding: 0%;
+	margin: 0;
+}
+
+nav {
+	height: 60px;
+	width: 100%;
+	margin: 0;
+	border-bottom: 1px solid grey;
+	display: grid;
+	place-items: center;
+}
+
+nav h1 {
+	margin: 0;
+	font-family: Helvetica, Arial, sans-serif;
+	color: white;
+	font-size: 45px;
+}
+.game {
+	width: 100vw;
+	height: calc(100vh - 170px);
+	display: flex;
+	align-items: center;
+	padding-top: 50px;
+	flex-direction: column;
+}
+
+.board {
+	width: 450px;
+	height: 550px;
+	border: 1px solid black;
+	display: flex;
+	flex-direction: column;
+}
+
+.row {
+	flex: 33%;
+	display: flex;
+	flex-direction: row;
+	margin: 5px;
+}
+
+.letter {
+	flex: 33%;
+	height: 100%;
+	border: 1px solid grey;
+	margin: 5px;
+	display: grid;
+	place-items: center;
+	font-size: 30px;
+	font-weight: bolder;
+	color: white;
+	font-family: Arial, Helvetica, sans-serif;
+}
+
+#correct {
+	background-color: #528d4e;
+}
+
+#almost {
+	background-color: #b49f39;
+}
+
+#error {
+	background-color: #3a393c;
+}
+
+.keyboard {
+	width: 700px;
+	height: 300px;
+	margin-top: 60px;
+}
+
+.line1 {
+	flex: 33%;
+	display: flex;
+	flex-direction: row;
+	display: flex;
+	justify-content: center;
+	margin: 5px;
+}
+.line2 {
+	flex: 33%;
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	margin: 5px;
+}
+.line3 {
+	flex: 33%;
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	margin: 5px;
+}
+
+.key {
+	width: 50px;
+	height: 70px;
+	margin: 5px;
+	border-radius: 4px;
+	display: grid;
+	place-items: center;
+	font-size: 20px;
+	background-color: grey;
+	color: white;
+	font-family: Arial, Helvetica, sans-serif;
+	cursor: pointer;
+}
+
+#big {
+	width: 100px;
+}
+#disabled {
+	background-color: #3a393c;
+}