YourWishes
b639bc6c4f
The old widget system (archive/dusk/ui/) depended on infrastructure this rewrite deleted -- a static X-macro element list, a 9-slice UI_FRAME, and a global gamepad/keyboard focus stack -- so everything below is rebuilt on top of the new native uielement_t pool + parent/child tree instead, gamepad/keyboard-only (no mouse support exists in the input system). New JS widgets (assets/scripts/), all pure composites of Label/Rectangle following the Button.js pattern: Checkbox, Tab, Slider, Dropdown. Slider/ Dropdown expose a directionInput(dx, dy) hook so a menu can hand them LEFT/RIGHT before falling back to cursor movement. New Menu.js replaces the old global uifocus_t stack: a small push/pop stack of Menu instances where only the topmost consumes CANCEL/ACCEPT/ direction input each tick (needed for nested modals -- a Settings sub-page menu plus a "discard changes?" Confirm can be open at once). Held-direction repeat timing matches the old 0.5s delay / 0.1s repeat. New overlay composites (added via a new UI.addOverlay()/UI.removeOverlay(), always drawn/updated after normal roots): FpsCounter, ConsoleOverlay (one Label per console history line, driven directly rather than via add() since History (16) exceeds the 8-children-per-element cap), Crop (letterbox/pillarbox bars), and Fullbox (a reusable tweened full-screen fade covering both the old fullbox and transition effects -- reuses shared instances rather than allocate-and-dispose, since disposing an element from inside its own render() callback risks the same JerryScript refcount corruption hit earlier in this rewrite). New Confirm.js (Yes/No dialog) and Settings.js (+ SettingsGeneral/ SettingsInput sub-pages) built on Menu. Display/Audio settings pages are intentionally not ported -- neither had a real backing engine system even in the old code. Frame is a flat Rectangle for now, not real 9-slice (a genuinely bigger native lift, deliberately deferred). Small native binding additions needed by the above, each with its own unit test: Time.renderDelta, Console.lineCount/getLine/visible/ consumeDirty, a new Screen module, a new Locale module, Input.deadzone, a new Save module, and Label.color (was missing entirely). Also fixes a real gap from the UI.addOverlay() work: uiElementDispose() wasn't removing disposed elements from the new overlay root array, which would have left dangling ids behind. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
69 lines
1.8 KiB
JavaScript
69 lines
1.8 KiB
JavaScript
// Copyright (c) 2026 Dominic Masters
|
|
//
|
|
// This software is released under the MIT License.
|
|
// https://opensource.org/licenses/MIT
|
|
|
|
// Label + a "< option >"-style value label, cycling a caller-provided
|
|
// options array. Same directionInput()-consumes-LEFT/RIGHT shape as
|
|
// Slider, stepping the selected index (with wraparound) instead of a
|
|
// numeric value.
|
|
class Dropdown extends UIElement {
|
|
init() {
|
|
this.label = new Label();
|
|
this.add(this.label);
|
|
|
|
this.valueLabel = new Label();
|
|
this.valueLabel.x = 100;
|
|
this.add(this.valueLabel);
|
|
|
|
this.options = [];
|
|
this._index = 0;
|
|
this.highlighted = false;
|
|
this.onChange = null;
|
|
|
|
this._refresh();
|
|
}
|
|
|
|
get text() { return this.label.text; }
|
|
set text(value) { this.label.text = value; }
|
|
|
|
get selectedIndex() { return this._index; }
|
|
set selectedIndex(index) {
|
|
if(this.options.length === 0) {
|
|
this._index = 0;
|
|
this._refresh();
|
|
return;
|
|
}
|
|
|
|
const count = this.options.length;
|
|
this._index = ((index % count) + count) % count;
|
|
this._refresh();
|
|
if(this.onChange) this.onChange(this._index, this.options[this._index]);
|
|
}
|
|
|
|
get selected() { return this.options[this._index]; }
|
|
|
|
setHighlighted(highlighted) {
|
|
this.highlighted = highlighted;
|
|
this.label.color = highlighted
|
|
? Dropdown.COLOR_HIGHLIGHTED
|
|
: Dropdown.COLOR_NORMAL;
|
|
}
|
|
|
|
directionInput(dx, dy) {
|
|
if(dx === 0) return false;
|
|
this.selectedIndex = this._index + dx;
|
|
return true;
|
|
}
|
|
|
|
_refresh() {
|
|
const value = this.options[this._index];
|
|
this.valueLabel.text = value !== undefined ? ('< ' + value + ' >') : '< >';
|
|
}
|
|
}
|
|
|
|
Dropdown.COLOR_NORMAL = { r: 255, g: 255, b: 255, a: 255 };
|
|
Dropdown.COLOR_HIGHLIGHTED = { r: 255, g: 0, b: 0, a: 255 };
|
|
|
|
module.exports = Dropdown;
|