shmup/ants
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Move panels to the left

Browse source
This commit is contained in:
Jared Miller 2026-03-09 18:06:14 -04:00
parent 8dfc6f54bc
commit 14208e17fb
Signed by: shmup
GPG key ID: 22B5C6D66A38B06C
4 changed files with 72 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

80
index.html
View file

@ -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;
width: 100%;
text-align: left;
font-family: monospace;
color: white;
padding: 16px;
text-shadow: 0 0 3px black;
pointer-events: none;
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%;
min-width: 100%;
padding-bottom: 2px;
}
#gui-container .lil-gui .controller .widget {
min-width: 100%;
}
canvas {
flex: 1;
min-width: 0;
height: 100vh;
}
</style>
</head>
<body>
<div id="info">Controls:<br/>Q - draw home cells<br/>W - draw food cells<br/>E - draw obstacle<br/>R - erase<br/>Drag and scroll to move the camera</div>
<div id="sidebar">
<div id="info">
<kbd>Q</kbd> <span class="label">home</span><kbd>W</kbd> food<br/>
<kbd>E</kbd> <span class="label">obstacle</span><kbd>R</kbd> erase<br/>
drag + scroll to move camera
</div>
<div id="gui-container"></div>
</div>
<canvas id="canvas"></canvas>
<script type="module" src="/src/App.ts"></script>
</body>

5
src/App.ts
View file

@ -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);

2
src/GUI.ts
View file

@ -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<string, EventHandler[]> = new Map();

3
src/Renderer.ts
View file

@ -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<string, string> {