Skip to content

Commit

Permalink
Add viewmode
Browse files Browse the repository at this point in the history
  • Loading branch information
@FPT-NMTung
FPT-NMTung committed Dec 20, 2024
1 parent 66c82a4 commit 53f9657
Show file tree
Hide file tree
Showing 3 changed files with 107 additions and 29 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.3",
"version": "0.0.4",
"type": "module",
"scripts": {
"dev": "vite",
Expand Down
52 changes: 52 additions & 0 deletions src/components/customInput/InputSelectTypeJoinGame.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import {useEffect, useState} from "react";
import callApi from "../../apis/GatewayApi.js";
import InputAutocomplete from "./core/InputAutocomplete.jsx";
import PropTypes from "prop-types";
import {Select, SelectItem} from "@nextui-org/react";
import {useController} from "react-hook-form";

const typeJoin = [
{key: "joinGame", label: "Join game"},
{key: "viewGame", label: "View game"},
];

const InputSelectTypeJoinGame = (props) => {
const {
field,
fieldState: { invalid, isTouched, isDirty , error},
formState: { touchedFields, dirtyFields }
} = useController({
name: props.name,
control: props.control,
rules: props.rules,
});

console.log(field.value)

const handleChangeValue = (value) => {
field.onChange(value)
}

return <Select
// react form hook
onChange={handleChangeValue}
onBlur={field.onBlur}
ref={field.ref}

// nextUI
isInvalid={!!error}
errorMessage={error?.message}

size={'sm'}
variant={'flat'}

selectedKeys={[field.value]}
>
{typeJoin.map((type) => (
<SelectItem key={type.key}>{type.label}</SelectItem>
))}
</Select>

}

export default InputSelectTypeJoinGame;
82 changes: 54 additions & 28 deletions src/pages/gamePage/Game.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,19 @@
import {Button, Card, CardBody, Spacer} from "@nextui-org/react";
import {Button, Card, CardBody, Select, SelectItem, Spacer} from "@nextui-org/react";
import {IconCircleFilled, IconPower} from "@tabler/icons-react";
import Board from "./Board.jsx";
import {useNavigate} from "react-router-dom";
import {socket} from "../../apis/socket.js";
import {useEffect, useState} from "react";
import {useForm} from "react-hook-form";
import InputText from "../../components/customInput/InputText.jsx";
import InputSelectTypeJoinGame from "../../components/customInput/InputSelectTypeJoinGame.jsx";
import toast from "react-hot-toast";

const Game = () => {
const [isConnected, setisConnected] = useState(false);
const [inGame, setInGame] = useState(false);
const [isStart, setIsStart] = useState(false)
const [isStart, setIsStart] = useState(false);
const [isGuest, setIsGuest] = useState(false)

const [matchId, setMatchId] = useState(undefined);
const [infoGame, setInfoGame] = useState(undefined)
Expand Down Expand Up @@ -83,7 +86,6 @@ const Game = () => {
setIsStart(true)
break;
case 'infoGame':
console.log(message.data)
setInfoGame(message.data[0])
break;
default:
Expand All @@ -107,7 +109,13 @@ const Game = () => {
}

const onError = (err) => {
console.log(err)
try {
toast.error(err.error_message);
} catch (e) {
toast.error('Lỗi gì đó rồi 😭');
console.error(err)
console.error(e)
}
}

const writeLog = (type, message) => {
Expand Down Expand Up @@ -149,7 +157,15 @@ const Game = () => {
}

const onSubmit = (data) => {
socket.emit('joinGame', {
if (!data.matchId) {
return;
}

if (data.type === 'viewGame') {
setIsGuest(true)
}

socket.emit(data.type, {
matchId: data.matchId,
})
setIsLoading(true)
Expand Down Expand Up @@ -177,6 +193,7 @@ const Game = () => {
const { control, handleSubmit, reset, setValue, getValues, watch } = useForm({
defaultValues: {
matchId: '',
type: 'viewGame',
}
})

Expand Down Expand Up @@ -209,30 +226,38 @@ const Game = () => {
Create game!
</Button>
</div>
<form className={'w-44'} onSubmit={handleSubmit((data) => onSubmit(data))}>
<InputText
name={'matchId'}
label={'Match Id'}
control={control}
/>
<Spacer y={2}/>
<Button
type="submit"
className={'w-full'}
color="warning"
size={'sm'}
variant="flat"
isLoading={isLoading}
isDisabled={isLoading}
>
Join game
</Button>
</form>
<div className={'w-44'}>
<form onSubmit={handleSubmit((data) => onSubmit(data))}>
<InputText
name={'matchId'}
label={'Match Id'}
control={control}
/>
<Spacer y={2}/>
<InputSelectTypeJoinGame
name={'type'}
label={'Select type view'}
control={control}
/>
<Spacer y={2}/>
<Button
type="submit"
className={'w-full'}
color="secondary"
size={'sm'}
variant="flat"
isLoading={isLoading}
isDisabled={isLoading}
>
View/Join game
</Button>
</form>
</div>
</div>
</CardBody>
</Card>
</div>
)}
)}

{/*<div className={'absolute bottom-3 right-3'}>*/}
{/* <Card className={'max-h-24 min-w-24'}>*/}
Expand Down Expand Up @@ -279,9 +304,10 @@ const Game = () => {
</div>
</div>
<div className={'mt-2'}>
{infoGame?.C_NEXT_PLAYER === localStorage.getItem('username') && <p className={'text-sm text-default-500 font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-400 leading-normal'}>Your turn!</p>}
{infoGame?.C_STATUS === 'WIN' && infoGame?.C_WIN_PLAYER === localStorage.getItem('username') && <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>}
{infoGame?.C_STATUS === 'WIN' && infoGame?.C_WIN_PLAYER !== localStorage.getItem('username') && <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>}
{!isGuest && infoGame?.C_NEXT_PLAYER === localStorage.getItem('username') && <p className={'text-sm text-default-500 font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-400 leading-normal'}>Your turn!</p>}
{!isGuest && infoGame?.C_STATUS === 'WIN' && infoGame?.C_WIN_PLAYER === localStorage.getItem('username') && <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>}
{!isGuest && infoGame?.C_STATUS === 'WIN' && infoGame?.C_WIN_PLAYER !== localStorage.getItem('username') && <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>}
{isGuest && <p><span className={'text-default-500 font-bold bg-clip-text text-transparent bg-gradient-to-r from-gray-500 to-gray-700 leading-normal'}>Your is guest</span></p>}
</div>
</CardBody>
</Card>
Expand Down

0 comments on commit 53f9657

Please sign in to comment.