Game Start event

Client에게 game이 시작되었다는 것을 알리기

// socketController.js

import { chooseWord } from "./words";

export const socketController = (socket, io) => {
  const choosePainter = () =>
    sockets[Math.floor(Math.random() * sockets.length)];
  const startGame = () => {
    // painter select
    if (sockets.length > 1) {
      superBroadcast(events.gameStarted);
      const painter = choosePainter();
      const word = chooseWord();
      io.to(painter.id).emit(events.painterNotif, { word });
      // time out
    }
  };
  socket.on(events.addPlayer, ({ username }) => {
    socket.username = username;
    sockets.push({ id: socket.id, points: 0, username });
    sendPlayerUpdate();
    setTimeout(startGame, 2000); // 추가된 코드
  });
 };

// events.js

painterNotif: "painterNotif",
gameStarted: "gameStarted",

const words = [
...
  "apple",
  "arm",
  "banana",
  "bike",
 ...
];

export const chooseWord = () => words[Math.floor(Math.random() * words.length)];

   choosePainter()는 랜덤으로 누가 그림을 그릴 것인지를 정한다. chooseWord()는 words.js 파일에서 랜덤으로 단어 하나를 선택한다. io.to(painter.id)를 이용해서 painter에게 단어와 같이 painterNotif event를 보낸다.

Game이 시작되면 Client의 역할에 따라 부여되는 권한

// sockets.js

import {
  handleGameStarted,
  handlePainterNotif,
} from "./player";

export const initSocket = (aSocket) => {
  const { events } = window;
  socket = aSocket;
  socket.on(events.painterNotif, handlePainterNotif);
  socket.on(events.gameStarted, handleGameStarted);
};

// player.js

import { hideChat, showChat } from "./chat";
import {
  disableCanvas,
  enableCanvas,
  hideControls,
  showControls,
} from "./paint";

const notify = document.getElementById("jsNotify");

export const handlePainterNotif = ({ word }) => {
  notify.innerText = `You are the painter, word: ${word}`;
  enableCanvas();
  showControls();
  hideChat();
};
export const handleGameStarted = () => {
  notify.innerText = "";
  disableCanvas();
  hideControls();
  showChat();
};

   게임이 시작하면 handleGameStarted()가 실행된다. 이 함수는 painter가 아닌 사람은 canvas를 조작하지 못 하도록 canvas를 disable하고 control panel을 숨긴다. 그리고 정답을 맞출 수 있도록 chat form을 보여준다.

   반면에 handlePainterNotif()는 canvas 위에 누가 painter인지와 그려야 할 단어를 알려주고 canvas, control panel을 활성화 하고 정답을 유출하지 않도록 chat form을 비활성화 한다.

   아래의 코드는 enableCanvas(), disableCanvas(), hideControls(), showControls()와 hideChat(), showChat()이다.

// paint.js

const controls = document.getElementById("jsControls");

export const enableCanvas = () => {
  canvas.addEventListener("mousemove", handleMousemove);
  canvas.addEventListener("mousedown", handleMouseDown);
  canvas.addEventListener("mouseup", handleMouseUp);
  canvas.addEventListener("mouseleave", handleMouseLeave);
  canvas.addEventListener("click", handleClickFill);
};

export const disableCanvas = () => {
  canvas.removeEventListener("mousemove", handleMousemove);
  canvas.removeEventListener("mousedown", handleMouseDown);
  canvas.removeEventListener("mouseup", handleMouseUp);
  canvas.removeEventListener("mouseleave", handleMouseLeave);
  canvas.removeEventListener("click", handleClickFill);
};

export const hideControls = () => (controls.style.display = "none");
export const showControls = () => (controls.style.display = "flex");

if (canvas) {
  disableCanvas();
}

// chat.js

export const hideChat = () => (sendMsg.style.display = "none");
export const showChat = () => (sendMsg.style.display = "flex");

소스 코드

github.com/zpskek/guessMind-v3/commit/94ed977f49f830ec1905b5ad1e1762d082afc5a7