feat: game draw APIs

Author: mirkobrombin

docs/articles/api/game-draw.md

@@ -0,0 +1,18 @@
+# game draw
+
+Declarative helpers for issuing 2D canvas drawing commands.
+
+| Function | Description |
+| --- | --- |
+| `NewCanvas(el dom.Element) (Canvas, bool)` | Acquire a 2D rendering surface from a `<canvas>` element. |
+| `(Canvas).Valid() bool` | Report whether the canvas has an active 2D context. |
+| `(Canvas).SetSize(width, height float64)` | Update the backing canvas width and height in pixels. |
+| `(Canvas).Draw(cmds ...Command)` | Execute the provided drawing commands, skipping `nil` entries. |
+| `Rectangle(x, y, width, height float64) *Rect` | Create a rectangle command for the given bounds. |
+| `(*Rect).Fill(color string) *Rect` | Set the rectangle fill color. |
+| `(*Rect).Stroke(color string, width float64) *Rect` | Set the rectangle stroke color and width. |
+| `Disc(x, y, radius float64) *Circle` | Create a circle command centered at the provided coordinates. |
+| `(*Circle).Fill(color string) *Circle` | Set the circle fill color. |
+| `(*Circle).Stroke(color string, width float64) *Circle` | Set the circle stroke color and width. |
+| `Segment(x1, y1, x2, y2 float64) *Line` | Create a line segment command between the two points. |
+| `(*Line).Stroke(color string, width float64) *Line` | Set the line stroke color and width. |

docs/articles/api/index.md

@@ -64,6 +64,7 @@ The full set of API references is listed below:
 - [webgl](webgl)
 - [math](math)
 - [game loop](game-loop)
+- [game draw](game-draw)
 - [scene](scene)
 - [netcode](netcode)
 - [pathfinding](pathfinding)

docs/articles/sidebar.json

@@ -338,6 +338,10 @@
         "title": "game loop",
         "path": "api/game-loop.md"
       },
+      {
+        "title": "game draw",
+        "path": "api/game-draw.md"
+      },
       {
         "title": "scene",
         "path": "api/scene.md"

docs/examples/components/multiplayer_component.go

@@ -14,6 +14,7 @@ import (
 	core "github.com/rfwlab/rfw/v1/core"
 	dom "github.com/rfwlab/rfw/v1/dom"
 	events "github.com/rfwlab/rfw/v1/events"
+	draw "github.com/rfwlab/rfw/v1/game/draw"
 	hostclient "github.com/rfwlab/rfw/v1/hostclient"
 	js "github.com/rfwlab/rfw/v1/js"
 	"github.com/rfwlab/rfw/v1/netcode"
@@ -62,8 +63,7 @@ type multiplayerComponent struct {
 	cancelFuncs  []func()
 	stop         chan struct{}
 	sessionID    string
-	canvas       js.Value
-	ctx          js.Value
+	surface      draw.Canvas
 }
 
 // NewMultiplayerComponent renders the multiplayer arena example page.
@@ -82,11 +82,12 @@ func (c *multiplayerComponent) OnMount() {
 	doc := dom.Doc()
 	canvas := doc.ByID("mp-canvas")
 	if !canvas.IsNull() && !canvas.IsUndefined() {
-		canvas.Set("width", int(arenaWidth))
-		canvas.Set("height", int(arenaHeight))
-		c.canvas = canvas.Value
-		c.ctx = canvas.Call("getContext", "2d")
-		c.ctx.Set("lineWidth", 2)
+		if surface, ok := draw.NewCanvas(canvas); ok {
+			surface.SetSize(arenaWidth, arenaHeight)
+			c.surface = surface
+		} else {
+			c.surface = draw.Canvas{}
+		}
 	}
 
 	c.cancelFuncs = []func(){
@@ -109,6 +110,7 @@ func (c *multiplayerComponent) OnUnmount() {
 	}
 	c.cancelFuncs = nil
 	c.client = nil
+	c.surface = draw.Canvas{}
 }
 
 func (c *multiplayerComponent) loop() {
@@ -222,39 +224,33 @@ func (c *multiplayerComponent) consumeShoot() bool {
 }
 
 func (c *multiplayerComponent) render(state mpSnapshot) {
-	if !c.ctx.Truthy() {
+	if !c.surface.Valid() {
 		return
 	}
-	c.ctx.Set("fillStyle", "#0f172a")
-	c.ctx.Call("fillRect", 0, 0, arenaWidth, arenaHeight)
 
-	c.ctx.Set("fillStyle", "#f8fafc")
+	commands := make([]draw.Command, 0, 1+len(state.Bullets)+len(state.Players)*3)
+	commands = append(commands, draw.Rectangle(0, 0, arenaWidth, arenaHeight).Fill(arenaBackground))
+
 	for _, bullet := range state.Bullets {
-		c.ctx.Call("beginPath")
-		c.ctx.Call("arc", bullet.X, bullet.Y, bulletRadius, 0, math.Pi*2, false)
-		c.ctx.Call("fill")
+		commands = append(commands, draw.Disc(bullet.X, bullet.Y, bulletRadius).Fill(bulletColor))
 	}
 
 	for id, player := range state.Players {
-		c.ctx.Set("fillStyle", player.Color)
-		c.ctx.Call("beginPath")
-		c.ctx.Call("arc", player.X, player.Y, playerRadius, 0, math.Pi*2, false)
-		c.ctx.Call("fill")
+		marker := draw.Disc(player.X, player.Y, playerRadius).Fill(player.Color)
 		if id == c.sessionID {
-			c.ctx.Set("strokeStyle", "#ffffff")
-			c.ctx.Call("stroke")
+			marker.Stroke(activePlayerStroke, outlineWidth)
 		}
+		commands = append(commands, marker)
 		if !player.Alive {
-			c.ctx.Set("strokeStyle", "rgba(15, 23, 42, 0.7)")
-			c.ctx.Call("beginPath")
-			c.ctx.Call("moveTo", player.X-playerRadius, player.Y-playerRadius)
-			c.ctx.Call("lineTo", player.X+playerRadius, player.Y+playerRadius)
-			c.ctx.Call("moveTo", player.X-playerRadius, player.Y+playerRadius)
-			c.ctx.Call("lineTo", player.X+playerRadius, player.Y-playerRadius)
-			c.ctx.Call("stroke")
+			commands = append(commands,
+				draw.Segment(player.X-playerRadius, player.Y-playerRadius, player.X+playerRadius, player.Y+playerRadius).Stroke(eliminatedStroke, outlineWidth),
+				draw.Segment(player.X-playerRadius, player.Y+playerRadius, player.X+playerRadius, player.Y-playerRadius).Stroke(eliminatedStroke, outlineWidth),
+			)
 		}
 	}
 
+	c.surface.Draw(commands...)
+
 	c.updateHUD(state)
 }
 
@@ -301,14 +297,14 @@ func (c *multiplayerComponent) updateHUD(state mpSnapshot) {
 	message := ""
 	if state.Winner != "" {
 		if state.Winner == c.sessionID {
-			message = "Hai vinto! Ultimo in piedi."
+			message = "You won! Last player standing."
 		} else if winner, ok := state.Players[state.Winner]; ok {
-			message = fmt.Sprintf("Vince il giocatore %s", shortID(winner.ID))
+			message = fmt.Sprintf("Player %s wins", shortID(winner.ID))
 		} else {
-			message = "Partita conclusa."
+			message = "Match finished."
 		}
 	} else if player, ok := state.Players[c.sessionID]; ok && !player.Alive {
-		message = "Game over! Premi WASD per muoverti quando inizia un nuovo round."
+		message = "Game over! Press WASD to move when the next round starts."
 	}
 	statusEl.SetText(message)
 }
@@ -330,8 +326,13 @@ func shortID(id string) string {
 }
 
 const (
-	bulletRadius = 6.0
-	playerRadius = 18.0
-	arenaWidth   = 800.0
-	arenaHeight  = 520.0
+	bulletRadius       = 6.0
+	playerRadius       = 18.0
+	arenaWidth         = 800.0
+	arenaHeight        = 520.0
+	outlineWidth       = 2.0
+	arenaBackground    = "#0f172a"
+	bulletColor        = "#f8fafc"
+	activePlayerStroke = "#ffffff"
+	eliminatedStroke   = "rgba(15, 23, 42, 0.7)"
 )

v1/game/draw/canvas.go

@@ -0,0 +1,154 @@
+package draw
+
+// Canvas represents a 2D drawing surface built on top of a canvas element.
+type Canvas struct {
+	impl canvasImpl
+}
+
+type canvasImpl interface {
+	valid() bool
+	setSize(width, height float64)
+	drawRect(Rect)
+	drawCircle(Circle)
+	drawLine(Line)
+}
+
+// Valid reports whether the canvas is ready for drawing commands.
+func (c Canvas) Valid() bool {
+	if c.impl == nil {
+		return false
+	}
+	return c.impl.valid()
+}
+
+// SetSize updates the backing canvas dimensions.
+func (c Canvas) SetSize(width, height float64) {
+	if c.impl == nil {
+		return
+	}
+	c.impl.setSize(width, height)
+}
+
+// Draw executes the provided commands in order when the canvas is valid.
+func (c Canvas) Draw(cmds ...Command) {
+	if !c.Valid() {
+		return
+	}
+	for _, cmd := range cmds {
+		if cmd != nil {
+			cmd.draw(c)
+		}
+	}
+}
+
+func (c Canvas) drawRect(r Rect) {
+	if c.impl == nil {
+		return
+	}
+	c.impl.drawRect(r)
+}
+
+func (c Canvas) drawCircle(circle Circle) {
+	if c.impl == nil {
+		return
+	}
+	c.impl.drawCircle(circle)
+}
+
+func (c Canvas) drawLine(line Line) {
+	if c.impl == nil {
+		return
+	}
+	c.impl.drawLine(line)
+}
+
+// Command represents a draw instruction that can be executed on a Canvas.
+type Command interface {
+	draw(Canvas)
+}
+
+// Rect describes a rectangle drawing command.
+type Rect struct {
+	X, Y          float64
+	Width, Height float64
+	fillColor     string
+	strokeColor   string
+	strokeWidth   float64
+}
+
+// Rectangle returns a rectangle command builder for the given bounds.
+func Rectangle(x, y, width, height float64) *Rect {
+	return &Rect{X: x, Y: y, Width: width, Height: height}
+}
+
+// Fill configures the fill color for the rectangle.
+func (r *Rect) Fill(color string) *Rect {
+	r.fillColor = color
+	return r
+}
+
+// Stroke configures the stroke color and width for the rectangle outline.
+func (r *Rect) Stroke(color string, width float64) *Rect {
+	r.strokeColor = color
+	r.strokeWidth = width
+	return r
+}
+
+func (r *Rect) draw(c Canvas) {
+	c.drawRect(*r)
+}
+
+// Circle describes a circle drawing command.
+type Circle struct {
+	X, Y        float64
+	Radius      float64
+	fillColor   string
+	strokeColor string
+	strokeWidth float64
+}
+
+// Disc returns a circle command builder centered at the provided coordinates.
+func Disc(x, y, radius float64) *Circle {
+	return &Circle{X: x, Y: y, Radius: radius}
+}
+
+// Fill configures the fill color for the circle.
+func (c *Circle) Fill(color string) *Circle {
+	c.fillColor = color
+	return c
+}
+
+// Stroke configures the stroke color and width for the circle outline.
+func (c *Circle) Stroke(color string, width float64) *Circle {
+	c.strokeColor = color
+	c.strokeWidth = width
+	return c
+}
+
+func (c *Circle) draw(canvas Canvas) {
+	canvas.drawCircle(*c)
+}
+
+// Line describes a line segment drawing command.
+type Line struct {
+	X1, Y1      float64
+	X2, Y2      float64
+	strokeColor string
+	strokeWidth float64
+}
+
+// Segment returns a line command builder for the provided endpoints.
+func Segment(x1, y1, x2, y2 float64) *Line {
+	return &Line{X1: x1, Y1: y1, X2: x2, Y2: y2}
+}
+
+// Stroke configures the stroke color and width for the line.
+func (l *Line) Stroke(color string, width float64) *Line {
+	l.strokeColor = color
+	l.strokeWidth = width
+	return l
+}
+
+func (l *Line) draw(c Canvas) {
+	c.drawLine(*l)
+}