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

Styles for the play page fixed. The styles are now responsive and

Browse Source 
the web application can now also be viewed on mobile
This commit is contained in:
Moon Patel
2023-07-03 16:27:16 +05:30
parent 4853e5edd9
commit c25d5bcca5
10 changed files with 128 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/index.html
+2
View File
@@ -8,6 +8,8 @@
<style>
body {
margin: 0;
width: 100%;
min-width: 420px;
}
</style>
</head>
frontend/src/components/Cell.jsx
+1 -1
View File
@@ -31,7 +31,7 @@ const Cell = ({ cell, chess, marked, dispatch }) => {
content = marked ? <Mark /> : <Piece cell={cell} dispatch={dispatch} />;
return (
<Flex ref={setNodeRef} onClick={handleClick} w="75px" h="75px" bg={squareColor === 'w' ? "white" : "gray"} >
<Flex ref={setNodeRef} style={{aspectRatio:'1/1'}} onClick={handleClick} bg={squareColor === 'w' ? "white" : "gray"} >
{content}
</Flex>
)
frontend/src/components/Piece.jsx
+13 -7
View File
@@ -4,8 +4,7 @@ import { useDraggable } from '@dnd-kit/core'
const Piece = ({ cell, dispatch }) => {
let { square, type, color } = cell;
if (type === undefined) return null;
let logo;
let logo = null;
switch (type) {
case 'p':
logo = color === 'w' ? 'pawn_white' : 'pawn_black';
@@ -35,17 +34,24 @@ const Piece = ({ cell, dispatch }) => {
const style = transform ? {
transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
cursor: isDragging ? 'grabbing' : 'pointer',
zIndex: isDragging ? 100 : 20
zIndex: isDragging ? 100 : 20,
aspectRatio: '1'
} : undefined;
useEffect(() => {
if (isDragging) {
dispatch({ type: 'SELECT_PIECE', val: cell });
}
}, [isDragging])
return (
<Image ref={setNodeRef} style={style} sx={{ cursor: 'pointer' }} {...listeners} {...attributes} src={`/src/assets/${logo}.png`} />
)
if (logo) {
return (
<Image ref={setNodeRef} style={style} sx={{ cursor: 'pointer' }} {...listeners} {...attributes} src={`/src/assets/${logo}.png`} />
)
} else {
return (
<div style={{width:'100%'}}>
</div>
)
}
}
export default Piece
frontend/src/layout/MainLayout.jsx
+45 -6
View File
@@ -1,15 +1,37 @@
import { AppShell, Button, Container, Navbar, Paper, Text, useMantineTheme } from '@mantine/core'
import { AppShell, Burger, Button, Container, Header, MediaQuery, Navbar, Paper, Text, createStyles, useMantineTheme } from '@mantine/core'
import React, { useState } from 'react'
import NavbarLinks from '../components/NavbarLinks';
import { Outlet } from 'react-router-dom'
import Logout from '../components/Logout';
const useStyles = createStyles((theme) => ({
body: {
width: '100%',
height:'100%'
},
root: {
width: '100%',
height:'100vh'
},
main: {
width: '100%',
height:'100vh'
}
}))
const MainLayout = () => {
const { classes } = useStyles();
const theme = useMantineTheme();
const [opened, setOpened] = useState(false);
return (
<Paper>
<AppShell
<AppShell classNames={{
body: classes.body,
root: classes.root,
main: classes.main
}}
styles={{
main: {
background: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[0]
@@ -18,22 +40,39 @@ const MainLayout = () => {
textAlign: 'center'
}
}}
navbarOffsetBreakpoint="sm"
layout='alt'
navbar={
<Navbar py="md" px="0" hiddenBreakpoint="sm" hidden={!opened} width={{ sm: 30, lg: 180 }}>
<Navbar py="md" px="0" hiddenBreakpoint="md" hidden={!opened} width={{ md: 150 }}>
<Navbar.Section>
<Text size={30} weight={700}>Chess</Text>
</Navbar.Section>
<Navbar.Section grow mt="md">
<NavbarLinks />
</Navbar.Section>
<Navbar.Section>
<Navbar.Section >
<Logout />
</Navbar.Section>
</Navbar>
}
header={
<MediaQuery largerThan="sm" styles={{ display: 'none' }}>
<Header zIndex={1000} p="md">
<div style={{ display: 'flex', alignItems: 'center', height: '100%' }}>
<Burger
opened={opened}
onClick={() => setOpened((o) => !o)}
size="sm"
color={theme.colors.gray[6]}
mr="xl"
/>
<Text>Application header</Text>
</div>
</Header>
</MediaQuery>
}
>
<Container size="100%" px="100px" >
<Container size="100%" px={{ 'md': '10px', 'lg': '30px' }} >
<Outlet />
</Container>
</AppShell>
frontend/src/pages/Chess/ChessGame.jsx
+15 -7
View File
@@ -1,4 +1,4 @@
import { Avatar, Button, Flex, Image, Loader, NavLink, Text, Title } from '@mantine/core'
import { Avatar, Button, Flex, Image, Loader, MediaQuery, NavLink, Text, Title } from '@mantine/core'
import React, { useEffect, useState } from 'react'
import ChessBoard from '../Play/ChessBoard'
import { useNavigate, useParams } from 'react-router-dom'
@@ -82,7 +82,7 @@ const ChessGame = () => {
)
return (
<Flex gap="xl" justify='center' align='center' wrap='nowrap' direction='row'>
<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"
@@ -98,12 +98,20 @@ const ChessGame = () => {
description={"description"}
/>
</Flex>
<Flex w="450px" bg='gray' p="10px" justify='start' align='center' direction='column' h="600px" sx={{ borderRadius: '10px' }}>
<Title>Game Data</Title>
<Flex>
<Button onClick={exitGame} color='red'>Exit Game</Button>
<MediaQuery smallerThan="lg" styles={{ display: 'none' }}>
<Flex maw={450} sx={{
width: '100%',
height: '600px',
textAlign: 'center',
borderRadius: '10px'
}} bg='gray' p="10px" justify='start' align='center' direction='column' h="600px">
<Title>Game Data</Title>
<Flex>
<Button onClick={exitGame} color='red'>Exit Game</Button>
</Flex>
</Flex>
</Flex>
</MediaQuery>
</Flex>
)
}
frontend/src/pages/Play/ChallengeFriend.jsx
+5 -5
View File
@@ -9,11 +9,11 @@ const ChallengeFriend = () => {
return (
<Card
sx={{
width: '450px',
height: '600px',
textAlign: 'center'
}}
maw={450} sx={{
width: '100%',
height: '600px',
textAlign: 'center'
}}
>
<Form action={`/play/friend/${friend_username}`} method='POST'>
<Flex align="center" direction="column" justify="center" gap="xs" my="lg">
frontend/src/pages/Play/ChessBoard.jsx
+35 -4
View File
@@ -2,9 +2,35 @@ import React, { useEffect, useReducer, useRef } from 'react';
import { ChessModified, chess, chessInit } from '../../../utils/chess';
import Cell from '../../components/Cell';
import { socket } from '../../socket';
import { Flex } from '@mantine/core';
import { Flex, createStyles } from '@mantine/core';
import { DndContext } from '@dnd-kit/core'
import { useElementSize } from '@mantine/hooks';
const useStyles = createStyles((theme) => ({
chessboard: {
[theme.fn.largerThan('md')]: {
width: '600px'
},
[theme.fn.smallerThan('md')]: {
width: '560px'
},
[theme.fn.smallerThan('sm')]: {
width: '360px',
},
},
boardrow: {
[theme.fn.largerThan('md')]: {
height: '75px'
},
[theme.fn.smallerThan('md')]: {
height: '70px'
},
[theme.fn.smallerThan('sm')]: {
height: '45px'
},
}
}))
const reducer = (state, action) => {
console.log(state.chess.myColor)
@@ -35,6 +61,9 @@ const reducer = (state, action) => {
}
const ChessBoard = ({ color }) => {
const ref = useRef()
const { height, width } = useElementSize(ref)
const { classes } = useStyles();
const moveAudioRef = useRef(null);
const captureAudioRef = useRef(null);
const gameEndAudioRef = useRef(null);
@@ -90,11 +119,13 @@ const ChessBoard = ({ color }) => {
}
}
}}>
<Flex w="600px">
<Flex ref={ref} className={
classes.chessboard
}>
<div>
{gameState.chessBoard.map((row, rowIndex) => {
return (
<Flex className='flex' key={rowIndex * 2}>
<Flex className={classes.boardrow} key={rowIndex * 2}>
{row.map((cell) => {
return (
<Cell
@@ -114,7 +145,7 @@ const ChessBoard = ({ color }) => {
<audio src='/src/assets/capture.mp3' ref={captureAudioRef} />
<audio src='/src/assets/game-end.webm.mp3' ref={gameEndAudioRef} />
<audio src='/src/assets/move-check.mp3' ref={checkAudioRef} />
</DndContext>
</DndContext >
)
}
frontend/src/pages/Play/Layout.jsx
+8 -3
View File
@@ -1,4 +1,4 @@
import { Avatar, Card, Divider, Flex, Image, NavLink, Text, Title } from '@mantine/core'
import { Avatar, Box, Card, Divider, Flex, Image, MediaQuery, NavLink, Text, Title } from '@mantine/core'
import React from 'react'
import { Link, Outlet } from 'react-router-dom'
import { getUserData } from '../../../utils/auth';
@@ -7,7 +7,7 @@ const Layout = () => {
const user = getUserData();
let username = user.username;
return (
<Flex gap="xl" justify='center' align='center' wrap='nowrap' direction='row'>
<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"
@@ -15,7 +15,12 @@ const Layout = () => {
icon={<Avatar radius="3px" />}
description={"description"}
/>
<Image width={600} height={600} src="/src/assets/chess_board.png" />
<MediaQuery smallerThan="sm" styles={{ display: 'none' }}>
<Image width={600} miw={480} src="/src/assets/chess_board.png" />
</MediaQuery>
<MediaQuery largerThan="sm" styles={{ display: 'none' }}>
<Image width="100%" maw={540} src="/src/assets/chess_board.png" />
</MediaQuery>
<NavLink
p="2px"
label={username}
frontend/src/pages/Play/Play.jsx
+2 -2
View File
@@ -4,8 +4,8 @@ import { Link } from 'react-router-dom'
const Play = () => {
return (
<Card sx={{
width: '450px',
<Card maw={450} sx={{
width: '100%',
height: '600px',
textAlign: 'center'
}}>
frontend/src/pages/Play/PlayFriend.jsx
+2 -2
View File
@@ -38,8 +38,8 @@ const PlayFriend = () => {
</CopyButton> */}
</Modal>
<Card
sx={{
width: '450px',
maw={450} sx={{
width: '100%',
height: '600px',
textAlign: 'center'
}}