From 1371c006e9e98e9a015dea584bb7aff274c0d4f2 Mon Sep 17 00:00:00 2001
From: lew <lew@ily.rs>
Date: Thu, 9 Apr 2026 23:55:26 +0100
Subject: [PATCH] refactor: just four swatches, fits with the aesthetic much
 better

---
 src/render.rs | 22 ++++++----------------
 1 file changed, 6 insertions(+), 16 deletions(-)

diff --git a/src/render.rs b/src/render.rs
index 0330efa..e8408b4 100644
--- a/src/render.rs
+++ b/src/render.rs
@@ -42,10 +42,10 @@ pub fn render_form(config: &Config) -> String {
         format!(
             r##"<label class="guestbook-label">{label}</label>
 <canvas class="guestbook-canvas" width="{w}" height="{h}"></canvas>
-<span class="guestbook-canvas-tools"><span class="guestbook-swatch active" data-c="#000" style="background:#000"></span><span class="guestbook-swatch" data-c="#e03131" style="background:#e03131"></span><span class="guestbook-swatch" data-c="#2f9e44" style="background:#2f9e44"></span><span class="guestbook-swatch" data-c="#1971c2" style="background:#1971c2"></span><span class="guestbook-swatch" data-c="#f08c00" style="background:#f08c00"></span><span class="guestbook-swatch" data-c="#9c36b5" style="background:#9c36b5"></span><span class="guestbook-swatch" data-c="#e64980" style="background:#e64980"></span><span class="guestbook-swatch" data-c="eraser" style="background:#fff" title="eraser"></span> <input type="range" class="guestbook-size-slider" min="1" max="20" value="5"> | <a href="#" class="guestbook-undo">undo</a> | <a href="#" class="guestbook-canvas-reset">reset</a></span><input type="hidden" name="drawing"><script>(function(){{
+<span class="guestbook-canvas-tools"><span class="guestbook-swatch active" data-c="#000" style="background:#000"></span><span class="guestbook-swatch" data-c="#e03131" style="background:#e03131"></span><span class="guestbook-swatch" data-c="#2f9e44" style="background:#2f9e44"></span><span class="guestbook-swatch" data-c="#1971c2" style="background:#1971c2"></span> <input type="range" class="guestbook-size-slider" min="1" max="20" value="5"> | <a href="#" class="guestbook-undo">undo</a> | <a href="#" class="guestbook-canvas-reset">reset</a></span><input type="hidden" name="drawing"><script>(function(){{
   var c=document.querySelector('.guestbook-canvas'),
       x=c.getContext('2d'),
-      d=false,lx,ly,h=[],col='#000',sz=5,eraser=false;
+      d=false,lx,ly,h=[],col='#000',sz=5;
   x.strokeStyle=col;x.lineWidth=sz;x.lineCap='round';x.lineJoin='round';
   function pos(e){{var r=c.getBoundingClientRect();
     return[e.clientX-r.left,e.clientY-r.top]}}
@@ -53,29 +53,19 @@ pub fn render_form(config: &Config) -> String {
     return[t.clientX-r.left,t.clientY-r.top]}}
   function save(){{if(h.length>=20)h.shift();
     h.push(x.getImageData(0,0,c.width,c.height))}}
-  function dot(px,py){{x.beginPath();x.arc(px,py,sz/2,0,Math.PI*2);
-    if(eraser){{x.save();x.globalCompositeOperation='destination-out';x.fillStyle='#000';x.fill();x.restore()}}
-    else{{x.fillStyle=col;x.fill()}}}}
+  function dot(px,py){{x.beginPath();x.arc(px,py,sz/2,0,Math.PI*2);x.fillStyle=col;x.fill()}}
   c.addEventListener('mousedown',function(e){{save();d=true;var p=pos(e);lx=p[0];ly=p[1];dot(lx,ly)}});
   c.addEventListener('mousemove',function(e){{if(!d)return;var p=pos(e);
-    if(eraser)x.globalCompositeOperation='destination-out';
-    x.beginPath();x.moveTo(lx,ly);x.lineTo(p[0],p[1]);x.stroke();
-    if(eraser)x.globalCompositeOperation='source-over';
-    lx=p[0];ly=p[1]}});
+    x.beginPath();x.moveTo(lx,ly);x.lineTo(p[0],p[1]);x.stroke();lx=p[0];ly=p[1]}});
   c.addEventListener('mouseup',function(){{d=false}});
   c.addEventListener('mouseleave',function(){{d=false}});
   c.addEventListener('touchstart',function(e){{e.preventDefault();save();var p=tpos(e);lx=p[0];ly=p[1];dot(lx,ly)}});
   c.addEventListener('touchmove',function(e){{e.preventDefault();var p=tpos(e);
-    if(eraser)x.globalCompositeOperation='destination-out';
-    x.beginPath();x.moveTo(lx,ly);x.lineTo(p[0],p[1]);x.stroke();
-    if(eraser)x.globalCompositeOperation='source-over';
-    lx=p[0];ly=p[1]}});
+    x.beginPath();x.moveTo(lx,ly);x.lineTo(p[0],p[1]);x.stroke();lx=p[0];ly=p[1]}});
   var sw=document.querySelectorAll('.guestbook-swatch');
   sw.forEach(function(s){{s.addEventListener('click',function(){{
     sw.forEach(function(el){{el.classList.remove('active')}});
-    s.classList.add('active');var c2=s.getAttribute('data-c');
-    if(c2==='eraser'){{eraser=true}}else{{eraser=false;col=c2;x.strokeStyle=col}}
-  }})}});
+    s.classList.add('active');col=s.getAttribute('data-c');x.strokeStyle=col}})}});
   document.querySelector('.guestbook-size-slider').addEventListener('input',function(e){{
     sz=parseInt(e.target.value);x.lineWidth=sz}});
   document.querySelector('.guestbook-undo').addEventListener('click',function(e){{