Overnap
Builds for 1 pipeline passed in 7 minutes 51 seconds

Merge branch 'feature/ingame' into develop

......@@ -25,6 +25,7 @@
"scripts": {
"start": "npm run twcss && set PORT=3001 && react-scripts start",
"build": "npm run twcss && react-scripts build",
"onlybuild": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"twcss": "tailwind build src/tailwind.css -c tailwind.config.js -o src/index.css"
......
......@@ -18,5 +18,15 @@ export const MessageType = {
ROOM_USER_UPDATE: "updateRoomUser",
ROOM_CHAT: "chat",
ROOM_READY: "ready",
ROOM_START: "startGame"
ROOM_START: "startGame",
GAME_START: "startRound",
GAME_WORDSET: "wordSet",
GAME_CHOOSE: "chooseWord",
GAME_WORD: "wordChosen",
GAME_TIMER: "timer",
GAME_ACCEPT: "answerAccepted",
GAME_FINISH_ROUND: "finishRound",
GAME_FINISH_GAME: "finishGame",
DRAW_SET: "setBrush",
DRAW_MOVE: "moveBrush",
} as const
\ No newline at end of file
......
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { Vector } from './types';
import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
import SocketContext from '../../contexts/SocketContext';
import { MessageType, RawMessage } from '../common/types';
import { BrushData, Vector } from './types';
// 참고 : https://basketdeveloper.tistory.com/79
export const Canvas: React.FC = () => {
interface CanvasProps {
isDrawer: boolean;
}
export const Canvas: React.FC<CanvasProps> = ({ isDrawer }) => {
const socket = useContext(SocketContext);
const canvasRef = useRef<HTMLCanvasElement>(null);
const [mousePosition, setMousePosition] = useState<Vector>({ x:0, y:0 });
......@@ -52,6 +59,22 @@ export const Canvas: React.FC = () => {
if (coordinates) {
setIsPainting(true);
setMousePosition(coordinates);
const rawMessage: RawMessage = {
type: MessageType.DRAW_MOVE,
message: coordinates
};
socket.emit('msg', rawMessage, () => {});
const nextRawMessage: RawMessage = {
type: MessageType.DRAW_SET,
message: {
size: 5,
color: '000000',
drawing: true
} as BrushData
};
socket.emit('msg', nextRawMessage, () => {});
}
}, []);
......@@ -65,6 +88,13 @@ export const Canvas: React.FC = () => {
const newMousePosition = getCoordinates(event);
if (mousePosition && newMousePosition) {
drawLine(mousePosition, newMousePosition);
const rawMessage: RawMessage = {
type: MessageType.DRAW_MOVE,
message: newMousePosition
};
socket.emit('msg', rawMessage, () => {});
setMousePosition(newMousePosition);
}
}
......@@ -73,30 +103,86 @@ export const Canvas: React.FC = () => {
);
const exitPaint = useCallback(() => {
const rawMessage: RawMessage = {
type: MessageType.DRAW_SET,
message: {
size: 5,
color: '000000',
drawing: false
} as BrushData
};
socket.emit('msg', rawMessage, () => {});
setIsPainting(false);
}, []);
const handleDrawSet = useCallback((rawMessage: RawMessage) => {
if (rawMessage.type === MessageType.DRAW_SET) {
const data = rawMessage.message as BrushData;
setIsPainting(data.drawing);
}
}, []);
const handleDrawMove = useCallback((rawMessage: RawMessage) => {
if (rawMessage.type === MessageType.DRAW_MOVE) {
const data = rawMessage.message as Vector;
if (isPainting) {
drawLine(mousePosition, data);
}
setMousePosition(data);
}
}, [isPainting, mousePosition])
useEffect(() => {
if (canvasRef.current) {
const canvas: HTMLCanvasElement = canvasRef.current;
if (isDrawer) {
const canvas: HTMLCanvasElement = canvasRef.current;
canvas.addEventListener('mousedown', startPaint);
canvas.addEventListener('mousemove', paint);
canvas.addEventListener('mouseup', exitPaint);
canvas.addEventListener('mouseleave', exitPaint);
return () => {
canvas.removeEventListener('mousedown', startPaint);
canvas.removeEventListener('mousemove', paint);
canvas.removeEventListener('mouseup', exitPaint);
canvas.removeEventListener('mouseleave', exitPaint);
};
}
}
}, [isDrawer, startPaint, paint, exitPaint]);
useEffect(() => {
if (!isDrawer) {
socket.on('msg', handleDrawSet);
socket.on('msg', handleDrawMove);
canvas.addEventListener('mousedown', startPaint);
canvas.addEventListener('mousemove', paint);
canvas.addEventListener('mouseup', exitPaint);
canvas.addEventListener('mouseleave', exitPaint);
return () => {
canvas.removeEventListener('mousedown', startPaint);
canvas.removeEventListener('mousemove', paint);
canvas.removeEventListener('mouseup', exitPaint);
canvas.removeEventListener('mouseleave', exitPaint);
};
socket.off('msg', handleDrawSet);
socket.off('msg', handleDrawMove);
}
}
}, [startPaint, paint, exitPaint]);
}, [isDrawer, handleDrawMove]);
const handleClearWhenStart = useCallback((rawMessage: RawMessage) => {
if (rawMessage.type === MessageType.GAME_START) {
clearCanvas();
setIsPainting(false);
// TODO: 펜 굵기, 색 설정하게 되면 여기에 초기화 넣기
}
}, []);
useEffect(() => {
socket.on('msg', handleClearWhenStart);
return () => {
socket.off('msg', handleClearWhenStart);
}
}, []);
return (
<div className='mx-3 px-2 py-1 rounded shadow'>
<canvas ref={canvasRef} width='512' height='384' />
<canvas ref={canvasRef} width='640' height='480' />
</div>
);
}
\ No newline at end of file
......
......@@ -23,9 +23,13 @@ export const Chat: React.FC<ChatProps> = (props) => {
}
socket.on('msg', handleChatData);
socket.on('msg', handleAcceptMessage);
socket.on('msg', handleFinishMessage);
return () => {
socket.off('msg', handleChatData);
socket.off('msg', handleAcceptMessage);
socket.on('msg', handleFinishMessage);
}
}, []);
......@@ -47,9 +51,29 @@ export const Chat: React.FC<ChatProps> = (props) => {
}
}, [input]);
const handleAcceptMessage = useCallback((rawMessage: RawMessage) => {
if (rawMessage.type === MessageType.GAME_ACCEPT) {
const message: ChatData = {
sender: 'SYSTEM',
message: 'That\'s correct!'
};
setChatLines(oldChatLines => [...oldChatLines, message]);
}
}, []);
const handleFinishMessage = useCallback((rawMessage: RawMessage) => {
if (rawMessage.type === MessageType.GAME_FINISH_ROUND) {
const message: ChatData = {
sender: 'SYSTEM',
message: 'The round is over!'
};
setChatLines(oldChatLines => [...oldChatLines, message]);
}
}, []);
return (
<div className={props.w}>
<div className={`${props.h} w-full rounded shadow flex flex-col overflow-y-scroll`}>
<div className={`${props.h} w-full py-2 rounded shadow flex flex-col overflow-y-scroll`}>
{chatLines.map((line, i) => (<ChatLine key={16383+i} chatData={line}/>))}
<div ref={messageEndRef} />
</div>
......
import React, { useCallback, useContext, useEffect, useState } from 'react';
import { useLocation } from 'react-router';
import SocketContext from '../../contexts/SocketContext';
import { MessageType, RawMessage } from '../common/types';
import { Canvas } from './Canvas';
import { RoundInfo } from './RoundInfo';
import { Role, RoundData } from './types';
import { Word } from './Word';
interface GameBoardLocation {
state: { username: string }
}
interface GameBoardProps {
isInGame: boolean
}
export const GameBoard: React.FC<GameBoardProps> = ({ isInGame }) => {
const socket = useContext(SocketContext);
const location: GameBoardLocation = useLocation();
const [ isDrawer, setIsDrawer ] = useState(false);
const [ words, setWords ] = useState<string[]>([]);
const [ wordChosen, setWordChosen ] = useState('');
const [ round, setRound ] = useState(0);
const handleWordSet = useCallback((rawMessage: RawMessage) => {
if (rawMessage.type === MessageType.GAME_WORDSET) {
console.log('단어 도착');
const { words } = rawMessage.message as { words: string[] };
setWords(words);
}
}, []);
const handleStart = useCallback((rawMessage: RawMessage) => {
if (rawMessage.type === MessageType.GAME_START) {
setWords([]);
const data = rawMessage.message as RoundData;
console.log('테스트 location ', location.state.username);
console.log('테스트 rolse ', data.roles);
const index = data.roles.findIndex(x => x.username === location.state.username);
setIsDrawer(data.roles[index].role === 'drawer');
setWordChosen('');
setRound(data.round);
}
}, []);
const handleGetWordLength = useCallback((rawMessage: RawMessage) => {
if (rawMessage.type === MessageType.GAME_WORD) {
if (wordChosen === '') {
const { length } = rawMessage.message as { length: number };
setWordChosen('_' + ' _'.repeat(length-1));
}
}
}, [wordChosen]);
const handleAnswer = useCallback((rawMessage: RawMessage) => {
if (rawMessage.type === MessageType.GAME_ACCEPT || rawMessage.type === MessageType.GAME_FINISH_ROUND) {
const { answer } = rawMessage.message as { answer: string };
setWordChosen(answer);
}
}, []);
useEffect(() => {
socket.on('msg', handleStart);
socket.on('msg', handleGetWordLength);
socket.on('msg', handleWordSet);
socket.on('msg', handleAnswer);
return () => {
socket.off('msg', handleStart);
socket.off('msg', handleGetWordLength);
socket.off('msg', handleWordSet);
socket.off('msg', handleAnswer);
}
}, []);
return (
<div className={`w-auto ${isInGame ? '' : 'hidden'}`}>
<div className='w-full flex flex-col justify-center items-center'>
{words.map((word, i) => (<Word key={word} index={i} word={word} setWordChosen={setWordChosen} setWords={setWords} />))}
</div>
<Canvas isDrawer={isDrawer && wordChosen !== ''} />
<RoundInfo round={round} wordChosen={wordChosen} />
</div>
);
}
\ No newline at end of file
......@@ -33,7 +33,7 @@ export const Ready: React.FC<ReadyProps> = ({ users }) => {
const handleReady = useCallback(() => {
if (isAdmin && isAllReady) {
const rawMessage: RawMessage = {
type: MessageType.ROOM_READY,
type: MessageType.ROOM_START,
message: {}
}
socket.emit('msg', rawMessage, () => {});
......
......@@ -10,7 +10,7 @@ interface RoomInfoProps {
export const RoomInfo: React.FC<RoomInfoProps> = ({ roomData }) => {
return (
<div className='m-3 mb-8 w-5/6 flex items-center place-content-between'>
<div className='m-3 my-8 w-5/6 flex items-center place-content-between'>
<div>{roomData.name}</div>
<div>{roomData.users.length}/{roomData.maxUsers}</div>
</div>
......
import React from 'react';
import SocketContext from '../../contexts/SocketContext';
import { Timer } from './Timer';
import { RoundData } from './types';
interface RoundInfoProps {
round: number;
wordChosen: string;
}
export const RoundInfo: React.FC<RoundInfoProps> = ({ round, wordChosen }) => {
return (
<div className='p-3 m-3 h-14 rounded shadow flex items-center place-content-between'>
<Timer />
<div>{wordChosen}</div>
<div>Round {round}/5</div>
</div>
);
}
\ No newline at end of file
import React, { useCallback, useContext, useEffect, useState } from 'react';
import SocketContext from '../../contexts/SocketContext';
import { MessageType, RawMessage } from '../common/types';
interface timer {
state: "started" | "stopped";
time: number;
};
export const Timer: React.FC = () => {
const socket = useContext(SocketContext);
const [ time, setTime ] = useState(0);
const [ isStop, setIsStop ] = useState(true);
const handleTimeSet = useCallback((rawMessage: RawMessage) => {
if (rawMessage.type === MessageType.GAME_TIMER) {
const data = rawMessage.message as timer;
console.log(data);
if (data.state === 'started') {
setIsStop(false);
} else {
setIsStop(true);
}
setTime(Math.floor(data.time));
}
}, []);
useEffect(() => {
if (!isStop) {
const go = setInterval(() => {
setTime(time-1);
}, 1000);
return () => clearInterval(go);
} else {
setTime(0);
}
}, [time, isStop]);
useEffect(() => {
socket.on('msg', handleTimeSet);
return () => {
socket.off('msg', handleTimeSet);
}
}, []);
return (
<div className={time < 10 ? 'text-red-500' : 'text-black'}>
🕒 {time}
</div>
);
}
\ No newline at end of file
import React, { useCallback, useContext, useEffect, useState } from 'react';
import SocketContext from '../../contexts/SocketContext';
import { MessageType, RawMessage } from '../common/types';
import { RoleData, RoundData } from './types';
interface UserRoleProps {
isInGame: boolean;
}
export const UserRole: React.FC<UserRoleProps> = ({ isInGame }) => {
const socket = useContext(SocketContext);
const [ roles, setRoles ] = useState<RoleData[]>([]);
const handleRole = useCallback((rawMessage: RawMessage) => {
if (rawMessage.type === MessageType.GAME_START) {
const { roles } = rawMessage.message as RoundData;
setRoles(roles);
}
}, []);
useEffect(() => {
socket.on('msg', handleRole);
return () => {
socket.off('msg', handleRole);
}
}, []);
return (
<div className={`w-40 h-140 rounded shadow flex flex-col items-center ${isInGame ? '' : 'hidden'}`}>
<div className='mt-3' />
{roles.map(x => (
<div key={x.username} className={`my-5 ease-linear transition-all duration-100
${x.role === 'drawer' ? 'text-blue-500'
: x.role === 'winner' ? 'text-green-500'
: 'text-black'}`}>
{x.nickname} {x.role === 'drawer' ? '🖌️' : x.role === 'spectator' ? '👻' : ''}
</div>
))}
</div>
);
}
import React, { useCallback, useContext } from 'react';
import { IndexType } from 'typescript';
import SocketContext from '../../contexts/SocketContext';
import { MessageResponse, MessageType, RawMessage } from '../common/types';
interface WordProps {
index: number;
word: string;
setWordChosen: (value: React.SetStateAction<string>) => void;
setWords: (value: React.SetStateAction<string[]>) => void;
}
export const Word: React.FC<WordProps> = (props) => {
const socket = useContext(SocketContext);
const handleChoose = useCallback(() => {
const rawMessage: RawMessage = {
type: MessageType.GAME_CHOOSE,
message: { word: props.word }
};
socket.emit('msg', rawMessage, (response: MessageResponse<undefined>) => {
if (response.ok) {
props.setWords([]);
props.setWordChosen(props.word);
}
});
}, [props.setWordChosen]);
return (
<button className={`bg-green-500 active:bg-green-600 fixed
text-white font-bold ${'mt-' + 40*(props.index+2)} mt-40
px-5 py-2 rounded shadow
outline-none focus:outline-none hover:shadow-md
ease-linear transition-all duration-100`}
type="button"
onClick={() => handleChoose()}>{props.word}</button>
);
}
......@@ -26,3 +26,23 @@ export interface Vector {
x: number;
y: number;
}
export type Role = "drawer" | "guesser" | "winner" | "spectator";
export interface RoleData {
username: string;
nickname: string;
role: Role;
}
export interface RoundData {
round: number;
duration: number;
roles: RoleData[];
};
export interface BrushData {
size: number;
color: string;
drawing: boolean;
}
......
......@@ -4,10 +4,12 @@ import { Main } from '../components/common/Main';
import { MessageResponse, MessageType, RawMessage } from '../components/common/types';
import { Canvas } from '../components/room/Canvas';
import { Chat } from '../components/room/Chat';
import { GameBoard } from '../components/room/GameBoard';
import { Ready } from '../components/room/Ready';
import { RoomInfo } from '../components/room/RoomInfo';
import { RoomData, UpdateRoomUser } from '../components/room/types';
import { UserInfo } from '../components/room/UserInfo';
import { UserRole } from '../components/room/UserRole';
import { UserStatus } from '../components/room/UserStatus';
import SocketContext from '../contexts/SocketContext';
......@@ -29,6 +31,14 @@ export const Room: React.FC = () => {
});
const [ isInGame, setIsInGame ] = useState(false);
const handleInGame = useCallback((rawMessage: RawMessage) => {
if (rawMessage.type === MessageType.GAME_START) {
setIsInGame(true);
} else if (rawMessage.type === MessageType.GAME_FINISH_GAME) {
setIsInGame(false);
}
}, []);
const handleUpdateRoomUser = useCallback((rawMessage: RawMessage) => {
if (rawMessage.type == MessageType.ROOM_USER_UPDATE) {
const data = rawMessage.message as UpdateRoomUser;
......@@ -81,8 +91,11 @@ export const Room: React.FC = () => {
}
setRoomData(location.state.roomData);
socket.on('msg', handleInGame);
return () => {
socket.off('msg', handleInGame);
const rawMessage: RawMessage = {
type: MessageType.ROOM_LEAVE,
message: ''
......@@ -94,20 +107,22 @@ export const Room: React.FC = () => {
return (
<Main>
<RoomInfo roomData={roomData}/>
{
isInGame ? (
<div className='w-full flex'>
<Canvas />
<Chat w='w-4/12' h='h-80' />
</div>
) : (
<div className='w-full flex flex-col justify-center items-center'>
<UserInfo users={roomData.users}/>
<Ready users={roomData.users} />
<Chat w='w-7/12' h='h-96' />
</div>
)
}
<div className='w-full flex justify-center'>
{/* 게임보드와 유저롤을 계속 살려둬서 리스너를 항상 열어놓도록 하자 */}
<UserRole isInGame={isInGame} />
<GameBoard isInGame={isInGame} />
{
isInGame ? (
<Chat w='w-4/12' h='h-132' />
) : (
<div className='w-full flex flex-col justify-center items-center'>
<UserInfo users={roomData.users}/>
<Ready users={roomData.users} />
<Chat w='w-7/12' h='h-96' />
</div>
)
}
</div>
</Main>
);
}
\ No newline at end of file
......
......@@ -2,7 +2,18 @@ module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
extend: {
spacing: {
120: '30rem',
124: '31rem',
128: '32rem',
132: '33rem',
136: '34rem',
140: '35rem',
160: '40rem',
200: '50rem',
},
},
},
variants: {
extend: {
......