mirror of
https://github.com/giongto35/cloud-game.git
synced 2026-01-23 18:46:11 +00:00
7ebd945344
* Remove jQuery * Remove browser (vendor) prefixes for some CSS properties * Use simple device orientation test * Realign D-pad pointers * Make GameBoy text unselectable * Cleanup console.log * Keep 90% size on mobile browsers due to gh-ribbon overlap * Remove legacy `unselectable="on"` attributes * Align UI buttons * Remove not used UI elements * Change Options button * Don't show player change message when not in a game * Add click/touch handler for circle-pad
152 lines
6.2 KiB
HTML
Vendored
152 lines
6.2 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="Web-based Cloud Gaming for Retro Games"/>
|
|
<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 Retro"/>
|
|
<meta property="og:author" content="giongto35 trichimtrich"/>
|
|
|
|
<link href="/static/css/font-awesome.css?2" rel="stylesheet">
|
|
<link href="/static/css/main.css?4" rel="stylesheet">
|
|
<link href="/static/css/ui.css?v=1" rel="stylesheet">
|
|
</head>
|
|
|
|
<body>
|
|
<div id="gamebody">
|
|
<!--<div id="ui-emulator-bg"></div>-->
|
|
|
|
<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">
|
|
<div id="stats-overlay" class="no-select"></div>
|
|
<!--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="stream" class="game-screen" hidden muted playsinline preload="none"></video>
|
|
|
|
<div id="menu-screen">
|
|
<div id="menu-container">
|
|
</div>
|
|
<div id="menu-item-choice"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="guide-txt"><b>Arrows</b>(move),<b>ZXCVAS</b>(game ABXYLR),<b>1/2</b>(1st/2nd player),<b>Shift/Enter/K/L</b>(select/start/save/load),<b>F</b>(fullscreen),<b>share</b>(copy
|
|
sharelink to clipboard)
|
|
</div>
|
|
<div id="btn-load" class="btn big unselectable" value="load"></div>
|
|
<div id="btn-save" class="btn big unselectable" value="save"></div>
|
|
<div id="btn-join" class="btn big unselectable" value="join"></div>
|
|
<div id="slider-playeridx" class="slidecontainer">
|
|
player choice
|
|
<input type="range" min="1" max="4" value="1" class="slider" id="playeridx" onkeydown="event.preventDefault()">
|
|
</div>
|
|
|
|
<div id="btn-quit" class="btn big unselectable" value="quit"></div>
|
|
<div id="btn-select" class="btn big unselectable" value="select"></div>
|
|
<div id="btn-start" class="btn big unselectable" value="start"></div>
|
|
|
|
|
|
<div id="color-button-holder">
|
|
<div id="btn-a" class="btn unselectable" value="a"></div>
|
|
<div id="btn-b" class="btn unselectable" value="b"></div>
|
|
<div id="btn-x" class="btn unselectable" value="x"></div>
|
|
<div id="btn-y" class="btn unselectable" value="y"></div>
|
|
</div>
|
|
|
|
<div id="btn-settings" class="btn unselectable" value="settings"></div>
|
|
|
|
<!-- TODO: remove -->
|
|
<input id="room-txt" type="text" placeholder="room id..." class=" unselectable" disabled>
|
|
|
|
<label class="dpad-toggle-label" title="D-pad toggle">
|
|
<input type="checkbox" id="dpad-toggle" checked>
|
|
<span class="dpad-toggle-slider"></span>
|
|
</label>
|
|
|
|
<div id="noti-box" 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" class="btn unselectable" value="help"></div>
|
|
</div>
|
|
|
|
<div id="app-settings" class="modal-window">
|
|
<div>
|
|
<div class="settings__controls">
|
|
<span title="Save" id="settings__controls__save" class="semi-button">↑</span>
|
|
<span title="Load" id="settings__controls__load" class="semi-button">↓</span>
|
|
<span title="Reset" id="settings__controls__reset" class="semi-button">⟲</span>
|
|
<span title="Close" id="settings__controls__close" class="semi-button">X</span>
|
|
</div>
|
|
<h1>Options</h1>
|
|
<div id="settings-data"></div>
|
|
<div>
|
|
* -- applied after application restart
|
|
</div>
|
|
</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 src="/static/js/gui/gui.js?v=1"></script>
|
|
<script src="/static/js/utils.js?v1"></script>
|
|
<script src="/static/js/gui/message.js?v=1"></script>
|
|
<script src="/static/js/log.js?v=5"></script>
|
|
<script src="/static/js/event/event.js?v=5"></script>
|
|
<script src="/static/js/input/keys.js?v=3"></script>
|
|
<script src="/static/js/settings/opts.js?v=1"></script>
|
|
<script src="/static/js/settings/settings.js?v=2"></script>
|
|
<script src="/static/js/env.js?v=5"></script>
|
|
<script src="/static/js/input/input.js?v=3"></script>
|
|
<script src="/static/js/gameList.js?v=3"></script>
|
|
<script src="/static/js/stream/stream.js?v=1"></script>
|
|
<script src="/static/js/room.js?v=3"></script>
|
|
<script src="/static/js/stats/stats.js?v=1"></script>
|
|
<script src="/static/js/network/ajax.js?v=3"></script>
|
|
<script src="/static/js/network/socket.js?v=4"></script>
|
|
<script src="/static/js/network/rtcp.js?v=3"></script>
|
|
<script src="/static/js/controller.js?v=6"></script>
|
|
<script src="/static/js/input/keyboard.js?v=5"></script>
|
|
<script src="/static/js/input/touch.js?v=3"></script>
|
|
<script src="/static/js/input/joystick.js?v=3"></script>
|
|
|
|
<script src="/static/js/init.js?v=5"></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>
|