watches database for all color-entries; displays fullscreen
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

81 lines
2.0KB

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7. <title>Entry Observer</title>
  8. <style>
  9. html,
  10. body,
  11. p {
  12. border: 0;
  13. margin: 0;
  14. }
  15. #colorDiv {
  16. width: 100vw;
  17. height: 100vh;
  18. background-color: crimson;
  19. display: flex;
  20. flex-flow: column nowrap;
  21. justify-content: center;
  22. align-items: center;
  23. }
  24. #username {
  25. font: bold 4rem Avenir, Helvetica, Arial, sans-serif;
  26. }
  27. </style>
  28. </head>
  29. <body>
  30. <div id="colorDiv" data-color="hm">
  31. <p id="username"></p>
  32. </div>
  33. <script src="/socket.io/socket.io.js"></script>
  34. <script>
  35. const colorDiv = document.getElementById("colorDiv");
  36. const usernameP = document.getElementById("username");
  37. const invertHex = str => {
  38. const array = [
  39. "0",
  40. "1",
  41. "2",
  42. "3",
  43. "4",
  44. "5",
  45. "6",
  46. "7",
  47. "8",
  48. "9",
  49. "A",
  50. "B",
  51. "C",
  52. "D",
  53. "E",
  54. "F",
  55. ];
  56. return str
  57. .split("")
  58. .map(t => {
  59. if (t === "#") return "#";
  60. const idx = array.indexOf(t.toString().toUpperCase());
  61. if (idx === -1) return "0";
  62. if (idx >= 8) return array[idx - 8];
  63. return array[15 - idx];
  64. })
  65. .join("");
  66. };
  67. const socket = io.connect("/");
  68. socket.on("color", data => {
  69. if (data.color && data.username) {
  70. const { color, username } = data;
  71. colorDiv.style["background-color"] = color;
  72. usernameP.innerHTML = username;
  73. usernameP.style.color = invertHex(color);
  74. } else {
  75. console.log("socket-color was triggered but no data delivered");
  76. }
  77. });
  78. </script>
  79. </body>
  80. </html>