-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
100 lines (82 loc) · 3.48 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<html lang="en">
<head>
<script src="wasm_exec.js"></script>
<script>
// Check if the page has been loaded before in this session
if (!sessionStorage.getItem("wasmLoaded")) {
sessionStorage.setItem("wasmLoaded", "true");
location.reload(); // Refresh the page automatically after the first load
}
if (WebAssembly) {
const go = new Go();
WebAssembly
.instantiateStreaming(fetch("main.wasm"), go.importObject)
.then((result) => {
go.run(result.instance).then(() => {
// This runs when the WASM execution completes
document.body.style.backgroundColor = 'black';
document.body.innerHTML = 'Game exited. Please refresh with F5 to restart';
});
// Hide the messages once WebAssembly starts
document.getElementById('loading-message').style.display = 'none';
document.getElementById('safari-warning').style.display = 'none';
document.getElementById('randomGif').style.display = 'none';
});
// Check if this is the first time running the WASM in this session, so that the sounds are loaded correctly.
if (!sessionStorage.getItem("wasmFirstRun")) {
sessionStorage.setItem("wasmFirstRun", "true");
location.reload(); // Refresh the page automatically after the first run
}
}
</script>
<title>The Panic Game!</title>
<style>
/* Set the background color of the entire page to grey */
body {
background-color: rgb(0, 0, 0);
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
color: rgb(0, 92, 8);
}
/* Ensure the GIF scales properly and centers on the page */
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<h1 id="loading-message">--- Loading The Panic Game! ---</h1>
<p id="safari-warning">*Safari browser not supported. If sounds not loading fast, refresh with F5</p>
<p id="controllers">The Panic Game is meant to be played with local multiplayer: A bunch of friends duking it out</p>
<p id="players">--- Total Players: ---</p>
<p id="controllers">From 2 to 7 players. Up to 3 Keyboards and 4 gamepads. Simply plug in and out controllers</p>
<p id="game-modes">--- Game Modes: ---</p>
<p id="modes">Shooter / Survival / Racer</p>
<p id="keys">--- Keyboard(KB) and Gamepads(GP) keys: ---</p>
<p id="menu">Menu: KB = Space/Esc, GP = Middle/Touchpad</p>
<p id="game-restart"> Game restart KB = 1, GP = Start</p>
<p id="change-mode">Changing mode: KB = 2, GP = Back</p>
</body>
</html>
<img id="randomGif" alt="Random GIF">
<script>
// List of GIF URLs
const gifs = [
"assets/images/other/loading.gif",
"assets/images/other/loading2.gif"
];
// Function to choose a random GIF
function getRandomGif() {
const randomIndex = Math.floor(Math.random() * gifs.length);
return gifs[randomIndex];
}
// Set the src attribute of the img element to a random GIF URL
document.getElementById("randomGif").src = getRandomGif();
</script>