From 6963f3af50116f288271b152fa08f4f4f204c9ca Mon Sep 17 00:00:00 2001 From: Firesieht Date: Tue, 14 Jun 2022 21:49:07 +0300 Subject: [PATCH] add redux state & figures logic --- src/App.tsx | 5 ++ src/app/boardSlice.ts | 106 ++++++++++++++++++++++++++++++++++++++ src/app/store.ts | 8 +-- src/components/board.tsx | 23 +++++++-- src/components/figure.tsx | 52 +++++++++++++++++++ 5 files changed, 185 insertions(+), 9 deletions(-) create mode 100644 src/app/boardSlice.ts create mode 100644 src/components/figure.tsx diff --git a/src/App.tsx b/src/App.tsx index 2cb9278..a96b359 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -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 (
+
); } diff --git a/src/app/boardSlice.ts b/src/app/boardSlice.ts new file mode 100644 index 0000000..affb716 --- /dev/null +++ b/src/app/boardSlice.ts @@ -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){ + state.active = action.payload + }, + addFigure(state, action:PayloadAction){ + state.figures = state.figures.concat(action.payload) + }, + removeFigure(state, action:PayloadAction){ + 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 \ No newline at end of file diff --git a/src/app/store.ts b/src/app/store.ts index 3630172..cc59fac 100644 --- a/src/app/store.ts +++ b/src/app/store.ts @@ -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; diff --git a/src/components/board.tsx b/src/components/board.tsx index f9c42da..e4a14f2 100644 --- a/src/components/board.tsx +++ b/src/components/board.tsx @@ -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() let color = true for (let i = 0; i<64; i++){ + color = (((i%8) +Math.floor(i/8)) %2 == 0) cells.push( - + ) - color = !color } + + let figuries = new Array() + state.map((params) =>{ + figuries.push(
) + }) + let objects = cells.concat(figuries) return( { - cells + objects } + + ); } \ No newline at end of file diff --git a/src/components/figure.tsx b/src/components/figure.tsx new file mode 100644 index 0000000..9ef49f6 --- /dev/null +++ b/src/components/figure.tsx @@ -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 = (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( + setHover(true)} + onPointerOut={()=>setHover(false)} + onPointerDown={()=>setActive(true)} + > + + + + ); +} \ No newline at end of file