Add link to WASM demo

.gitignore

@@ -1,2 +1,3 @@
 .idea
 *.sh
+*.wasm

README.md

@@ -6,6 +6,10 @@ On-screen keyboard widget for [ebiten](https://github.com/hajimehoshi/ebiten)
 
 **Currently in pre-alpha state. Here be dragons.**
 
+## Demo
+
+[**Try kibodo**](https://kibodo.rocketnine.space)
+
 ## Documentation
 
 Documentation is available via [godoc](https://docs.rocketnine.space/code.rocketnine.space/tslocum/kibodo).

demos/kibodo/game/game.go

@@ -20,6 +20,8 @@ type game struct {
 	op *ebiten.DrawImageOptions
 
 	spinnerIndex int
+
+	buffer *ebiten.Image
 }
 
 var spinner = []byte(`-\|/`)
@@ -87,6 +89,8 @@ func (g *game) Layout(outsideWidth, outsideHeight int) (int, int) {
 
 	g.w, g.h = outsideWidth, outsideHeight
 
+	g.buffer = ebiten.NewImageFromImage(image.NewRGBA(image.Rect(0, 0, g.w, g.h)))
+
 	sizeH := 200
 	g.k.SetRect(0, sizeH, g.w, g.h-sizeH)
 
@@ -104,13 +108,12 @@ func (g *game) Update() error {
 func (g *game) Draw(screen *ebiten.Image) {
 	g.k.Draw(screen)
 
-	debugBox := image.NewRGBA(image.Rect(0, 0, g.w, g.h))
-	debugImg := ebiten.NewImageFromImage(debugBox)
-	ebitenutil.DebugPrint(debugImg, fmt.Sprintf("FPS %0.0f %c\nTPS %0.0f\n\n%s", ebiten.CurrentFPS(), spinner[g.spinnerIndex], ebiten.CurrentTPS(), g.userInput))
+	g.buffer.Clear()
+	ebitenutil.DebugPrint(g.buffer, fmt.Sprintf("FPS %0.0f %c\nTPS %0.0f\n\n%s", ebiten.CurrentFPS(), spinner[g.spinnerIndex], ebiten.CurrentTPS(), g.userInput))
 	g.op.GeoM.Reset()
 	g.op.GeoM.Translate(3, 0)
 	g.op.GeoM.Scale(2, 2)
-	screen.DrawImage(debugImg, g.op)
+	screen.DrawImage(g.buffer, g.op)
 
 	g.spinnerIndex++
 	if g.spinnerIndex == 4 {

demos/kibodo/main.go

@@ -10,8 +10,9 @@ import (
 func main() {
 	ebiten.SetWindowTitle("キーボード")
 	ebiten.SetWindowResizable(true)
-	ebiten.SetFPSMode(ebiten.FPSModeVsyncOffMinimum)
+
 	ebiten.SetMaxTPS(60)
+	ebiten.SetFPSMode(ebiten.FPSModeVsyncOffMinimum)
 
 	g := game.NewDemoGame()
 	if err := ebiten.RunGame(g); err != nil {

keyboard.go

@@ -34,7 +34,8 @@ type Keyboard struct {
 
 	op *ebiten.DrawImageOptions
 
-	backgroundColor color.Color
+	backgroundColor     color.Color
+	lastBackgroundColor color.Color
 
 	shift bool
 
@@ -114,6 +115,10 @@ func (k *Keyboard) SetHideShortcuts(shortcuts []ebiten.Key) {
 }
 
 func (k *Keyboard) updateKeyRects() {
+	if len(k.keys) == 0 {
+		return
+	}
+
 	maxCells := 0
 	for _, rowKeys := range k.keys {
 		if len(rowKeys) > maxCells {
@@ -126,7 +131,12 @@ func (k *Keyboard) updateKeyRects() {
 
 	cellH := (k.h - (cellPaddingH * (len(k.keys) - 1))) / len(k.keys)
 
-	for row, rowKeys := range k.keys {
+	row := 0
+	for _, rowKeys := range k.keys {
+		if len(rowKeys) == 0 {
+			continue
+		}
+
 		cellW := (k.w - (cellPaddingW * (len(rowKeys) - 1))) / len(rowKeys)
 
 		for i, key := range rowKeys {
@@ -139,6 +149,9 @@ func (k *Keyboard) updateKeyRects() {
 				key.w = k.w - key.x
 			}
 		}
+
+		// Count non-empty rows only
+		row++
 	}
 }
 
@@ -286,9 +299,12 @@ func (k *Keyboard) drawBackground() {
 		return
 	}
 
-	debugBox := image.NewRGBA(image.Rect(0, 0, k.w, k.h))
-	buffer := ebiten.NewImageFromImage(debugBox)
-	buffer.Fill(k.backgroundColor)
+	if k.background == nil || k.background.Bounds() != image.Rect(0, 0, k.w, k.h) || k.backgroundColor != k.lastBackgroundColor {
+		k.background = ebiten.NewImageFromImage(image.NewRGBA(image.Rect(0, 0, k.w, k.h)))
+		k.background.Fill(k.backgroundColor)
+
+		k.lastBackgroundColor = k.backgroundColor
+	}
 
 	for _, rowKeys := range k.keys {
 		for _, key := range rowKeys {
@@ -311,19 +327,17 @@ func (k *Keyboard) drawBackground() {
 			text.Draw(img, label, k.labelFont, x, y, color.White)
 
 			if key.pressed {
-				k.op.ColorM.Scale(1, 1, 1, 0.6)
+				k.op.ColorM.Scale(0.75, 0.75, 0.75, 1)
 			}
 
 			// Draw key
 			k.op.GeoM.Reset()
 			k.op.GeoM.Translate(float64(key.x), float64(key.y))
-			buffer.DrawImage(img, k.op)
+			k.background.DrawImage(img, k.op)
 
 			k.op.ColorM.Reset()
 		}
 	}
-
-	k.background = buffer
 }
 
 // Draw draws the widget on the provided image.

keyboard_test.go

@@ -0,0 +1,22 @@
+package kibodo
+
+import (
+	"testing"
+)
+
+func BenchmarkKeyboard_Draw(b *testing.B) {
+	ch := make(chan *Input, 10)
+
+	k := NewKeyboard()
+	k.SetRect(0, 0, 100, 100)
+	k.Show(ch)
+
+	// Warm caches
+	k.drawBackground()
+
+	b.ReportAllocs()
+	b.ResetTimer()
+	for i := 0; i < b.N; i++ {
+		k.drawBackground()
+	}
+}