aheh/ChessHub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Go back button and go ahead button implemented

Browse Source 
TODO
- Improve the styiling of the GameHistory component
This commit is contained in:
Moon Patel
2023-07-04 03:52:19 +05:30
parent d8d0c95779
commit 1d26cca8d8
2 changed files with 22 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/GameHistory.jsx
+7 -3
View File
@@ -1,9 +1,9 @@
import React, { useContext } from 'react'
import { ChessGameContext } from '../context/chess-game-context'
import { Button, Flex, Text } from '@mantine/core';
import { Button, Flex, Group, Text } from '@mantine/core';
const GameHistory = () => {
const { gameHistory, jumpTo } = useContext(ChessGameContext)
const { gameHistory, jumpTo, currentIndex,goBack,goAhead } = useContext(ChessGameContext)
let gameHistoryJSX = [];
for (let i = 0; i < gameHistory.length;) {
@@ -21,10 +21,14 @@ const GameHistory = () => {
</Flex>
)
}
console.log(currentIndex)
return (
<div>
{gameHistoryJSX}
<Group>
<Button onClick={() => {goBack()}} disabled={currentIndex <= 0 ? true : false}>Go Back</Button>
<Button onClick={() => {goAhead()}} disabled={currentIndex + 1 === gameHistory.length ? true : false}>Next</Button>
</Group>
</div>
)
}
frontend/src/context/chess-game-context.jsx
+15 -3
View File
@@ -22,7 +22,7 @@ const reducer = (state, action) => {
let updatedGameHistory = state.gameHistory;
let move = newChessObj.move(action.val);
updatedGameHistory.push({ move: move.san, fen: newChessObj.fen() });
return { ...state, chess: newChessObj, chessBoard: newChessObj.getBoard(localStorage.getItem('myColor')), moveHints: [], selected: null, gameHistory: updatedGameHistory, currentIndex: -1 };
return { ...state, chess: newChessObj, chessBoard: newChessObj.getBoard(localStorage.getItem('myColor')), moveHints: [], selected: null, gameHistory: updatedGameHistory, currentIndex: updatedGameHistory.length - 1 };
}
case CAPTURE_PIECE:
{
@@ -31,7 +31,7 @@ const reducer = (state, action) => {
let updatedGameHistory = state.gameHistory;
let move = newChessObj.move(action.val);
updatedGameHistory.push({ move: move.san, fen: newChessObj.fen() });
return { ...state, chess: newChessObj, chessBoard: newChessObj.getBoard(localStorage.getItem('myColor')), moveHints: [], selected: null, gameHistory: updatedGameHistory, currentIndex: -1 };
return { ...state, chess: newChessObj, chessBoard: newChessObj.getBoard(localStorage.getItem('myColor')), moveHints: [], selected: null, gameHistory: updatedGameHistory, currentIndex: updatedGameHistory.length - 1 };
}
case JUMP_TO:
{
@@ -153,9 +153,21 @@ const ChessGameContextProvider = ({ children }) => {
}
}
function goBack() {
if (currentIndex > 0) {
jumpTo(currentIndex - 1);
}
}
function goAhead() {
if (currentIndex < gameHistory.length - 1) {
jumpTo(currentIndex + 1);
}
}
return (
<ChessGameContext.Provider value={{
myColor, chessBoard, moveHints, selected, handleOpponentMove, handleSquareClick, getSquareColor, isSquareMarked, selectPiece, handleDrop, gameHistory, jumpTo, getChessBoard
myColor, chessBoard, moveHints, selected, handleOpponentMove, handleSquareClick, getSquareColor, isSquareMarked, selectPiece, handleDrop, gameHistory, jumpTo, getChessBoard, currentIndex, goAhead, goBack
}}>
{children}
<audio src='/src/assets/move-self.mp3' ref={moveAudioRef} />