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 { body {
margin: 0; margin: 0;
overflow: hidden; overflow: hidden;
display: flex;
} }
canvas { #sidebar {
width: 100%; width: 220px;
height: 100%; min-width: 220px;
height: 100vh;
background: #1a1a1a;
overflow-y: auto;
display: flex;
flex-direction: column;
} }
#info { #info {
position: absolute; font-family: monospace;
top: 0; color: #aaa;
left: 0; 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%; width: 100%;
text-align: left; min-width: 100%;
font-family: monospace; padding-bottom: 2px;
color: white; }
padding: 16px;
text-shadow: 0 0 3px black; #gui-container .lil-gui .controller .widget {
pointer-events: none; min-width: 100%;
}
canvas {
flex: 1;
min-width: 0;
height: 100vh;
} }
</style> </style>
</head> </head>
<body> <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> <canvas id="canvas"></canvas>
<script type="module" src="/src/App.ts"></script> <script type="module" src="/src/App.ts"></script>
</body> </body>

5
src/App.ts
View file

@ -57,8 +57,9 @@ export default new (class App {
} }
private resize() { private resize() {
const width = window.innerWidth * window.devicePixelRatio; const canvas = this.renderer.canvas;
const height = window.innerHeight * window.devicePixelRatio; const width = canvas.clientWidth * window.devicePixelRatio;
const height = canvas.clientHeight * window.devicePixelRatio;
this.renderer.resizeCanvas(width, height); this.renderer.resizeCanvas(width, height);

2
src/GUI.ts
View file

@ -5,7 +5,7 @@ type EventHandler = () => void;
class GUIController { class GUIController {
private gui: GUI = new GUI({ private gui: GUI = new GUI({
width: 400, container: document.getElementById("gui-container") as HTMLElement,
}); });
private listeners: Map<string, EventHandler[]> = new Map(); 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) { public resizeCanvas(width: number, height: number) {
this.canvas.width = width; this.renderer.setSize(width, height, false);
this.canvas.height = height;
} }
public getCommonMaterialDefines(): Record<string, string> { public getCommonMaterialDefines(): Record<string, string> {