Skip to content

Implement efficient node rendering and a basic interaction API #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
TheDudeFromCI merged 8 commits into from
Jan 11, 2026
Merged

Implement efficient node rendering and a basic interaction API #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
4da0541
add stress example
KrLiam Jan 5, 2026
cf06703
refactor spawning and node updates
KrLiam Jan 6, 2026
07fe43d
implement scopes and fast variable updates
KrLiam Jan 7, 2026
7b0ed79
implement interactions, dynamic class changes and style updates
KrLiam Jan 9, 2026
11d771e
clean up code
KrLiam Jan 9, 2026
47abe37
format code
KrLiam Jan 9, 2026
fb16de6
fix animated and animated_base examples
KrLiam Jan 9, 2026
97b5c40
fix memory leak in animated and animated_base examples caused by vary…
KrLiam Jan 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions Cargo.lock
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions Cargo.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ thiserror = "2"
[dev-dependencies]
bevy = { version = "0.17", default-features = true }
pretty_assertions = "1.4"
rand = "0.9.2"

[features]
default = ["hot-reload"]
Expand Down
107 changes: 107 additions & 0 deletions assets/animated.neko_ui
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
var random-color = #ffffff;
var random-num = 20;

var paddings = 5;

style p {
color: #000000;
}

style p +bouncy-text {
font-size: $random-num;
}

style div +rainbow {
background-color: $random-color;
}


def inner {
layout div {
class rainbow;
padding: $paddings;
output;
}
}

def outer {
layout div {
padding: $paddings;
background-color: #cccccc;

with inner {
output;
}
}
}


def item {
layout outer {
with p {
class bouncy-text;
text: "Hi!";
}
output;
}
}

def row {
layout div {
flex-direction: row;
column-gap: 5;

with item {}
with item {}
with item {}
with item {}
with item {}
with item {}
with item {}
with item {}
with item {}
with item {}
with item {}
with item {}
with item {}
with item {}
with item {}
with item {}
with item {}
with item {}
with item {}
with item {}

output;
}
}

layout div {
width: 100%;
align-items: center;
justify-content: center;

flex-direction: column;
row-gap: 5;

with row {}
with row {}
with row {}
with row {}
with row {}
with row {}
with row {}
with row {}
with row {}
with row {}
with row {}
with row {}
with row {}
with row {}
with row {}
with row {}
with row {}
with row {}
with row {}
with row {}
}
133 changes: 133 additions & 0 deletions assets/board.neko_ui
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
var cell-size = 20;
var gap = 1;

style div +box {
background-color: #cccccc;
}
style div +box +hovered {
background-color: #999999;
}
style div +box +pressed {
background-color: #666666;
}

style div +box +active {
background-color: #181818ff;
}
style div +box +active +hovered {
background-color: #464646ff;
}
style div +box +active +pressed {
background-color: #5c5c5cff;
}

def cell {
layout div {
class interactable;
class box;
width: $cell-size;
height: $cell-size;

output;
}
}

def row {
layout div {
flex-direction: row;
column-gap: $gap;

with cell {}
with cell {}
with cell {}
with cell {}
with cell {}
with cell {}
with cell {}
with cell {}
with cell {}
with cell {}
with cell {}
with cell {}
with cell {}
with cell {}
with cell {}
with cell {}
with cell {}
with cell {}
with cell {}
with cell {}
with cell {}
with cell {}
with cell {}
with cell {}
with cell {}
with cell {}
with cell {}
with cell {}
with cell {}
with cell {}
with cell {}
with cell {}
with cell {}
with cell {}
with cell {}
with cell {}
with cell {}
with cell {}
with cell {}
with cell {}

output;
}
}

layout div {
width: 100%;
align-items: center;
justify-content: center;

flex-direction: column;
row-gap: $gap;

with row {}
with row {}
with row {}
with row {}
with row {}
with row {}
with row {}
with row {}
with row {}
with row {}
with row {}
with row {}
with row {}
with row {}
with row {}
with row {}
with row {}
with row {}
with row {}
with row {}
with row {}
with row {}
with row {}
with row {}
with row {}
with row {}
with row {}
with row {}
with row {}
with row {}
with row {}
with row {}
with row {}
with row {}
with row {}
with row {}
with row {}
with row {}
with row {}
with row {}
}
129 changes: 129 additions & 0 deletions assets/interactions.neko_ui
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
// global variables that are controlled dynamically.
var width = 500;
var color = #000000;

var text-color = #614a31;

style div +outer-menu {
background-color: #D5A96E;
border-color: #5B4A31;
border-thickness: 4px;
border-radius: 12px;
}

style div +inner-menu {
background-color: #d9ad72;
border-color: #c1935b;
border-thickness: 4px;
border-radius: 12px;
}

style p {
color: #000000;
}

style p +h1 {
font-size: 32;
color: $color;
}

def h1 {
var text = "Text";

layout div {
flex-direction: column;

with p {
class h1;
text: $text;
}

with div {
height: 2px;
width: 100%;

background-color: #614a31;
border-radius: 4px;
}

output;
}
}


style div +button {
background-color: #ab691fff;
}

style div +button +hovered {
background-color: #945710ff;
}

style div +button +pressed {
background-color: #8f7a65ff;
}

def button {
var text = "Click Me";

layout div {
class interactable;
class button;

padding: 10;
border-radius: 2;

with p {
text: $text;
color: #ffffff;
}

output;
}
}


layout div {
class outer-menu;

flex-direction: column;
align-items: center;

width: $width;
height: 250px;

margin: auto;
padding: 8px;
row-gap: 8px;

with h1 {
text: "Message";
}

with div {
class inner-menu;

flex-grow: 1;
flex-direction: column;
width: 100%;
padding: 8px;
justify-content: space-between;

with div {
flex-direction: column;

with p {
text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pharetra malesuada tortor, sit amet consequat libero posuere ac.";
}
}

with div {
padding: 5;
column-gap: 10;
justify-content: end;

with button { text: "Yes"; }
with button { text: "No"; }
}
}
}
Loading
Loading