I’m working on Mafia application for automatizion the gamemaster’s work. I have a UserPanel component, that shows all players, their number and fouls they have.
I have also an AdminPanel component which consists of ControlPanel component, MiddlePanel component and VotingPanel component. Here’s the screen of AdminPanel component
And the problem I have is that when I’m setting foul on the AdminPanel. It shows here, but it doesn’t on the UserPanel. I should notice that I’m using react-router-dom and UserPanel is on the localhost:3000 and AdminPanel is on the localhost:3000/admin. I don’t know why is it so, because the UserPanel and the MiddlePanel are subscribed to the gameSlice global state. Here’s UserPanel component code:
import React from "react";
import Player from "./Player";
import Timer from "./Timer";
import { useSelector } from "react-redux";
export default function UserPanel() {
const players = useSelector((state) => state.gameReducer.players);
return (
<div className="user-panel">
<div className="container">
<h1>Mafia NUZP</h1>
<div className="players-container">
{players.map(player => {
return <Player number={player.number} fouls={player.fouls} chosen={player.chosen}/>
})}
</div>
<Timer />
</div>
</div>
)
}
MiddlePanel code:
import React from "react";
import Player from "../../Player";
import Role from "../../Role";
import Timer from "../../Timer";
import TimerControls from "./TimerControls";
import { useSelector } from "react-redux";
export default function MiddlePanel(props) {
const players = useSelector((state) => state.gameReducer.players);
let chosenPlayer = players.findIndex(player => player.chosen === true);
return(
<div className="middle-panel">
<div className="chosen-player-container">
<h1>Player {chosenPlayer + 1}</h1>
</div>
<div className="players-container">
{players.map(player => {
return <Player number={player.number} role={<Role role={player.role}/>} fouls={player.fouls} chosen={player.chosen}/>
})}
</div>
<div className="timer-container">
<Timer />
<TimerControls />
</div>
</div>
)
}
ControlPanel code:
import React from "react";
import { setFoul, setRole } from "../../features/game/gameSlice";
import { useDispatch } from "react-redux";
export default function ControlPanel() {
const dispatch = useDispatch();
return(
<div className="control-panel">
<button className="btn btn-dark" onClick={() => dispatch(setRole({role: "Д"}))}>Сделать доном</button>
<button className="btn btn-secondary" onClick={() => dispatch(setRole({role: "М"}))}>Сделать мафией</button>
<button className="btn btn-warning" onClick={() => dispatch(setRole({role: "Ш"}))}>Сделать шерифом</button>
<button className="btn btn-danger" onClick={() => dispatch(setRole({role: "К"}))}>Сделать мирным</button>
<button className="btn btn-light" onClick={() => dispatch(setFoul())}>Поставить фол</button>
<button className="btn btn-primary">Выставить на голосование</button>
<button className="btn btn-danger">Изгнать</button>
<button className="btn btn-info">Следующий игрок</button>
<button className="btn btn-info">Предыдущий игрок</button>
</div>
)
}
And gameSlice code:
import { createSlice } from "@reduxjs/toolkit";
let players = [
{number: 1, fouls: [null, null, null, null], role: null, chosen: false},
{number: 2, fouls: [null, null, null, null], role: null, chosen: false},
{number: 3, fouls: [null, null, null, null], role: null, chosen: false},
{number: 4, fouls: [null, null, null, null], role: null, chosen: false},
{number: 5, fouls: [null, null, null, null], role: null, chosen: false},
{number: 6, fouls: [null, null, null, null], role: null, chosen: true},
{number: 7, fouls: [null, null, null, null], role: null, chosen: false},
{number: 8, fouls: [null, null, null, null], role: null, chosen: false},
{number: 9, fouls: [null, null, null, null], role: null, chosen: false},
{number: 10, fouls: [null, null, null, null], role: null, chosen: false}]
let admin = {
}
const initialState = {
players: players,
adminPanel: admin
}
const gameSlice = createSlice({
name: "game",
initialState,
reducers: {
setRole(state, action) {
let {role} = action.payload
let chosenIndex = state.players.findIndex(player => player.chosen === true);
state.players[chosenIndex].role = role;
},
setFoul(state, action) {
let chosenIndex = state.players.findIndex(player => player.chosen === true);
let foulIndex = state.players[chosenIndex].fouls.findIndex(foul => foul === null);
state.players[chosenIndex].fouls[foulIndex] = "F";
},
}
})
export const {setFoul, setRole} = gameSlice.actions
export default gameSlice.reducer
