Rename Caesar Cipher to Cryptogram - Adjusting NewGameForm

cypress/e2e/app.cy.js

@@ -71,10 +71,10 @@ describe('Game Creation and Editing while logged out', () => {
       'Trivia answer #1'
     );
 
-    // Test Caesar cipher input
-    cy.getByData('challenge-1-caesar-cipher-answer').type('Encrypt this clue');
+    // Test Cryptogram input
+    cy.getByData('challenge-1-cryptogram-answer').type('Encrypt this clue');
     cy.getByData('1-encrypt-button').click();
-    cy.getByData('challenge-1-caesar-cipher-clue').should('not.have.value', '');
+    cy.getByData('challenge-1-cryptogram-clue').should('not.have.value', '');
 
     // Test Word Scramble input
     cy.getByData('challenge-2-word-scramble-answer').type(

package.json

@@ -21,6 +21,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@gsap/react": "^2.1.0",
+    "@heroicons/react": "^2.1.3",
     "@tailwindcss/container-queries": "^0.1.1",
     "gsap": "^3.12.5",
     "lodash.shuffle": "^4.2.0",

src/app/__tests__/challenge-inputs.test.jsx

@@ -1,11 +1,11 @@
 import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';
 import { render } from '@testing-library/react';
-import { encrypt } from '../components/createGame/challengeInputs/CaesarCipherChallenge';
+import { encrypt } from '../components/createGame/challengeInputs/CryptogramChallenge';
 import { shuffleWords } from '../components/createGame/challengeInputs/WordScrambleChallenge';
 import WordScrambleChallenge from '../components/createGame/challengeInputs/WordScrambleChallenge';
 
-describe('Caesar Cipher encryptor', () => {
+describe('Cryptogram encryptor', () => {
   it('encrypts a string', () => {
     const clue = 'apple banana';
     const seed = 4;

src/app/__tests__/new-game-form.test.jsx

@@ -104,14 +104,14 @@ describe('Handle form inputs and submission', () => {
     await user.click(triviaAnswer);
     await user.keyboard('Trivia answer #1');
 
-    // Add Caesar cipher description
-    const cipherDesc = getByTestId('challenge-1-caesar-cipher-answer');
+    // Add Cryptogram description
+    const cipherDesc = getByTestId('challenge-1-cryptogram-answer');
     await user.click(cipherDesc);
     await user.keyboard('Decrypt this phrase');
     expect(cipherDesc.value).toBe('Decrypt this phrase');
     const encryptButton = getByTestId('1-encrypt-button');
     await user.click(encryptButton);
-    const cipherClue = getByTestId('challenge-1-caesar-cipher-clue');
+    const cipherClue = getByTestId('challenge-1-cryptogram-clue');
     expect(cipherClue.value).not.toBeNull();
 
     // Add Word Scramble description & answer
@@ -147,8 +147,8 @@ describe('Handle form inputs and submission', () => {
     expect(warning2).not.toBeInTheDocument();
 
     // Remove a challenge
-    const removeCaesarcipher = getByTestId('remove-caesar-cipher-1');
-    user.click(removeCaesarcipher);
+    const removeCryptogram = getByTestId('remove-cryptogram-1');
+    user.click(removeCryptogram);
     const removeTrivia = getByTestId('remove-trivia-0');
     user.click(removeTrivia);
   });
@@ -177,17 +177,17 @@ describe('Handle form inputs and submission', () => {
 
     const user = userEvent.setup();
     // Verify that initially there are 3 challenges
-    expect(queryByTestId('caesar-cipher-3')).toBeNull();
+    expect(queryByTestId('cryptogram-3')).toBeNull();
 
     // Add a new challenge
-    const caesarcipherRadioButton = getByLabelText('Caesar Cipher');
-    await user.click(caesarcipherRadioButton);
+    const cryptogramRadioButton = getByLabelText('Cryptogram');
+    await user.click(cryptogramRadioButton);
 
-    const addChallengeButton = getByTestId('add-caesar-cipher-challenge');
+    const addChallengeButton = getByTestId('add-cryptogram-challenge');
     await user.click(addChallengeButton);
 
     // Verify the new challenge was added
-    const newChallenge = getByTestId('caesar-cipher-3');
+    const newChallenge = getByTestId('cryptogram-3');
     expect(newChallenge).toBeInTheDocument();
   });
 

src/app/components/challenges/CaesarCipher.tsx → src/app/components/challenges/Cryptogram.tsx

@@ -4,7 +4,7 @@ import Input from '../ui/Input';
 import Modal from '../ui/Modal';
 import { Game } from '@/app/types/types';
 
-interface CaesarCipherChallengeProps {
+interface CryptogramChallengeProps {
   currentChallenge: {
     id: string;
     type: string;
@@ -16,11 +16,11 @@ interface CaesarCipherChallengeProps {
   currentGame: Game;
 }
 
-export default function CaesarCipherChallenge({
+export default function CryptogramChallenge({
   currentChallenge,
   nextChallenge,
   currentGame,
-}: CaesarCipherChallengeProps) {
+}: CryptogramChallengeProps) {
   const [answer, setAnswer] = useState('');
   const [incorrect, setIncorrect] = useState<boolean>(false);
   const router = useRouter();

src/app/components/createGame/NewChallenge.tsx

@@ -1,5 +1,5 @@
 import TriviaChallenge from './challengeInputs/TriviaChallenge';
-import CaesarCipherChallenge from './challengeInputs/CaesarCipherChallenge';
+import CryptogramChallenge from './challengeInputs/CryptogramChallenge';
 import WordScrambleChallenge from './challengeInputs/WordScrambleChallenge';
 import FillInTheBlankChallenge from './challengeInputs/FillInTheBlankChallenge';
 import { Challenge } from '@/app/types/types';
@@ -48,9 +48,9 @@ export default function NewChallenge({
         />
       );
     }
-    case 'caesar-cipher': {
+    case 'cryptogram': {
       return (
-        <CaesarCipherChallenge
+        <CryptogramChallenge
           key={challenge.id}
           challengeType={challenge.type}
           clue={clue}