mirror of
https://github.com/evgen-app/chess-rpg-front.git
synced 2024-11-21 16:36:33 +03:00
add redux state & figures logic
This commit is contained in:
parent
5eb2b68299
commit
6963f3af50
|
@ -1,10 +1,15 @@
|
|||
import React from 'react';
|
||||
import { Board } from './components/board';
|
||||
import {changeFigurePosition, FigurePositionIE} from "./app/boardSlice"
|
||||
import { useDispatch } from 'react-redux';
|
||||
|
||||
function App() {
|
||||
let dispath = useDispatch()
|
||||
let position = {row:6, col:4} as FigurePositionIE
|
||||
return (
|
||||
<div className="App">
|
||||
<Board></Board>
|
||||
<button onClick={()=>dispath(changeFigurePosition({id:1, pos: position}))}>CLICK</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
106
src/app/boardSlice.ts
Normal file
106
src/app/boardSlice.ts
Normal file
|
@ -0,0 +1,106 @@
|
|||
import { createSlice, PayloadAction, createSelector } from '@reduxjs/toolkit'
|
||||
import { RootState } from './store'
|
||||
|
||||
export interface FigurePositionIE{
|
||||
row: number
|
||||
col:number
|
||||
}
|
||||
export interface FigureIE{
|
||||
position:FigurePositionIE
|
||||
type:string
|
||||
id:number
|
||||
}
|
||||
|
||||
export interface BoardStateIE{
|
||||
active: boolean,
|
||||
figures: FigureIE[]
|
||||
}
|
||||
|
||||
let currentBoardState = {
|
||||
active:false,
|
||||
figures:[
|
||||
{
|
||||
position:{
|
||||
row:8,
|
||||
col:4
|
||||
},
|
||||
type:"pawn",
|
||||
id:0
|
||||
},
|
||||
{
|
||||
type:"elephant",
|
||||
id:1,
|
||||
position:{
|
||||
row:8,
|
||||
col:5
|
||||
}
|
||||
},
|
||||
{
|
||||
type:"rook",
|
||||
id:2,
|
||||
position:{
|
||||
row:8,
|
||||
col:6
|
||||
}
|
||||
}
|
||||
] as FigureIE[]
|
||||
} as BoardStateIE
|
||||
|
||||
const boardSlice = createSlice(
|
||||
{
|
||||
name:"boardSlice",
|
||||
initialState: currentBoardState,
|
||||
reducers:{
|
||||
setBoardActive(state, action:PayloadAction<boolean>){
|
||||
state.active = action.payload
|
||||
},
|
||||
addFigure(state, action:PayloadAction<FigureIE>){
|
||||
state.figures = state.figures.concat(action.payload)
|
||||
},
|
||||
removeFigure(state, action:PayloadAction<number>){
|
||||
let ind = -1;
|
||||
state.figures.forEach(figure => {
|
||||
if (figure.id == action.payload){
|
||||
ind = figure.id
|
||||
}
|
||||
});
|
||||
if(ind != -1){
|
||||
state.figures = state.figures.splice(ind,1)
|
||||
}
|
||||
else{
|
||||
console.error("id is missing");
|
||||
}
|
||||
},
|
||||
changeFigurePosition(state, action:PayloadAction<{id:number, pos:FigurePositionIE}>){
|
||||
let ind = -1;
|
||||
state.figures.forEach(figure => {
|
||||
if (figure.id == action.payload.id){
|
||||
ind = figure.id
|
||||
}
|
||||
});
|
||||
if(ind != -1){
|
||||
state.figures[ind].position = action.payload.pos
|
||||
}
|
||||
else{
|
||||
console.error("id is missing");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
export const getBoardFigures = createSelector(
|
||||
(state:RootState) => state.figures,
|
||||
(field) => field
|
||||
)
|
||||
export const getBoardActive = createSelector(
|
||||
(state:RootState) => state.active,
|
||||
(field) => field
|
||||
)
|
||||
export const {
|
||||
changeFigurePosition,
|
||||
addFigure,
|
||||
removeFigure,
|
||||
setBoardActive
|
||||
} = boardSlice.actions
|
||||
export default boardSlice.reducer
|
|
@ -1,9 +1,9 @@
|
|||
import { configureStore, ThunkAction, Action } from '@reduxjs/toolkit';
|
||||
import { configureStore, ThunkAction, Action, createStore } from '@reduxjs/toolkit';
|
||||
import boardSlice from "./boardSlice"
|
||||
|
||||
export const store = configureStore({
|
||||
reducer: {
|
||||
},
|
||||
});
|
||||
reducer:boardSlice
|
||||
})
|
||||
|
||||
export type AppDispatch = typeof store.dispatch;
|
||||
export type RootState = ReturnType<typeof store.getState>;
|
||||
|
|
|
@ -1,8 +1,12 @@
|
|||
import React, { useEffect } from "react";
|
||||
import * as THREE from 'three';
|
||||
|
||||
import { Canvas, RootState, useFrame, useThree } from '@react-three/fiber'
|
||||
import { Canvas, useFrame, useThree } from '@react-three/fiber'
|
||||
import { Cell } from "./cell";
|
||||
import { useSelector } from "react-redux";
|
||||
import { getBoardFigures } from "../app/boardSlice";
|
||||
import { RootState } from "../app/store";
|
||||
import { Figure } from "./figure";
|
||||
|
||||
function ThreeSettings(){
|
||||
const set = useThree((state)=>state.set)
|
||||
|
@ -16,29 +20,38 @@ function ThreeSettings(){
|
|||
cam.rotation.set(-Math.PI/4,0,0)
|
||||
cam.position.set(0,6,7)
|
||||
set({
|
||||
size:{width:512, height:512},
|
||||
size:{width:1024, height:512},
|
||||
})
|
||||
}
|
||||
)
|
||||
return(null);
|
||||
}
|
||||
export const Board:React.FC = () =>{
|
||||
let state = useSelector((state:RootState)=>getBoardFigures(state))
|
||||
let cells = new Array<JSX.Element>()
|
||||
let color = true
|
||||
for (let i = 0; i<64; i++){
|
||||
color = (((i%8) +Math.floor(i/8)) %2 == 0)
|
||||
cells.push(
|
||||
<Cell color={color? "white":"black"} position={[i%9 - 4,1,Math.floor(i/9)]}></Cell>
|
||||
<Cell color={color? "white":"black"} position={[i%8 - 4,1,Math.floor(i/8)-2]}></Cell>
|
||||
)
|
||||
color = !color
|
||||
}
|
||||
|
||||
let figuries = new Array<JSX.Element>()
|
||||
state.map((params) =>{
|
||||
figuries.push(<Figure position={params.position} id={params.id} type={params.type}></Figure>)
|
||||
})
|
||||
let objects = cells.concat(figuries)
|
||||
return(
|
||||
<Canvas>
|
||||
<ThreeSettings/>
|
||||
<ambientLight />
|
||||
<pointLight position={[10, 10, 10]} />
|
||||
{
|
||||
cells
|
||||
objects
|
||||
}
|
||||
|
||||
|
||||
</Canvas>
|
||||
);
|
||||
}
|
52
src/components/figure.tsx
Normal file
52
src/components/figure.tsx
Normal file
|
@ -0,0 +1,52 @@
|
|||
import React, { useRef, useState } from "react";
|
||||
import { Canvas, useFrame, Vector3 } from '@react-three/fiber'
|
||||
import { FigureIE, FigurePositionIE, getBoardActive, getBoardFigures, setBoardActive } from "../app/boardSlice";
|
||||
import { skipPartiallyEmittedExpressions } from "typescript";
|
||||
import { hover } from "@testing-library/user-event/dist/types/convenience";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { RootState } from "../app/store";
|
||||
|
||||
|
||||
|
||||
export const Figure:React.FC<FigureIE> = (props:FigureIE) => {
|
||||
const [hover, setHover] = useState(false)
|
||||
const [active, setActive] = useState(false)
|
||||
let boardActive = useSelector((state: RootState) => getBoardActive(state))
|
||||
let dispath = useDispatch()
|
||||
|
||||
const onClick = () =>{
|
||||
if (boardActive == false){
|
||||
|
||||
// dispath(setBoardActive(true))
|
||||
setActive(true)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const mesh = useRef()
|
||||
let color;
|
||||
if (props.type == "elephant"){
|
||||
color = "red"
|
||||
}
|
||||
else if (props.type == "rook"){
|
||||
color="blue"
|
||||
}
|
||||
else{
|
||||
color = "yellow"
|
||||
}
|
||||
color = hover? "green":color
|
||||
color = active? "purple":color
|
||||
return(
|
||||
<mesh
|
||||
position={[props.position.col-5, 1.5, props.position.row-3 ]}
|
||||
ref={mesh as any}
|
||||
scale={1}
|
||||
onPointerOver={()=>setHover(true)}
|
||||
onPointerOut={()=>setHover(false)}
|
||||
onPointerDown={()=>setActive(true)}
|
||||
>
|
||||
<boxGeometry args={[0.5, 1, 0.5]} />
|
||||
<meshStandardMaterial color={color} />
|
||||
</mesh>
|
||||
);
|
||||
}
|
Loading…
Reference in New Issue
Block a user