public/room.js

   1 const socket = io()
   2 const width = 50
   3 const colors = ["red", "orange", "yellow", "green", "blue", "violet", "black", "white"]
   4 let color = colors[0]
   5 let timeout, id
   6
   7 socket.on("timeout", to => {
   8         timeout = to
   9 })
  10
  11 socket.on("size", size => {
  12         const parent = document.getElementById("canvas")
  13
  14         for (let x = 0; x < size.x; x++)
  15         for (let y = 0; y < size.y; y++) {
  16                 const elem = parent.appendChild(document.createElement("div"))
  17                 elem.id = x + "+" + y
  18                 elem.classList.add("pixel")
  19                 elem.style.position = "absolute"
  20                 elem.style.top = x * width + "px"
  21                 elem.style.left = y * width + "px"
  22                 elem.style.width = width + "px"
  23                 elem.style.height = width + "px"
  24                 elem.style.backgroundColor = "white"
  25
  26                 elem.addEventListener("click", _ => {
  27                         socket.emit("place", {x, y, id, color})
  28                 })
  29         }
  30 })
  31
  32 socket.on("place", data => {
  33         for (let x in data)
  34         for (let y in data[x])
  35                 document.getElementById(x + "+" + y).style.backgroundColor = data[x][y]
  36 })
  37
  38 init = i => {
  39         socket.emit("join", id = i)
  40
  41         let selected
  42         const dotWidth = (innerWidth / colors.length)
  43         for (let i = 0; i < colors.length; i++) {
  44                 const elem = document.body.appendChild(document.createElement("div"))
  45                 elem.style.borderRadius = "50%"
  46                 elem.style.borderStyle = "solid"
  47                 elem.style.boxShadow = i == 0 ? "0 0 0 10px black inset" : "0 0 0 5px black inset"
  48                 elem.style.backgroundColor = colors[i]
  49                 elem.style.width = parseInt(dotWidth * 0.8) + "px"
  50                 elem.style.height = parseInt(dotWidth * 0.8) + "px"
  51                 elem.style.bottom = parseInt(dotWidth * 0.1) + "px"
  52                 elem.style.left = parseInt(dotWidth * (0.1 + i)) + "px"
  53                 elem.style.position = "fixed"
  54
  55                 if (i == 0)
  56                         selected = elem
  57
  58                 elem.addEventListener("click", _ => {
  59                         color = colors[i]
  60
  61                         if (selected)
  62                                 selected.style.boxShadow = "0 0 0 5px black inset"
  63                         selected = elem
  64                         selected.style.boxShadow = "0 0 0 10px black inset"
  65                 })
  66         }
  67 }