feat(ui): profile content within tabbar (within leftbar)
This commit is contained in:
Muhammad Nauman Raza
parent
769e90fa88
commit
3cb0cc61d0
|
|
@ -7,4 +7,7 @@ import (
|
|||
var (
|
||||
//go:embed iosevka-bold.ttf
|
||||
IosevkaBold_ttf []byte
|
||||
|
||||
//go:embed iosevka-regular.ttf
|
||||
IosevkaRegular_ttf []byte
|
||||
)
|
||||
|
|
|
|||
BIN
frontend/assets/fonts/iosevka-regular.ttf
Normal file
BIN
frontend/assets/fonts/iosevka-regular.ttf
Normal file
Binary file not shown.
|
|
@ -12,6 +12,9 @@ import (
|
|||
// "github.com/hajimehoshi/ebiten/v2/ebitenutil"
|
||||
)
|
||||
|
||||
// Initialise the test player
|
||||
var testPlayer = initPlayer()
|
||||
|
||||
// Create the `Game` struct
|
||||
type Game struct {
|
||||
ui UI
|
||||
|
|
@ -58,14 +61,11 @@ func main() {
|
|||
ebiten.SetWindowSize(window_width, window_height)
|
||||
ebiten.SetWindowTitle(window_title)
|
||||
|
||||
// Initialise the test player
|
||||
testPlayer := initPlayer()
|
||||
|
||||
// Initialise the game
|
||||
game := Game{
|
||||
// Initialise the UI
|
||||
ui: uiInit(window_width, window_height),
|
||||
activePlayer: testPlayer,
|
||||
ui: uiInit(window_width, window_height),
|
||||
}
|
||||
|
||||
// Log and exit on error
|
||||
|
|
|
|||
|
|
@ -5,7 +5,8 @@ import ()
|
|||
// The player struct
|
||||
type Player struct {
|
||||
health int
|
||||
defense int
|
||||
health_max int
|
||||
defence int
|
||||
level int
|
||||
exp float32
|
||||
ambition float32
|
||||
|
|
@ -20,6 +21,8 @@ var level_ambition = make(map[int]float32)
|
|||
func initPlayer() Player {
|
||||
return Player{
|
||||
health: 100,
|
||||
health_max: 100,
|
||||
defence: 0,
|
||||
level: 1,
|
||||
exp: 0.0,
|
||||
ambition: 0.0, // NOTE(midnadimple): In the future this will be affected by player activity
|
||||
|
|
|
|||
172
frontend/ui.go
172
frontend/ui.go
|
|
@ -35,8 +35,8 @@ var hazakura = map[string]color.RGBA{
|
|||
"gray": color.RGBA{0x27, 0x27, 0x2b, 0xff},
|
||||
"light_gray": color.RGBA{0x45, 0x44, 0x49, 0xff},
|
||||
"overlay": color.RGBA{0x5c, 0x5c, 0x61, 0xff},
|
||||
"highlight": color.RGBA{0xd9, 0x0, 0xd7, 0xff},
|
||||
"subwhite": color.RGBA{0xec, 0xe5, 0xea, 0xff},
|
||||
"subwhite": color.RGBA{0xd9, 0x0, 0xd7, 0xff},
|
||||
"white": color.RGBA{0xec, 0xe5, 0xea, 0xff},
|
||||
|
||||
// Actual* colors
|
||||
"red": color.RGBA{0xf0, 0x69, 0x69, 0xff},
|
||||
|
|
@ -68,31 +68,31 @@ func uiInit(width, height int) UI {
|
|||
widget.ContainerOpts.BackgroundImage(image.NewNineSliceColor(ui.colors["dark_black"])),
|
||||
)
|
||||
|
||||
// Set the heading size and font
|
||||
heading_face, _ := makeFace(18, fonts.IosevkaBold_ttf)
|
||||
// Make the different faces
|
||||
headingFace, _ := makeFace(18, fonts.IosevkaBold_ttf)
|
||||
defaultFace, _ := makeFace(14, fonts.IosevkaRegular_ttf)
|
||||
|
||||
tabProfile := widget.NewTabBookTab("Profile",
|
||||
widget.ContainerOpts.BackgroundImage(image.NewNineSliceColor(ui.colors["gray"])),
|
||||
widget.ContainerOpts.Layout(widget.NewGridLayout(
|
||||
//Define number of columns in the grid
|
||||
widget.GridLayoutOpts.Columns(2),
|
||||
widget.GridLayoutOpts.Spacing(10, 10),
|
||||
//specify the Stretch for each row and column.
|
||||
// Specify the Stretch for each row and column.
|
||||
widget.GridLayoutOpts.Stretch([]bool{false, true}, nil),
|
||||
// Define the spacing between items in the grid
|
||||
widget.GridLayoutOpts.Spacing(20, 15),
|
||||
// Define the padding in the grid
|
||||
widget.GridLayoutOpts.Padding(widget.NewInsetsSimple(20)),
|
||||
)),
|
||||
)
|
||||
// TODO(devraza): Show all of the player's stats
|
||||
// health := widget.NewButton(
|
||||
// widget.ButtonOpts.Text(strconv.Itoa(activePlayer.health), face, buttonTextColor),
|
||||
// )
|
||||
// tabProfile.AddChild(health)
|
||||
makeStatsBars(tabProfile, ui, defaultFace)
|
||||
|
||||
tabInventory := widget.NewTabBookTab("Inventory",
|
||||
widget.ContainerOpts.BackgroundImage(image.NewNineSliceColor(color.NRGBA{0, 255, 0, 0xff})),
|
||||
widget.ContainerOpts.Layout(widget.NewAnchorLayout()),
|
||||
)
|
||||
inventoryButton := widget.NewText(
|
||||
widget.TextOpts.Text("Inventory content", heading_face, color.Black),
|
||||
widget.TextOpts.Text("Inventory content", headingFace, color.Black),
|
||||
widget.TextOpts.Position(widget.TextPositionCenter, widget.TextPositionCenter),
|
||||
widget.TextOpts.WidgetOpts(widget.WidgetOpts.LayoutData(widget.AnchorLayoutData{
|
||||
HorizontalPosition: widget.AnchorLayoutPositionCenter,
|
||||
|
|
@ -106,7 +106,7 @@ func uiInit(width, height int) UI {
|
|||
widget.ContainerOpts.Layout(widget.NewAnchorLayout()),
|
||||
)
|
||||
otherButton := widget.NewText(
|
||||
widget.TextOpts.Text("Other content", heading_face, color.Black),
|
||||
widget.TextOpts.Text("Other content", headingFace, color.Black),
|
||||
widget.TextOpts.Position(widget.TextPositionCenter, widget.TextPositionCenter),
|
||||
widget.TextOpts.WidgetOpts(widget.WidgetOpts.LayoutData(widget.AnchorLayoutData{
|
||||
HorizontalPosition: widget.AnchorLayoutPositionCenter,
|
||||
|
|
@ -118,7 +118,7 @@ func uiInit(width, height int) UI {
|
|||
// Create the tabbook widget
|
||||
leftTabs := widget.NewTabBook(
|
||||
widget.TabBookOpts.TabButtonImage(buttonImage),
|
||||
widget.TabBookOpts.TabButtonText(heading_face, &widget.ButtonTextColor{Idle: color.White}),
|
||||
widget.TabBookOpts.TabButtonText(headingFace, &widget.ButtonTextColor{Idle: color.White}),
|
||||
widget.TabBookOpts.TabButtonSpacing(0),
|
||||
widget.TabBookOpts.ContainerOpts(
|
||||
widget.ContainerOpts.WidgetOpts(widget.WidgetOpts.LayoutData(widget.AnchorLayoutData{
|
||||
|
|
@ -138,6 +138,7 @@ func uiInit(width, height int) UI {
|
|||
// Define the left bar container
|
||||
leftBar := widget.NewContainer(
|
||||
widget.ContainerOpts.BackgroundImage(image.NewNineSliceColor(ui.colors["gray"])),
|
||||
widget.ContainerOpts.Layout(widget.NewAnchorLayout()),
|
||||
)
|
||||
// Add the tabbook to the left bar
|
||||
leftBar.AddChild(leftTabs)
|
||||
|
|
@ -152,6 +153,149 @@ func uiInit(width, height int) UI {
|
|||
return ui
|
||||
}
|
||||
|
||||
// Create progressbars for all the player stats
|
||||
func makeStatsBars(parent *widget.TabBookTab, ui UI, face font.Face) {
|
||||
// Health
|
||||
health := widget.NewText(
|
||||
widget.TextOpts.Text("Health", face, ui.colors["white"]),
|
||||
widget.TextOpts.WidgetOpts(widget.WidgetOpts.LayoutData(widget.GridLayoutData{
|
||||
HorizontalPosition: widget.GridLayoutPositionStart,
|
||||
})),
|
||||
)
|
||||
health_progressbar := widget.NewProgressBar(
|
||||
widget.ProgressBarOpts.WidgetOpts(
|
||||
// Set the required anchor layout data to determine where in the container to place the progressbar
|
||||
widget.WidgetOpts.LayoutData(widget.AnchorLayoutData{
|
||||
HorizontalPosition: widget.AnchorLayoutPositionCenter,
|
||||
VerticalPosition: widget.AnchorLayoutPositionCenter,
|
||||
}),
|
||||
// Set the minimum size for the progressbar.
|
||||
widget.WidgetOpts.MinSize(200, 20),
|
||||
),
|
||||
widget.ProgressBarOpts.Images(
|
||||
// Set the track colors
|
||||
&widget.ProgressBarImage{
|
||||
Idle: image.NewNineSliceColor(ui.colors["black"]),
|
||||
Hover: image.NewNineSliceColor(ui.colors["black"]),
|
||||
},
|
||||
// Set the progress colors
|
||||
&widget.ProgressBarImage{
|
||||
Idle: image.NewNineSliceColor(ui.colors["red"]),
|
||||
Hover: image.NewNineSliceColor(ui.colors["red"]),
|
||||
},
|
||||
),
|
||||
// Set the min, max, and current values for each progressbar
|
||||
widget.ProgressBarOpts.Values(0, testPlayer.health, testPlayer.health),
|
||||
)
|
||||
parent.AddChild(health)
|
||||
parent.AddChild(health_progressbar)
|
||||
|
||||
// Defence
|
||||
defence := widget.NewText(
|
||||
widget.TextOpts.Text("Defence", face, ui.colors["white"]),
|
||||
widget.TextOpts.WidgetOpts(widget.WidgetOpts.LayoutData(widget.GridLayoutData{
|
||||
HorizontalPosition: widget.GridLayoutPositionStart,
|
||||
})),
|
||||
)
|
||||
defence_progressbar := widget.NewProgressBar(
|
||||
widget.ProgressBarOpts.WidgetOpts(
|
||||
// Set the required anchor layout data to determine where in the container to place the progressbar
|
||||
widget.WidgetOpts.LayoutData(widget.AnchorLayoutData{
|
||||
HorizontalPosition: widget.AnchorLayoutPositionCenter,
|
||||
VerticalPosition: widget.AnchorLayoutPositionCenter,
|
||||
}),
|
||||
// Set the minimum size for the progressbar.
|
||||
widget.WidgetOpts.MinSize(200, 20),
|
||||
),
|
||||
widget.ProgressBarOpts.Images(
|
||||
// Set the track colors
|
||||
&widget.ProgressBarImage{
|
||||
Idle: image.NewNineSliceColor(ui.colors["black"]),
|
||||
Hover: image.NewNineSliceColor(ui.colors["black"]),
|
||||
},
|
||||
// Set the progress colors
|
||||
&widget.ProgressBarImage{
|
||||
Idle: image.NewNineSliceColor(ui.colors["yellow"]),
|
||||
Hover: image.NewNineSliceColor(ui.colors["yellow"]),
|
||||
},
|
||||
),
|
||||
// Set the min, max, and current values for each progressbar
|
||||
widget.ProgressBarOpts.Values(0, testPlayer.health, testPlayer.health),
|
||||
)
|
||||
parent.AddChild(defence)
|
||||
parent.AddChild(defence_progressbar)
|
||||
|
||||
// XP/Level
|
||||
level := widget.NewText(
|
||||
widget.TextOpts.Text("Level", face, ui.colors["white"]),
|
||||
widget.TextOpts.WidgetOpts(widget.WidgetOpts.LayoutData(widget.GridLayoutData{
|
||||
HorizontalPosition: widget.GridLayoutPositionStart,
|
||||
})),
|
||||
)
|
||||
level_progressbar := widget.NewProgressBar(
|
||||
widget.ProgressBarOpts.WidgetOpts(
|
||||
// Set the required anchor layout data to determine where in the container to place the progressbar
|
||||
widget.WidgetOpts.LayoutData(widget.AnchorLayoutData{
|
||||
HorizontalPosition: widget.AnchorLayoutPositionCenter,
|
||||
VerticalPosition: widget.AnchorLayoutPositionCenter,
|
||||
}),
|
||||
// Set the minimum size for the progressbar.
|
||||
widget.WidgetOpts.MinSize(200, 20),
|
||||
),
|
||||
widget.ProgressBarOpts.Images(
|
||||
// Set the track colors
|
||||
&widget.ProgressBarImage{
|
||||
Idle: image.NewNineSliceColor(ui.colors["black"]),
|
||||
Hover: image.NewNineSliceColor(ui.colors["black"]),
|
||||
},
|
||||
// Set the progress colors
|
||||
&widget.ProgressBarImage{
|
||||
Idle: image.NewNineSliceColor(ui.colors["cyan"]),
|
||||
Hover: image.NewNineSliceColor(ui.colors["cyan"]),
|
||||
},
|
||||
),
|
||||
// Set the min, max, and current values for each progressbar
|
||||
widget.ProgressBarOpts.Values(0, testPlayer.health, testPlayer.health_max),
|
||||
)
|
||||
parent.AddChild(level)
|
||||
parent.AddChild(level_progressbar)
|
||||
|
||||
// Ambition
|
||||
ambition := widget.NewText(
|
||||
widget.TextOpts.Text("Ambition", face, ui.colors["white"]),
|
||||
widget.TextOpts.WidgetOpts(widget.WidgetOpts.LayoutData(widget.GridLayoutData{
|
||||
HorizontalPosition: widget.GridLayoutPositionStart,
|
||||
})),
|
||||
)
|
||||
ambition_progressbar := widget.NewProgressBar(
|
||||
widget.ProgressBarOpts.WidgetOpts(
|
||||
// Set the required anchor layout data to determine where in the container to place the progressbar
|
||||
widget.WidgetOpts.LayoutData(widget.AnchorLayoutData{
|
||||
HorizontalPosition: widget.AnchorLayoutPositionCenter,
|
||||
VerticalPosition: widget.AnchorLayoutPositionCenter,
|
||||
}),
|
||||
// Set the minimum size for the progressbar.
|
||||
widget.WidgetOpts.MinSize(200, 20),
|
||||
),
|
||||
widget.ProgressBarOpts.Images(
|
||||
// Set the track colors
|
||||
&widget.ProgressBarImage{
|
||||
Idle: image.NewNineSliceColor(ui.colors["black"]),
|
||||
Hover: image.NewNineSliceColor(ui.colors["black"]),
|
||||
},
|
||||
// Set the progress colors
|
||||
&widget.ProgressBarImage{
|
||||
Idle: image.NewNineSliceColor(ui.colors["purple"]),
|
||||
Hover: image.NewNineSliceColor(ui.colors["purple"]),
|
||||
},
|
||||
),
|
||||
// Set the min, max, and current values for each progressbar
|
||||
widget.ProgressBarOpts.Values(0, testPlayer.health, testPlayer.health),
|
||||
)
|
||||
parent.AddChild(ambition)
|
||||
parent.AddChild(ambition_progressbar)
|
||||
}
|
||||
|
||||
// Load a button image
|
||||
func loadButtonImage() (*widget.ButtonImage, error) {
|
||||
idle := image.NewNineSliceColor(hazakura["black"])
|
||||
|
|
|
|||
Reference in a new issue