refactoring

.eslintrc.js

@@ -22,5 +22,6 @@ module.exports = {
   rules: {
     quotes: ["error", "double"],
     "no-shadow": ["error", { hoist: "functions", allow: [] }],
+    "no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
   },
 };

css/panel.css

@@ -37,21 +37,25 @@
   justify-content: space-between;
 }
 
-.panel-row button {
+.panel-row ui-button,
+.panel-row color-button,
+.panel-row tool-button,
+.panel-row variant-button,
+.panel-row variant-stamp-button {
   margin-right: var(--button-space);
-  width: var(--button-size);
-  height: var(--button-size);
-  border: 2px solid black;
-  border-radius: 6px;
 }
 
-.panel-row button:last-child {
+.panel-row ui-button:last-child,
+.panel-row color-button:last-child,
+.panel-row tool-button:last-child,
+.panel-row variant-button:last-child,
+.panel-row variant-stamp-button:last-child {
   margin-right: 0px;
 }
 
-.panel-row button.active {
-  border: 2px solid white;
-  box-shadow: 0px 0px 0px 4px orange;
+#tools {
+  display: flex;
+  flex: 1;
 }
 
 #actions {

index.html

@@ -76,9 +76,9 @@ <h3>New version available</h3>
         </div>
         <div id="right-panel-column">
           <section id="global-actions" class="panel-row">
-            <button id="clear"><img src="img/buttons/clear.svg" /></button>
-            <button id="save"><img src="img/buttons/save.svg" /></button>
-            <button id="info"><img src="img/buttons/info.svg" /></button>
+            <ui-button id="clear" icon-url="img/buttons/clear.svg"></ui-button>
+            <ui-button id="save" icon-url="img/buttons/save.svg"></ui-button>
+            <ui-button id="info" icon-url="img/buttons/info.svg"></ui-button>
           </section>
         </div>
       </section>

js/boot.mjs

@@ -22,6 +22,19 @@ import { attachKeyboardListeners } from "./controls/keyboard.mjs";
 import { attachGamepadBlockListeners } from "./controls/general.mjs";
 import { attachGamepadListeners } from "./controls/gamepad.mjs";
 import { initializeCursor } from "./cursor.mjs";
+import { ColorButton } from "./ui/color.mjs";
+import { ToolButton } from "./ui/tool.mjs";
+import { VariantButton } from "./ui/variant.mjs";
+import { VariantStampButton } from "./ui/variant-stamp.mjs";
+import { UiButton } from "./ui/button.mjs";
+
+function registerComponents() {
+  customElements.define("ui-button", UiButton);
+  customElements.define("color-button", ColorButton);
+  customElements.define("tool-button", ToolButton);
+  customElements.define("variant-button", VariantButton);
+  customElements.define("variant-stamp-button", VariantStampButton);
+}
 
 function attachResizeListeners() {
   const canvas = getCanvas();
@@ -59,6 +72,7 @@ export function boot() {
   const state = createState();
   const canvas = getCanvas();
 
+  registerComponents();
   restorePreviousCanvas(canvas);
   attachCanvasSaveListener(canvas);
 

js/controls/keyboard.mjs

@@ -39,15 +39,7 @@ export function attachKeyboardListeners(state) {
   let accelerationTimer = null;
   let keysPressed = NO_KEYS_PRESSED;
 
-  function shouldBlockInteractions() {
-    return state.get((prevState) => prevState.blockedInteractions);
-  }
-
   window.addEventListener("keyup", (event) => {
-    if (shouldBlockInteractions()) {
-      return;
-    }
-
     switch (event.key) {
       case "ArrowUp":
         keysPressed = produceMovementKeysPressed(keysPressed, "up", false);
@@ -67,10 +59,6 @@ export function attachKeyboardListeners(state) {
   });
 
   window.addEventListener("keydown", (event) => {
-    if (shouldBlockInteractions()) {
-      return;
-    }
-
     if (event.key === "p") {
       setTool(TOOLS.PEN, { state });
     } else if (event.key === "f") {

js/cursor.mjs

@@ -23,19 +23,11 @@ export function initializeCursor({ state }) {
   const y = cursor.y;
   let setCursorTimer = null;
 
-  function shouldBlockInteractions() {
-    return state.get((prevState) => prevState.blockedInteractions);
-  }
-
   function drawCursorOnMouseMove(event) {
     if (setCursorTimer) {
       window.clearTimeout(setCursorTimer);
     }
 
-    if (shouldBlockInteractions()) {
-      return;
-    }
-
     const rect = canvas.getBoundingClientRect();
     const { clientX, clientY } = event;
 

js/dom.mjs

@@ -12,10 +12,28 @@ export function getPanelTools() {
   return document.getElementById("tools");
 }
 
+export function getToolButtons() {
+  return getPanelTools().querySelectorAll("tool-button");
+}
+
+export function getToolButtonById(id) {
+  return Array.from(getToolButtons()).find((button) => button.id === id);
+}
+
 export function getPanelToolVariants() {
   return document.getElementById("variants");
 }
 
+export function getVariantButtons() {
+  return getPanelToolVariants().querySelectorAll(
+    "variant-button,variant-stamp-button",
+  );
+}
+
+export function getVariantButtonById(id) {
+  return Array.from(getVariantButtons()).find((button) => button.id === id);
+}
+
 export function getPanelToolActions() {
   return document.getElementById("actions");
 }
@@ -24,6 +42,14 @@ export function getPanelColors() {
   return document.getElementById("colors");
 }
 
+export function getColorButtons() {
+  return getPanelColors().querySelectorAll("color-button");
+}
+
+export function getColorButtonByColor(color) {
+  return Array.from(getColorButtons()).find((button) => button.color === color);
+}
+
 export function getPanel() {
   return document.getElementById("panel");
 }

js/state/actions/cam.mjs

@@ -6,7 +6,6 @@ import {
   getCountdownAnimationLengthInSeconds,
   getFlashAnimationLengthInSeconds,
 } from "../../dom.mjs";
-import { blockInteractions, unblockInteractions } from "../actions/ui.mjs";
 
 function memorizePhoto({ state }) {
   state.set(() => ({
@@ -29,7 +28,6 @@ export function takePhoto({ state }) {
   const flashAnimationLength = getFlashAnimationLengthInSeconds() * 1000;
 
   insertCountdown();
-  blockInteractions({ state });
 
   const videoSettings = cam.srcObject.getVideoTracks()[0]?.getSettings();
   const height = canvas.height;
@@ -39,7 +37,6 @@ export function takePhoto({ state }) {
     ctx.drawImage(cam, canvas.width / 2 - width / 2, 0, width, height);
     memorizePhoto({ state });
     removeCountdown();
-    unblockInteractions({ state });
   }, countdownAnimationLength + flashAnimationLength);
 }
 

js/state/actions/ui.mjs

@@ -1,17 +1,5 @@
 import { getInfoDialog } from "../../dom.mjs";
 
-export function blockInteractions({ state }) {
-  state.set(() => ({
-    blockedInteractions: true,
-  }));
-}
-
-export function unblockInteractions({ state }) {
-  state.set(() => ({
-    blockedInteractions: false,
-  }));
-}
-
 export function showInfo() {
   const dialog = getInfoDialog();
   const closeButton = dialog.querySelector("#close-info");

js/state/state.mjs

@@ -17,7 +17,6 @@ export function createState() {
     color: loadColor(),
     gamepad: null,
     photoMemorized: false,
-    blockedInteractions: false,
     gamepadBlocked: false,
   };
 

js/tools/fill.mjs

@@ -4,10 +4,6 @@ import {
   isPrimaryGamepadButtonPressed,
 } from "../controls/gamepad.mjs";
 import { isWithinCanvasBounds } from "../canvas.mjs";
-import {
-  blockInteractions,
-  unblockInteractions,
-} from "../state/actions/ui.mjs";
 
 function hexToRGB(h) {
   let r = 0,
@@ -53,9 +49,8 @@ function colorsMatch(a, b) {
 }
 
 // taken from SO: https://stackoverflow.com/a/56221940/3056783
-function floodFill(ctx, x, y, fillColor, { state }) {
+function floodFill(ctx, x, y, fillColor) {
   showLoader();
-  blockInteractions({ state });
   // read the pixels in the canvas
   const imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
 
@@ -83,7 +78,6 @@ function floodFill(ctx, x, y, fillColor, { state }) {
     ctx.putImageData(imageData, 0, 0);
   }
 
-  unblockInteractions({ state });
   hideLoader();
 }
 
@@ -131,18 +125,6 @@ export function activateFill({ state }) {
     window.removeEventListener("keydown", keyDown);
   }
 
-  function onBlockInteractionsChange(nextState, prevState) {
-    if (nextState.blockedInteractions === prevState.blockedInteractions) {
-      return;
-    }
-
-    if (nextState.blockedInteractions) {
-      deactivateListeners();
-    } else {
-      activateListeners();
-    }
-  }
-
   let wasPressed = false;
   function activateFillOnGamepadButtonPress() {
     const gamepad = getGamepad(state);
@@ -187,20 +169,9 @@ export function activateFill({ state }) {
     frame = null;
   }
 
-  const blockedInteractions = state.get(
-    (prevState) => prevState.blockedInteractions,
-  );
-
-  if (blockedInteractions) {
-    deactivateListeners();
-  } else {
-    activateListeners();
-  }
-
-  state.addListener(onBlockInteractionsChange);
+  activateListeners();
 
   return function dispose() {
     deactivateListeners();
-    state.removeListener(onBlockInteractionsChange);
   };
 }

js/tools/pen.mjs

@@ -201,27 +201,7 @@ export function activatePen({ state, variant }) {
     cancelGamepadAnimationFrame();
   }
 
-  function onBlockInteractionsChange(nextState, prevState) {
-    if (nextState.blockedInteractions === prevState.blockedInteractions) {
-      return;
-    }
-
-    if (nextState.blockedInteractions) {
-      deactivateListeners();
-    } else {
-      activateListeners();
-    }
-  }
-
-  const blockInteractions = state.get(
-    (prevState) => prevState.blockedInteractions,
-  );
-
-  if (blockInteractions) {
-    deactivateListeners();
-  } else {
-    activateListeners();
-  }
+  activateListeners();
 
   function updateColor(nextState, prevState) {
     if (nextState.color === prevState.color) {
@@ -243,13 +223,11 @@ export function activatePen({ state, variant }) {
     draw(nextState.cursor.x, nextState.cursor.y);
   }
 
-  state.addListener(onBlockInteractionsChange);
   state.addListener(updateColor);
   state.addListener(updatePath);
 
   return function dispose() {
     deactivateListeners();
-    state.removeListener(onBlockInteractionsChange);
     state.removeListener(updateColor);
     state.removeListener(updatePath);
   };