Client/index.html

906 lines
43 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
http-equiv="Content-Type"
contentType="text/html; 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 mr-1"
data-toggle="modal"
data-bs-tooltip=""
data-placement="bottom"
id="of-editconfig-button"
type="button"
title="Edit Configuration"
data-target="#of-editconfigmodal"
>
<i class="fas fa-cog"></i>
</button>
<button
class="btn btn-primary mr-1"
data-toggle="modal"
data-bs-tooltip=""
data-placement="bottom"
id="of-editcache-button"
type="button"
title="Edit Game Builds"
data-target="#of-editcacheconfigmodal"
>
<i class="fas fa-database"></i>
</button>
<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-2024 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
>
<a
href="#of-restoreversionsmodal"
onclick="$('#of-aboutmodal').modal('toggle')"
data-toggle="modal"
data-target="#of-restoreversionsmodal"
>Reset to Default Game Builds</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('https://github.com/OpenFusionProject/OpenFusion','_blank');"
>
<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('https://discord.gg/DYavckB','_blank');"
>
<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"
oninput="validateServerSave('add')"
/><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"
value="127.0.0.1:23000"
required=""
pattern="^([-a-zA-Z0-9]+\.)+[-a-zA-Z0-9]+:[0-9]+$"
oninput="validateServerSave('add')"
/><label for="addserver-versionselect"
>Game Version:&nbsp;</label
><select
class="form-control w-50"
id="addserver-versionselect"
required=""
style="margin-left: -5px"
oninput="validateServerSave('add')"
></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"
oninput="validateServerSave('edit')"
/><label for="editserver-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="^([-a-zA-Z0-9]+\.)+[-a-zA-Z0-9]+:[0-9]+$"
oninput="validateServerSave('edit')"
/><label for="editserver-versionselect"
>Game Version:&nbsp;</label
><select
class="form-control w-50"
id="editserver-versionselect"
required=""
style="margin-left: -5px"
oninput="validateServerSave('edit')"
></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="editserver-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="restoreservers-button"
type="button"
data-dismiss="modal"
onclick="restoreDefaultServers();"
>
Yes, Restore
</button>
</div>
</div>
</div>
</div>
<div
class="modal fade"
role="dialog"
tabindex="-1"
id="of-editconfigmodal"
>
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Edit Configuration</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="editconfig-form" class="needs-validation">
<label for="editconfig-autoupdate"
>Automatically update the client:</label
><input
class="form-control form-row w-75"
type="checkbox"
id="editconfig-autoupdate"
/>
<label for="editconfig-cacheswapping"
>Swap game caches to avoid unnecessary downloads:</label
><input
class="form-control form-row w-75"
type="checkbox"
id="editconfig-cacheswapping"
/>
<label for="editconfig-enableofflinecache"
>Use offline caches when they are available:</label
><input
class="form-control form-row w-75"
type="checkbox"
id="editconfig-enableofflinecache"
/>
<label for="editconfig-verifyofflinecache"
>Verify offline caches every time they are loaded:</label
><input
class="form-control form-row w-75"
type="checkbox"
id="editconfig-verifyofflinecache"
/>
<label for="editconfig-offlinecachelocation"
>Select Offline Cache Location:</label
><input
class="form-control form-row w-75"
id="editconfig-offlinecachelocation"
type="text"
oninput="validateCacheLocation()"
/>
</form>
</div>
<div class="modal-footer">
<button
class="btn btn-primary border rounded border-primary btn-danger border-danger"
id="editconfig-cancel"
type="button"
data-dismiss="modal"
>
Cancel</button
><button
class="btn btn-primary border rounded border-primary btn-success border-success"
id="editconfig-savebutton"
type="submit"
data-dismiss="modal"
form="editconfig-form"
onclick="editConfig();"
>
Save
</button>
</div>
</div>
</div>
</div>
<div
class="modal fade"
role="dialog"
tabindex="-1"
id="of-editcacheconfigmodal"
>
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Edit Game Builds</h4>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div
class="row row-cols-2 d-xl-flex justify-content-center justify-content-xl-start"
id="of-versionbuttons"
style="padding-bottom: 16px"
>
<div
class="col-4 text-left d-inline-flex justify-content-xl-start"
id="cache-buttons"
>
<button
class="btn btn-success mr-1"
data-toggle="modal"
data-bs-tooltip=""
data-placement="bottom"
id="of-addversion-button"
type="button"
title="Add Version"
data-target="#of-addversionmodal"
onclick="deselectVersion()"
>
<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-editversion-button"
type="button"
title="Edit Version"
data-target="#of-editversionmodal"
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-deleteversion-button"
type="button"
title="Delete Version"
data-target="#of-deleteversionmodal"
disabled=""
>
<i class="fas fa-trash-alt"></i>
</button>
</div>
</div>
<div
class="table-responsive text-center border rounded border-primary"
id="cache-table"
>
<table class="table table-striped table-hover mb-0">
<thead>
<tr>
<th>Game Version</th>
<th>Game Cache</th>
<th>Offline Cache</th>
</tr>
</thead>
<tbody id="cache-tablebody">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div
class="modal fade"
role="dialog"
tabindex="-1"
id="of-addversionmodal"
>
<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="addversion-form" class="needs-validation">
<label for="addversion-nameinput"
>Version Name</label
><input
class="form-control form-row w-75"
type="text"
id="addversion-nameinput"
placeholder="custom-build-000"
required=""
pattern="^[-a-zA-Z0-9_]{1,70}$"
oninput="validateVersionSave('add')"
/><label for="addversion-urlinput"
>Version URL</label
><input
class="form-control form-row w-75"
type="text"
id="addversion-urlinput"
placeholder="http://cdn.dexlabs.systems/custom-build-000/"
required=""
pattern="^(https?|file):\/\/\/?([-a-zA-Z0-9@:%._\+~#= ]{1,256}\/){1,64}$"
oninput="validateVersionSave('add')"
/>
</form>
</div>
<div class="modal-footer">
<button
class="btn btn-primary border rounded border-primary btn-danger border-danger"
id="addversion-cancel"
type="button"
data-dismiss="modal"
>
Cancel</button
><button
class="btn btn-primary border rounded border-primary btn-success border-success"
id="addversion-savebutton"
type="submit"
data-dismiss="modal"
form="addversion-form"
onclick="addVersion();"
>
Save
</button>
</div>
</div>
</div>
</div>
<div
class="modal fade"
role="dialog"
tabindex="-1"
id="of-editversionmodal"
>
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Edit Version</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="editversion-form" class="needs-validation">
<label for="editversion-nameinput"
>Version Name</label
><input
class="form-control form-row w-75"
type="text"
id="editversion-nameinput"
placeholder="custom-build-000"
required=""
pattern="^[-a-zA-Z0-9_]{1,70}$"
oninput="validateVersionSave('edit')"
/><label for="editversion-urlinput"
>Version URL</label
><input
class="form-control form-row w-75"
type="text"
id="editversion-urlinput"
placeholder="http://cdn.dexlabs.systems/custom-build-000/"
required=""
pattern="^(https?|file):\/\/\/?([-a-zA-Z0-9@:%._\+~#= ]{1,256}\/){1,64}$"
oninput="validateVersionSave('edit')"
/>
</form>
</div>
<div class="modal-footer">
<button
class="btn btn-primary border rounded border-primary btn-danger border-danger"
id="editversion-cancel"
type="button"
data-dismiss="modal"
>
Cancel</button
><button
class="btn btn-primary border rounded border-primary btn-success border-success"
id="editversion-savebutton"
type="submit"
data-dismiss="modal"
form="editversion-form"
onclick="editVersion();"
>
Save
</button>
</div>
</div>
</div>
</div>
<div
class="modal fade"
role="dialog"
tabindex="-1"
id="of-deleteversionmodal"
>
<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="deleteversion-versionname"
>VERSION_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="deleteversion-button"
type="button"
data-dismiss="modal"
onclick="deleteVersion();"
>
Yes, Delete
</button>
</div>
</div>
</div>
</div>
<div
class="modal fade"
role="dialog"
tabindex="-1"
id="of-restoreversionsmodal"
>
<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
versions?
</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="restoreversions-button"
type="button"
data-dismiss="modal"
onclick="restoreDefaultVersions();"
>
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>