From c4e396d5aa3c0f63fe122756ca896e527fe59376 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ond=C5=99ej=20Syn=C3=A1=C4=8Dek?= Date: Sun, 30 Mar 2025 14:03:48 +0200 Subject: [PATCH 1/6] fix canvas on inital load & reset --- js/boot.mjs | 2 ++ js/canvas-utils.mjs | 8 ++++---- js/dom.mjs | 8 ++++++++ js/state/actions/canvas.mjs | 5 ++--- 4 files changed, 16 insertions(+), 7 deletions(-) diff --git a/js/boot.mjs b/js/boot.mjs index 3e3a1c3..ef6951a 100644 --- a/js/boot.mjs +++ b/js/boot.mjs @@ -3,6 +3,7 @@ import { getCursorCanvas, setCanvasSizeByViewport, setCanvasSizeWithoutPanel, + setCanvasFill, setVideoSizeByCanvasSize, } from "./dom.mjs"; import { @@ -29,6 +30,7 @@ function attachResizeListeners() { setCanvasSizeByViewport(cursorCanvas); setCanvasSizeWithoutPanel(canvas); setVideoSizeByCanvasSize(canvas); + setCanvasFill(canvas); attachWindowResizeListeners({ canvas, cursorCanvas }); } diff --git a/js/canvas-utils.mjs b/js/canvas-utils.mjs index 24dc175..efa536e 100644 --- a/js/canvas-utils.mjs +++ b/js/canvas-utils.mjs @@ -19,8 +19,8 @@ const LINE_WIDTH = 5; * * @returns {number[]} - Inverted color in r, g,b order. */ -function invertColor(r, g, b, a) { - const rgb = [r, g, b, a]; +function invertColor(r, g, b) { + const rgb = [r, g, b]; for (var i = 0; i < rgb.length; i++) rgb[i] = (i === 3 ? 1 : 255) - rgb[i]; return rgb; } @@ -42,9 +42,9 @@ function getPixelRGBAColor(x, y) { } const pixel = canvasCtx.getImageData(x, y, GAP, GAP); - const [r, g, b, a] = invertColor(...pixel.data); + const [r, g, b] = invertColor(...pixel.data); - return `rgb(${r}, ${g}, ${b}, ${Math.abs(a)})`; + return `rgb(${r}, ${g}, ${b})`; } export function drawCursor(x, y) { diff --git a/js/dom.mjs b/js/dom.mjs index 2665aee..7adb358 100644 --- a/js/dom.mjs +++ b/js/dom.mjs @@ -1,3 +1,5 @@ +import { COLOR } from "./state/constants.mjs"; + export function getCanvas() { return document.getElementById("canvas"); } @@ -53,6 +55,12 @@ export function setVideoSizeByCanvasSize(canvas) { video.style.height = `${canvas.height}px`; } +export function setCanvasFill(canvas) { + const ctx = canvas.getContext("2d"); + ctx.fillStyle = COLOR.WHITE; + ctx.fillRect(0, 0, canvas.width, canvas.height); +} + export function insertCountdown() { const countdown = document.createElement("div"); countdown.id = "countdown"; diff --git a/js/state/actions/canvas.mjs b/js/state/actions/canvas.mjs index e0fa8e3..3d30033 100644 --- a/js/state/actions/canvas.mjs +++ b/js/state/actions/canvas.mjs @@ -1,11 +1,10 @@ -import { getCanvas } from "../../dom.mjs"; +import { getCanvas, setCanvasFill } from "../../dom.mjs"; import { storeCanvas } from "../storage.mjs"; export function resetCanvas() { const canvas = getCanvas(); - const ctx = canvas.getContext("2d"); - ctx.clearRect(0, 0, canvas.width, canvas.height); + setCanvasFill(canvas); storeCanvas(canvas); } From 45b3663e2a60906e75af8104c86e556de1ccc324 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ond=C5=99ej=20Syn=C3=A1=C4=8Dek?= Date: Sun, 30 Mar 2025 14:11:16 +0200 Subject: [PATCH 2/6] load version dynamically --- index.html | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 2dd0219..6e101c9 100644 --- a/index.html +++ b/index.html @@ -84,6 +84,19 @@

New version available

+

sdraw

sdraw /> 
MIT License
- 
Version: 0.1.2
+ 
Version
2023
From 6a687c35f2909a314263f8af1d60e417a23cb730 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ond=C5=99ej=20Syn=C3=A1=C4=8Dek?= Date: Sun, 30 Mar 2025 14:13:25 +0200 Subject: [PATCH 3/6] refactor: move to correct util file --- js/canvas-utils.mjs | 2 +- js/ui-utils.mjs | 12 ------------ js/ui/panel.mjs | 2 +- js/ui/utils.mjs | 13 +++++++++++++ 4 files changed, 15 insertions(+), 14 deletions(-) delete mode 100644 js/ui-utils.mjs diff --git a/js/canvas-utils.mjs b/js/canvas-utils.mjs index efa536e..01a6803 100644 --- a/js/canvas-utils.mjs +++ b/js/canvas-utils.mjs @@ -1,7 +1,7 @@ import { COLOR } from "./state/constants.mjs"; import { getCursorCanvas, getCanvas } from "./dom.mjs"; import { getPanel } from "./dom.mjs"; -import { isCursorWithinPanelBounds } from "./ui-utils.mjs"; +import { isCursorWithinPanelBounds } from "./ui/utils.mjs"; const ctx = getCursorCanvas().getContext("2d"); const canvasCtx = getCanvas().getContext("2d"); diff --git a/js/ui-utils.mjs b/js/ui-utils.mjs deleted file mode 100644 index f4b5b99..0000000 --- a/js/ui-utils.mjs +++ /dev/null @@ -1,12 +0,0 @@ -/** - * Is cursor located on UI panel? - * - * @param {number} x - Cursor x coordinate. - * @param {number} y - Cursor y coordinate. - * @param {DOMRect} rect - Panel bounds. - * - * @returns {boolean} - Is cursor located on UI panel? - */ -export function isCursorWithinPanelBounds(x, y, rect) { - return x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom; -} diff --git a/js/ui/panel.mjs b/js/ui/panel.mjs index 2ad51ca..316c0e6 100644 --- a/js/ui/panel.mjs +++ b/js/ui/panel.mjs @@ -3,7 +3,7 @@ import { isPrimaryGamepadButtonPressed, } from "../controls/gamepad.mjs"; import { getPanel } from "../dom.mjs"; -import { isCursorWithinPanelBounds } from "../ui-utils.mjs"; +import { isCursorWithinPanelBounds } from "./utils.mjs"; function getPanelButtonByCoordinates(x, y, panel) { const buttons = panel.querySelectorAll("button"); diff --git a/js/ui/utils.mjs b/js/ui/utils.mjs index 67d32d1..89b5704 100644 --- a/js/ui/utils.mjs +++ b/js/ui/utils.mjs @@ -38,3 +38,16 @@ export function updateActivatedButton(buttonContainer, value) { } }); } + +/** + * Is cursor located on UI panel? + * + * @param {number} x - Cursor x coordinate. + * @param {number} y - Cursor y coordinate. + * @param {DOMRect} rect - Panel bounds. + * + * @returns {boolean} - Is cursor located on UI panel? + */ +export function isCursorWithinPanelBounds(x, y, rect) { + return x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom; +} From 65f75dc914520e0860c38b95f3e921020ba5eef5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ond=C5=99ej=20Syn=C3=A1=C4=8Dek?= Date: Sun, 30 Mar 2025 14:13:52 +0200 Subject: [PATCH 4/6] store package.json in service worker --- service-worker.js | 1 + 1 file changed, 1 insertion(+) diff --git a/service-worker.js b/service-worker.js index 0897e4b..48738fe 100644 --- a/service-worker.js +++ b/service-worker.js @@ -10,6 +10,7 @@ const STATIC_ASSETS = [ "favicon.ico", "manifest.json", "README.md", + "package.json", /* JS */ "index.mjs", From ac27fc25e2c48c8ab997e78c37fa34859e69a568 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ond=C5=99ej=20Syn=C3=A1=C4=8Dek?= Date: Sun, 30 Mar 2025 14:14:15 +0200 Subject: [PATCH 5/6] bump cache --- service-worker.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/service-worker.js b/service-worker.js index 48738fe..1e98fda 100644 --- a/service-worker.js +++ b/service-worker.js @@ -1,5 +1,5 @@ const STATIC_CACHE_NAME = "static"; -const STATIC_CACHE_VERSION = "v41"; +const STATIC_CACHE_VERSION = "v42"; const STATIC_CACHE_ID = `${STATIC_CACHE_NAME}-${STATIC_CACHE_VERSION}`; // All the files need to be added here manually. I want to avoid From d8fb418e01675727917e7252689c3bf9ae569737 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ond=C5=99ej=20Syn=C3=A1=C4=8Dek?= Date: Sun, 30 Mar 2025 14:14:32 +0200 Subject: [PATCH 6/6] 0.1.4 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 935b4c5..2d5d4e4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "sdraw", - "version": "0.1.3", + "version": "0.1.4", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "sdraw", - "version": "0.1.3", + "version": "0.1.4", "license": "MIT", "devDependencies": { "eslint": "^8.52.0", diff --git a/package.json b/package.json index a2eef95..4630d18 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "sdraw", - "version": "0.1.3", + "version": "0.1.4", "description": "Simple drawing application for kids, can be controlled via mouse, keyboard or gamepad.", "private": true, "main": "index.mjs",