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

Revert "improved chess board css"

Browse Source 
This reverts commit 6a11378b44.
This commit is contained in:
Moon Patel
2023-10-23 02:52:10 +05:30
committed by GitHub
parent 6a11378b44
commit 8b452124ff
11 changed files with 128 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/Cell.jsx
+1 -1
View File
@@ -36,7 +36,7 @@ const Cell = ({ cell, callbacks }) => {
}
return (
<Flex ref={setNodeRef} w='10vh' sx={theme => {
<Flex ref={setNodeRef} sx={theme => {
let color = theme.colors.lime;
return { backgroundColor: squareColor === 'b' ? '#769854' : '#e8edcd', aspectRatio: '1/1' }
}} onClick={handleClick} bg={squareColor === 'w' ? "white" : "gray"} >
frontend/src/components/GameHistory.jsx
+2 -2
View File
@@ -52,8 +52,8 @@ const GameHistory = () => {
}
return (
<div style={{ width: '600px', userSelect: 'none' }}>
<ScrollArea h={'640px'} scrollbarSize={6} >
<div style={{ width: '100%', userSelect: 'none' }}>
<ScrollArea h={400} scrollbarSize={6} >
<Flex direction='column' align='start' w='100%'>
{gameHistoryJSX}
</Flex>
frontend/src/layout/MainLayout.jsx
+31 -65
View File
@@ -1,40 +1,29 @@
import React, { useContext, useState } from "react";
import React, { useContext, useState } from 'react'
import { Outlet } from "react-router-dom";
import {
AppShell,
Burger,
Container,
Header,
MediaQuery,
Navbar,
Paper,
Text,
createStyles,
useMantineTheme,
} from "@mantine/core";
import { Outlet } from 'react-router-dom'
import { AppShell, Burger, Container, Header, MediaQuery, Navbar, Paper, Text, createStyles, useMantineTheme } from '@mantine/core'
import UserDataContextProvider, {
UserDataContext,
} from "../context/user-data-context";
import MainLoader from "../components/MainLoader";
import NavbarLinks from "../components/NavbarLinks";
import Logout from "../components/Logout";
import UserDataContextProvider, { UserDataContext } from '../context/user-data-context';
import MainLoader from '../components/MainLoader';
import NavbarLinks from '../components/NavbarLinks';
import Logout from '../components/Logout';
const useStyles = createStyles(() => ({
body: {
width: "100%",
height: "100%",
width: '100%',
height: '100%'
},
root: {
width: "100%",
height: "100vh",
width: '100%',
height: '100vh'
},
main: {
width: "100%",
height: "100vh",
},
}));
width: '100%',
height: '100vh'
}
}))
const MainLayout = () => {
const { classes } = useStyles();
@@ -43,41 +32,30 @@ const MainLayout = () => {
const { isLoggedIn, errorMessage } = useContext(UserDataContext);
if (!isLoggedIn) {
return <MainLoader errorMessage={errorMessage} />;
return <MainLoader errorMessage={errorMessage} />
}
return (
<UserDataContextProvider>
<Paper>
<AppShell
classNames={{
<AppShell classNames={{
body: classes.body,
root: classes.root,
main: classes.main,
main: classes.main
}}
styles={{
main: {
background:
theme.colorScheme === "dark" ? "#302e2a" : theme.colors.gray[0],
background: theme.colorScheme === 'dark' ? '#302e2a' : theme.colors.gray[0]
},
body: {
textAlign: "center",
},
textAlign: 'center'
}
}}
layout="alt"
layout='alt'
navbar={
<Navbar
py="md"
px="0"
hiddenBreakpoint="md"
sx={{ backgroundColor: "#262523" }}
hidden={!opened}
width={{ md: 150 }}
>
<Navbar py="md" px="0" hiddenBreakpoint="md" sx={{ backgroundColor: '#262523' }} hidden={!opened} width={{ md: 150 }}>
<Navbar.Section>
<Text size={30} weight={700}>
Chess
</Text>
<Text size={30} weight={700}>Chess</Text>
</Navbar.Section>
<Navbar.Section grow mt="md">
<NavbarLinks />
@@ -88,15 +66,9 @@ const MainLayout = () => {
</Navbar>
}
header={
<MediaQuery largerThan="sm" styles={{ display: "none" }}>
<MediaQuery largerThan="sm" styles={{ display: 'none' }}>
<Header zIndex={1000} p="md">
<div
style={{
display: "flex",
alignItems: "center",
height: "100%",
}}
>
<div style={{ display: 'flex', alignItems: 'center', height: '100%' }}>
<Burger
opened={opened}
onClick={() => setOpened((o) => !o)}
@@ -110,20 +82,14 @@ const MainLayout = () => {
</Header>
</MediaQuery>
}
padding
>
<Container
size="100%"
style={{ height: "100vh" }}
pl={{ md: 150 }}
pr={{ md: 0 }}
>
<Container size="100%" px={{ 'md': '10px', 'lg': '30px' }} >
<Outlet />
</Container>
</AppShell>
</Paper>
</UserDataContextProvider>
);
};
}
export default MainLayout;
export default MainLayout
frontend/src/pages/Chess/ChessBoard.jsx
+4 -4
View File
@@ -67,11 +67,11 @@ const ChessBoard = ({ callbacks }) => {
if (myColor === 'w') {
return (
<DndContext onDragEnd={dragEndCallback}>
<Flex h='80vh' sx={{ userSelect: 'none' }}>
<Flex className={classes.chessboard} sx={{ userSelect: 'none' }}>
<div>
{chessBoard.map((row, rowIndex) => {
return (
<Flex key={rowIndex * 2}>
<Flex className={classes.boardrow} key={rowIndex * 2}>
{row.map(cell => <Cell callbacks={{ pieceClickCallback: callbacks.pieceClickCallback }} key={cell.square} cell={cell} />)}
</Flex>
)
@@ -83,11 +83,11 @@ const ChessBoard = ({ callbacks }) => {
} else {
return (
<DndContext onDragEnd={dragEndCallback}>
<Flex h='80vh' sx={{userSelect:'none'}}>
<Flex className={classes.chessboard}>
<div>
{chessBoard.map((row, rowIndex) => {
return (
<Flex key={rowIndex * 2}>
<Flex className={classes.boardrow} key={rowIndex * 2}>
{row.map(cell => <Cell callbacks={{ pieceClickCallback: callbacks.pieceClickCallback }} key={cell.square} cell={cell} />).reverse()}
</Flex>
)
frontend/src/pages/Play/ChallengeFriend.jsx
+3 -4
View File
@@ -13,13 +13,12 @@ const ChallengeFriend = () => {
return (
<Card
sx={{
width: '600px',
height: '80%',
maw={450} sx={{
width: '100%',
height: '600px',
textAlign: 'center',
backgroundColor: '#262523'
}}
px='20px'
>
<Form action={`/play/friend/${friend_username}`} method='POST'>
<Flex align="center" direction="column" justify="center" gap="xs" my="lg">
frontend/src/pages/Play/ChessGameComputer.jsx
+3 -3
View File
@@ -70,7 +70,7 @@ const ChessGameComputer = () => {
<Button mx='md' color='lime' onClick={modalFunctions.close}>OK</Button>
</Modal>
<Flex gap="xl" miw={360} justify='center' align='center' wrap='nowrap' mt={{ base: '50px', sm: '0px' }} direction={{ base: 'column', lg: 'row' }}>
<Flex gap="xs" justify='center' h='100vh' align='start' wrap='nowrap' direction='column' >
<Flex gap="xs" justify='center' align='start' wrap='nowrap' direction='column' >
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<NavLink
style={{ width: "500px" }}
@@ -111,9 +111,9 @@ const ChessGameComputer = () => {
</div>
</Flex>
<MediaQuery smallerThan="lg" styles={{ display: 'none' }}>
<Flex maw={600} sx={{
<Flex maw={450} sx={{
width: '100%',
height: '840px',
height: '100%',
textAlign: 'center',
borderRadius: '10px',
backgroundColor: '#272623'
frontend/src/pages/Play/ChessGameMultiplayer.jsx
+17 -16
View File
@@ -109,10 +109,11 @@ const ChessGameMultiplayer = () => {
<Button color='lime' onClick={exitGame}>Go back</Button>
<Button mx='md' color='lime' onClick={modalFunctions.close}>OK</Button>
</Modal>
<Flex gap="xl" justify='center' align='center' wrap='nowrap' mt={{ base: '50px', sm: '0px' }} direction={{ base: 'column', lg: 'row' }}>
<Flex gap="xs" justify='center' h='100vh' align='start' wrap='nowrap' direction='column' >
<div style={{ width:"100%", height:'6vh', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<Flex gap="xl" miw={360} justify='center' align='center' wrap='nowrap' mt={{ base: '50px', sm: '0px' }} direction={{ base: 'column', lg: 'row' }}>
<Flex gap="xs" justify='center' align='start' wrap='nowrap' direction='column' >
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<NavLink
style={{ width: "500px" }}
p="2px"
label={isWaiting ? "Waiting for opponent..." : opponent}
icon={<Avatar radius="3px" >
@@ -124,19 +125,19 @@ const ChessGameMultiplayer = () => {
</div>
{
// TODO: handle isWaiting state
// false ?
// <>
// <MediaQuery smallerThan="sm" styles={{ display: 'none' }}>
// <Image width={600} miw={480} src="/src/assets/images/chess_board.png" />
// </MediaQuery>
// <MediaQuery largerThan="sm" styles={{ display: 'none' }}>
// <Image width="100%" maw={540} src="/src/assets/images/chess_board.png" />
// </MediaQuery>
// </>
// :
false ?
<>
<MediaQuery smallerThan="sm" styles={{ display: 'none' }}>
<Image width={600} miw={480} src="/src/assets/images/chess_board.png" />
</MediaQuery>
<MediaQuery largerThan="sm" styles={{ display: 'none' }}>
<Image width="100%" maw={540} src="/src/assets/images/chess_board.png" />
</MediaQuery>
</>
:
<ChessBoard callbacks={{ pieceDropCallback, pieceClickCallback }} />
}
<div style={{ width:"100%", height:'6vh', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<NavLink
style={{ width: "500px" }}
p="2px"
@@ -150,9 +151,9 @@ const ChessGameMultiplayer = () => {
</div>
</Flex>
<MediaQuery smallerThan="lg" styles={{ display: 'none' }}>
<Flex maw={600} sx={{
<Flex maw={450} sx={{
width: '100%',
height: '840px',
height: '100%',
textAlign: 'center',
borderRadius: '10px',
backgroundColor: '#272623'
frontend/src/pages/Play/Computer.jsx
+2 -3
View File
@@ -6,14 +6,13 @@ const Computer = () => {
return (
<Card
maw={600}
maw={450}
sx={{
width: "100%",
height: "75vh",
height: "600px",
textAlign: "center",
backgroundColor: "#262523",
}}
p={'30px'}
>
<Flex align="center" justify="center" gap="xs" my="lg">
<Image
frontend/src/pages/Play/Layout.jsx
+3 -3
View File
@@ -9,8 +9,8 @@ const Layout = () => {
const user = getUserData();
let username = user.username;
return (
<Flex h='100vh' justify='center' align='center' wrap='nowrap' mt={{ base: '50px', sm: '0px' }} direction={{ base: 'column', lg: 'row' }}>
<Flex gap="xs" h={'95vh'} justify='center' align='start' wrap='nowrap' direction='column' >
<Flex gap="xl" miw={360} justify='center' align='center' wrap='nowrap' mt={{ base: '50px', sm: '0px' }} direction={{ base: 'column', lg: 'row' }}>
<Flex gap="xs" justify='center' align='start' wrap='nowrap' direction='column' >
<NavLink
p="2px"
label={"opponent"}
@@ -18,7 +18,7 @@ const Layout = () => {
description={"description"}
/>
<MediaQuery smallerThan="sm" styles={{ display: 'none' }}>
<img draggable={false} height={'100%'} style={{aspectRatio:'1'}} miw={480} src="/src/assets/images/chess_board.png" />
<img draggable={false} width={600} miw={480} src="/src/assets/images/chess_board.png" />
</MediaQuery>
<MediaQuery largerThan="sm" styles={{ display: 'none' }}>
<img draggable={false} width="100%" maw={540} src="/src/assets/images/chess_board.png" />
frontend/src/pages/Play/Play.jsx
+4 -5
View File
@@ -6,13 +6,13 @@ import { Card, Flex, Image, NavLink, Title } from '@mantine/core'
const Play = () => {
return (
<Card sx={{
width: '540px',
height: '75%',
<Card maw={450} sx={{
width: '100%',
height: '600px',
textAlign: 'center',
backgroundColor: '#262523'
}}>
<Flex gap="15px" px="20px" justify='center' align='center' wrap='nowrap' direction='column'>
<Flex gap="5px" px="20px" justify='center' align='center' wrap='nowrap' direction='column'>
<Title order={2} >Play Chess</Title>
<Image my="md" withPlaceholder width={200} height={120} src={null} />
{
@@ -32,7 +32,6 @@ const CardItem = ({ label, description, src, to }) => {
icon={<Image src={src} width={50} />}
description={description}
sx={{ backgroundColor: '#1f1f1a', borderRadius: '5px' }}
p='20px'
/>
)
}
frontend/src/pages/Play/PlayFriend.jsx
+3 -4
View File
@@ -22,13 +22,12 @@ const PlayFriend = () => {
</div>
</Modal>
<Card
sx={{
width: '600px',
height: '90%',
maw={450} sx={{
width: '100%',
height: '600px',
textAlign: 'center',
backgroundColor: '#262523'
}}
px='30px'
>
<Flex align="center" justify="center" gap="xs" my="lg">
<Image width="30px" src="https://www.chess.com/bundles/web/images/color-icons/handshake.fb30f50b.svg" />