Aggiustata la questione di lettere multiple per lettera e corrette animazioni

public/mathematical-wordle-words-list.json

@@ -0,0 +1 @@
+["MINUS","ZEROS","ROUND","THIRD","PROOF","EVENT","MATHS","CUBIC","MONAD","GAUSS","AXIOM","PRISM","CHORD","ANGLE","LITRE","MILES","VALUE","TABLE","HALVE","EXACT","LOCUS","QUART","ARRAY","SOLID","KITES","TRIAL","EMPTY","FIFTH","NINTH","DEPTH","BOOLE","FACES","TENTH","SLOPE","SIXTH","DELTA","SIGMA","LINES","EULER","FIFTY","SCALE","RULER","INDEX","OUNCE","FIRST","SPACE","MONIC","POINT","RIGHT","DIGIT","VALID","TIMES","KLEIN","TWICE","SIXES","METRE","STONE","BAYES","SEVEN","PLANE","CLOCK","THREE","CHAOS","ACUTE","UNITS","HARDY","COUNT","FORTY","TORUS","WIDTH","LOGIC","WILES","POWER","EIGHT","RANGE","PRIME","MODAL","TREND","THETA","CURVE","SIXTY","ERROR","TALLY","PLATO","UNION","KILOS","GRAPH","RATIO","CUBES","DOZEN","EQUAL","ALPHA","NODES","GROUP","ERDOS","KAPPA","LIMIT","ADDED","HERTZ","LATEX","CONIC","RINGS","BOUND","ROOTS","BOREL","ALEPH","SURDS","HELIX","APPEL","EDGES","GAMMA","POLAR","GODEL","FIELD","TUPLE","POLYA","BASIS","UPPER","LEMMA","PROVE","ORDER","SIDES","HASSE","SMALL","BRACE","KNUTH","AREAS","IDEAL","SPACE","DENSE","MODEL","LOWER","OVALS","NOISE","SOLVE","BAIRE","CHAIN","JULIA","FOCUS","KNOTS","DIRAC","HOLES","NORMS","REALS"]

src/App.vue

@@ -7,7 +7,17 @@
 	export default {
 		data() {
 			return {
+				// Constants
+				LETTER_ANIMATION_DURATION: 0.3,
+				SHAKE_ANIMATION_DURATION: 0.3,
+
+				// Variables
+				words: [],
+
+				listen: true,
+
 				gridState: null,
+				rowsAnimations: null,
 				keyboardMask: null,
 
 				currentAttempt: 0,
@@ -23,8 +33,7 @@
 			}
 		},
 
-		created() {
+		async created() {
-			this.setupGame();
 			window.addEventListener('keyup', (e) => {
 				if (e.key === 'Backspace') {
 					this.keyPress('Delete');
@@ -34,6 +43,11 @@
 					this.keyPress(e.key.toUpperCase())
 				}
 			});
+
+			let req = await fetch('./mathematical-wordle-words-list.json');
+			this.words = await req.json();
+
+			this.setupGame();
 		},
 		components: {
 			GuessGrid,
@@ -42,6 +56,33 @@
 			PopUp,
 		},
 		methods: {
+			generatePair() {
+				let words = [];
+
+				let validPair = false;
+				while (!validPair) {
+					let firstWord = this.words[Math.floor(Math.random() * this.words.length)];
+					let possibleSecondWords = []
+					for(let i = 0; i < this.words.length; i++) {
+						let validSecondWord = true;
+						for (let l = 0; l < firstWord.length; l++) {
+							if (this.words[i].includes(firstWord[l])) {
+								validSecondWord = false;
+							}
+						}
+						if (validSecondWord) {
+							possibleSecondWords.push(this.words[i]);
+						}
+					}
+
+					if (possibleSecondWords.length > 0) {
+						validPair = true;
+						words = [firstWord, possibleSecondWords[Math.floor(Math.random() * possibleSecondWords.length)]];
+					}
+				}
+
+				return words;
+			},
 			setupGame() {
 				this.gridState = Array.from({length: 6}, () => {
 					return Array.from({length: 5}, () => {
@@ -49,44 +90,26 @@
 							letter: '',
 							state: 'unset'
 						};
-					})
 					});
+				});
+				this.rowsAnimations = new Array(6).fill(false);
 
-				this.keyboardMask = {
+				this.keyboardMask = Object.fromEntries(
-					'Q': 'unused',
+					Array.from({length: 26}, (v, i) => [
-					'W': 'unused',
+						String.fromCharCode(i + 65), 'unused'
-					'E': 'unused',
+					])
-					'R': 'unused',
+				);
-					'T': 'unused',
+				this.keyboardMask['Enter'] = 'unused';
-					'Y': 'unused',
+				this.keyboardMask['Delete'] = 'unused';
-					'U': 'unused',
+				console.log(this.keyboardMask);
-					'I': 'unused',
-					'O': 'unused',
-					'P': 'unused',
-					'A': 'unused',
-					'S': 'unused',
-					'D': 'unused',
-					'F': 'unused',
-					'G': 'unused',
-					'H': 'unused',
-					'J': 'unused',
-					'K': 'unused',
-					'L': 'unused',
-					'Z': 'unused',
-					'X': 'unused',
-					'C': 'unused',
-					'V': 'unused',
-					'B': 'unused',
-					'N': 'unused',
-					'M': 'unused',
-					'Enter': 'unused',
-					'Delete': 'unused',
-				};
 
 				this.currentAttempt = 0;
 				this.currentIndex = 0;
 
-				this.secretWords = [ 'SNARK', 'ITCHY' ];
+				this.secretWords = this.generatePair();
+				console.log(this.secretWords);
+				console.log(this.secretWords[0]);
+				console.log(this.secretWords[1]);
 
 				this.gameOver = false;
 				this.won = false;
@@ -125,6 +148,9 @@
 				this.overlayVisible = true;
 			},
 			keyPress(event) {
+				if (!this.listen) {
+					return;
+				}
 				if (event === "Delete") {
 					if(this.currentIndex > 0) {
 						this.currentIndex -= 1;
@@ -133,19 +159,49 @@
 					}
 				} else if (event == "Enter") {
 					if(this.currentIndex === 5) {
+
+						// Validate Word
+						let currentWord = "";
+						for(let i = 0; i < 5; i++) {
+							currentWord += this.gridState[this.currentAttempt][i].letter;
+						}
+						if(!this.words.includes(currentWord)) {
+							// Invalid attempt, signal error
+							this.listen = false;
+							this.rowsAnimations[this.currentAttempt] = true;
+							
+							setTimeout(() => {
+								this.listen = true;
+								this.rowsAnimations[this.currentAttempt] = false;
+							}, this.SHAKE_ANIMATION_DURATION * 1000);
+
+							return;
+						}
+
+						// Calculate result
+						let wordsFlags = [ this.secretWords[0].split(''), this.secretWords[1].split('') ];
 						let matches = [ [-1,false], [-1,false], [-1,false], [-1,false], [-1,false] ];
-						for(let i = 0; i < 5; i++)
+
-						{
+						for(let i = 0; i < 5; i++) {
 							let letter = this.gridState[this.currentAttempt][i].letter;
-							for(let j = 0; j < 2; j++)
+							for(let j = 0; j < 2; j++) {
-							{
+								if (wordsFlags[j][i] === letter) {
-								if (this.secretWords[j].includes(letter)) {
+									wordsFlags[j][i] = null;
-									let matchType = this.secretWords[j][i] === letter;
+									matches[i] = [j, true];
-									matches[i] = [j, matchType];
+								}
+							}
+						}
+						for(let i = 0; i < 5; i++) {
+							let letter = this.gridState[this.currentAttempt][i].letter;
+							for(let j = 0; j < 2; j++) {
+								for(let k = 0; k < 5; k++) {
+									if(wordsFlags[j][k] === letter) {
+										wordsFlags[j][k] = null;
+										matches[i] = [j, false];
+									}
 								}
 							}
 						}
-
 						let oneWordMatch = true;
 						for(let i = 0; i < 5; i++) {
 							for(let j = 0; j < 5; j++) {
@@ -155,27 +211,49 @@
 							}
 						}
 
+						// Update grid to tease result
 						for(let i = 0; i < 5; i++) {
 							if (matches[i][0] !== -1 && matches[i][1]) {
 								this.gridState[this.currentAttempt][i].state = `correct-${oneWordMatch ? 'full' : 'half'}`;
-								this.keyboardMask[this.gridState[this.currentAttempt][i].letter] = 'correct';
 							} else if (matches[i][0] !== -1 && !matches[i][1]) {
 								this.gridState[this.currentAttempt][i].state = `misplaced-${oneWordMatch ? 'full' : 'half'}`;
-								this.keyboardMask[this.gridState[this.currentAttempt][i].letter] = 'misplaced';
 							} else {
 								this.gridState[this.currentAttempt][i].state = 'wrong';
+							}
+						}
+						this.listen = false;
+
+						// Resolve
+						setTimeout(() => {
+							for(let i = 0; i < 5; i++) {
+								if (matches[i][0] !== -1 && matches[i][1]) {
+									if(this.keyboardMask[this.gridState[this.currentAttempt][i].letter] === 'unused' ||
+										this.keyboardMask[this.gridState[this.currentAttempt][i].letter] === 'misplaced') {
+										this.keyboardMask[this.gridState[this.currentAttempt][i].letter] = 'correct';
+									}
+								} else if (matches[i][0] !== -1 && !matches[i][1]) {
+									if(this.keyboardMask[this.gridState[this.currentAttempt][i].letter] === 'unused') {
+										this.keyboardMask[this.gridState[this.currentAttempt][i].letter] = 'misplaced';
+									}
+								} else {
+									if(this.keyboardMask[this.gridState[this.currentAttempt][i].letter] === 'unused') {
 										this.keyboardMask[this.gridState[this.currentAttempt][i].letter] = 'wrong';
 									}
 								}
+							}
 
 							this.currentAttempt += 1;
 							this.currentIndex = 0;
 
+
 							if (this.checkWin(matches, oneWordMatch)) {
 								this.resolveGame(true);
 							} else if (this.currentAttempt === 6) {
 								this.resolveGame(false);
 							}
+
+							this.listen = true;
+						}, this.LETTER_ANIMATION_DURATION * 1000 * 5);
 					}
 				} else {
 					if (this.currentIndex < 5) {
@@ -190,8 +268,8 @@
 </script>
 
 <template>
-	<div class="page">
+	<div class="page" :style="`--letter-animation-duration: ${LETTER_ANIMATION_DURATION}s; --shake-animation-duration: ${SHAKE_ANIMATION_DURATION}s`">
-		<div class="interface">
+		<div v-if="this.gridState !== null" class="interface">
 			<div class="header">
 				<div>Qwordle</div>
 				<div class="end">
@@ -199,8 +277,8 @@
 					<div v-if="gameOver" class="material-icons-outlined" @click="overlayVisible = true">military_tech</div>
 				</div>
 			</div>
-			<GuessGrid :state="gridState" />
+			<GuessGrid :state="gridState" :rows-animations="rowsAnimations"/>
-			<Keyboard :mask="keyboardMask" @add="keyPress($event)" />
+			<Keyboard :mask="keyboardMask" @add="keyPress($event)" :listen="true"/>
 		</div>
 		<Overlay v-if="overlayVisible"
 			:secret-words="secretWords"
@@ -250,8 +328,6 @@
 		--misplaced-cell-dark: #eab308;
 		--misplaced-cell-light: #facc15;
 		--wrong-cell: #334155;
-
-		--animation-duration: 0.3s;
 	}
 
 	* {

src/components/GuessGrid.vue

@@ -6,13 +6,23 @@
 			return {
 			};
 		},
-		props: ["state"]
+		props: ["state", "rowsAnimations"]
 	};
 </script>
 
 <template>
 	<div class="guess-grid">
-		<template v-for="i in 6">
+		<div v-for="i in 6" class="guess-row" :class="{'animate': rowsAnimations[i-1]}">
+			<div v-for="j in 5"
+				class="cell"
+				:class="state[i-1][j-1].state"
+				:style="`--index: ${j-1}`">
+				<div class="letter">
+					{{state[i-1][j-1].letter}}
+				</div>
+			</div>
+		</div>
+		<!-- <template v-for="i in 6">
 			<div v-for="j in 5"
 				class="cell"
 				:class="state[i-1][j-1].state"
@@ -22,7 +32,7 @@
 					{{state[i-1][j-1].letter}}
 				</div>
 			</div>
-		</template>
+		</template> -->
 	</div>
 </template>
 
@@ -60,11 +70,35 @@
 			background-color: var(--cell-backgroud-color);
 		}
 	}
+	@keyframes shake {
+		0% {
+			transform: translateX(0)
+		}
+		25% {
+			transform: translateX(-2%)
+		}
+		50% {
+			transform: translateX(2%)
+		}
+		75% {
+			transform: translateX(-2%)
+		}
+		100% {
+			transform: translateX(0)
+		}
+	}
 	.guess-grid {
-		display: grid;
+		display: flex;
-		gap: 0.2rem 0.2rem;
+		flex-direction: column;
-		grid-template-columns: repeat(5, 1fr);
+		gap: 0.2rem;
-		grid-auto-flow: row;
+
+		.guess-row {
+			display: flex;
+			gap: 0.2rem;
+
+			&.animate {
+				animation: linear shake var(--shake-animation-duration);	
+			}
 
 			.cell {
 				width: 3.5rem;
@@ -96,9 +130,9 @@
 				}
 
 				&:not(.unset):not(.set) {
-  				animation: linear flip var(--animation-duration) calc(var(--index) * var(--animation-duration)), step-end color-change calc(var(--index) * var(--animation-duration) + var(--animation-duration) / 2);
+					animation: linear flip var(--letter-animation-duration) calc(var(--index) * var(--letter-animation-duration)), step-end color-change calc(var(--index) * var(--letter-animation-duration) + var(--letter-animation-duration) / 2);
 					&::before {
-					animation: linear flip var(--animation-duration) calc(var(--index) * var(--animation-duration)), step-end color-change calc(var(--index) * var(--animation-duration) + var(--animation-duration) / 2);
+						animation: linear flip var(--letter-animation-duration) calc(var(--index) * var(--letter-animation-duration)), step-end color-change calc(var(--index) * var(--letter-animation-duration) + var(--letter-animation-duration) / 2);
 					}	
 				}
 				&.wrong {
@@ -147,4 +181,5 @@
 				}
 			}
 		}
+	}
 </style>

src/components/Keyboard.vue

@@ -59,7 +59,7 @@
 				]
 			};
 		},
-		props: ["mask"],
+		props: ["mask", "listen"],
 		methods: {
 			keyUp(event) {
 				console.log(event);
@@ -69,7 +69,7 @@
 </script>
 
 <template>
-	<div class="keyboard-grid" @keyup="keyUp($event)">
+	<div class="keyboard-grid">
 		<template v-for="row in keyboard">
 			<div v-for="button in row.row"
 				class="cell"
@@ -83,6 +83,7 @@
 				<div class="letter">
 					{{button.letter}}
 				</div>
+				<div class="cover"></div>
 			</div>
 		</template>
 	</div>
@@ -106,6 +107,7 @@
 		width: 30rem;
 
 		.cell {
+			position: relative;
 			width: 100%;
 			height: 3.75rem;
 			// background: var(--color);
@@ -123,13 +125,19 @@
 				transform: translateY(0.1em);
 			}
 
+			.cover {
+				position: absolute;
+				width: 100%;
+				height: 100%;
+			}
+
 			&.unused {
 				background-color: var(--keyboard-unused);
 			}
-			&:not(.unused) {
+			// &:not(.unused) {
-				animation: hide-color calc(5 * var(--animation-duration));
+			// 	animation: hide-color calc(5 * var(--animation-duration));
 
-			}
+			// }
 			&.correct {
 				background-color: var(--keyboard-correct);
 			}