cloud-game/web/game.html
88hcsif 091b086bcb
N64 Support (#195)
* Allow HTTP access to Raspberry Pi over local network
Lower audio buffer maximum theoretical size to get the worker code to compile on Raspberry Pi

* Add https port flag to run https worker and coordinator on the same machine
Add https chain and key flags to allow to use an existing certificate and bypass letsencrypt
Note the ping address resolution is still broken with this configuration

* Add option to define a ping server in the coordinator
This is useful when it is not predicatable what address and port the worker will be runnning at
This only works when there is a single worker

* Free temporarily allocated CStrings
Store constant CString

* Only load core once and unload it when done

* Add Nintendo 64 support!
Disclaimer: only tested with Mupen64plus and Mupen64plusNext on Raspberry Pi.
It probably needs more work to run on every system and with other OpenGL libretro libraries.
Input controls are hacked together, it really needs analog stick and remapping support to play in a nicer way.
I am worried there might be a memory leak when unloading Mupen64plus but this needs further investigation.

* Add analog sticks + R2,L2,R3,L3 support

* Add client logic to control left analog stick via keyboard and touch
Add client logic to toggle between dpad mode and analog mode (even for joystick)
Might need to revisit if and when remapping is implemented
Tocuh sensitivity of analog stick is pretty high, might need tweaking

* Add cores for Raspberry Pi
Add N64 core for linux x86_64

* Reset use OpenGL flag on nanoarch shutdown (line lost in refactoring)
2020-06-17 18:07:10 +08:00

126 lines
5.7 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">
</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" hidden></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="game-screen" muted playinfullscreen="false" playsinline></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" unselectable="on" class="btn big unselectable" value="load"></div>
<div id="btn-save" unselectable="on" class="btn big unselectable" value="save"></div>
<div id="btn-join" unselectable="on" 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" unselectable="on" class="btn big unselectable" value="quit"></div>
<div id="btn-select" unselectable="on" class="btn big unselectable" value="select"></div>
<div id="btn-start" unselectable="on" class="btn big unselectable" value="start"></div>
<div id="color-button-holder">
<div id="btn-a" unselectable="on" class="btn unselectable" value="a"></div>
<div id="btn-b" unselectable="on" class="btn unselectable" value="b"></div>
<div id="btn-x" unselectable="on" class="btn unselectable" value="x"></div>
<div id="btn-y" unselectable="on" class="btn unselectable" value="y"></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"></div>
<label class="dpad-toggle-label">
<input type="checkbox" id="dpad-toggle" checked>
<span class="dpad-toggle-slider"></span>
</label>
</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=3"></script>
<script src="/static/js/env.js?v=5"></script>
<script src="/static/js/event/event.js?v=4"></script>
<script src="/static/js/input/keys.js?v=3"></script>
<script src="/static/js/input/input.js?v=3"></script>
<script src="/static/js/gameList.js?v=3"></script>
<script src="/static/js/room.js?v=3"></script>
<script src="/static/js/stats/stats.js?v=1"></script>
<script src="/static/js/controller.js?v=4"></script>
<script src="/static/js/input/keyboard.js?v=3"></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/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/init.js?v=3"></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>