Skip to content
This repository was archived by the owner on Nov 20, 2025. It is now read-only.

Commit c0f0134

Browse files
davesmith00000davesmith00000
committed
Working on the sandbox
1 parent 3f3cedd commit c0f0134

3 files changed

Lines changed: 136 additions & 81 deletions

File tree

‎sandbox-ui/src/main/scala/example/Model.scala‎

Lines changed: 84 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
package example
22

33
import cats.effect.IO
4+
import example.views.Page
45
import tyrian.*
56
import tyrian.next.*
67
import tyrian.ui.*
8+
// import components.TopNav
79

810
final case class Model(
9-
topNav: TopNav,
10-
nameInput: Input
11+
// topNav: TopNav,
12+
// nameInput: Input
1113
):
1214

1315
def update: GlobalMsg => Outcome[Model] =
@@ -19,89 +21,91 @@ final case class Model(
1921
.addActions(Nav.loadUrl[IO](href))
2022

2123
case e =>
22-
for {
23-
tn <- topNav.update(e)
24-
ni <- nameInput.update(e)
25-
} yield this.copy(
26-
topNav = tn,
27-
nameInput = ni
28-
)
24+
Outcome(this)
25+
// for {
26+
// tn <- topNav.update(e)
27+
// ni <- nameInput.update(e)
28+
// } yield this.copy(
29+
// topNav = tn,
30+
// nameInput = ni
31+
// )
2932

3033
def view(using Theme): HtmlFragment =
31-
topNav.view |+|
32-
Model.tmpView(this)
34+
Page.page
35+
// topNav.view |+|
36+
// Model.tmpView(this)
3337

3438
object Model:
3539
val init: Model =
3640
Model(
37-
TopNav.initial,
38-
Input(UIKey("name-input"))
39-
.withPlaceholder("Type here...")
40-
.overrideTheme(
41-
_.withTextColor(RGBA.fromHex("#1f2937"))
42-
.withBackgroundColor(RGBA.fromHex("#f9fafb"))
43-
.solidBorder(BorderWidth.Thin, RGBA.fromHex("#d1d5db"))
44-
.rounded
45-
.withPadding(Spacing.Small)
46-
)
41+
// components.TopNav.initial,
42+
// Input(UIKey("name-input"))
43+
// .withPlaceholder("Type here...")
44+
// .overrideTheme(
45+
// _.withTextColor(RGBA.fromHex("#1f2937"))
46+
// .withBackgroundColor(RGBA.fromHex("#f9fafb"))
47+
// .solidBorder(BorderWidth.Thin, RGBA.fromHex("#d1d5db"))
48+
// .rounded
49+
// .withPadding(Spacing.Small)
50+
// )
4751
)
4852

49-
def tmpView(m: Model)(using Theme): HtmlFragment =
50-
HtmlFragment(
51-
Row(
52-
Column(
53-
TextBlock("Welcome to Tyrian UI!").toHeading1
54-
.overrideTheme(_.withTextColor(RGBA.fromHex("#2563eb"))),
55-
Row(
56-
Column(
57-
TextBlock("Your name:"),
58-
m.nameInput,
59-
TextBlock("Reversed: " + m.nameInput.value.reverse)
60-
)
61-
).withSpacing(Spacing.Small),
62-
Row(
63-
TextBlock("Hello, Tyrian!").overrideTheme(_.withTextColor(RGBA.Blue)),
64-
TextBlock("More text").overrideTheme(_.withTextColor(RGBA.Red.mix(RGBA.Blue)))
65-
)
66-
.withSpacing(Spacing.Medium),
67-
TextBlock("This is just some text")
68-
.overrideTheme(_.withTextColor(RGBA.fromHex("#6b7280"))),
69-
HtmlElement(
70-
tyrian.Html.div(
71-
tyrian.Html.style := "border: 2px dashed #ccc; padding: 1rem; border-radius: 4px; margin: 1rem 0;"
72-
)(
73-
tyrian.Html.p("This is arbitrary HTML embedded within the UI component system!"),
74-
tyrian.Html.strong("Bold text"),
75-
tyrian.Html.text(" and "),
76-
tyrian.Html.em("italic text")
77-
)
78-
)
79-
),
80-
Column(
81-
Container(
82-
TextBlock("This is some more text.")
83-
).middle.center
84-
.withPadding(Spacing.Large)
85-
.overrideTheme(
86-
_.rounded
87-
.solidBorder(BorderWidth.Medium, RGBA.fromHex("#10b981"))
88-
.shadowMedium(RGBA.fromHex("#00000040"))
89-
.withBackgroundColor(RGBA.fromHex("#ecfdf5"))
90-
.withOpacity(Opacity.High)
91-
),
92-
Image(
93-
"https://raw.githubusercontent.com/PurpleKingdomGames/roguelike-starterkit/417f4e372b4792972ef62aea0c917088a9fc82fd/roguelike.gif",
94-
"Roguelike"
95-
).withSize(Extent.px(300), Extent.px(100))
96-
.scaleDown
97-
.overrideTheme(
98-
_.rounded
99-
.solidBorder(BorderWidth.Medium, RGBA.fromHex("#2563eb"))
100-
.shadowLarge(RGBA.fromHex("#00000080"))
101-
.withBackgroundColor(RGBA.fromHex("#fbbf24"))
102-
.withOpacity(Opacity.Medium)
103-
)
104-
)
105-
)
106-
.withSpacing(Spacing.Large)
107-
)
53+
// def tmpView(m: Model)(using Theme): HtmlFragment =
54+
// HtmlFragment(
55+
// Row(
56+
// Column(
57+
// TextBlock("Welcome to Tyrian UI!").toHeading1
58+
// .overrideTheme(_.withTextColor(RGBA.fromHex("#2563eb"))),
59+
// Row(
60+
// Column(
61+
// TextBlock("Your name:"),
62+
// m.nameInput,
63+
// TextBlock("Reversed: " + m.nameInput.value.reverse)
64+
// )
65+
// ).withSpacing(Spacing.Small),
66+
// Row(
67+
// TextBlock("Hello, Tyrian!").overrideTheme(_.withTextColor(RGBA.Blue)),
68+
// TextBlock("More text").overrideTheme(_.withTextColor(RGBA.Red.mix(RGBA.Blue)))
69+
// )
70+
// .withSpacing(Spacing.Medium),
71+
// TextBlock("This is just some text")
72+
// .overrideTheme(_.withTextColor(RGBA.fromHex("#6b7280"))),
73+
// HtmlElement(
74+
// tyrian.Html.div(
75+
// tyrian.Html.style := "border: 2px dashed #ccc; padding: 1rem; border-radius: 4px; margin: 1rem 0;"
76+
// )(
77+
// tyrian.Html.p("This is arbitrary HTML embedded within the UI component system!"),
78+
// tyrian.Html.strong("Bold text"),
79+
// tyrian.Html.text(" and "),
80+
// tyrian.Html.em("italic text")
81+
// )
82+
// )
83+
// ),
84+
// Column(
85+
// Container(
86+
// TextBlock("This is some more text.")
87+
// ).middle.center
88+
// .withPadding(Spacing.Large)
89+
// .overrideTheme(
90+
// _.rounded
91+
// .solidBorder(BorderWidth.Medium, RGBA.fromHex("#10b981"))
92+
// .shadowMedium(RGBA.fromHex("#00000040"))
93+
// .withBackgroundColor(RGBA.fromHex("#ecfdf5"))
94+
// .withOpacity(Opacity.High)
95+
// ),
96+
// Image(
97+
// "https://raw.githubusercontent.com/PurpleKingdomGames/roguelike-starterkit/417f4e372b4792972ef62aea0c917088a9fc82fd/roguelike.gif",
98+
// "Roguelike"
99+
// ).withSize(Extent.px(300), Extent.px(100))
100+
// .scaleDown
101+
// .overrideTheme(
102+
// _.rounded
103+
// .solidBorder(BorderWidth.Medium, RGBA.fromHex("#2563eb"))
104+
// .shadowLarge(RGBA.fromHex("#00000080"))
105+
// .withBackgroundColor(RGBA.fromHex("#fbbf24"))
106+
// .withOpacity(Opacity.Medium)
107+
// )
108+
// )
109+
// )
110+
// .withSpacing(Spacing.Large)
111+
// )

sandbox-ui/src/main/scala/example/TopNav.scala renamed to sandbox-ui/src/main/scala/example/components/TopNav.scala

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
package example
1+
package example.components
22

33
import tyrian.next.*
44
import tyrian.ui.*

‎sandbox-ui/src/main/scala/example/views/Page.scala‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
package example.views
2+
3+
import tyrian.next.HtmlFragment
4+
import tyrian.ui.*
5+
6+
object Page:
7+
8+
def page(using Theme): HtmlFragment =
9+
HtmlFragment(
10+
Column(
11+
Column(
12+
Row(
13+
Container(
14+
TextBlock("Tyrian-UI")
15+
.overrideTheme(
16+
_.withTextColor(RGBA.White)
17+
.withFontWeight(FontWeight.ExtraBold)
18+
.withFontSize(FontSize.XLarge)
19+
)
20+
)
21+
.withPadding(Padding(Spacing.Large))
22+
.withJustify(Justify.Center)
23+
.overrideTheme(
24+
_.withBackgroundFill(
25+
Fill.RadialGradient(
26+
Position.TopLeft,
27+
RGBA.Magenta.mix(RGBA.Black),
28+
RGBA.Blue.mix(RGBA.Purple).mix(RGBA.Black),
29+
RGBA.Cyan.mix(RGBA.Blue).mix(RGBA.Black)
30+
)
31+
)
32+
)
33+
),
34+
Row(
35+
Container(
36+
Spacer.vertical(Extent.px(2))
37+
).overrideTheme(
38+
_.withBackgroundColor(RGBA.Cyan)
39+
.withBoxShadow(BoxShadow.large)
40+
)
41+
)
42+
),
43+
Row(
44+
Container(
45+
TextBlock("Content goes here")
46+
).overrideTheme(
47+
_.withBackgroundColor(RGBA.White)
48+
)
49+
)
50+
).withSpacing(Spacing.Large)
51+
)

0 commit comments

Comments
 (0)