changed: UI of GameHistory component and some minoor UI enhancements .
This commit is contained in:
Moon Patel
@@ -15,7 +15,7 @@ const Cell = ({ cell }) => {
|
||||
let squareColor = getSquareColor(square);
|
||||
let marked = isSquareMarked(square);
|
||||
let borderColor = isOver ? '#77777777' : 'transparent';
|
||||
let borderWidth = type ? '3px':'5px'
|
||||
let borderWidth = type ? '3px' : '5px'
|
||||
|
||||
const handleClick = () => {
|
||||
handleSquareClick(square, (moveData) => {
|
||||
@@ -27,7 +27,10 @@ const Cell = ({ cell }) => {
|
||||
let content = marked && !type ? <Mark /> : <Piece cell={cell} />;
|
||||
|
||||
return (
|
||||
<Flex ref={setNodeRef} style={{ aspectRatio: '1/1', position: 'relative' }} onClick={handleClick} bg={squareColor === 'w' ? "white" : "gray"} >
|
||||
<Flex ref={setNodeRef} style={{ aspectRatio: '1/1', position: 'relative' }} sx={theme => {
|
||||
let color = theme.colors.lime
|
||||
return { backgroundColor: squareColor === 'b' ? color[8] : color[1] }
|
||||
}} onClick={handleClick} bg={squareColor === 'w' ? "white" : "gray"} >
|
||||
{
|
||||
isOver ?
|
||||
<div style={{ width: '100%', height: '100%', position: 'absolute', borderWidth, boxSizing: 'border-box', borderStyle: 'solid', borderColor }}></div>
|
||||
|
||||
@@ -1,21 +1,48 @@
|
||||
import React, { useContext } from 'react'
|
||||
import { ChessGameContext } from '../context/chess-game-context'
|
||||
import { Button, Flex, Group, Text } from '@mantine/core';
|
||||
import { Button, Flex, Group, ScrollArea, Text, Tooltip, createStyles } from '@mantine/core';
|
||||
import { IconChevronLeft, IconChevronRight } from '@tabler/icons-react'
|
||||
|
||||
const useStyles = createStyles(theme => {
|
||||
return {
|
||||
movebtn: {
|
||||
fontSize: '14px',
|
||||
padding: '5px',
|
||||
backgroundColor: 'transparent',
|
||||
width: '63px',
|
||||
':hover': {
|
||||
backgroundColor: 'transparent',
|
||||
}
|
||||
},
|
||||
actionbtn: {
|
||||
borderRadius: '5px',
|
||||
backgroundColor: '#444444',
|
||||
':hover': {
|
||||
backgroundColor: '#555555',
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const GameHistory = () => {
|
||||
const { gameHistory, jumpTo, currentIndex,goBack,goAhead } = useContext(ChessGameContext)
|
||||
let { classes } = useStyles();
|
||||
const { gameHistory, jumpTo, currentIndex, goBack, goAhead } = useContext(ChessGameContext)
|
||||
|
||||
let gameHistoryJSX = [];
|
||||
for (let i = 0; i < gameHistory.length;) {
|
||||
let move1 = null, move2 = null;
|
||||
let index = i;
|
||||
move1 = <Button onClick={() => { jumpTo(index) }}>{gameHistory[i++].move}</Button>
|
||||
move1 = <Button className={classes.movebtn} onClick={() => { jumpTo(index) }}>{gameHistory[i++].move}</Button>
|
||||
if (i < gameHistory.length) {
|
||||
let index = i;
|
||||
move2 = <Button onClick={() => { jumpTo(index) }}>{gameHistory[i++].move}</Button>
|
||||
move2 = <Button className={classes.movebtn} onClick={() => { jumpTo(index) }}>{gameHistory[i++].move}</Button>
|
||||
}
|
||||
let srno = Math.ceil(i / 2);
|
||||
gameHistoryJSX.push(
|
||||
<Flex key={i} direction='row' gap='md'>
|
||||
<Flex key={i} direction='row' align='center' w='100%' my="0px" sx={{ fontSize: '16px', fontFamily: 'monospace', backgroundColor: srno % 2 || '#303030' }} justify='start' gap='xs'>
|
||||
<div style={{ width: '36px', paddingLeft: '10px' }}>
|
||||
{Math.ceil(i / 2)}.
|
||||
</div>
|
||||
{move1}
|
||||
{move2}
|
||||
</Flex>
|
||||
@@ -23,12 +50,24 @@ const GameHistory = () => {
|
||||
}
|
||||
// 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 style={{ width: '100%', userSelect: 'none' }}>
|
||||
<ScrollArea h={400} scrollbarSize={6} >
|
||||
<Flex direction='column' align='start' w='100%'>
|
||||
{gameHistoryJSX}
|
||||
</Flex>
|
||||
</ScrollArea>
|
||||
<Flex my='sm' justify='center' gap='xs'>
|
||||
<Tooltip label="Move Back" withArrow arrowSize={9} arrowRadius={3} transitionProps={{ duration: 200 }} sx={{ backgroundColor: 'black', color: 'white' }}>
|
||||
<Button size='xl' w='130px' h='45px' className={classes.actionbtn} onClick={goBack}>
|
||||
<IconChevronLeft size={40} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Tooltip label="Move Forward" withArrow arrowSize={9} arrowRadius={3} sx={{ backgroundColor: 'black', color: 'white' }}>
|
||||
<Button size='xl' w='130px' h='45px' className={classes.actionbtn} onClick={goAhead}>
|
||||
<IconChevronRight size={40} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</Flex>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@ import './index.css'
|
||||
import { MantineProvider } from '@mantine/styles'
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')).render(
|
||||
<MantineProvider theme={{ colorScheme: 'dark', fontFamily: 'Segoe UI',primaryColor:'lime' }}>
|
||||
<MantineProvider theme={{ colorScheme: 'dark', fontFamily: 'monospace', primaryColor: 'lime' }}>
|
||||
<App />
|
||||
</MantineProvider>
|
||||
)
|
||||
@@ -34,9 +34,9 @@ const useStyles = createStyles((theme) => ({
|
||||
|
||||
const ChessBoard = () => {
|
||||
const { classes } = useStyles();
|
||||
const { getChessBoard,chess, chessBoard,handleOpponentMove, handleDrop, hasGameEnded, gameEndedReason } = useContext(ChessGameContext)
|
||||
const { getChessBoard, handleOpponentMove, handleDrop, hasGameEnded, gameEndedReason } = useContext(ChessGameContext)
|
||||
let roomID = localStorage.getItem('roomID');
|
||||
// const chessBoard = getChessBoard();
|
||||
const chessBoard = getChessBoard();
|
||||
let myColor = localStorage.getItem('myColor')
|
||||
|
||||
// if (hasGameEnded) {
|
||||
@@ -60,7 +60,7 @@ const ChessBoard = () => {
|
||||
let to = evt.over.id;
|
||||
handleDrop({ from, to });
|
||||
}}>
|
||||
<Flex className={classes.chessboard}>
|
||||
<Flex className={classes.chessboard} sx={{ userSelect: 'none' }}>
|
||||
<div>
|
||||
{chessBoard.map((row, rowIndex) => {
|
||||
return (
|
||||
|
||||
@@ -9,7 +9,7 @@ import GameHistory from '../../components/GameHistory'
|
||||
import Timer from './Timer'
|
||||
import { useDisclosure } from '@mantine/hooks'
|
||||
import { SOCKET_EVENTS } from '../../constants'
|
||||
const { CONNECT, DISCONNECT, CHESS_MOVE, CHESS_OPPONENT_MOVE, USER_RESIGNED, CONNECTION, JOIN_ROOM, JOIN_ROOM_ERROR, JOIN_ROOM_SUCCESS, ROOM_FULL, USER_JOINED_ROOM } = SOCKET_EVENTS;
|
||||
const { CONNECT, DISCONNECT, CHESS_OPPONENT_MOVE, USER_RESIGNED, CONNECTION, JOIN_ROOM, JOIN_ROOM_ERROR, JOIN_ROOM_SUCCESS, ROOM_FULL, USER_JOINED_ROOM } = SOCKET_EVENTS;
|
||||
|
||||
const ChessGame = () => {
|
||||
const { setGameHistory, isTimerOn, setIsTimerOn, hasGameEnded, gameEndedReason, endGame } = useContext(ChessGameContext);
|
||||
@@ -137,12 +137,13 @@ const ChessGame = () => {
|
||||
<MediaQuery smallerThan="lg" styles={{ display: 'none' }}>
|
||||
<Flex maw={450} sx={{
|
||||
width: '100%',
|
||||
height: '600px',
|
||||
height: '100%',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px'
|
||||
}} bg='gray' p="10px" justify='start' align='center' direction='column' h="600px">
|
||||
<Title>Game Data</Title>
|
||||
<Flex direction='column'>
|
||||
borderRadius: '10px',
|
||||
backgroundColor:'#272623'
|
||||
}} bg='gray' justify='start' py='md' align='center' direction='column' h="600px">
|
||||
<Title my='20px'>Game Data</Title>
|
||||
<Flex direction='column' w='100%'>
|
||||
<GameHistory />
|
||||
</Flex>
|
||||
<Flex>
|
||||
|
||||
Reference in New Issue
Block a user