leif/lexys-labyrinth
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Checkpoint some minor editor bits

Browse Source
This commit is contained in:
Eevee (Evelyn Woods) 2021-01-14 00:53:54 -07:00
parent 5ab45b95c6
commit cf72daacbe
3 changed files with 21 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
js/main-editor.js
View File

@ -260,6 +260,17 @@ class EditorLevelBrowserOverlay extends DialogOverlay {
} }
}); });
// FIXME it would be super swell if i could load this lazily
/*
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
this.sortable = new Sortable(this.list, {
group: 'editor-levels',
onEnd: ev => {
// FIXME rearrange the levels for realsies
},
});
*/
this.add_button("new level", ev => { this.add_button("new level", ev => {
this.conductor.editor.append_new_level(); this.conductor.editor.append_new_level();
this.close(); this.close();

4
js/renderer-canvas.js
View File

@ -50,6 +50,8 @@ export class CanvasRenderer {
this.canvas = mk('canvas', {width: tileset.size_x * this.viewport_size_x, height: tileset.size_y * this.viewport_size_y}); this.canvas = mk('canvas', {width: tileset.size_x * this.viewport_size_x, height: tileset.size_y * this.viewport_size_y});
this.canvas.style.setProperty('--viewport-width', this.viewport_size_x); this.canvas.style.setProperty('--viewport-width', this.viewport_size_x);
this.canvas.style.setProperty('--viewport-height', this.viewport_size_y); this.canvas.style.setProperty('--viewport-height', this.viewport_size_y);
this.canvas.style.setProperty('--tile-width', `${tileset.size_x}px`);
this.canvas.style.setProperty('--tile-height', `${tileset.size_y}px`);
this.ctx = this.canvas.getContext('2d'); this.ctx = this.canvas.getContext('2d');
this.viewport_x = 0; this.viewport_x = 0;
this.viewport_y = 0; this.viewport_y = 0;
@ -130,6 +132,8 @@ export class CanvasRenderer {
this.canvas.setAttribute('height', this.tileset.size_y * this.viewport_size_y); this.canvas.setAttribute('height', this.tileset.size_y * this.viewport_size_y);
this.canvas.style.setProperty('--viewport-width', this.viewport_size_x); this.canvas.style.setProperty('--viewport-width', this.viewport_size_x);
this.canvas.style.setProperty('--viewport-height', this.viewport_size_y); this.canvas.style.setProperty('--viewport-height', this.viewport_size_y);
this.canvas.style.setProperty('--tile-width', `${this.tileset.size_x}px`);
this.canvas.style.setProperty('--tile-height', `${this.tileset.size_y}px`);
} }
draw(tic_offset = 0) { draw(tic_offset = 0) {

7
style.css
View File

@ -1612,14 +1612,18 @@ body.--debug #player-debug {
#editor .editor-canvas { #editor .editor-canvas {
grid-area: level; grid-area: level;
overflow: auto; overflow: auto;
position: relative;
/* Flex layout to center the canvas and overlay together */ /* Flex layout to center the canvas and overlay together */
display: flex; display: flex;
/* This isn't supported in Chrome (still!!), so use auto margins on the child instead /* This isn't supported in Chrome (still!!), so use auto margins on the child instead
align-items: safe center; align-items: safe center;
justify-content: safe center; justify-content: safe center;
*/ */
background: #202020; background: #101010;
border: 0.125em solid black; border: 0.125em solid black;
/* FIXME would love if this were above the canvas too, but can't figure out how to do that
* easily in a scrolling element */
box-shadow: inset 0 0 3px black;
} }
#editor .editor-canvas .-container { #editor .editor-canvas .-container {
position: relative; position: relative;
@ -1635,6 +1639,7 @@ body.--debug #player-debug {
width: calc(var(--viewport-width) * var(--tile-width) * var(--scale)); width: calc(var(--viewport-width) * var(--tile-width) * var(--scale));
--viewport-width: 9; --viewport-width: 9;
--viewport-height: 9; --viewport-height: 9;
--scale: 1;
} }
/* SVG overlays */ /* SVG overlays */
#editor svg.level-editor-overlay { #editor svg.level-editor-overlay {