modern_ui/
modern_ui.rs

1//! # Modern UI Showcase
2//!
3//! Demonstrates the new SDF-based procedural UI system.
4//! Features:
5//!   · Smooth rounded corners (top-left, bottom-right etc)
6//!   · Sub-pixel accurate borders
7//!   · Semi-transparent glass-morphism effects
8//!   · High-resolution scalable text (MTSDF)
9
10use jengine::engine::{Color, Game, jEngine, KeyCode};
11use jengine::renderer::text::Font;
12use jengine::ui::modern::Panel;
13use jengine::{DEFAULT_FONT_METADATA, DEFAULT_TILE_H, DEFAULT_TILE_W, DEFAULT_TILESET};
14
15struct ModernUiDemo {
16    font_loaded: bool,
17}
18
19impl ModernUiDemo {
20    fn new() -> Self {
21        Self { font_loaded: false }
22    }
23}
24
25impl Game for ModernUiDemo {
26    fn update(&mut self, engine: &mut jEngine) {
27        if engine.is_key_pressed(KeyCode::Escape) {
28            engine.request_quit();
29        }
30    }
31
32    fn render(&mut self, engine: &mut jEngine) {
33        if !self.font_loaded {
34            if let Ok(font) = Font::from_mtsdf_json(DEFAULT_FONT_METADATA) {
35                engine.ui.text.set_font(font);
36            }
37            self.font_loaded = true;
38        }
39
40        engine.clear();
41        let tw = engine.tile_width() as f32;
42        let th = engine.tile_height() as f32;
43        let sw = engine.grid_width() as f32 * tw;
44        let sh = engine.grid_height() as f32 * th;
45
46        // ── Background ──
47        engine.ui.ui_rect(0.0, 0.0, sw, sh, Color([0.05, 0.05, 0.1, 1.0]));
48
49        // ── 1. Main Glass Panel ──
50        Panel::new(50.0, 50.0, sw - 100.0, sh - 100.0)
51            .with_color(Color([0.1, 0.15, 0.25, 0.6]))
52            .with_border(Color([0.4, 0.6, 1.0, 0.8]), 2.0)
53            .with_radius(20.0)
54            .draw(engine);
55
56        // ── 2. Header Area ──
57        Panel::new(50.0, 50.0, sw - 100.0, 80.0)
58            .with_color(Color([0.15, 0.2, 0.35, 0.8]))
59            .with_border(Color([0.4, 0.6, 1.0, 0.4]), 1.0)
60            .with_rounded_corners(20.0, 20.0, 0.0, 0.0)
61            .draw(engine);
62
63        engine.ui.ui_text(80.0, 75.0, "MODERN UI SYSTEM", Color::WHITE, Color::TRANSPARENT, Some(32.0));
64        engine.ui.ui_text(sw - 200.0, 85.0, "v1.0 (Experimental)", Color([0.6, 0.7, 1.0, 1.0]), Color::TRANSPARENT, Some(14.0));
65
66        // ── 3. Content Cards ──
67        let card_w = (sw - 160.0) / 3.0;
68        let card_h = 200.0;
69        let card_y = 160.0;
70
71        for i in 0..3 {
72            let cx = 70.0 + i as f32 * (card_w + 20.0);
73            
74            // Card background
75            Panel::new(cx, card_y, card_w, card_h)
76                .with_color(Color([0.05, 0.08, 0.15, 0.9]))
77                .with_border(Color::CYAN, 1.0)
78                .with_radius(12.0)
79                .draw(engine);
80
81            engine.ui.ui_text(cx + 20.0, card_y + 20.0, &format!("Feature 0{}", i + 1), Color::CYAN, Color::TRANSPARENT, Some(18.0));
82            
83            let desc = match i {
84                0 => "Procedural Rounded Corners
85No textures needed!",
86                1 => "SDF Borders
87Perfectly smooth at any scale.",
88                2 => "Multi-Layer Blending
89Built-in alpha support.",
90                _ => ""
91            };
92            engine.ui.ui_text(cx + 20.0, card_y + 60.0, desc, Color([0.8, 0.8, 0.8, 1.0]), Color::TRANSPARENT, Some(14.0));
93        }
94
95        // ── 4. Interactive Element Simulation ──
96        let btn_x = 70.0;
97        let btn_y = sh - 120.0;
98        let btn_w = 180.0;
99        let btn_h = 45.0;
100
101        let [mx, my] = engine.mouse_pos();
102        let hovered = mx >= btn_x && mx <= btn_x + btn_w && my >= btn_y && my <= btn_y + btn_h;
103        
104        let btn_color = if hovered { Color([0.2, 0.6, 0.4, 1.0]) } else { Color([0.1, 0.4, 0.3, 1.0]) };
105        let btn_radius = if hovered { 22.0 } else { 8.0 }; // Animate radius!
106
107        Panel::new(btn_x, btn_y, btn_w, btn_h)
108            .with_color(btn_color)
109            .with_border(Color::WHITE, 2.0)
110            .with_radius(btn_radius)
111            .draw(engine);
112
113        engine.ui.ui_text(btn_x + 45.0, btn_y + 12.0, "HOVER ME", Color::WHITE, Color::TRANSPARENT, Some(18.0));
114
115        // ── Footer ──
116        engine.ui.ui_text(sw * 0.5 - 100.0, sh - 40.0, "Resolution Independent Rendering", Color([0.4, 0.5, 0.7, 1.0]), Color::TRANSPARENT, Some(12.0));
117    }
118}
119
120fn main() {
121    jEngine::builder()
122        .with_title("jengine — Modern UI System")
123        .with_size(1280, 720)
124        .with_tileset(DEFAULT_TILESET, DEFAULT_TILE_W, DEFAULT_TILE_H)
125        .run(ModernUiDemo::new());
126}
modern_ui/modern_ui.rs

modern_ui/
modern_ui.rs
