cloud-game/static/game.html
2019-08-31 13:45:06 +08:00

115 lines
5.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?1" rel="stylesheet">
<link href="/static/css/main.css?1" 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" muted playinfullscreen="false" playsinline poster="/static/img/screen_loading.gif"></video>
<!--<video id="game-screen" autoplay=true 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="btn-select" unselectable="on" class="btn big unselectable" value="select">Select</div>
<div id="btn-start" unselectable="on" class="btn big unselectable" value="start">Start</div>
<div id="color-button-holder">
<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 id="btn-x" unselectable="on" class="btn unselectable" value="x">X</div>
<div id="btn-y" unselectable="on" class="btn unselectable" value="y">Y</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>
<a id="ribbon" style="position: fixed; right: 0; top: 0;" href="https://github.com/giongto35/cloud-game"><img width="149" height="149" src="https://github.blog/wp-content/uploads/2008/12/forkme_right_gray_6d6d6d.png?resize=149%2C149" class="attachment-full size-full" alt="Fork me on GitHub" data-recalc-dims="1"></a>
<script>
DEBUG = true;
STUNTURN = {{.STUNTURN}};
</script>
<script src="/static/js/jquery-3.3.1.min.js?1"></script>
<script src="/static/js/utils.js?1"></script>
<!-- https://rawgit.com/Rillke/opus.js-sample/master/index.xhtml -->
<script src="/static/js/libopus.js?1"></script>
<script src="/static/js/opus.js?1"></script>
<script src="/static/js/global.js?1"></script>
<script src="/static/js/controller.js?1"></script>
<script src="/static/js/gesture_keyboard.js?1"></script>
<script src="/static/js/gesture_touch.js?1"></script>
<script src="/static/js/gesture_joystick.js?1"></script>
<script src="/static/js/ws.js?5"></script>
<script src="/static/js/init.js?1"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-145078282-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-145078282-1');
</script>
</body>
</html>