Update UI System

city/core/ui/button.go

@@ -13,29 +13,16 @@ type Button struct {
 	Image        *common.Texture
 	ImagePressed *common.Texture
 
-	Position  engo.Point
-	Width     float32
-	Height    float32
 	TextAlign int
 }
 
-func (b *Button) OnClick(f func()) {
-	if b.MessageListener == nil {
-		b.MessageListener = &engo.MessageManager{}
-	}
-	b.MessageListener.Listen("UIMouseEvent", func(engo.Message) {
-		f()
-	})
-}
-
 func NewButton(b Button) *Button {
 
 	b.BasicEntity = ecs.NewBasic()
 
 	b.SpaceComponent = common.SpaceComponent{
-		Position: b.Position,
-		Width:    b.Width,
-		Height:   b.Height,
+		Width:  b.Width,
+		Height: b.Height,
 	}
 
 	b.RenderComponent = common.RenderComponent{
@@ -45,22 +32,16 @@ func NewButton(b Button) *Button {
 	}
 
 	b.SetShader(common.HUDShader)
+	b.EventResponder = true
 
 	if b.Text != nil {
 		b.alignText()
+		b.AddSubEntity(b.Text)
 	}
 
 	return &b
 }
 
-func (b *Button) SetPosition(pos engo.Point) {
-	b.Position = pos
-	b.SpaceComponent.Position = pos
-	if b.Text != nil {
-		b.alignText()
-	}
-}
-
 func (b *Button) alignText() {
 	offsetX := (b.SpaceComponent.Width - b.Text.SpaceComponent.Width) / 2
 	offsetY := (b.SpaceComponent.Height - b.Text.SpaceComponent.Height) / 2

city/core/ui/event.go

@@ -6,3 +6,11 @@ type UIMouseEvent struct {
 func (UIMouseEvent) Type() string {
 	return "UIMouseEvent"
 }
+
+type UICloseEvent struct {
+	Target *UIBasic
+}
+
+func (UICloseEvent) Type() string {
+	return "UICloseEvent"
+}

city/core/ui/image.go

@@ -9,20 +9,16 @@ import (
 type Image struct {
 	UIBasic
 
-	Texture  *common.Texture
-	Position engo.Point
-	Width    float32
-	Height   float32
+	Texture *common.Texture
 }
 
 func NewImage(img Image) *Image {
 
 	img.BasicEntity = ecs.NewBasic()
 
 	img.SpaceComponent = common.SpaceComponent{
-		Position: img.Position,
-		Width:    img.Width,
-		Height:   img.Height,
+		Width:  img.Width,
+		Height: img.Height,
 	}
 
 	img.RenderComponent = common.RenderComponent{
@@ -35,8 +31,3 @@ func NewImage(img Image) *Image {
 
 	return &img
 }
-
-func (img *Image) SetPosition(pos engo.Point) {
-	img.Position = pos
-	img.SpaceComponent.Position = pos
-}

city/core/ui/layout/layout.go

@@ -20,6 +20,11 @@ func AlignRightBottom(parent engo.AABB, child engo.AABB, right, bottom float32)
 	return engo.Point{X: parent.Max.X - right - cWidth, Y: parent.Max.Y - bottom - cHeight}
 }
 
+func AlignRightTop(parent engo.AABB, child engo.AABB, right, top float32) engo.Point {
+	cWidth := (child.Max.X - child.Min.X)
+	return engo.Point{X: parent.Max.X - right - cWidth, Y: parent.Min.Y + top}
+}
+
 func AlignToWorldCenter(child engo.AABB) engo.Point {
 	p := engo.AABB{Max: engo.Point{X: engo.WindowWidth() / engo.GetGlobalScale().X, Y: engo.WindowHeight() / engo.GetGlobalScale().Y}}
 	return AlignCenter(p, child)

city/core/ui/list.go

@@ -12,8 +12,6 @@ type List struct {
 	Background *common.Texture
 
 	Position engo.Point
-	Width    float32
-	Height   float32
 
 	Items []*UIBasic
 }
@@ -34,4 +32,3 @@ func NewList(l List) *List {
 
 	return &l
 }
-

city/core/ui/modal.go

@@ -0,0 +1,59 @@
+package ui
+
+import (
+	"image/color"
+
+	"github.com/EngoEngine/ecs"
+	"github.com/EngoEngine/engo"
+	"github.com/EngoEngine/engo/common"
+	"github.com/Z2Y/trpgo/city/asset"
+	"github.com/Z2Y/trpgo/city/core/ui/layout"
+)
+
+type Modal struct {
+	UIBasic
+
+	closeBtn *Button
+	Content  UIFace
+}
+
+func NewModal(modal Modal) *Modal {
+	modal.BasicEntity = ecs.NewBasic()
+	modal.RenderComponent = common.RenderComponent{
+		Drawable:    common.Rectangle{},
+		Color:       color.RGBA{0x00, 0x00, 0x00, 0x94},
+		StartZIndex: UIPopLayerIndex,
+	}
+	modal.SpaceComponent = common.SpaceComponent{
+		Width:  modal.Width,
+		Height: modal.Height,
+	}
+
+	contentEntity := modal.Content.GetComponentUI()
+	contentEntity.SetZIndex(UIPopLayerIndex + 1)
+	contentEntity.SetPosition(layout.AlignCenter(modal.AABB(), contentEntity.AABB()))
+
+	modal.closeBtn = NewButton(Button{UIBasic: UIBasic{Width: 20, Height: 20}, Image: asset.LoadedSubSprite("blue_boxCross.png")})
+	modal.closeBtn.SetPosition(layout.AlignRightTop(contentEntity.AABB(), modal.closeBtn.AABB(), 10, 10))
+	modal.closeBtn.SetZIndex(UIPopLayerIndex + 1)
+	modal.closeBtn.OnClick(modal.Close)
+
+	modal.AddSubEntity(modal.closeBtn)
+	modal.AddSubEntity(modal.Content)
+	modal.SetShader(common.HUDShader)
+	modal.EventResponder = true
+	return &modal
+}
+
+func (modal *Modal) Close() {
+	engo.Mailbox.Dispatch(UICloseEvent{Target: &modal.UIBasic})
+}
+
+func (modal *Modal) OnClick(f func()) {
+	if modal.MessageListener == nil {
+		modal.MessageListener = &engo.MessageManager{}
+	}
+	modal.MessageListener.Listen("UIMouseEvent", func(engo.Message) {
+		modal.Close()
+	})
+}

city/core/ui/panel.go

@@ -0,0 +1,32 @@
+package ui
+
+import (
+	"github.com/EngoEngine/ecs"
+	"github.com/EngoEngine/engo"
+	"github.com/EngoEngine/engo/common"
+)
+
+type Panel struct {
+	UIBasic
+
+	Image *common.Texture
+}
+
+func NewPanel(panel Panel) *Panel {
+	panel.BasicEntity = ecs.NewBasic()
+
+	panel.SpaceComponent = common.SpaceComponent{
+		Width:  panel.Width,
+		Height: panel.Height,
+	}
+
+	panel.RenderComponent = common.RenderComponent{
+		Drawable:    panel.Image,
+		Scale:       engo.Point{X: panel.Width / panel.Image.Width(), Y: panel.Height / panel.Image.Height()},
+		StartZIndex: UILayerIndex,
+	}
+
+	panel.SetShader(common.HUDShader)
+
+	return &panel
+}

city/core/ui/text.go

@@ -5,7 +5,6 @@ import (
 	"image/color"
 
 	"github.com/EngoEngine/ecs"
-	"github.com/EngoEngine/engo"
 	"github.com/EngoEngine/engo/common"
 )
 
@@ -16,9 +15,9 @@ var (
 
 type Text struct {
 	UIBasic
-	Font     *common.Font
-	Position engo.Point
-	Value    string
+	Font *common.Font
+
+	Value string
 }
 
 func NewText(text Text) *Text {
@@ -32,9 +31,8 @@ func NewText(text Text) *Text {
 	width, height, _ := text.Font.TextDimensions(text.Value)
 
 	text.SpaceComponent = common.SpaceComponent{
-		Width:    float32(width),
-		Height:   float32(height),
-		Position: text.Position,
+		Width:  float32(width),
+		Height: float32(height),
 	}
 
 	text.RenderComponent.Drawable = text.Font.Render(text.Value)