mirror of
https://github.com/giongto35/cloud-game.git
synced 2026-07-22 09:37:09 +00:00
130 lines
No EOL
4.5 KiB
HTML
Vendored
130 lines
No EOL
4.5 KiB
HTML
Vendored
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="user-scalable=0">
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
|
|
<link href="//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet">
|
|
<link href="/static/css/main.css" rel="stylesheet">
|
|
</head>
|
|
|
|
<body>
|
|
<div id="gamebody">
|
|
|
|
<div id="circle-pad-holder">
|
|
<div id="btn-up" class="dpad" value="up"></div>
|
|
<div id="btn-down" class="dpad" value="down"></div>
|
|
<div id="btn-left" class="dpad" value="left"></div>
|
|
<div id="btn-right" class="dpad" value="right"></div>
|
|
<div id="circle-pad"></div>
|
|
</div>
|
|
|
|
<div id="bottom-screen">
|
|
<video id="game-screen" autoplay=true poster="https://orig00.deviantart.net/cdcd/f/2017/276/a/a/october_2nd___gameboy_poltergeist_by_wanyo-dbpdmnd.gif"></video>
|
|
|
|
<div id="menu-screen">
|
|
<img id="box-art" src="/static/img/404.jpg" onerror="this.src='/static/img/404.jpg'">
|
|
<div id="title" unselectable="on" class="unselectable" >
|
|
<p>What the game ?!?</p>
|
|
</div>
|
|
|
|
<img class="arrow left" src="/static/img/arrow2_e.gif">
|
|
<img class="arrow right" src="/static/img/arrow2_e.gif">
|
|
</div>
|
|
</div>
|
|
|
|
<div id="btn-load" unselectable="on" class="btn-big unselectable" value="load">load</div>
|
|
<div id="btn-save" unselectable="on" class="btn-big unselectable" value="save">save</div>
|
|
<div id="btn-join" unselectable="on" class="btn-big unselectable" value="join">join</div>
|
|
<div id="btn-quit" unselectable="on" class="btn-big unselectable" value="quit">quit</div>
|
|
|
|
|
|
<div id="color-button-holder">
|
|
<div id="btn-select" unselectable="on" class="btn unselectable" value="select">Y</div>
|
|
<div id="btn-start" unselectable="on" class="btn unselectable" value="start">X</div>
|
|
<div id="btn-a" unselectable="on" class="btn unselectable" value="a">A</div>
|
|
<div id="btn-b" unselectable="on" class="btn unselectable" value="b">B</div>
|
|
</div>
|
|
|
|
<div id="lights-holder">
|
|
<div id="light-1"></div>
|
|
<div id="light-2"></div>
|
|
<div id="light-3"></div>
|
|
</div>
|
|
|
|
<input id="room-txt" type="text" placeholder="room id..." unselectable="on" class=" unselectable">
|
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
DEBUG = true;
|
|
</script>
|
|
|
|
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
|
|
<script src="/static/js/utils.js"></script>
|
|
|
|
<!-- https://rawgit.com/Rillke/opus.js-sample/master/index.xhtml -->
|
|
<script src="/static/js/libopus.js"></script>
|
|
<script src="/static/js/opus.js"></script>
|
|
|
|
<script src="/static/js/global.js"></script>
|
|
<script src="/static/js/controller.js"></script>
|
|
<script src="/static/js/gesture_keyboard.js"></script>
|
|
<script src="/static/js/gesture_touch.js"></script>
|
|
<script src="/static/js/gesture_joystick.js"></script>
|
|
<script src="/static/js/ws.js"></script>
|
|
|
|
<script>
|
|
function fixScreen() {
|
|
target = $(document);
|
|
child = $("#gamebody");
|
|
|
|
width = child.width();
|
|
height = child.height();
|
|
|
|
// should have maximum for desktop
|
|
if (["win", "mac", "linux"].indexOf(getOS()) != -1) {
|
|
targetWidth = Math.min(800, target.width());
|
|
targetHeight = Math.min(600, target.height());
|
|
} else {
|
|
targetWidth = target.width();
|
|
targetHeight = target.height();
|
|
}
|
|
console.log(targetHeight);
|
|
console.log(targetWidth);
|
|
|
|
screenWidth = targetWidth;
|
|
screenHeight = targetHeight;
|
|
|
|
st = "translate(-50%, -50%) ";
|
|
// rotate ?
|
|
if (isPortrait()) {
|
|
st += `rotate(90deg) `;
|
|
screenWidth = targetHeight;
|
|
screenHeight = targetWidth;
|
|
}
|
|
|
|
// zoom in/out ?
|
|
st += `scale(${Math.min(screenWidth / width, screenHeight / height)}) `;
|
|
|
|
child.css("transform", st);
|
|
child.css("-webkit-transform", st);
|
|
child.css("-moz-transform", st);
|
|
child.css("-ms-transform", st);
|
|
}
|
|
// fixScreen();
|
|
|
|
// $(window).on("resize", fixScreen);
|
|
// $(window).on("orientationchange", fixScreen);
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
</html> |