thurtle: Support colors

src/web/thurtle/draw.tsx

@@ -11,6 +11,7 @@ enum PenState {
 
 type Path = {
   strokeWidth?: number;
+  strokeColor?: number;
   d: string[];
 };
 
@@ -87,6 +88,11 @@ export default async function draw({
       paths.push({ d: [`M ${position.x} ${position.y}`], strokeWidth: s });
     });
 
+    forth.bind("setpencolor", (stack) => {
+      const s = stack.pop();
+      paths.push({ d: [`M ${position.x} ${position.y}`], strokeColor: s });
+    });
+
     forth.bind("setxy", (stack) => {
       const y = stack.pop();
       const x = stack.pop();
@@ -131,12 +137,17 @@ export default async function draw({
   );
 
   pathsEl.innerHTML = "";
+  let strokeWidth = 5;
+  let strokeColor = 0;
   for (const path of paths) {
+    strokeColor = path.strokeColor ?? strokeColor;
+    strokeWidth = path.strokeWidth ?? strokeWidth;
     const pathEl = (
       <path
         xmlns="http://www.w3.org/2000/svg"
         d={path.d.join(" ")}
-        stroke-width={(path.strokeWidth ?? 5) + ""}
+        stroke={"#" + strokeColor.toString(16).padStart(6, "0")}
+        stroke-width={strokeWidth + ""}
       />
     );
     pathsEl.appendChild(pathEl);

src/web/thurtle/jsx.ts

@@ -25,6 +25,7 @@ declare global {
       };
       path: JSXElement<SVGPathElement> & {
         xmlns: "http://www.w3.org/2000/svg";
+        stroke?: string;
         d?: string;
       };
       g: JSXElement<Omit<SVGGraphicsElement, "transform">> & {

src/web/thurtle/thurtle.css

@@ -31,7 +31,6 @@
 }
 
 .world path {
-  stroke: black;
   fill: white;
   fill-opacity: 0;
 }

src/web/thurtle/thurtle.fs

@@ -7,5 +7,6 @@
 : HIDETURTLE ( -- ) 0 S" turtle" SCALL ;
 : SHOWTURTLE ( -- ) 1 S" turtle" SCALL ;
 : SETPENSIZE ( n -- ) S" setpensize" SCALL ;
+: SETPENCOLOR ( n -- ) S" setpencolor" SCALL ;
 : SETXY ( n1 n2 -- ) S" setxy" SCALL ;
 : SETHEADING ( n -- ) S" setheading" SCALL ;

src/web/thurtle/thurtle.tsx

@@ -356,6 +356,10 @@ const rootEl = (
                   <code>SETPENSIZE ( n -- )</code>: Set the width of the drawed
                   strokes to <code>n</code> (default: 5).
                 </li>
+                <li>
+                  <code>SETPENCOLOR ( n -- )</code>: Set the color of the drawed
+                  strokes to RGB value <code>n</code> (default: 0).
+                </li>
                 <li>
                   <code>HIDETURTLE ( -- )</code>: Hide the turtle.
                 </li>