Client/index.html
CakeLancelot 043bf219e7 Consistency pass and small tweaks
**Formatting going forward**
Variables: camelCase (capitalization of two letter abbreviations is OK, e.g. playerID)
Classes: PascalCase
CSS: kebab-case
Files: kebab-case

**Other miscellaneous changes**
* The WebPlayer crashing as well as failing to load the config file are now fatal  errors and will quit the app
* Moved some style attributes from index.html into openfusion.css
2023-09-03 05:12:30 -05:00

469 lines
22 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>OpenFusion: Server Selector</title>
<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
<link rel="stylesheet" href="assets/fonts/fontawesome-all.min.css" />
<link rel="stylesheet" href="assets/css/openfusion.css" />
<link rel="stylesheet" href="assets/css/styles.css" />
</head>
<body onresize="onResize()">
<section id="of-serverselector">
<div class="container" id="serverselector-container">
<div class="row text-center mt-3" id="of-logoheader">
<div class="col">
<img
class="img-fluid"
id="of-logo"
src="assets/img/of-3.png"
width="256"
/>
<p id="of-intro-text">
Welcome to OpenFusion.<br />Select a server from the
list below to get started.
</p>
</div>
</div>
<div
class="row d-sm-flex d-xl-flex justify-content-center justify-content-sm-center justify-content-xl-center"
id="of-serverlist"
>
<div class="col-8 mb-2">
<div
class="table-responsive text-center border rounded border-primary"
id="server-table"
>
<table class="table table-striped table-hover mb-0">
<thead>
<tr>
<th>Description</th>
<th>Game Version</th>
</tr>
</thead>
<tbody id="server-tablebody">
<tr id="server-listing-placeholder">
<td colspan="2">
No servers added yet... perhaps you
should find one?
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div
class="row row-cols-2 d-xl-flex justify-content-center justify-content-xl-center"
id="of-serverbuttons"
style="padding-bottom: 16px"
>
<div
class="col-4 text-left d-inline-flex justify-content-xl-start"
>
<button
class="btn btn-success mr-1"
data-toggle="modal"
data-bs-tooltip=""
data-placement="bottom"
id="of-addserver-button"
type="button"
title="Add Server"
data-target="#of-addservermodal"
onclick="deselectServer()"
>
<i class="fas fa-plus"></i>
</button>
<button
class="btn btn-primary mr-1 disabled"
data-toggle="modal"
data-bs-tooltip=""
data-placement="bottom"
id="of-editserver-button"
type="button"
title="Edit Server"
data-target="#of-editservermodal"
disabled=""
>
<i class="fas fa-edit"></i>
</button>
<button
class="btn btn-danger mr-1 disabled"
data-toggle="modal"
data-bs-tooltip=""
data-placement="bottom"
id="of-deleteserver-button"
type="button"
title="Delete Server"
data-target="#of-deleteservermodal"
disabled=""
>
<i class="fas fa-trash-alt"></i>
</button>
</div>
<div class="col-4 d-inline-flex justify-content-end">
<button
class="btn btn-primary disabled"
id="of-connect-button"
type="button"
onclick="connectToServer()"
disabled=""
>
Connect&nbsp;<i
class="fas fa-angle-double-right"
></i>
</button>
</div>
</div>
</div>
<div
class="modal fade"
role="dialog"
tabindex="-1"
id="of-aboutmodal"
>
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">About OpenFusionClient</h4>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p
id="of-aboutversionnumber"
class="text-monospace"
>
APP_VERSION_NUMBER
</p>
<p>
©2020-2023 OpenFusion Contributors<br />OpenFusion
is licensed under MIT.<br />
</p>
<a
href="#of-restoreserversmodal"
onclick="$('#of-aboutmodal').modal('toggle')"
data-toggle="modal"
data-target="#of-restoreserversmodal"
>Reset to Default Servers</a
>
</div>
<div class="modal-footer">
<div class="row flex-fill">
<div class="col">
<button
class="btn btn-primary border rounded border-primary pb-1 pt-1 mr-2 pl-2 pr-2"
data-toggle="tooltip"
data-bs-tooltip=""
type="button"
title="Github Page"
onclick="window.open(&#39;https://github.com/OpenFusionProject/OpenFusion&#39;,&#39;_blank&#39;);"
>
<i
class="fab fa-github"
style="font-size: 24px"
></i></button
><button
class="btn btn-primary border rounded border-primary pb-1 pt-1 pl-2 pr-2"
data-toggle="tooltip"
data-bs-tooltip=""
type="button"
title="Discord Chat"
onclick="window.open(&#39;https://discord.gg/DYavckB&#39;,&#39;_blank&#39;);"
>
<i
class="fab fa-discord"
style="
font-size: 24px;
position: relative;
top: 1px;
"
></i>
</button>
</div>
<div class="col text-right">
<button
class="btn btn-primary border rounded border-primary"
type="button"
data-dismiss="modal"
>
Close
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="modal fade"
role="dialog"
tabindex="-1"
id="of-addservermodal"
>
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Add Server</h4>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="addserver-form" class="needs-validation">
<label for="addserver-descinput"
>Server Description</label
><input
class="form-control form-row w-75"
type="text"
id="addserver-descinput"
placeholder="My OpenFusion Server"
required=""
minlength="1"
maxlength="70"
/><label for="addserver-ipinput"
>Server IP</label
><input
class="form-control form-row w-75"
type="text"
id="addserver-ipinput"
placeholder="127.0.0.1:23000"
required=""
pattern="^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]):[0-9]+$"
/><label for="addserver-versionselect"
>Game Version:&nbsp;</label
><select
class="form-control w-50"
id="addserver-versionselect"
required=""
style="margin-left: -5px"
></select>
</form>
</div>
<div class="modal-footer">
<button
class="btn btn-primary border rounded border-primary btn-danger border-danger"
id="addserver-cancel"
type="button"
data-dismiss="modal"
>
Cancel</button
><button
class="btn btn-primary border rounded border-primary btn-success border-success"
id="addserver-savebutton"
type="submit"
data-dismiss="modal"
form="addserver-form"
onclick="addServer();"
>
Save
</button>
</div>
</div>
</div>
</div>
<div
class="modal fade"
role="dialog"
tabindex="-1"
id="of-editservermodal"
>
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Edit Server</h4>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="editserver-form" class="needs-validation">
<label for="editserver-descinput"
>Server Description</label
><input
class="form-control form-row w-75"
type="text"
id="editserver-descinput"
placeholder="My OpenFusion Server"
required=""
minlength="1"
maxlength="70"
/><label for="addserver-ipinput"
>Server IP</label
><input
class="form-control form-row w-75"
type="text"
id="editserver-ipinput"
placeholder="127.0.0.1:23000"
required=""
pattern="^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]):[0-9]+$"
/><label for="editserver-versionselect"
>Game Version:&nbsp;</label
><select
class="form-control w-50"
id="editserver-versionselect"
required=""
style="margin-left: -5px"
></select>
</form>
</div>
<div class="modal-footer">
<button
class="btn btn-primary border rounded border-primary btn-danger border-danger"
id="editserver-cancel"
type="button"
data-dismiss="modal"
>
Cancel</button
><button
class="btn btn-primary border rounded border-primary btn-success border-success"
id="addserver-savebutton"
type="submit"
data-dismiss="modal"
form="editserver-form"
onclick="editServer();"
>
Save
</button>
</div>
</div>
</div>
</div>
<div
class="modal fade"
role="dialog"
tabindex="-1"
id="of-deleteservermodal"
>
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Are you sure?</h4>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p class="lead">
Do you really want to delete<br />"<a
id="deleteserver-servername"
>SERVER_NAME</a
>"?<br /><br />You could always re-add it later.
</p>
</div>
<div class="modal-footer">
<button
class="btn btn-primary border rounded border-primary"
type="button"
data-dismiss="modal"
>
Cancel</button
><button
class="btn btn-primary border rounded border-primary btn-danger border-danger"
id="deleteserver-button"
type="button"
data-dismiss="modal"
onclick="deleteServer();"
>
Yes, Delete
</button>
</div>
</div>
</div>
</div>
<div
class="modal fade"
role="dialog"
tabindex="-1"
id="of-restoreserversmodal"
>
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Are you sure?</h4>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p class="lead">
Do you really want to restore the default
servers?
</p>
</div>
<div class="modal-footer">
<button
class="btn btn-primary border rounded border-primary"
type="button"
data-dismiss="modal"
>
Cancel</button
><button
class="btn btn-primary border rounded border-primary btn-danger border-danger"
id="deleteserver-button"
type="button"
data-dismiss="modal"
onclick="restoreDefaultServers();"
>
Yes, Restore
</button>
</div>
</div>
</div>
</div>
<div id="of-versionnumberdiv">
<a
id="of-versionnumber"
class="text-monospace text-secondary"
href="#of-aboutmodal"
data-toggle="modal"
data-target="#of-aboutmodal"
>v0</a
>
</div>
</section>
<section>
<div id="client"></div>
</section>
<script
src="assets/js/jquery.min.js"
onload="window.$ = window.jQuery = module.exports;"
></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/bs-init.js"></script>
<script src="assets/js/uuidv4.min.js"></script>
<script src="assets/js/server-selector.js"></script>
<script src="assets/js/game-client.js"></script>
<script src="assets/js/snowflakes.min.js"></script>
<script src="assets/js/easter-eggs.js"></script>
</body>
</html>