mirror of
https://github.com/solcloud/Counter-Strike.git
synced 2025-02-22 02:42:51 +01:00
181 lines
5.7 KiB
HTML
181 lines
5.7 KiB
HTML
<!Doctype html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>Counter-Strike: Football</title>
|
||
<link rel="stylesheet" href="./assets/css/main.css">
|
||
<link rel="stylesheet" href="./assets/css/hud.css">
|
||
</head>
|
||
<body oncontextmenu="return false" style="background:#000000">
|
||
<div id="hud"><p style="font-size:120px;text-align:center;color:#FFF;padding:90px 40px">Loading....</p></div>
|
||
<div id="ui">
|
||
<header>
|
||
<h1>Counter-Strike</h1>
|
||
<h2>F<span class="emojis">🏉💣</span>tball</h2>
|
||
</header>
|
||
<div id="menu">
|
||
<button onclick="showModal('modal-join')">Play</button>
|
||
<button onclick="loadUserSetting();showModal('modal-setting')">Settings</button>
|
||
<button>Quit</button>
|
||
</div>
|
||
<footer>
|
||
Created by <a target="_blank" href="https://github.com/solcloud">solcloud</a>
|
||
using awesome <a target="_blank" href="https://threejs.org/">three.js</a> 3D library
|
||
</footer>
|
||
</div>
|
||
<div id="modal" class="hidden">
|
||
<div data-name="modal-join" class="hidden">
|
||
<p class="text-warning">Currently, there is no official public server available, but you can run server locally.</p>
|
||
<textarea id="join-url">ws://localhost:8081?map=default&code=acode</textarea>
|
||
<p class="flex">
|
||
<button onclick="closeModal()" class="btn">× Close</button>
|
||
<span> </span>
|
||
<button onclick="joinGameUrl(document.getElementById('join-url').value)" class="btn">↳ Join</button>
|
||
</p>
|
||
</div>
|
||
<div data-name="modal-setting" class="hidden">
|
||
<div class="text-warning">
|
||
<form id="setting-form">
|
||
<p>
|
||
<label>
|
||
<input name="prefer_performance" type="checkbox"> Prefer performance over quality
|
||
</label>
|
||
</p>
|
||
<p>
|
||
<label>
|
||
Field of view
|
||
<input min="10" name="fov" type="number">
|
||
</label>
|
||
</p>
|
||
</form>
|
||
</div>
|
||
<p class="flex">
|
||
<button onclick="closeModal()" class="btn">× Close</button>
|
||
<span> </span>
|
||
<button onclick="saveSetting(new URLSearchParams(new FormData(document.getElementById('setting-form'))));closeModal()" class="btn">✓ Save</button>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="./assets/threejs/three.js?v=144"></script>
|
||
<script src="./assets/threejs/pointer-lock.js?v=144"></script>
|
||
<script src="./assets/js/utils.js"></script>
|
||
<script>
|
||
const modal = document.getElementById('modal')
|
||
const ui = document.getElementById('ui')
|
||
const hud = document.getElementById('hud')
|
||
const validMaps = ['default', 'aim']
|
||
const defaultSetting = {
|
||
prefer_performance: false,
|
||
fov: 70
|
||
}
|
||
|
||
function router() {
|
||
const hash = window.location.hash.substring(1)
|
||
if (hash === '') {
|
||
return
|
||
}
|
||
const params = new URLSearchParams(hash)
|
||
if (!params.has('action')) {
|
||
return
|
||
}
|
||
|
||
switch (params.get('action')) {
|
||
case 'join':
|
||
joinGame(params.get('map'), params.get('url'), params.get('code'))
|
||
break
|
||
}
|
||
}
|
||
|
||
function loadUserSetting() {
|
||
const data = loadSetting()
|
||
const base = document.querySelector('#setting-form')
|
||
|
||
Object.entries(data).forEach(function ([key, value]) {
|
||
const element = base.querySelector(`[name="${key}"]`)
|
||
if (element === null) {
|
||
console.log("Undefined key: " + key)
|
||
return
|
||
}
|
||
if (typeof value === 'boolean') {
|
||
element.checked = value
|
||
} else {
|
||
element.value = value
|
||
}
|
||
})
|
||
}
|
||
|
||
function saveSetting(data) {
|
||
if (data.has('prefer_performance')) {
|
||
defaultSetting.prefer_performance = true
|
||
}
|
||
defaultSetting.fov = data.get('fov')
|
||
|
||
localStorage.setItem('setting', JSON.stringify(defaultSetting))
|
||
}
|
||
|
||
function loadSetting() {
|
||
const userSetting = localStorage.getItem('setting')
|
||
if (userSetting === null) {
|
||
return defaultSetting
|
||
}
|
||
|
||
return JSON.parse(userSetting)
|
||
}
|
||
|
||
function joinGameUrl(url) {
|
||
const query = url.substring(url.indexOf('?') + 1)
|
||
const params = new URLSearchParams(query)
|
||
joinGame(params.get('map'), url.substring(0, url.indexOf('?')), params.get('code'))
|
||
}
|
||
|
||
function joinGame(map, url, code) {
|
||
if (!map || !url || !code) {
|
||
alert("Invalid parameters")
|
||
return
|
||
}
|
||
if (!validMaps.includes(map)) {
|
||
alert("Invalid map given")
|
||
}
|
||
|
||
modal.remove()
|
||
ui.remove()
|
||
const setting = {
|
||
world: loadSetting(),
|
||
code: code,
|
||
url: url,
|
||
map: map
|
||
}
|
||
console.log("Launching game", setting)
|
||
import("./assets/js/start.js").then(async (ns) => {
|
||
await ns.launchGame(document.body, hud, setting)
|
||
})
|
||
}
|
||
|
||
function closeModal() {
|
||
modal.classList.add('hidden')
|
||
modal.querySelectorAll('[data-name]').forEach(function (el) {
|
||
el.classList.add('hidden')
|
||
})
|
||
}
|
||
|
||
function showModal(name) {
|
||
const menu = modal.querySelector(`[data-name="${name}"]`)
|
||
if (!menu) {
|
||
return false
|
||
}
|
||
|
||
modal.classList.remove('hidden')
|
||
menu.classList.remove('hidden')
|
||
}
|
||
|
||
window.addEventListener('beforeunload', (e) => {
|
||
e.preventDefault();
|
||
return "Are you sure to leave this page?"
|
||
});
|
||
window.addEventListener('hashchange', router);
|
||
router()
|
||
</script>
|
||
</body>
|
||
</html>
|