cloud-game/web/game.html
sergystepanov 3d1f1ee587 Initial new frontend rewrite (#129)
* Initial new frontend rewrite

* Refactor some module deps

* Fix options ref in the ajax module

* Refactor

* Add controller state

* Refactor
2019-11-05 01:44:19 +07:00

119 lines
5.3 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 onloadstart="this.volume=0.5" 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/lib/jquery-3.4.1.min.js"></script>
<script src="/static/js/log.js?v=1"></script>
<script src="/static/js/env.js?v=1"></script>
<script src="/static/js/event/event.js?v=1"></script>
<script src="/static/js/input/keys.js?v=1"></script>
<script src="/static/js/input/input.js?v=1"></script>
<script src="/static/js/gameList.js?v=1"></script>
<script src="/static/js/room.js?v=1"></script>
<script src="/static/js/controller.js?v=1"></script>
<script src="/static/js/input/keyboard.js?v=1"></script>
<script src="/static/js/input/touch.js?v=1"></script>
<script src="/static/js/input/joystick.js?v=1"></script>
<script src="/static/js/network/ajax.js?v=1"></script>
<script src="/static/js/network/socket.js?v=1"></script>
<script src="/static/js/network/rtcp.js?v=1"></script>
<script src="/static/js/init.js?v=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>