cloud-game/static/game.html
giongto35 7c931571b6
Join room directly (#52)
* Update ws.js

* Start game directly

* Fix autoplay bug

* Return with value
2019-06-09 04:38:44 +08:00

102 lines
4.1 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">
<meta property="og:type" content="cloud-game" />
<meta property="og:title" content="Cloud Gaming - NES Emulator" />
<meta property="og:description" content="Play and share cloud gaming experience with your friends" />
<meta property="og:image" content="http://cloud.webgame2d.com/static/img/ogimage.jpg" />
<meta property="og:url" content="" />
<meta property="og:site_name" content="Cloud gaming" />
<meta property="og:author" content="giongto35 trichimtrich" />
<link href="/static/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">
<!--NOTE: New browser doesn't allow unmuted video player. So we muted here.
There is still audio because current audio flow is not from media but it is manually encoded (technical webRTC challenge). Later, when we can integrate audio to media, we can face the issue with mute again .
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
-->
<video id="game-screen" autoplay=true muted poster="/static/img/screen_loading.gif"></video>
<div id="menu-screen">
<div id="menu-container">
</div>
<div id="menu-item-choice"></div>
</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">play</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">Select</div>
<div id="btn-start" unselectable="on" class="btn unselectable" value="start">Start</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>
<!-- TODO: remove -->
<input id="room-txt" type="text" placeholder="room id..." unselectable="on" class=" unselectable" disabled>
<div id="noti-box" unselectable="on" class="unselectable">Oh my god</div>
<div id="help-overlay">
<div id="help-overlay-background"></div>
<div id="help-overlay-detail"></div>
</div>
<div id="btn-help" unselectable="on" class="btn unselectable" value="help">Help</div>
</div>
<script>
DEBUG = true;
STUNTURN = {{.STUNTURN}};
</script>
<script src="/static/js/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 src="/static/js/init.js"></script>
</body>
</html>