thurtle: Add SETSCREENCOLOR command

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);

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
 `,

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 ;
 

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>