@edadma/logo 0.2.4 → 0.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edadma/logo",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "description": "Logo programming language interpreter",
   "main": "dist/main.js",
   "module": "dist/main.js",

package/src/main/scala/io/github/edadma/logo/LogoJS.scala

@@ -57,6 +57,8 @@ class LogoJS(canvas: html.Canvas) extends js.Object:
   private var autoRender: Boolean = true
   private var initialized: Boolean = false
   private var backgroundColor: String = "white"
+  private var foregroundColor: (Int, Int, Int) = (0, 0, 0) // RGB for theme-aware drawing
+  private var isDarkMode: Boolean = false
   private var eventHandler: Option[js.Function0[Unit]] = None
 
   private val logo = new Logo:
@@ -98,11 +100,16 @@ class LogoJS(canvas: html.Canvas) extends js.Object:
   /** Set the canvas background color */
   def setBackgroundColor(color: String): Unit =
     backgroundColor = color
+    val (r, g, b) = parseColor(color)
+    // Calculate luminance to determine if dark mode
+    val luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255
+    isDarkMode = luminance < 0.5
     render()
 
-  /** Set the default pen color (used after clear) */
+  /** Set the default pen color (used after clear and for theme-aware drawing) */
   def setForegroundColor(color: String): Unit =
     val rgb = parseColor(color)
+    foregroundColor = rgb
     logo.setDefaultColor(rgb)
     render()
 
@@ -172,21 +179,33 @@ class LogoJS(canvas: html.Canvas) extends js.Object:
     val lines = js.Array[LineData]()
     val labels = js.Array[LabelData]()
     val arcs = js.Array[ArcData]()
+    var currentColor: (Int, Int, Int) = foregroundColor
+    var currentWidth: Double = 1.0
 
     logo.drawing.foreach {
-      case DrawLine(x1, y1, x2, y2, (r, g, b), width) =>
+      case DrawSetColor(colorOpt) =>
+        currentColor = colorOpt.getOrElse(foregroundColor)
+
+      case DrawSetWidth(width) =>
+        currentWidth = width
+
+      case DrawLine(x1, y1, x2, y2) =>
+        val (r, g, b) = currentColor
         lines.push(js.Dynamic.literal(
           x1 = x1, y1 = y1, x2 = x2, y2 = y2,
-          color = s"rgb($r,$g,$b)", width = width
+          color = s"rgb($r,$g,$b)", width = currentWidth
         ).asInstanceOf[LineData])
+
       case DrawLabel(x, y, heading, text) =>
         labels.push(js.Dynamic.literal(
           x = x, y = y, heading = heading, text = text
         ).asInstanceOf[LabelData])
-      case DrawArc(x, y, heading, angle, radius, (r, g, b), width) =>
+
+      case DrawArc(x, y, heading, angle, radius) =>
+        val (r, g, b) = currentColor
         arcs.push(js.Dynamic.literal(
           x = x, y = y, heading = heading, angle = angle, radius = radius,
-          color = s"rgb($r,$g,$b)", width = width
+          color = s"rgb($r,$g,$b)", width = currentWidth
         ).asInstanceOf[ArcData])
     }
 
@@ -203,6 +222,8 @@ class LogoJS(canvas: html.Canvas) extends js.Object:
   private def renderWithPaths(): Unit =
     case class Style(color: (Int, Int, Int), width: Double)
 
+    var currentColor: (Int, Int, Int) = foregroundColor
+    var currentWidth: Double = 1.0
     var currentStyle: Option[Style] = None
     var pathStarted = false
     var lastX: Double = 0
@@ -220,8 +241,14 @@ class LogoJS(canvas: html.Canvas) extends js.Object:
         currentStyle = None
 
     logo.drawing.foreach {
-      case DrawLine(x1, y1, x2, y2, color, width) =>
-        val style = Style(color, width)
+      case DrawSetColor(colorOpt) =>
+        currentColor = colorOpt.getOrElse(foregroundColor)
+
+      case DrawSetWidth(width) =>
+        currentWidth = width
+
+      case DrawLine(x1, y1, x2, y2) =>
+        val style = Style(currentColor, currentWidth)
 
         if !currentStyle.contains(style) then
           flushPath()
@@ -243,9 +270,9 @@ class LogoJS(canvas: html.Canvas) extends js.Object:
         lastX = x2
         lastY = y2
 
-      case DrawArc(x, y, heading, angleDeg, radius, color, width) =>
+      case DrawArc(x, y, heading, angleDeg, radius) =>
         flushPath()
-        renderArc(x, y, heading, angleDeg, radius, color, width)
+        renderArc(x, y, heading, angleDeg, radius, currentColor, currentWidth)
 
       case DrawLabel(x, y, heading, text) =>
         flushPath()
@@ -255,17 +282,27 @@ class LogoJS(canvas: html.Canvas) extends js.Object:
     flushPath()
 
   private def renderWithLines(): Unit =
+    var currentColor: (Int, Int, Int) = foregroundColor
+    var currentWidth: Double = 1.0
+
     logo.drawing.foreach {
-      case DrawLine(x1, y1, x2, y2, (r, g, b), width) =>
+      case DrawSetColor(colorOpt) =>
+        currentColor = colorOpt.getOrElse(foregroundColor)
+
+      case DrawSetWidth(width) =>
+        currentWidth = width
+
+      case DrawLine(x1, y1, x2, y2) =>
+        val (r, g, b) = currentColor
         ctx.strokeStyle = s"rgb($r,$g,$b)"
-        ctx.lineWidth = width
+        ctx.lineWidth = currentWidth
         ctx.beginPath()
         ctx.moveTo(x1, y1)
         ctx.lineTo(x2, y2)
         ctx.stroke()
 
-      case DrawArc(x, y, heading, angleDeg, radius, (r, g, b), width) =>
-        renderArc(x, y, heading, angleDeg, radius, (r, g, b), width)
+      case DrawArc(x, y, heading, angleDeg, radius) =>
+        renderArc(x, y, heading, angleDeg, radius, currentColor, currentWidth)
 
       case DrawLabel(x, y, heading, text) =>
         renderLabel(x, y, heading, text)
@@ -316,18 +353,25 @@ class LogoJS(canvas: html.Canvas) extends js.Object:
     ctx.translate(x, y)
     ctx.rotate(heading + Pi / 2)
 
+    // Theme-aware colors
+    val (shellFill, shellOutline, shellPattern, skinColor, skinOutline) =
+      if isDarkMode then
+        ("#2d5a27", "#1a3a18", "#3d7a37", "#4a7a44", "#1a3a18")
+      else
+        ("#5a9a50", "#3a6a38", "#7aba70", "#7ab070", "#3a6a38")
+
     // Tail (behind shell)
     ctx.beginPath()
     ctx.moveTo(0, 10)
     ctx.lineTo(0, 14)
-    ctx.strokeStyle = "#4a7a44"
+    ctx.strokeStyle = skinColor
     ctx.lineWidth = 2
     ctx.lineCap = "round"
     ctx.stroke()
 
     // Legs (behind shell)
-    ctx.fillStyle = "#4a7a44"
-    ctx.strokeStyle = "#1a3a18"
+    ctx.fillStyle = skinColor
+    ctx.strokeStyle = skinOutline
     ctx.lineWidth = 1
     // Front legs
     ctx.beginPath()
@@ -351,9 +395,9 @@ class LogoJS(canvas: html.Canvas) extends js.Object:
     // Head (behind shell)
     ctx.beginPath()
     ctx.ellipse(0, -14, 4, 5, 0, 0, 2 * Pi)
-    ctx.fillStyle = "#4a7a44"
+    ctx.fillStyle = skinColor
     ctx.fill()
-    ctx.strokeStyle = "#1a3a18"
+    ctx.strokeStyle = skinOutline
     ctx.lineWidth = 1.5
     ctx.stroke()
 
@@ -367,14 +411,14 @@ class LogoJS(canvas: html.Canvas) extends js.Object:
     // Shell (on top)
     ctx.beginPath()
     ctx.ellipse(0, 0, 8, 10, 0, 0, 2 * Pi)
-    ctx.fillStyle = "#2d5a27"
+    ctx.fillStyle = shellFill
     ctx.fill()
-    ctx.strokeStyle = "#1a3a18"
+    ctx.strokeStyle = shellOutline
     ctx.lineWidth = 1.5
     ctx.stroke()
 
     // Shell pattern
-    ctx.strokeStyle = "#3d7a37"
+    ctx.strokeStyle = shellPattern
     ctx.lineWidth = 1
     ctx.beginPath()
     ctx.ellipse(0, 0, 5, 6, 0, 0, 2 * Pi)