Finish the following game code Here’s a possible solution for the French Gender Learning Game using React and Redux:

1. Project Setup
First, we need to set up the project’s directories, install dependencies, and create the necessary files. Here are the basic steps:

1. Create a new project directory and navigate to it using the terminal.
2. Run npm init to initialize the package.json file.
3. Install the required dependencies:

npm install react react-dom redux react-redux @reduxjs/toolkit axios bootstrap

4. Create the following directories inside the project’s root directory:

src/
api/
components/
slices/

5. In the src/ directory, create the following files:

index.js // entry point of the application
App.js // root component of the application
configureStore.js // setup redux store

2. Implementing the Backend API
We’ll use NestJS to create a simple API that provides the game’s functionality. Here’s how you can set it up:

1. Install NestJS globally using the following command:

npm i -g @nestjs/cli

2. Create a new NestJS project using the CLI:

nest new backend

3. Generate a new module and controller for the game:

nest generate module game
nest generate controller game

4. Open the generated game.controller.ts file and implement the following methods:

import { Controller, Get, Req } from ‘@nestjs/common’;

@Controller(‘game’)
export class GameController {
private masculines = [‘age’, ‘aire’, ‘isme’, ‘ment’, ‘oir’, ‘sme’, ‘é’];
private feminines = [
‘ade’,
‘ance’,
‘ence’,
‘ette’,
‘ie’,
‘ine’,
‘ion’,
‘ique’,
‘isse’,
‘ité’,
‘lle’,
‘ure’,
];
private words = [
{ id: 1, word: ‘chat’, gender: ‘m’ },
{ id: 2, word: ‘chaise’, gender: ‘f’ },
{ id: 3, word: ‘ordinateur’, gender: ‘m’ },
{ id: 4, word: ‘feuille’, gender: ‘f’ },
{ id: 5, word: ‘stylo’, gender: ‘m’ },
];

@Get(‘word’)
getWord(@Req() req): string {
const id = Math.floor(Math.random() * this.words.length) + 1;
return JSON.stringify(this.words.find((word) => word.id === id));
}

@Get(‘translation’)
getTranslation(@Req() req): string {
return JSON.stringify({ en: ‘translation goes here’ });
}
}

This code sets up a simple API with two endpoints: /game/word and /game/translation. The getWord() method returns a random word with its gender, and the getTranslation() method returns a dummy translation.

3. Setting Up the Redux Store
We’ll use Redux to manage the game’s state. Here’s how you can set up the store:

1. Open the configureStore.js file and implement the following code:

import { configureStore } from ‘@reduxjs/toolkit’;
import wordsReducer from ‘…/slices/wordsSlice’;

export default configureStore({
reducer: {
words: wordsReducer,
},
});

2. In the slices/ directory, create a new file named wordsSlice.js and implement the following:

import { createSlice } from ‘@reduxjs/toolkit’;
import axios from ‘axios’;

const initialState = {
word: null,
isCorrect: null,
score: 0,
};

export const wordsSlice = createSlice({
name: ‘words’,
initialState,
reducers: {
setWord: (state, action) => {
state.word = action.payload;
state.isCorrect = null;
},
setCorrect: (state) => {
state.isCorrect = true;
state.score++;
},
setWrong: (state) => {
state.isCorrect = false;
},
},
});

export const { setWord, setCorrect, setWrong } = wordsSlice.actions;

export const selectWord = (state) => state.words.word;
export const selectIsCorrect = (state) => state.words.isCorrect;
export const selectScore = (state) => state.words.score;

export const fetchWord = () => async (dispatch) => {
try {
const response = await axios.get(‘/api/game/word’);
dispatch(setWord(response.data));
} catch (error) {
console.error(error);
}
};

export const submitAnswer = (selected) => (dispatch, getState) => {
const word = selectWord(getState());
const isCorrect = selected === (word.gender === ‘m’ ? ‘LE’ : ‘LA’);
if (isCorrect) {
dispatch(setCorrect());
} else {
dispatch(setWrong());
}
};

export default wordsSlice.reducer;

This code sets up a basic Redux store with a words slice, which stores the currently displayed word, whether the user’s selection is correct or not, and the user’s score. The fetchWord() and submitAnswer() functions perform API requests to get a random word and submit the user’s selection.

4. Implementing the UI
We’ll use Bootstrap to style the game’s UI components. Here’s how you can create the component files:

1. In the api/ directory, create a new file named api.js and implement the following:

import axios from ‘axios’;

axios.defaults.baseURL = ‘http://localhost:3000’;

export default axios;

This sets up the default API URL for axios.

2. In the components/ directory, create a new file named GamePage.js and implement the following:

import { useEffect, useState } from ‘react’;
import { useDispatch, useSelector } from ‘react-redux’;
import api from ‘…/api/api’;
import { fetchWord, selectIsCorrect, selectScore, submitAnswer } from ‘…/slices/wordsSlice’;

function GamePage() {
const dispatch = useDispatch();
const word = useSelector(state => state.words.word);
const isCorrect = useSelector(selectIsCorrect);
const score = useSelector(selectScore);
const [selected, setSelected] = useState(‘’);

useEffect(() => {
dispatch(fetchWord());
}, [dispatch]);

const handleAnswer = () => {
dispatch(submitAnswer(selected));
setSelected(‘’);
};

return (
<div className=“container mt-5”>
<div className=“row justify-content-center”>
<div className=“col-md-6”>
<h1>French Gender Learning Game</h1>
<h2>Score: {score}</h2>
<div className=“card”>
<div className=“card-body”>
<h3>{word && word.word}</h3>
<div className=“form-check”>
<input
type=“radio”
id=“un-le”
name=“article-group”
value=“UN/LE”
className=“form-check-input”
checked={selected === ‘UN/LE’}
onChange={(e) => setSelected(e.target.value)}
/>
<label htmlFor=“un-le” className=“form-check-label”>
UN/LE
</label>
</div>
<div className=“form-check”>
<input
type=“radio”
id=“une-la”
name=“article-group”
value=“UNE/LA”
className=“form-check-input”
checked={selected === ‘UNE/LA’}
onChange={(e) => setSelected(e.target.value)}
/>
<label htmlFor=“une-la” className=“form-check-label”>
UNE/LA
</label>
</div>
<button
className=“btn btn-primary”
disabled={!selected}
onClick={handleAnswer}
>
Submit
</button>
<p className=“mt-2”>