diff --git a/index.html b/index.html
index da96f09..92cf312 100644
--- a/index.html
+++ b/index.html
@@ -8,29 +8,83 @@
body {
margin: 0;
overflow: hidden;
+ display: flex;
}
- canvas {
- width: 100%;
- height: 100%;
+ #sidebar {
+ width: 220px;
+ min-width: 220px;
+ height: 100vh;
+ background: #1a1a1a;
+ overflow-y: auto;
+ display: flex;
+ flex-direction: column;
}
#info {
- position: absolute;
- top: 0;
- left: 0;
+ font-family: monospace;
+ color: #aaa;
+ padding: 12px;
+ font-size: 12px;
+ line-height: 2;
+ border-bottom: 1px solid #333;
+ }
+
+ #info kbd {
+ display: inline-block;
+ background: #333;
+ color: #ddd;
+ padding: 1px 5px;
+ border-radius: 3px;
+ font-family: monospace;
+ font-size: 11px;
+ }
+
+ #info .label {
+ display: inline-block;
+ width: 65px;
+ }
+
+ #gui-container {
+ flex: 1;
+ }
+
+ /* lil-gui overrides: fill sidebar, labels on top */
+ #gui-container .lil-gui.root {
+ width: 100% !important;
+ position: static;
+ }
+
+ #gui-container .lil-gui .controller {
+ flex-wrap: wrap;
+ }
+
+ #gui-container .lil-gui .controller .name {
width: 100%;
- text-align: left;
- font-family: monospace;
- color: white;
- padding: 16px;
- text-shadow: 0 0 3px black;
- pointer-events: none;
+ min-width: 100%;
+ padding-bottom: 2px;
+ }
+
+ #gui-container .lil-gui .controller .widget {
+ min-width: 100%;
+ }
+
+ canvas {
+ flex: 1;
+ min-width: 0;
+ height: 100vh;
}
- Controls:
Q - draw home cells
W - draw food cells
E - draw obstacle
R - erase
Drag and scroll to move the camera
+
diff --git a/src/App.ts b/src/App.ts
index e637b4f..f6facfb 100644
--- a/src/App.ts
+++ b/src/App.ts
@@ -57,8 +57,9 @@ export default new (class App {
}
private resize() {
- const width = window.innerWidth * window.devicePixelRatio;
- const height = window.innerHeight * window.devicePixelRatio;
+ const canvas = this.renderer.canvas;
+ const width = canvas.clientWidth * window.devicePixelRatio;
+ const height = canvas.clientHeight * window.devicePixelRatio;
this.renderer.resizeCanvas(width, height);
diff --git a/src/GUI.ts b/src/GUI.ts
index 63fcce8..89b0942 100644
--- a/src/GUI.ts
+++ b/src/GUI.ts
@@ -5,7 +5,7 @@ type EventHandler = () => void;
class GUIController {
private gui: GUI = new GUI({
- width: 400,
+ container: document.getElementById("gui-container") as HTMLElement,
});
private listeners: Map = new Map();
diff --git a/src/Renderer.ts b/src/Renderer.ts
index e90564e..d471fba 100644
--- a/src/Renderer.ts
+++ b/src/Renderer.ts
@@ -196,8 +196,7 @@ export default class Renderer {
}
public resizeCanvas(width: number, height: number) {
- this.canvas.width = width;
- this.canvas.height = height;
+ this.renderer.setSize(width, height, false);
}
public getCommonMaterialDefines(): Record {