Skip to content

W
webTAS
Commit aa4cb4a9 authored by Daniel Hader's avatar Daniel Hader
Browse files
Options

Switched to bootstrap for menus, playing around with layouts

parent a0f25afd
Show whitespace changes
Inline Side-by-side
Showing with 116 additions and 76 deletions
index.html
View file @ aa4cb4a9
<!doctype html>
<html>
<html lang="en">
<head>
<meta charset="utf-8"></meta>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<title>WebTAS</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container-fluid">
<div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
<ul class="navbar-nav nav-pills me-auto">
<li class="nav-item dropdown">
<button class="nav-link dropdown-toggle"
id="file-dropdown-button"
type="button"
data-bs-toggle="dropdown"
aria-expanded="false">File</button>
<ul class="dropdown-menu" aria-labelledby="file-dropdown-button">
<li><button class="dropdown-item">New</button></li>
<li><button class="dropdown-item">Open</button></li>
<li><hr class="dropdown-divider"></li>
<li><button class="dropdown-item">Save</button></li>
<li><button class="dropdown-item">Save As</button></li>
</ul>
</li>
<li class="nav-item dropdown">
<button class="nav-link dropdown-toggle"
id="file-dropdown-button"
type="button"
data-bs-toggle="dropdown"
aria-expanded="false">Settings</button>
<ul class="dropdown-menu" aria-labelledby="file-dropdown-button">
<li><button class="dropdown-item">Something</button></li>
<li><button class="dropdown-item">Something Else</button></li>
</ul>
</li>
</ul>
</div>
<div class="mx-auto order-0">
<a class="navbar-brand mx-auto" href="#">WebTAS</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
<ul class="navbar-nav nav nav-pills ms-auto" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active"
id="simulator-tab"
data-bs-toggle="pill"
data-bs-target="#simulator-content"
type="button"
role="tab"
aria-controls="simulator-content"
aria-selected="true">Simulator</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link"
id="editor-tab"
data-bs-toggle="pill"
data-bs-target="#editor-content"
type="button"
role="tab"
aria-controls="editor-content"
aria-selected="false">Editor</button>
</li>
</ul>
</div>
</div>
</nav>
<div>
<div class="tab-content">
<div class="tab-pane fade show active"
id="simulator-content"
role="tabpanel"
aria-labelledby="simulator-tab">
<p>Content for simulator</p>
</div>
<div class="tab-pane fade"
id="editor-content"
role="tabpanel"
aria-labelledby="editor-tab">
<p>Content for editor</p>
</div>
</div>
<div id="simulator"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<script src="three.js" type="text/javascript"></script>
<script src="tile.js" type="text/javascript"></script>
<script src="interface.js" type="text/javascript"></script>
<script src="main.js" type="text/javascript"></script>
</body>
</html>
interface.js deleted 100644 → 0
View file @ a0f25afd
document.addEventListener('keydown', keydown);
document.addEventListener('keyup', keyup);
let keymap = {
"KeyW": "up",
"KeyS": "down",
"KeyA": "left",
"KeyD": "right",
"ArrowUp": "up",
"ArrowDown": "down",
"ArrowLeft": "left",
"ArrowRight": "right",
"KeyP": "zoom_in",
"KeyO": "zoom_out",
}
let keys = {
up: false,
down: false,
left: false,
right: false,
zoom_in: false,
zoom_out: false,
}
let zoom_linear = 1;
const CAMERA_SPEED = 0.02;
const ZOOM_MIN = -1;
const ZOOM_MAX = 6;
const ZOOM_SPEED = 0.1;
function update() {
if (keys.zoom_out) zoom_linear += ZOOM_SPEED;
if (keys.zoom_in) zoom_linear -= ZOOM_SPEED;
if (zoom_linear < ZOOM_MIN) zoom_linear = ZOOM_MIN;
if (zoom_linear > ZOOM_MAX) zoom_linear = ZOOM_MAX;
camera.zoom = Math.pow(2, -zoom_linear);
if (keys.up) camera.position.y -= CAMERA_SPEED / camera.zoom;
if (keys.down) camera.position.y += CAMERA_SPEED / camera.zoom;
if (keys.left) camera.position.x += CAMERA_SPEED / camera.zoom;
if (keys.right) camera.position.x -= CAMERA_SPEED / camera.zoom;
camera.updateProjectionMatrix();
}
function keyup(event) {
if (event.code in keymap) {
keys[keymap[event.code]] = false;
}
}
function keydown(event) {
if (event.code in keymap) {
keys[keymap[event.code]] = true;
}
if (event.code === "Space") {
system.step();
}
}
main.js
View file @ aa4cb4a9
......@@ -2,7 +2,7 @@ const scene = new THREE.Scene();
const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 1, 10);
const renderer = new THREE.WebGLRenderer();
document.body.appendChild(renderer.domElement);
document.getElementById("simulator").appendChild(renderer.domElement);
window.addEventListener('resize', resize, false);
const tile_types = [
......@@ -66,9 +66,29 @@ function resize() {
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
update();
const NO_MENU = 0;
const FILE_MENU = 1;
const VIEW_MENU = 2;
const SETTINGS_MENU = 3;
renderer.render(scene, camera);
let open_menu = NO_MENU;
function dropdown(content_div) {
let open = false;
function click() {
if (open) {
content_div.className = content_div.className.replace(" w3-show", "");
open = false;
} else {
content_div.className += " w3-show";
open = true;
}
}
return click;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment