Skip to content

Commit

Permalink
first beta
Browse files Browse the repository at this point in the history
  • Loading branch information
@FPT-NMTung
FPT-NMTung committed Dec 1, 2024
1 parent c8942fd commit 313f047
Show file tree
Hide file tree
Showing 9 changed files with 413 additions and 108 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "gomoku",
"private": true,
"version": "0.0.1",
"version": "0.0.2",
"type": "module",
"scripts": {
"dev": "vite",
Expand Down
12 changes: 7 additions & 5 deletions src/layout/Footer.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@ import {IconBrandGithubFilled, IconPower} from "@tabler/icons-react";

const Footer = () => {
return <div className={'flex flex-row gap-3 mt-3'}>
<Card className={'h-12 min-w-12'} isPressable={true}>
<Card className={'h-12 min-w-12'} isPressable={true} onPress={() => {
document.location.href = import.meta.env.VITE_SSO_URL + '/settings'
}}>
<CardBody>
<div className={'h-full w-full flex justify-center items-center overflow-hidden'}>
<IconPower size={18} className={'text-red-600'} onClick={() => {
document.location.href = import.meta.env.VITE_SSO_URL + '/settings'
}}/>
<IconPower size={18} className={'text-red-600'}/>
</div>
</CardBody>
</Card>
Expand All @@ -19,7 +19,9 @@ const Footer = () => {
</div>
</CardBody>
</Card>
<Card className={'h-12 min-w-12'} isPressable={true}>
<Card className={'h-12 min-w-12'} isPressable={true} onPress={() => {
window.open('http://github.com/AdonisGM', '_blank').focus();
}}>
<CardBody>
<div className={'h-full w-full flex justify-center items-center overflow-hidden'}>
<IconBrandGithubFilled size={18} className={'text-black'}/>
Expand Down
16 changes: 14 additions & 2 deletions src/pages/dashboardPage/Dashboard.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import {Card, CardBody} from "@nextui-org/react";
import PlayGame from "./items/PlayGame.jsx";
import HistoryGame from "./items/HistoryGame.jsx";

const Dashboard = (props) => {
return (
Expand All @@ -8,13 +9,24 @@ const Dashboard = (props) => {
<Card
shadow={'sm'}
isPressable={true}
className={'h-full w-full'}
className={'h-36 w-full'}
>
<CardBody>
<CardBody className={'flex justify-center items-center overflow-hidden'}>
<PlayGame/>
</CardBody>
</Card>
</div>
<div className={'col-span-3'}>
{/*<Card*/}
{/* shadow={'sm'}*/}
{/* isPressable={true}*/}
{/* className={'h-full w-full'}*/}
{/*>*/}
{/* <CardBody>*/}
<HistoryGame/>
{/* </CardBody>*/}
{/*</Card>*/}
</div>
</div>
)
}
Expand Down
114 changes: 114 additions & 0 deletions src/pages/dashboardPage/items/HistoryGame.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
import {Pagination, Table, TableBody, TableCell, TableColumn, TableHeader, TableRow} from "@nextui-org/react";
import {useEffect, useState} from "react";
import callApi from "../../../apis/GatewayApi.js";
import TableLoading from "../../../layout/TableLoading.jsx";
import TableEmpty from "../../../layout/TableEmpty.jsx";
import {formatDate} from "../../../common/common.js";

const HistoryGame = (props) => {
const [page, setPage] = useState(1)
const [pages, setPages] = useState(0)
const [data, setData] = useState([])
const [isLoading, setIsLoading] = useState(false)

useEffect(() => {
getAllManagement()
}, [page]);

const getAllManagement = () => {
setIsLoading(true)
callApi('pkg_gmk_game.get_all_game', {
page: page,
size_page: 10
}, (data) => {
setData(data)
if (data.length > 0) {
setPages(Math.ceil(data[0].TB_TOTAL_ROW/10))
}
setIsLoading(false)
}, (err) => {
console.log(err)
setIsLoading(false)
})
}

const renderStatus = (item) => {
if (item?.C_NEXT_PLAYER === localStorage.getItem('username')) {
return <p
className={'text-xs text-default-500 font-bold bg-clip-text text-transparent bg-gradient-to-r from-yellow-400 to-red-400 leading-normal'}>Your turn!
</p>
} else if (item?.C_NEXT_PLAYER && item?.C_NEXT_PLAYER !== localStorage.getItem('username')) {
return <p
className={'text-xs text-default-500 font-bold bg-clip-text text-transparent bg-gradient-to-r from-yellow-400 to-red-400 leading-normal'}>Your partner!
</p>
}

if (item?.C_STATUS === 'WIN' && item?.C_WIN_PLAYER === localStorage.getItem('username')) {
return <p>
<span className={'text-default-500 font-bold bg-clip-text text-transparent bg-gradient-to-r from-green-600 to-blue-700 leading-normal'}>Your winnnn!</span> 🥳🥳🥳
</p>
}

if (item?.C_STATUS === 'WIN' && item?.C_WIN_PLAYER !== localStorage.getItem('username')) {
return <p>
<span className={'text-default-500 font-bold bg-clip-text text-transparent bg-gradient-to-r from-red-600 to-pink-700 leading-normal'}>Your lose! </span>😭😱🤕
</p>
}
}

return (
<div>
<div className={'flex flex-col gap-2.5 justify-center items-center'}>
<Table
isStriped={true}
bottomContent={
pages > 0 ? (
<div className="flex w-full justify-end">
<Pagination
isCompact
showControls
showShadow
color="primary"
page={page}
total={pages}
onChange={(page) => setPage(page)}
isDisabled={isLoading}
/>
</div>
) : null
}
>
<TableHeader>
<TableColumn>#</TableColumn>
<TableColumn>Match ID</TableColumn>
<TableColumn>Type</TableColumn>
<TableColumn>Enemy</TableColumn>
<TableColumn>Total step</TableColumn>
<TableColumn>Status</TableColumn>
<TableColumn>Created date</TableColumn>
</TableHeader>
<TableBody
items={data ?? []}
isLoading={isLoading}
loadingContent={<TableLoading/>}
emptyContent={<TableEmpty isLoading={isLoading}/>}
>
{(item) => (
<TableRow key={item?.PK_GMK_MATCH}>
<TableCell>{item?.TB_ROW_NUM}</TableCell>
<TableCell className={'font-mono'}>{item?.C_MATCH_ID}</TableCell>
<TableCell>{item?.C_TYPE}</TableCell>
<TableCell className={'text-sm'}>{item?.C_FULLNAME} <span className={'italic text-gray-400 text-xs'}>#{item?.C_USERNAME}</span></TableCell>
<TableCell>{item?.C_TOTAL_STEP}</TableCell>
<TableCell>{renderStatus(item)}</TableCell>
<TableCell>{formatDate(item?.C_CREATED_DATE)}</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</div>
</div>
)
}

export default HistoryGame
7 changes: 2 additions & 5 deletions src/pages/dashboardPage/items/PlayGame.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,8 @@ const PlayGame = (props) => {
return (
<div>
<div className={'flex flex-col gap-2.5 justify-center items-center'}>
<Button className={'w-1/2'} color="success" size={'sm'} variant="flat" startContent={<IconDeviceGamepad2/>} onPress={handlePlayNewGame}>
Create game!
</Button>
<Button className={'w-1/2'} color="warning" size={'sm'} variant="flat">
Join game
<Button color="success" size={'sm'} variant="flat" startContent={<IconDeviceGamepad2/>} onPress={handlePlayNewGame}>
Ender game!
</Button>
</div>
</div>
Expand Down
102 changes: 61 additions & 41 deletions src/pages/gamePage/Board.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
import {useEffect, useState} from "react";
import {drawTable, handleMouseDown, handleMouseMove, handleMouseUp, initBoard} from "./controller.js";

const Board = () => {
const [listCell, setListCell] = useState([])

const Board = (props) => {
useEffect(() => {
const containerBoard = document.getElementById('containerBoard');
const canvas = document.getElementById("mainBoard");
Expand All @@ -20,59 +18,81 @@ const Board = () => {
// console.log(time)
//
// })
initBoard(ctx, containerHeight, containerWidth)
drawTable(listCell)
initBoard(ctx, canvas, containerHeight, containerWidth)
drawTable(props.listCell)

canvas.addEventListener("mousemove", (e) => {
e.preventDefault()
handleMouseMove({
ctx,
canvas: canvas,
evt: e,
listCell: listCell
})
})
// canvas.addEventListener("mousemove", onMouseMove)

canvas.addEventListener("mouseup", (e) => {
e.preventDefault()
const location = handleMouseUp({
canvas: canvas,
evt: e
})
if (location) {
handleClickSquare(location)
}
})
// canvas.addEventListener("mouseup", (e) => {
// e.preventDefault()
// const location = handleMouseUp({
// canvas: canvas,
// evt: e
// })
// if (location) {
// handleClickSquare(location)
// }
// })

canvas.addEventListener("mousedown", (e) => {
e.preventDefault()
handleMouseDown({
canvas: canvas,
evt: e
})
})
// canvas.addEventListener("mousedown", (e) => {
// e.preventDefault()
// handleMouseDown({
// canvas: canvas,
// evt: e
// })
// })

return () => {
canvas.removeEventListener("mousemove", () => {})
canvas.removeEventListener("mouseup", () => {})
canvas.removeEventListener("mousedown", () => {})
// canvas.removeEventListener("mousemove", () => {})
// canvas.removeEventListener("mouseup", () => {})
// canvas.removeEventListener("mousedown", () => {})
}
}, []);

// const onMouseMove = (e) => {
// e.preventDefault()
// handleMouseMove({
// evt: e,
// listCell: props.listCell
// })
// }

useEffect(() => {
}, [listCell]);
drawTable(props.listCell)
}, [props.listCell]);

const handleClickSquare = (location) => {
const side = 0
listCell.push({x: location.x, y: location.y, side: side})
setListCell([...listCell])
console.log(listCell)
drawTable(listCell)
props.onAddCell({x: location.x, y: location.y, side: props.side})
}

return (
<div className={'w-full h-full'} id={'containerBoard'}>
<canvas id={'mainBoard'} className={'w-full h-full'}></canvas>
<canvas
id={'mainBoard'}
className={'w-full h-full'}
onMouseUp={(e) => {
e.preventDefault()
const location = handleMouseUp({
evt: e
})
if (location) {
handleClickSquare(location)
}
}}
onMouseDown={(e) => {
e.preventDefault()
handleMouseDown({
evt: e
})
}}
onMouseMove={(e) => {
e.preventDefault()
handleMouseMove({
evt: e,
listCell: props.listCell
})
}}
></canvas>
</div>
)
}
Expand Down
Loading

0 comments on commit 313f047

Please sign in to comment.