fix: wordle tiles rendering on every user interaction (#1356)

This commit fixes an issue with Wordle Game Play where if you interact
with the game in any form, all the wordle tiles and the app would
forcefully re-render.

Issue was identified with assigning a unique key to Wordle tiles. Now it
assigns stable keys so it does not break and react is able to recognise it.
(unique key identifier)

References issue #1353.

Co-authored-by: Priyankar Pal <[email protected]>

src/plays/wordle/Wordle.tsx

@@ -242,12 +242,12 @@ function Wordle(props: any): JSX.Element {
  {allTimeStats && <EndScreen allTimeStats={allTimeStats} reset={reset} />}
 
  <div className="wordle w-[21rem] lg:w-[20rem] h-[24rem] flex flex-col items-center justify-evenly">
- <WordleRow tileRow={tiles[0]} wordleWord={wordleWord} />
- <WordleRow tileRow={tiles[1]} wordleWord={wordleWord} />
- <WordleRow tileRow={tiles[2]} wordleWord={wordleWord} />
- <WordleRow tileRow={tiles[3]} wordleWord={wordleWord} />
- <WordleRow tileRow={tiles[4]} wordleWord={wordleWord} />
- <WordleRow tileRow={tiles[5]} wordleWord={wordleWord} />
+ <WordleRow rowNo={0} tileRow={tiles[0]} wordleWord={wordleWord} />
+ <WordleRow rowNo={1} tileRow={tiles[1]} wordleWord={wordleWord} />
+ <WordleRow rowNo={2} tileRow={tiles[2]} wordleWord={wordleWord} />
+ <WordleRow rowNo={3} tileRow={tiles[3]} wordleWord={wordleWord} />
+ <WordleRow rowNo={4} tileRow={tiles[4]} wordleWord={wordleWord} />
+ <WordleRow rowNo={5} tileRow={tiles[5]} wordleWord={wordleWord} />
  </div>
 
  <div className="keyboard w-[22rem] lg:w-[30rem] h-44 lg:h-[13rem] flex flex-col items-center justify-evenly">

src/plays/wordle/components/WordleRow.tsx

@@ -4,8 +4,8 @@ import { useEffect, useState } from 'react';
 import WordleTile from './WordleTile';
 import { TileRow, TileColor } from '../types';
 
-export default function WordleRow(props: { tileRow: TileRow; wordleWord: string }) {
- const { tileRow, wordleWord } = props;
+export default function WordleRow(props: { rowNo: number; tileRow: TileRow; wordleWord: string }) {
+ const { rowNo, tileRow, wordleWord } = props;
  const [isCorrect, setCorrect] = useState(false);
 
  useEffect(() => {
@@ -26,7 +26,7 @@ export default function WordleRow(props: { tileRow: TileRow; wordleWord: string
  roll
  correct={isCorrect}
  index={index}
- key={crypto.randomUUID()}
+ key={`tile-${rowNo}-${index}`}
  style={TileColor.CORRECT}
  tile={letter}
  />
@@ -40,7 +40,7 @@ export default function WordleRow(props: { tileRow: TileRow; wordleWord: string
  roll
  correct={isCorrect}
  index={index}
- key={crypto.randomUUID()}
+ key={`tile-${rowNo}-${index}`}
  style={TileColor.MISPLACED}
  tile={letter}
  />
@@ -51,7 +51,7 @@ export default function WordleRow(props: { tileRow: TileRow; wordleWord: string
  roll
  correct={isCorrect}
  index={index}
- key={crypto.randomUUID()}
+ key={`tile-${rowNo}-${index}`}
  style={TileColor.WRONG}
  tile={letter}
  />
@@ -63,7 +63,7 @@ export default function WordleRow(props: { tileRow: TileRow; wordleWord: string
  <WordleTile
  correct={isCorrect}
  index={index}
- key={crypto.randomUUID()}
+ key={`tile-${rowNo}-${index}`}
  roll={false}
  style={TileColor.MISPLACED}
  tile={letter}