You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
155 lines
5.3 KiB
155 lines
5.3 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>QUAKEJS_TAB_TITLE</title>
|
|
<link rel="stylesheet" href="game.css"></link>
|
|
<script type="text/javascript" src="ioquake3.js"></script>
|
|
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
|
|
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
|
|
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
|
|
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
|
|
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
|
|
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
|
|
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
|
|
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
|
|
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
|
|
<link rel="manifest" href="/manifest.json">
|
|
<meta name="msapplication-TileColor" content="#ffffff">
|
|
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
|
|
<meta name="theme-color" content="#ffffff">
|
|
<script type="text/javascript">
|
|
function resizeViewport() {
|
|
if (!ioq3.canvas) {
|
|
// ignore if the canvas hasn't yet initialized
|
|
return;
|
|
}
|
|
if ((document['webkitFullScreenElement'] || document['webkitFullscreenElement'] ||
|
|
document['mozFullScreenElement'] || document['mozFullscreenElement'] ||
|
|
document['fullScreenElement'] || document['fullscreenElement'])) { // ignore resize events due to going fullscreen
|
|
return;
|
|
}
|
|
ioq3.setCanvasSize(ioq3.viewport.offsetWidth, ioq3.viewport.offsetHeight);
|
|
}
|
|
|
|
function startQuake(mode) {
|
|
document.getElementById('viewport-frame').style.visibility = "visible";
|
|
document.getElementById('start').style.visibility = "hidden";
|
|
|
|
ioq3.viewport = document.getElementById('viewport-frame');
|
|
ioq3.elementPointerLock = true;
|
|
ioq3.exitHandler = function (err) {
|
|
if (err) {
|
|
var form = document.createElement('form');
|
|
form.setAttribute('method', 'POST');
|
|
form.setAttribute('action', '/');
|
|
|
|
var hiddenField = document.createElement('input');
|
|
hiddenField.setAttribute('type', 'hidden');
|
|
hiddenField.setAttribute('name', 'error');
|
|
hiddenField.setAttribute('value', err);
|
|
form.appendChild(hiddenField);
|
|
|
|
document.body.appendChild(form);
|
|
form.submit();
|
|
return;
|
|
}
|
|
|
|
window.location.href = '/';
|
|
}
|
|
|
|
window.addEventListener('resize', resizeViewport);
|
|
|
|
name = document.getElementById('name').value;
|
|
model = document.getElementById('model').value;
|
|
color = document.getElementById('color').value;
|
|
var args = [];
|
|
args.push('+set', 'fs_cdn', 'QUAKEJS_CONTENT_URL');
|
|
args.push('+name', name);
|
|
args.push('+model', model + "/" + color);
|
|
if(mode == 'multiplayer') {
|
|
args.push('+connect', 'QUAKEJS_SERVER_URL');
|
|
} else {
|
|
args.push('+mode_start', 'FFA');
|
|
args.push('+map', 'q3dm1');
|
|
}
|
|
http://www.quakejs.com/play?set fs_game cpma&set mode_start FFA&set g_teamAutoJoin 1&map cpm1a
|
|
ioq3.callMain(args);
|
|
}
|
|
|
|
window.onload = function () {
|
|
document.getElementById('viewport-frame').style.visibility = "hidden";
|
|
}
|
|
</script>
|
|
</head>
|
|
<style>
|
|
body {
|
|
background: black;
|
|
}
|
|
|
|
#start {
|
|
border: 3px solid green;
|
|
margin: 0;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
text-align: left;
|
|
|
|
display: grid;
|
|
grid-template-columns: max-content max-content;
|
|
grid-gap: 5px;
|
|
}
|
|
|
|
#start * {
|
|
margin: 10px;
|
|
color: red;
|
|
cursor: pointer;
|
|
outline: none;
|
|
background-color: black;
|
|
font: calc(2.4vmin) monospace;
|
|
}
|
|
|
|
#start > label {
|
|
cursor: default;
|
|
}
|
|
|
|
#start > input[type=text] {
|
|
width: 9em;
|
|
}
|
|
|
|
#start > input[type=button] {
|
|
display: inline;
|
|
padding: 10px;
|
|
}
|
|
|
|
</style>
|
|
<body>
|
|
<div id="viewport-frame"></div>
|
|
<form id="start">
|
|
<label for="name">Player Name:</label>
|
|
<input id="name" type="text" value="Anonymous">
|
|
|
|
<label for="model">Player Model:</label>
|
|
<select id="model">
|
|
<option value="sarge">Sarge</option>
|
|
<option value="grunt">Grunt</option>
|
|
<option value="major">Major</option>
|
|
<option value="visor">Visor</option>
|
|
</select>
|
|
|
|
<label for="color">Player Color:</label>
|
|
<select id="color">
|
|
<option value="default">Default</option>
|
|
<option value="red">Red</option>
|
|
<option value="blue">Blue</option>
|
|
</select>
|
|
|
|
<input type="button" value="Singleplayer" onclick="startQuake('singleplayer')">
|
|
<input type="button" value="Multiplayer" onclick="startQuake('multiplayer')">
|
|
</form>
|
|
</body>
|
|
</html>
|
|
|