184 lines
3.0 KiB
JavaScript
184 lines
3.0 KiB
JavaScript
class Selectable {
|
|
is_selected = false;
|
|
|
|
|
|
select() {
|
|
this.is_selected = true;
|
|
}
|
|
unselect() {
|
|
this.is_selected = false;
|
|
}
|
|
draw_selection() {
|
|
|
|
}
|
|
}
|
|
|
|
|
|
class Screen {
|
|
elements = [];
|
|
|
|
selectable_objects = [];
|
|
current_selected_element;
|
|
ctx;
|
|
|
|
constructor(ctx) {
|
|
this.ctx = ctx;
|
|
|
|
this.onFrame = this.onFrame.bind(this);
|
|
}
|
|
|
|
addElement(elem) {
|
|
this.elements.push(elem);
|
|
}
|
|
|
|
drawAll() {
|
|
this.ctx.clearRect(0,0, windowSize.width, windowSize.height);
|
|
this.elements.forEach(element => {
|
|
this.ctx.save();
|
|
element?.draw(this.ctx);
|
|
this.ctx.restore();
|
|
});
|
|
}
|
|
|
|
|
|
updateAll() {
|
|
|
|
this.elements.forEach(element => {
|
|
element?.update();
|
|
});
|
|
}
|
|
|
|
|
|
onFrame() {
|
|
this.drawAll();
|
|
|
|
this.updateAll();
|
|
|
|
requestAnimationFrame(this.onFrame);
|
|
}
|
|
|
|
select(obj) {
|
|
obj.select();
|
|
this.current_selected_element = obj;
|
|
}
|
|
unselect() {
|
|
this.current_selected_element.unselect();
|
|
this.current_selected_element = null;
|
|
}
|
|
makeSelectable(obj) {
|
|
var select_obj = new Selectable();
|
|
Object.assign(obj, select_obj);
|
|
obj.select = select_obj.select;
|
|
obj.unselect = select_obj.unselect;
|
|
obj.draw_selection = select_obj.draw_selection;
|
|
|
|
|
|
}
|
|
}
|
|
|
|
class MainMenu extends Screen{
|
|
|
|
constructor(ctx) {
|
|
super(ctx);
|
|
}
|
|
|
|
load() {
|
|
requestAnimationFrame(this.onFrame);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
class Sprite {
|
|
|
|
}
|
|
|
|
|
|
class Shape {
|
|
startX;
|
|
startY;
|
|
|
|
originX;
|
|
originY;
|
|
|
|
color;
|
|
|
|
rotation = 0;
|
|
|
|
draw(ctx) {
|
|
|
|
}
|
|
|
|
update() {
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
translate(x, y) {
|
|
this.startX = x;
|
|
this.startY = y;
|
|
}
|
|
translateX(x) {
|
|
this.startX = x;
|
|
}
|
|
translateY(y) {
|
|
this.startY = y;
|
|
}
|
|
|
|
}
|
|
class Rectangle extends Shape{
|
|
width;
|
|
height;
|
|
|
|
constructor(startX, startY, width, height, color) {
|
|
super()
|
|
this.startX = startX;
|
|
this.startY = startY;
|
|
this.width = width;
|
|
this.height = height;
|
|
this.color = color;
|
|
|
|
this.originX = startX;
|
|
this.originY = startY;
|
|
}
|
|
|
|
draw(ctx) {
|
|
ctx.translate(this.originX, this.originY);
|
|
ctx.rotate(this.rotation);
|
|
ctx.translate(-(this.originX), -(this.originY));
|
|
ctx.fillStyle = this.color;
|
|
ctx.fillRect(this.startX,this.startY, this.width,this.height);
|
|
|
|
if("is_selected" in this) {
|
|
if(this.is_selected) {
|
|
this.draw_selection(ctx);
|
|
}
|
|
|
|
}
|
|
}
|
|
drawStroke(ctx) {
|
|
ctx.strokeStyle = "blue";
|
|
ctx.lineWidth = 5;
|
|
ctx.strokeRect(this.startX, this.startY,this.width,this.height);
|
|
}
|
|
|
|
setCenterOrigin() {
|
|
this.originX = this.startX + this.width / 2;
|
|
this.originY = this.startY + this.height / 2;
|
|
}
|
|
}
|
|
|
|
class Circle extends Shape{
|
|
radius;
|
|
} |