mirror of
https://github.com/giongto35/cloud-game.git
synced 2026-07-18 00:55:40 +00:00
160 lines
6.2 KiB
HTML
160 lines
6.2 KiB
HTML
<html lang="en">
|
|
<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 rel="icon" href="data:,">
|
|
|
|
<link href="css/main.css?5" rel="stylesheet">
|
|
<link href="css/ui.css?v=1" rel="stylesheet">
|
|
<title>Cloud Retro</title>
|
|
</head>
|
|
<body>
|
|
<div id="gamebody">
|
|
<div class="app-button" id="w" title="Workers">W</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"></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" class="hidden"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="servers"></div>
|
|
|
|
<div id="guide-txt">
|
|
<b>Arrows</b> (move), <b>ZXCVAS;'./</b> (game ABXYL1-L3R1-R3), <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 the link to the clipboard)
|
|
</div>
|
|
<div id="btn-join" class="btn big" value="join"></div>
|
|
<div id="slider-playeridx" class="slidecontainer">
|
|
<span>player choice</span>
|
|
<input type="range" min="1" max="4" value="1" class="slider" id="playeridx" onkeydown="event.preventDefault()">
|
|
</div>
|
|
<div id="btn-quit" class="btn big" value="quit"></div>
|
|
|
|
<div id="controls-right">
|
|
<div id="btn-load" class="btn big hidden" value="load"></div>
|
|
<div id="btn-save" class="btn big hidden" value="save"></div>
|
|
<div id="btn-select" class="btn big" value="select"></div>
|
|
<div id="btn-start" class="btn big" value="start"></div>
|
|
|
|
<div id="color-button-holder">
|
|
<div id="btn-a" class="btn" value="a"></div>
|
|
<div id="btn-b" class="btn" value="b"></div>
|
|
<div id="btn-x" class="btn" value="x"></div>
|
|
<div id="btn-y" class="btn" value="y"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="btn-settings" class="btn" value="settings"></div>
|
|
|
|
<!-- TODO: remove -->
|
|
<input id="room-txt" type="text" placeholder="room id..." 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">Oh my god</div>
|
|
|
|
<div id="help-overlay" class="hidden">
|
|
<div id="help-overlay-background"></div>
|
|
<div id="help-overlay-detail"></div>
|
|
</div>
|
|
<div id="btn-help" class="btn" value="help"></div>
|
|
{{if .Recording.Enabled}}
|
|
<input id="user-name" type="text" data-lpignore="true" spellcheck="false" placeholder="user"
|
|
class="record-user">
|
|
<div id="btn-rec" class="btn" value="rec"></div>
|
|
{{end}}
|
|
</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>
|
|
<div class="source">
|
|
<span id="v">69ff8ae</span>
|
|
<a rel="noopener noreferrer" target="_blank" href="https://github.com/giongto35/cloud-game">
|
|
Source code on GitHub
|
|
</a>
|
|
</div>
|
|
|
|
<script src="js/gui/gui.js?v=1"></script>
|
|
<script src="js/utils.js?v1"></script>
|
|
<script src="js/gui/message.js?v=1"></script>
|
|
<script src="js/log.js?v=5"></script>
|
|
<script src="js/event/event.js?v=5"></script>
|
|
<script src="js/input/keys.js?v=3"></script>
|
|
<script src="js/settings/opts.js?v=1"></script>
|
|
<script src="js/settings/settings.js?v=3"></script>
|
|
<script src="js/env.js?v=5"></script>
|
|
<script src="js/input/input.js?v=3"></script>
|
|
<script src="js/gameList.js?v=3"></script>
|
|
<script src="js/stream/stream.js?v=3"></script>
|
|
<script src="js/room.js?v=3"></script>
|
|
<script src="js/network/ajax.js?v=3"></script>
|
|
<script src="js/network/socket.js?v=4"></script>
|
|
<script src="js/network/webrtc.js?v=3"></script>
|
|
<script src="js/recording.js?v=1"></script>
|
|
<script src="js/api/api.js?v=3"></script>
|
|
<script src="js/workerManager.js?v=1"></script>
|
|
<script src="js/stats/stats.js?v=1"></script>
|
|
<script src="js/controller.js?v=8"></script>
|
|
<script src="js/input/keyboard.js?v=6"></script>
|
|
<script src="js/input/touch.js?v=3"></script>
|
|
<script src="js/input/joystick.js?v=3"></script>
|
|
|
|
<script src="js/init.js?v=5"></script>
|
|
|
|
{{if .Analytics.Inject}}
|
|
<script async src="https://www.googletagmanager.com/gtag/js?id={{.Analytics.Gtag}}"></script>
|
|
<script>
|
|
window.dataLayer = window.dataLayer || [];
|
|
|
|
function gtag() {
|
|
dataLayer.push(arguments);
|
|
}
|
|
|
|
gtag('js', new Date());
|
|
gtag('config', '{{.Analytics.Gtag}}');
|
|
</script>
|
|
{{end}}
|
|
</body>
|
|
</html>
|