From a07f2835111dd4a5a012dddb2a7d4c769a4c79a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Remko=20Tron=C3=A7on?= <remko@el-tramo.be>
Date: Fri, 26 Jan 2024 21:36:50 +0100
Subject: [PATCH] thurtle: Add SETSCREENCOLOR command

---
 src/web/thurtle/draw.tsx    | 16 +++++++++++++++-
 src/web/thurtle/programs.ts |  2 ++
 src/web/thurtle/thurtle.fs  |  1 +
 src/web/thurtle/thurtle.tsx |  4 ++++
 4 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/web/thurtle/draw.tsx b/src/web/thurtle/draw.tsx
index e3b53ab..2c38523 100644
--- a/src/web/thurtle/draw.tsx
+++ b/src/web/thurtle/draw.tsx
@@ -15,6 +15,10 @@ type Path = {
   d: string[];
 };
 
+function color(n: number): string {
+  return "#" + n.toString(16).padStart(6, "0");
+}
+
 export default async function draw({
   program,
   drawEl,
@@ -32,6 +36,7 @@ export default async function draw({
   let rotation = 270;
   const position = { x: 0, y: 0 };
   const boundingBox = { minX: 0, minY: 0, maxX: 0, maxY: 0 };
+  let screenColor: number | null = null;
   let pen = PenState.Down;
   let visible = true;
   let isEmpty = true;
@@ -92,6 +97,9 @@ export default async function draw({
       const s = stack.pop();
       paths.push({ d: [`M ${position.x} ${position.y}`], strokeColor: s });
     });
+    forth.bind("setscreencolor", (stack) => {
+      screenColor = stack.pop();
+    });
 
     forth.bind("setxy", (stack) => {
       const y = stack.pop();
@@ -146,7 +154,7 @@ export default async function draw({
       <path
         xmlns="http://www.w3.org/2000/svg"
         d={path.d.join(" ")}
-        stroke={"#" + strokeColor.toString(16).padStart(6, "0")}
+        stroke={color(strokeColor)}
         stroke-width={strokeWidth + ""}
       />
     );
@@ -196,6 +204,12 @@ export default async function draw({
     );
   }
 
+  if (screenColor != null) {
+    drawEl.style.backgroundColor = color(screenColor);
+  } else {
+    drawEl.style.backgroundColor = "";
+  }
+
   drawEl.appendChild(pathsEl);
   if (showTurtle) {
     drawEl.appendChild(turtleEl);
diff --git a/src/web/thurtle/programs.ts b/src/web/thurtle/programs.ts
index 2e74255..b8b1c59 100644
--- a/src/web/thurtle/programs.ts
+++ b/src/web/thurtle/programs.ts
@@ -213,6 +213,7 @@ SIZE 0 PLANT
 160 CONSTANT <SPREAD>
 HEX 006A47 DECIMAL CONSTANT 🟩
 HEX 825E5C DECIMAL CONSTANT 🟫
+HEX A8D3FF DECIMAL CONSTANT 🟦
 
 VARIABLE RND
 134348 RND !
@@ -241,6 +242,7 @@ VARIABLE RND
   ⬅️
 ;
   
+🟦 SETSCREENCOLOR
 <SIZE> 0 🌱
 HIDETURTLE
 `,
diff --git a/src/web/thurtle/thurtle.fs b/src/web/thurtle/thurtle.fs
index 1f53b96..6f4caae 100644
--- a/src/web/thurtle/thurtle.fs
+++ b/src/web/thurtle/thurtle.fs
@@ -8,6 +8,7 @@
 : SHOWTURTLE ( -- ) 1 S" turtle" SCALL ;
 : SETPENSIZE ( n -- ) S" setpensize" SCALL ;
 : SETPENCOLOR ( n -- ) S" setpencolor" SCALL ;
+: SETSCREENCOLOR ( n -- ) S" setscreencolor" SCALL ;
 : SETXY ( n1 n2 -- ) S" setxy" SCALL ;
 : SETHEADING ( n -- ) S" setheading" SCALL ;
 
diff --git a/src/web/thurtle/thurtle.tsx b/src/web/thurtle/thurtle.tsx
index 7bf6a34..1d6c98c 100644
--- a/src/web/thurtle/thurtle.tsx
+++ b/src/web/thurtle/thurtle.tsx
@@ -368,6 +368,10 @@ const rootEl = (
                   <code>SETPENCOLOR ( n -- )</code>: Set the color of the drawed
                   strokes to RGB value <code>n</code> (default: 0).
                 </li>
+                <li>
+                  <code>SETSCREENCOLOR ( n -- )</code>: Set the color of the
+                  screen to RGB value <code>n</code>.
+                </li>
                 <li>
                   <code>HIDETURTLE ( -- )</code>: Hide the turtle.
                 </li>