prosperon/scripts/gui.js

245 lines
5.7 KiB
JavaScript
Raw Normal View History

2023-12-18 06:45:27 -06:00
/*
2024-04-03 17:17:32 -05:00
gui functions take screen space coordinates
2023-12-18 06:45:27 -06:00
*/
2024-04-11 17:17:49 -05:00
gui.scissor_win = function() { gui.scissor(0,0,window.size.x,window.y); }
2024-03-18 08:16:25 -05:00
2024-04-03 17:17:32 -05:00
gui.input_lmouse_pressed = function() {
if (gui.selected)
gui.selected.action();
};
2024-04-03 17:17:32 -05:00
gui.input_s_pressed = function() {
if (gui.selected?.down) {
gui.selected.selected = false;
gui.selected = gui.selected.down;
gui.selected.selected = true;
}
};
2024-04-03 17:17:32 -05:00
gui.input_w_pressed = function() {
if (gui.selected?.up) {
gui.selected.selected = false;
gui.selected = gui.selected.up;
gui.selected.selected = true;
2023-10-04 08:18:09 -05:00
}
};
2024-04-03 17:17:32 -05:00
gui.input_enter_pressed = function() {
if (gui.selected) {
gui.selected.action();
}
}
2024-04-03 17:17:32 -05:00
gui.controls = {};
gui.controls.toString = function() { return "gui controls"; };
gui.controls.update = function() { };
gui.controls.set_mum = function(mum)
2023-10-09 13:03:12 -05:00
{
mum.selected = true;
if (this.selected && this.selected !== mum)
this.selected.selected = false;
this.selected = mum;
}
2024-04-03 17:17:32 -05:00
gui.controls.check_bb = function(mum)
2023-10-09 13:03:12 -05:00
{
2024-04-03 00:44:08 -05:00
if (bbox.pointin(mum.bb, input.mouse.screenpos()))
2024-04-03 17:17:32 -05:00
gui.controls.set_mum(mum);
2023-10-09 13:03:12 -05:00
}
2024-04-03 17:17:32 -05:00
gui.controls.inputs = {};
gui.controls.inputs.fallthru = false;
gui.controls.inputs.mouse = {};
gui.controls.inputs.mouse.move = function(pos,dpos)
{
2023-10-09 13:03:12 -05:00
}
2024-04-03 17:17:32 -05:00
gui.controls.inputs.mouse.scroll = function(scroll)
2023-10-09 13:03:12 -05:00
{
}
2024-04-03 17:17:32 -05:00
gui.controls.check_submit = function() {
2023-10-09 13:03:12 -05:00
if (this.selected && this.selected.action)
this.selected.action(this.selected);
2023-10-26 11:48:02 -05:00
}
2023-10-04 08:18:09 -05:00
var Mum = {
2023-10-04 17:57:37 -05:00
padding:[0,0], /* Each element inset with this padding on all sides */
offset:[0,0],
font: "fonts/c64.ttf",
selectable: false,
selected: false,
font_size: 1,
2024-03-02 02:59:50 -06:00
text_align: "left", /* left, center, right */
scale: 1,
angle: 0,
2023-10-04 17:57:37 -05:00
anchor: [0,1],
hovered: {},
text_shadow: {
pos: [0,0],
color: Color.white,
},
text_outline: 1, /* outline in pixels */
color: Color.white,
margin: [0,0], /* Distance between elements for things like columns */
width: 0,
height: 0,
max_width: Infinity,
max_height: Infinity,
image_repeat: false,
image_repeat_offset: [0,0],
debug: false, /* set to true to draw debug boxes */
2023-10-04 08:18:09 -05:00
make(def) {
var n = Object.create(this);
Object.assign(n, def);
return n;
},
prestart() {
this.hovered.__proto__ = this;
},
2023-10-04 17:57:37 -05:00
start() {},
2023-10-04 08:18:09 -05:00
extend(def) {
var n = Object.create(this);
Object.assign(n, def);
var fn = function(def) {
var p = n.make(def);
p.prestart();
p.start();
return p;
};
fn._int = n;
return fn;
},
2023-10-04 08:18:09 -05:00
}
2023-10-04 08:18:09 -05:00
Mum.text = Mum.extend({
draw(cursor = [0,0], cnt = Mum) {
2023-10-04 08:18:09 -05:00
if (this.hide) return;
2024-04-03 17:17:32 -05:00
if (this.selectable) gui.controls.check_bb(this);
2023-10-04 17:57:37 -05:00
this.caret ??= -1;
/* if (!this.bb)
this.calc_bb(cursor);
else
this.update_bb(cursor);
*/
var params = this.selected ? this.hovered : this;
this.width = Math.min(params.max_width, cnt.max_width);
2023-10-04 17:57:37 -05:00
this.calc_bb(cursor);
this.height = this.wh.y;
var aa = [0,1].sub(params.anchor);
var pos = cursor.add(params.wh.scale(aa)).add(params.offset);
2024-04-09 16:48:15 -05:00
// gui.font_set(params.font);
2024-04-03 17:17:32 -05:00
render.text(params.str, pos, params.font_size, params.color, this.width, undefined, params.caret);
2023-10-04 17:57:37 -05:00
},
update_bb(cursor) {
this.bb = bbox.move(this.bb, cursor.sub(this.wh.scale(this.anchor)));
2023-10-04 08:18:09 -05:00
},
2023-10-04 17:57:37 -05:00
2023-10-04 08:18:09 -05:00
calc_bb(cursor) {
2024-03-19 14:39:19 -05:00
var bb = render.text_size(this.str, this.font_size, this.width);
this.wh = bbox.towh(bb);
var pos = cursor.add(this.wh.scale([0,1].sub(this.anchor))).add(this.offset);
this.bb = bbox.move(bb,pos.add([this.wh.x/2,0]));
2023-10-04 08:18:09 -05:00
},
2023-10-04 17:57:37 -05:00
start() {
this.calc_bb([0,0]);
},
});
Mum.button = Mum.text._int.extend({
selectable: true,
color: Color.blue,
hovered:{
color: Color.red
},
2024-02-25 17:31:48 -06:00
action() { console.warn("Button has no action."); },
});
2023-10-04 17:57:37 -05:00
Mum.window = Mum.extend({
start() {
this.wh = [this.width, this.height];
this.bb = bbox.fromcwh([0,0], this.wh);
2023-10-04 17:57:37 -05:00
},
draw(cursor = [0,0], cnt = Mum) {
var p = cursor.sub(this.wh.scale(this.anchor)).add(this.padding);
2024-04-03 17:17:32 -05:00
render.window(p,this.wh, this.color);
this.bb = bbox.blwh(p, this.wh);
this.max_width = this.width;
2024-04-03 17:17:32 -05:00
if (this.selectable) gui.controls.check_bb(this);
var pos = [this.bb.l, this.bb.t].add(this.padding);
2023-10-04 17:57:37 -05:00
this.items.forEach(function(item) {
if (item.hide) return;
item.draw(pos.slice(),this);
}, this);
2024-07-09 01:03:39 -05:00
2024-05-16 08:21:13 -05:00
bind.inst = render.flushtext();
render.spdraw(bind);
2024-03-18 08:16:25 -05:00
gui.scissor_win();
2023-10-04 17:57:37 -05:00
},
2023-10-04 08:18:09 -05:00
});
Mum.image = Mum.extend({
start() {
if (!this.path) {
2024-02-25 17:31:48 -06:00
console.warn("Mum image needs a path.");
2023-10-04 08:18:09 -05:00
this.draw = function(){};
return;
}
2023-10-04 08:18:09 -05:00
2024-03-18 14:27:52 -05:00
var tex_wh = texture.dimensions(this.path);
2023-10-04 17:57:37 -05:00
this.wh = tex_wh.slice();
if (this.width !== 0) this.wh.x = this.width;
if (this.height !== 0) this.wh.y = this.height;
2023-10-04 08:18:09 -05:00
this.wh = wh.scale(this.scale);
this.sendscale = [wh.x/tex_wh.x, wh.y/tex_wh.y];
},
draw(pos) {
this.calc_bb(pos);
gui_img(this.path, pos.sub(this.anchor.scale([this.width, this.height])), this.sendscale, this.angle, this.image_repeat, this.image_repeat_offset, this.color);
},
2023-10-04 08:18:09 -05:00
calc_bb(pos) {
this.bb = bbox.fromcwh(this.wh.scale([0.5,0.5]), wh);
this.bb = bbox.move(this.bb, pos.sub(this.wh.scale(this.anchor)));
}
2023-10-04 08:18:09 -05:00
});
Mum.column = Mum.extend({
draw(cursor = [0,0], cnt = Mum) {
2023-10-04 08:18:09 -05:00
if (this.hide) return;
cursor = cursor.add(this.offset);
this.max_width = cnt.width;
2023-10-04 08:18:09 -05:00
this.items.forEach(function(item) {
if (item.hide) return;
item.draw(cursor, this);
cursor.y -= item.height;
2023-10-04 17:57:37 -05:00
cursor.y -= this.padding.y;
2023-10-04 08:18:09 -05:00
}, this);
},
});
2024-07-09 01:03:39 -05:00
/*
2023-10-04 08:18:09 -05:00
Mum.debug_colors = {
bounds: Color.red.slice(),
margin: Color.blue.slice(),
padding: Color.green.slice()
2024-07-09 01:03:39 -05:00
};*/
2024-07-09 01:03:39 -05:00
//Object.values(Mum.debug_colors).forEach(function(v) { v.a = 100; });
2024-07-09 01:03:39 -05:00
//return { Mum };
2024-08-15 12:26:37 -05:00