Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
360 lines (319 sloc) 16.6 KB
<!doctype html>
<!--
Except as noted,
Copyright 2011-2012 Kevin Reid under the terms of the MIT License as detailed
in the accompanying file README.md or <http://opensource.org/licenses/MIT>.
-->
<html><head>
<title>Cubes</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="deps/measviz/src/measviz.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<!-- Third-party GL libraries -->
<script type="text/javascript" src="deps/webgl-debug.js"></script>
<script type="text/javascript" src="deps/webgl-utils.js"></script>
<script type="text/javascript" src="deps/gl-matrix/gl-matrix.js"></script>
<script type="text/javascript" src="deps/game-shim/game-shim.js"></script>
<script type="text/javascript" src="module-initial.js"></script>
<!-- Framework -->
<script type="text/javascript" src="util.js"></script>
<script type="text/javascript" src="storage.js"></script>
<script type="text/javascript" src="deps/measviz/src/measviz.js"></script>
<!-- Game components -->
<script type="text/javascript" src="measviz-instance.js"></script>
<script type="text/javascript" src="circuit.js"></script>
<script type="text/javascript" src="blockset.js"></script>
<script type="text/javascript" src="world.js"></script>
<script type="text/javascript" src="renderer.js"></script>
<script type="text/javascript" src="world-render.js"></script>
<script type="text/javascript" src="block-render.js"></script>
<script type="text/javascript" src="body.js"></script>
<script type="text/javascript" src="player.js"></script>
<script type="text/javascript" src="world-gen.js"></script>
<script type="text/javascript" src="input.js"></script>
<script type="text/javascript" src="ui-2d.js"></script>
<script type="text/javascript" src="audio.js"></script>
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript" src="main.js"></script>
<!-- Create game
This does not actually hook up the game to the UI or load the world; that is done by main.start() which is done onload.
-->
<script type="text/javascript">
var main = new cubes.Main("./", 1/60 /* timestep */, localStorage);
</script>
</head>
<body onload='(function () {
var id = document.getElementById.bind(document);
main.start({
viewCanvas: id("view-canvas"),
hud: {
menu: id("menu"),
blocksetAll: id("blockset-all"),
quickBar: id("quick-bar")
},
sceneInfoOverlay: id("scene-info-overlay"),
worldOverlays: id("world-overlays"),
saveButton: id("save-button"),
objectList: id("object-list"),
panelContainer: id("sidebar-container"),
generateBlocksetList: id("generate_blockset"),
// TODO combine error cases?
webglError: [id("webgl-error-notice")],
featureError: [id("feature-error-notice"), id("feature-error-text")],
loadError: [id("load-error-notice"), id("load-error-text")]
}, function (optError) {});
}());'>
<div class="overlay-bounds">
<canvas id="view-canvas" tabindex="0" class="viewport" width="640" height="480">
<div class="error-notice">
<p>Sorry, but the web browser you are using does not appear to support WebGL (or even Canvas).</p>
</div>
</canvas>
<div id="scene-info-overlay" class="overlay"></div>
<div id="world-overlays"></div>
<div id="menu-container">
<div id="menu">
<button class="menu-button menu-expand-button" onclick="main.input.editBlockset();">Edit blockset</button>
<div id="blockset-all"></div>
<div id="quick-bar"></div>
</div>
</div>
<div id="toggles">
<button id="save-button" onclick="main.save(); document.getElementById('view-canvas').focus(); return false;">Save</button>
<button id="fullscreen-button" onclick="main.requestFullscreen(); document.getElementById('view-canvas').focus(); return false;">Full screen</button>
<script>(function () {
var button = document.getElementById("fullscreen-button");
if (!GameShim.supports.fullscreen) {
button.style.display = "none";
} else {
var ourFullscreenElement = document.body; // TODO get this from Input
function listener(event) {
if (document.fullscreenElement === ourFullscreenElement) {
button.style.visibility = "hidden";
} else {
button.style.removeProperty("visibility");
}
}
document.addEventListener("fullscreenchange", listener, false);
}
}())</script>
<button onclick="main.ui.openPanelFromButton('objects');">Worlds</button>
<button onclick="main.ui.openPanelFromButton('options');">Options</button>
<button onclick="main.ui.openPanelFromButton('help');">Help</button>
</div>
</div>
<div id="error-notices">
<div id="load-error-notice" class="error-notice" style="display: none;">
<p>Sorry, but there was an unexpected error while loading the game.</p>
<pre id="load-error-text" style="white-space: pre-wrap;"></pre>
</div>
<div id="feature-error-notice" class="error-notice" style="display: none;">
<p>Sorry, the browser you are using does not support some required features. These problems were detected:</p>
<pre id="feature-error-text" style="white-space: pre-wrap;"></pre>
<p>If you are looking for a compatible browser, I recommend Google Chrome.</p>
</div>
<div id="webgl-error-notice" class="error-notice" style="display: none;">
<p>Sorry, the web browser you are using does not appear to support WebGL.</p>
</div>
</div>
<div id="sidebar-container" class="sidebar-container">
<button class="sidebar-close-button" onclick="main.ui.hidePanels(); main.ui.refocus(); return true;">»</button>
<div id="objects" class="sidebar" style="display: none;">
<script>main.ui.registerPanel("objects", document.getElementById("objects"));</script>
<h2>Saved Items</h2>
<div id="local-save-ok" style="display: none">
<table style="object-list-table">
<thead>
<tr><th>Type<th>Name<th>Size</tr>
</thead>
<tbody id="object-list"></tbody>
</table>
</div>
<p id="local-save-warning" style="display: none">
Your browser does not appear to support local storage. This world will be lost when you close the page unless you export it and save the text.
</p>
<script>
document.getElementById("local-save-ok").style.display = main.pool.available ? 'block' : 'none';
document.getElementById("local-save-warning").style.display = !main.pool.available ? 'block' : 'none';
</script>
<h2>New World</h2>
<form onsubmit="return false;">
<table class="optionline">
<tr><td>Name:<td><input id="generate_name" type="text" value="" style="width: 95%;">
<p id="generate-name-conflict" style="display: none;" class="error">Name already in use.</p>
<tr><td>Blockset:
<td><select id="generate_blockset">
<!-- dynamic -->
</select>
<script>main.config.generate_blockset.bindControl("generate_blockset");</script>
<tr><td>Shape:
<td><select id="generate_shape">
<option value="fill">Flat-sided</option>
<option value="island">Floating island</option>
<option value="city">City</option>
</select>
<tr><td>Bumpiness:<td><input type="range" step="any" min="0" max="2" value="1" size="4" id="generate_slope">
<tr><td>Block res.:<td><input type="number" min="2" value="16" size="3" step="1" id="generate_tileSize">
</table>
<script>main.config.generate_name.bindControl("generate_name");</script>
<script>main.config.generate_shape.bindControl("generate_shape");</script>
<script>main.config.generate_slope.bindControl("generate_slope");</script>
<script>main.config.generate_tileSize.bindControl("generate_tileSize");</script>
<table class="optionline" style="text-align: center;">
<tr><td>Size:
<td><input type="number" min="1" max="9999" value="400" size="4" id="generate_wx">
<td><input type="number" min="1" max="512" value="128" size="3" id="generate_wy">
<td><input type="number" min="1" max="9999" value="400" size="4" id="generate_wz">
<tr><th><th>W<th>H<th>L
</table>
<script>main.config.generate_wx.bindControl("generate_wx");</script>
<script>main.config.generate_wy.bindControl("generate_wy");</script>
<script>main.config.generate_wz.bindControl("generate_wz");</script>
<div style="text-align: center;">
<button id="generate-button" onclick="
main.regenerate();
return false;
">Generate new world</button>
<script>
main.regenerateOK.whenChanged(function (ok) {
document.getElementById("generate-name-conflict").style.display = ok ? "none" : "block";
document.getElementById("generate-button").disabled = !ok;
return true;
});
</script>
</div>
</form>
<h2>Import</h2>
<form onsubmit="return false;" style="text-align: center">
<p>
<textarea id="load-field" cols="20" rows="3" style="width: 80%;"></textarea>
<br>
<button onclick="
document.getElementById('load-error').textContent = '';
document.getElementById('load-result').textContent = '';
try {
var object = cubes.storage.cyclicUnserialize(JSON.parse(document.getElementById('load-field').value), cubes.storage.Persister.types);
var chip = new main.ui.ObjectChip(main.ui.refObject(object));
document.getElementById('load-result').textContent = 'Imported object: ';
document.getElementById('load-result').appendChild(chip.element);
} catch (e) {
console.log(e);
document.getElementById('load-error').textContent = String(e);
}
return false;
">Import</button>
</p>
<p id="load-error" style="text-shadow: 0 0 .3em red;"></p>
<p id="load-result"></p>
</form>
</div>
<div id="options" class="sidebar" style="display: none;">
<script>main.ui.registerPanel("options", document.getElementById("options"))</script>
<h2>Options</h2>
<h3>View</h3>
<form onsubmit="return false;">
<div class="optionline">Field of view: <input type="range" step="any" min="45" max="140" value="60" size="4" id="fov"></div>
<script>main.config.fov.bindControl("fov");</script>
<div class="optionline">Draw distance: <input type="range" step="any" min="10" max="500" value="100" size="4" id="renderDistance"></div>
<script>main.config.renderDistance.bindControl("renderDistance");</script>
<div class="optionline">Turn rate: <input type="range" step="any" min="0" max="10" value="5" size="4" id="mouseTurnRate"></div>
<script>main.config.mouseTurnRate.bindControl("mouseTurnRate");</script>
<div class="optionline"><label><input type="checkbox" id="pitchRelativeFlight"> Pitch-relative flight</label></div>
<script>main.config.pitchRelativeFlight.bindControl("pitchRelativeFlight");</script>
</form>
<h3>Graphics</h3>
<form onsubmit="return false;">
<div class="optionline"><label><input type="checkbox" id="lighting"> Lighting</label></div>
<script>main.config.lighting.bindControl("lighting");</script>
<div class="optionline"><label><input type="checkbox" id="smoothLighting"> Smooth lighting</label></div>
<script>main.config.smoothLighting.bindControl("smoothLighting");</script>
<div class="optionline"><label><input type="checkbox" id="bumpMapping"> Bump mapping</label></div>
<script>main.config.bumpMapping.bindControl("bumpMapping");</script>
<div class="optionline"><label><input type="checkbox" id="cubeParticles"> Cubical particles</label></div>
<script>main.config.cubeParticles.bindControl("cubeParticles");</script>
<div class="optionline"><label><input type="checkbox" id="fsaa"> Fake 2× FSAA (I have fillrate to burn)</label></div>
<script>main.config.fsaa.bindControl("fsaa");</script>
</form>
<h3>Sound</h3>
<form onsubmit="return false;">
<div class="optionline"><label><input type="checkbox" id="enableSound"> Sound</label></div>
<script>
document.getElementById("enableSound").disabled = !cubes.Audio.supported;
main.config.sound.bindControl("enableSound");
</script>
</form>
<h3>Controls</h3>
<form onsubmit="return false;">
<table class="fancy">
<thead><tr>
<th>Function
<th>Key
</tr></thead>
<tbody id="controls-config">
<!-- dynamically generated -->
</tbody>
</table>
<script type="text/javascript">
new cubes.ControlBindingUI(main.config.controls, document.getElementById("controls-config"));
</script>
<p>To change a control binding, click on the current one and then press the key or mouse button you wish to use instead. To add an additional binding, click the “…”. To remove a binding, click on it and click the “×” button.</p>
</form>
<h3>Debug</h3>
<form onsubmit="return false;">
<div class="optionline"><label><input type="checkbox" id="debugForceRender"> Always render frames</label></div>
<script>main.config.debugForceRender.bindControl("debugForceRender");</script>
<div class="optionline"><label><input type="checkbox" id="debugTextureAllocation"> Show block texture</label></div>
<script>main.config.debugTextureAllocation.bindControl("debugTextureAllocation");</script>
<div class="optionline"><label><input type="checkbox" id="debugPlayerCollision"> Show collision volumes</label></div>
<script>main.config.debugPlayerCollision.bindControl("debugPlayerCollision");</script>
<div class="optionline"><label><input type="checkbox" id="alwaysGenerateWorld"> Regenerate world on reload</label></div>
<script>main.config.alwaysGenerateWorld.bindControl("alwaysGenerateWorld");</script>
<div class="optionline"><label><input type="checkbox" id="noclip"> Noclip</label></div>
<script>main.config.noclip.bindControl("noclip");</script>
<p><button onclick="main.config.resetAllOptions(); return false;">Reset to defaults</button></p>
</form>
</div>
<div id="help" class="sidebar" style="display: none;">
<script>main.ui.registerPanel("help", document.getElementById("help"))</script>
<h2>Help</h2>
<h3>Controls</h3>
<p>These are the default controls. The options menu may be used to change them.</p>
<table class="fancy">
<tr><th colspan=2>Movement
<tr><td><kbd>W</kbd> <kbd>A</kbd> <kbd>S</kbd> <kbd>D</kbd><br> or arrows<td>move horizontally
<tr><td><kbd>Space</kbd><td>jump
<tr><td><kbd>E</kbd><td>fly, move up
<tr><td><kbd>C</kbd><td>land, move down
<tr><td><kbd>Q</kbd><td>toggle mouselook
<tr><th colspan=2>Blocks
<tr><td>Left button<td> remove block
<tr><td>Right button<td> place block
<tr><td><kbd>Q</kbd><td> toggle between block menu and mouselook
<tr><td><kbd>1</kbd>–<kbd>9</kbd>, <kbd>0</kbd><td>choose from menu
<tr><td><kbd>R</kbd><td> edit targeted block
<tr><td><kbd>Z</kbd>, <kbd>X</kbd><td> twiddle targeted block (rotation, etc.)
<tr><td>Right button in menu<td> edit clicked block
<tr><td><kbd>Esc</kbd>, <kbd>F</kbd><td> exit block editing
<tr><td><kbd>B</kbd><td> edit blockset, block properties
<tr><th colspan=2>Other editing
<tr><td>Middle button, Shift<td> drag selection
</table>
<p>Click “Edit blockset” in the block menu or press <kbd>B</kbd> to bring up a menu for editing the blockset.</p>
<p>While you can edit any block to any shape, note that making the first block type (which makes up the underground volume in the default world) a non-cubical shape will likely be fatal to your frame rate.</p>
<p>By holding down the selection key you can drag out a selection box; operations on the selection can be performed using the chip which appears at its top left. The available operations are not very extensive at the moment.</p>
<h3>Compatibility &amp; Bugs</h3>
<p>Not compatible with Safari 5.1 due to lack of full ECMAScript 5 support.</p>
<p>On an older MacBook Pro with 10.7 “Lion”, the terrain may be entirely white and the game may crash (exiting the browser in Firefox, a permanently gray screen in Chrome). In general, Cubes has not been tested across a broad range of graphics hardware and may have missing graphics, such as the terrain or sky being entirely white.</p>
<p>Editing the circuit behaviors can cause the game to enter inconsistent states. Circular connections in circuits result in indeterminate behavior.</p>
</div>
</div><!--sidebar-container-->
<script>
function cubes_resizeSidebar() {
document.getElementById("sidebar-container").style.height = window.innerHeight + "px";
return true;
}
window.addEventListener("resize", cubes_resizeSidebar, true);
cubes_resizeSidebar();
</script>
</body></html>