mirror of
https://github.com/thilo-behnke/wasm-pong.git
synced 2026-05-21 19:22:44 +00:00
91 lines
2.5 KiB
HTML
91 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Hello wasm-pack!</title>
|
|
<style>
|
|
body {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.game_input {
|
|
border: 1px solid grey;
|
|
border-radius: 0.5em;
|
|
text-align: center;
|
|
}
|
|
|
|
.game_input--inactive {
|
|
color: black;
|
|
}
|
|
|
|
.game_input--active {
|
|
color: white;
|
|
background-color: red;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<noscript>This page contains webassembly and javascript content, please enable javascript in your browser.</noscript>
|
|
<div id="network_session" style="display: none; margin-bottom: 20px"></div>
|
|
<div id="game_controls">
|
|
<button id="online-btn" onclick="WASM_PONG.createOnlineSession()">
|
|
Create Online Game
|
|
</button>
|
|
<input type="text" id="join-online-input"/>
|
|
<button id="join-online-btn" onclick="WASM_PONG.joinOnlineSession()">
|
|
Join Online Game
|
|
</button>
|
|
<button id="pause-btn" onclick="WASM_PONG.pauseGame()">
|
|
Pause
|
|
</button>
|
|
<button id="resume-btn" onclick="WASM_PONG.resumeGame()" disabled>
|
|
Resume
|
|
</button>
|
|
<button id="reset-btn" onclick="WASM_PONG.resetGame()">
|
|
Reset
|
|
</button>
|
|
<button id="tick-btn" onclick="WASM_PONG.oneTick()" disabled>
|
|
Tick
|
|
</button>
|
|
<button id="debug-btn" onclick="WASM_PONG.toggleDebug()">
|
|
Debug
|
|
</button>
|
|
</div>
|
|
<div style="display: flex; align-items: center">
|
|
<div id="game_area">
|
|
<canvas id="wasm-app-canvas"></canvas>
|
|
<script src="bootstrap.js"></script>
|
|
</div>
|
|
<div id="game_inputs">
|
|
<div id="game_inputs__player_1">
|
|
<h3>Player 1</h3>
|
|
<div id="game_inputs__player_1__up" class="game_input game_input--inactive">
|
|
W
|
|
</div>
|
|
<div id="game_inputs__player_1__down" class="game_input game_input--inactive">
|
|
S
|
|
</div>
|
|
</div>
|
|
<div id="game_inputs__player_2">
|
|
<h3>Player 2</h3>
|
|
<div id="game_inputs__player_2__up" class="game_input game_input--inactive">
|
|
UP
|
|
</div>
|
|
<div id="game_inputs__player_2__down" class="game_input game_input--inactive">
|
|
DOWN
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|