Я пытаюсь создать простое приложение Tic Tac Toe, используя Reactjs, с двумя режимами: Классический и Изображение , в классическом режиме у меня есть варианты отображения X и O , в то время как в режиме изображения у меня есть два варианта отображения двух изображений, которые упомянуты ниже.Моя файловая структура:
src
components
ChooseGameMode.js
choosePlayer.js
GameStatus.js
Status.js
images
connery.svg
square.svg
App.css
App.js
index.css
index.js
...
Ниже приведен код, который я разработал:
App.js
import React, { Component } from 'react';
import './App.css';
import Status from'./components/Status';
import GameStatus from'./components/GameStatus';
class App extends Component {
constructor(props){
super(props)
this.state = {
board : Array(9).fill(null),
player : null,
winner : null,
gamemode : null,
/* array to store the ndex */
order_ndex : []
}
}
checkWinner(){
let winLines =
[
["0", "1", "2"],
["3", "4", "5"],
["6", "7", "8"],
["0", "3", "6"],
["1", "4", "7"],
["2", "5", "8"],
["0", "4", "8"],
["2", "4", "6"]
]
this.checkmatch(winLines)
}
checkmatch(winLines){
let board = this.state.board;
for (let index = 0; index < winLines.length; index++) {
const [a,b,c]=winLines[index];
if(board[a] && board[a] === board[b] && board[a] === board[c] ){
alert('You won!');
this.setState({
winner : this.state.player
})
this.state.winner = this.state.player;
}
}
if(!this.state.winner && !board.includes(null)){
this.state.winner = 'None';
alert('Its a Draw!');
}
}
handleClick(index){
//To render images on selecting ImageMode mode
const images ={
connery : require('./images/connery.svg'),
square : require('./images/square.svg')
}
if(this.state.player && !this.state.winner && this.state.gamemode === "Classic"){
let newBoard = this.state.board
if(this.state.board[index]===null){
newBoard[index] = this.state.player
/* push the last index into the array */
this.state.order_ndex.push(index)
this.setState({
board: newBoard,
player: this.state.player==="X" ? "O" : "X"
})
this.checkWinner()
}
}
else{
let newBoard = this.state.board
if(this.state.board[index]===null){
newBoard[index] = this.state.player
/* push the last index into the array */
this.state.order_ndex.push(index)
this.setState({
board: newBoard,
player: this.state.player=== images.connery ? images.square : images.connery
})
this.checkWinner()
}
}
}
setPlayer(player){
this.setState({player})
}
setGameMode(gamemode){
console.log(gamemode)
this.setState({gamemode})
}
renderBoxes(){
return this.state.board.map(
(box, index) =>
<div className="box" key={index}
onClick={()=> {this.handleClick(index)}}>
{box}
</div>
)
}
reset(){
this.setState({
board : Array(9).fill(null),
player : null,
winner : null,
gamemode : null,
order_ndex : []
})
}
undo() {
let ndex = this.state.order_ndex.pop()
let newBoard = this.state.board
let prev = newBoard[ndex]
newBoard[ndex] = null
this.setState({
board: newBoard,
player: prev
})
}
render() {
return (
<div className="container">
<h1>Tic Tac Toe App</h1>
<GameStatus
gamemode ={this.state.gamemode}
setGameMode = {(e)=> this.setGameMode(e)}
/>
<Status
player={this.state.player}
setPlayer={(e) => this.setPlayer(e)}
winner = {this.state.winner}
/>
<div className="board">
{this.renderBoxes()}
</div>
<div className="btn">
<button className='reset' onClick = {() => this.reset()}> Reset </button>
<div className="divider"/>
<button className='reset' disabled ={this.state.winner} onClick = {() => this.undo()}> Undo </button>
</div>
</div>
);
}
}
export default App;
ChooseGameMode.js
import React, { Component } from 'react';
class ChooseGameMode extends Component{
handleForm(e){
e.preventDefault();
this.props.gamemode(e.target.gamemode.value);
}
render(){
return (
<form onSubmit={(e)=> this.handleForm(e)}>
<label>
Classic
<input type="radio" name="gamemode" value="Classic"/>
</label>
<label>
Frontenddevlandia
<input type="radio" name="gamemode" value="Frontenddevlandia"/>
</label>
<input type="submit" value="Submit" />
</form>
)
}
}
export default ChooseGameMode;
choosePlayer.js
import React, { Component } from 'react';
class Player extends Component{
handleForm(e){
e.preventDefault();
this.props.player(e.target.player.value);
}
render(){
return (
<form onSubmit={(e)=> this.handleForm(e)}>
<label>
Player X
<input type="radio" name="player" value="X"/>
</label>
<label>
Player O
<input type="radio" name="player" value="O"/>
</label>
<input type="submit" value="Start" />
</form>
)
}
}
export default Player;
GameStatus.js
import React, { Component } from 'react';
import ChooseGameMode from'./ChooseGameMode';
class GameStatus extends Component {
handleSetGameMode(e){
this.props.setGameMode(e)
}
render(){
return (this.props.gamemode ?
<h3>You are playing the {this.props.gamemode} mode</h3> :
<ChooseGameMode gamemode={(e) => this.handleSetGameMode(e)} />
)
}
}
export default GameStatus;
Status.js
import React, { Component } from 'react';
import Player from'./choosePlayer';
class Status extends Component {
handleSetPlayer(e){
this.props.setPlayer(e)
}
renderHtml(){
if (this.props.winner){
return (<h2>Winner is {this.props.winner}</h2>)
} else {
return this.props.player ?
<h2>Next player is {this.props.player}</h2> :
<Player player={(e) => this.handleSetPlayer(e)} />
}
}
render(){
return (<span>{this.renderHtml()}</span>)
}
}
export default Status;
Когда я выбираю режим Изображение и выбираю проигрыватель вместо рендеринга изображения, он просто переводит путь к файлу изображения вприложение.Я использовал require('./images/connery.svg'), для рендеринга изображения.Могу ли я знать, что я делаю неправильно, также я не использовал Redux здесь для управления состоянием, так как я новичок в изучении реагирования и редукции, может кто-нибудь помочь мне с тем, как внедрить редукс в это существующее приложение, чтобы государствоуправление может быть обработано лучше, чем передача состояний в качестве отдельных реквизитов для разных компонентов?Общая идея о том, как реализовать это и любые другие улучшения или предложения, также будет очень полезна.Кроме того, как и предполагалось, это моя код и ссылка для ящика .