cloud-game/web/game.html
giongto35 a1ac8f272a
Setup HTTPS using autocert (#149)
* Add HTTPS WSS

* Update https

* HTTPS

* Add https

* Add HTTPS worker

* Add HTTPS

* add https

* Add pingserver to worker

* add https

* Add public domain whitelist

* Not fatal when there existing echo server
2020-01-03 04:37:26 +08:00

124 lines
5.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">
<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="slider-playeridx" class="slidecontainer">
player index
<input type="range" min="1" max="4" value="1" class="slider" id="playeridx" onkeydown="event.preventDefault()">
</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=2"></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=2"></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>