add handler option for html parsing func (#59)

examples/game/assets/html/main.html

@@ -168,7 +168,7 @@
 
         <div class="play-game-container">
             <panel class="play-game-panel" sprite="glassPanel_corners.png">
-                <play-game-text style="margin-bottom: 20px;">PLAY THE GAME?</play-game-text>
+                <play-game-text id="play-game-text" style="margin-bottom: 20px; width: 55%;"></play-game-text>
                 <div class="play-game-buttons">
                     <panel-button sprite="glassPanel_projection.png">YES</panel-button>
                     <panel-button sprite="glassPanel_projection.png" style="margin-left: 20px;">NO</panel-button>

examples/game/main.go

@@ -3,6 +3,7 @@ package main
 import (
 	"image/color"
 	"sync"
+	"time"
 
 	"github.com/hajimehoshi/ebiten/v2"
 	"github.com/tinne26/etxt"
@@ -88,10 +89,24 @@ func init() {
 	})
 }
 
+const playGameText = "Do you play game?"
+
 func (g *Game) setupUI() {
+	// These variables are used for text typing animation.
+	d := time.Duration(0)
+	c := 0
+
+	// Setup the UI parsed from HTML.
 	g.gameUI = furex.Parse(mainHTML, &furex.ParseOptions{
-		Width:  g.screen.Width,
+		// Width is size of the root view.
+		Width: g.screen.Width,
+		// Height is size of the root view.
 		Height: g.screen.Height,
+		// Components are custom components that can be used in HTML.
+		// The key is the tag name in HTML. There are three types of components:
+		// - Handler Instance: A `furex.Handler` instance, such as `Drawer` or `Updater`.
+		// - Factory Function: A function that returns a `furex.Handler` instance.
+		// - Function Component: A function that returns a `*furex.View` instance.
 		Components: furex.ComponentsMap{
 			"panel": &widgets.Panel{},
 			"gauge-text": func() *furex.View {
@@ -123,19 +138,35 @@ func (g *Game) setupUI() {
 			},
 			"play-game-text": func() *furex.View {
 				return &furex.View{
-					Width:      100,
 					Height:     8,
 					Direction:  furex.Row,
 					AlignItems: furex.AlignItemCenter,
-					Justify:    furex.JustifyCenter,
+					Justify:    furex.JustifyStart,
 					Handler: &widgets.Text{
 						Color:     color.RGBA{45, 73, 94, 255},
-						HorzAlign: etxt.XCenter,
+						HorzAlign: etxt.Left,
 						VertAlign: etxt.YCenter,
 					},
 				}
 			},
 		},
+		// Handler is called every frame for the root view.
+		Handler: furex.NewHandler(furex.HandlerOpts{
+			Update: func(v *furex.View) {
+				d += time.Second / 60
+				switch {
+				case c < len(playGameText) && d > time.Millisecond*100:
+					c = c + 1
+					d = 0
+				case d > time.Millisecond*1000:
+					c = 0
+					d = 0
+				}
+				// GetByID returns the view with the given ID.
+				// This is a equivalent of document.getElementById in HTML.
+				v.MustGetByID("play-game-text").Handler.(*widgets.Text).Text = playGameText[:c]
+			},
+		}),
 	})
 
 	// panels that draws mouse cursor

examples/game/widgets/text.go

@@ -16,6 +16,7 @@ type Text struct {
 	Shadow    bool
 	HorzAlign etxt.HorzAlign
 	VertAlign etxt.VertAlign
+	Text      string
 }
 
 var (
@@ -41,5 +42,9 @@ func (t *Text) Draw(screen *ebiten.Image, frame image.Rectangle, view *furex.Vie
 	}
 	text.R.SetAlign(t.VertAlign, t.HorzAlign)
 	text.R.SetTarget(screen)
-	text.R.Draw(view.Text, x, y)
+	if t.Text == "" {
+		text.R.Draw(view.Text, x, y)
+	} else {
+		text.R.Draw(t.Text, x, y)
+	}
 }

handler.go

@@ -107,3 +107,44 @@ type SwipeHandler interface {
 	// HandleSwipe handles swipes.
 	HandleSwipe(dir SwipeDirection)
 }
+
+type handler struct {
+	opts HandlerOpts
+}
+
+// HandlerOpts represents the options for a handler.
+type HandlerOpts struct {
+	Update        func(v *View)
+	Draw          func(screen *ebiten.Image, frame image.Rectangle, v *View)
+	HandlePress   func(x, y int, t ebiten.TouchID)
+	HandleRelease func(x, y int, isCancel bool)
+}
+
+// NewHandler creates a new handler.
+func NewHandler(opts HandlerOpts) Handler {
+	return &handler{opts: opts}
+}
+
+func (h *handler) Update(v *View) {
+	if h.opts.Update != nil {
+		h.opts.Update(v)
+	}
+}
+
+func (h *handler) Draw(screen *ebiten.Image, frame image.Rectangle, v *View) {
+	if h.opts.Draw != nil {
+		h.opts.Draw(screen, frame, v)
+	}
+}
+
+func (h *handler) HandlePress(x, y int, t ebiten.TouchID) {
+	if h.opts.HandlePress != nil {
+		h.opts.HandlePress(x, y, t)
+	}
+}
+
+func (h *handler) HandleRelease(x, y int, isCancel bool) {
+	if h.opts.HandleRelease != nil {
+		h.opts.HandleRelease(x, y, isCancel)
+	}
+}

html.go

@@ -42,6 +42,9 @@ type ParseOptions struct {
 	// outside of the HTML.
 	Width  int
 	Height int
+
+	// Handler is the handler for the root view.
+	Handler Handler
 }
 
 func Parse(input string, opts *ParseOptions) *View {
@@ -107,7 +110,9 @@ Loop:
 	if len(dummy.children) != 1 {
 		panic(fmt.Sprintf("invalid html: %s", input))
 	}
-	return dummy.PopChild()
+	view := dummy.PopChild()
+	view.Handler = opts.Handler
+	return view
 }
 
 func inlineCSS(doc string) string {