48 lines
1.9 KiB
HTML
48 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>CoinAge Online</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous"/>
|
|
<link rel="stylesheet" href="https://unpkg.com/dialog-polyfill@0.5.6/dist/dialog-polyfill.css"/>
|
|
<link rel="stylesheet" href="css/coinage.css"/>
|
|
</head>
|
|
<body>
|
|
<div id="content">
|
|
</div>
|
|
<div style="display:none;"
|
|
hx-trigger="every 2s"
|
|
hx-get="/reload"
|
|
></div>
|
|
<dialog id="selectCoin">
|
|
Seems like it works. You clicked coordinates <span id="clickedCoords"></span>
|
|
<button _="on click close() the #selectCoin">Close</button>
|
|
</dialog>
|
|
<script type="text/hyperscript">
|
|
def showCoinChooser(x,y)
|
|
call #selectCoin.showModal()
|
|
end
|
|
</script>
|
|
<dialog id="joinMatch">
|
|
<h3>Welcome to Coin Age!</h3>
|
|
<p>Please enter a code to join a match:</p>
|
|
<input type="text" name="gamecode">
|
|
<button hx-get="/start-game"
|
|
hx-include="[name='gamecode']"
|
|
hx-target="#content"
|
|
hx-swap="outerHTML"
|
|
_="on click close() the #joinMatch">
|
|
Start
|
|
</button>
|
|
</dialog>
|
|
<script src="https://unpkg.com/@iconfu/svg-inject@1.2.3/dist/svg-inject.min.js"></script>
|
|
<script src="https://unpkg.com/dialog-polyfill@0.5.6/dist/dialog-polyfill.js"></script>
|
|
<script src="https://unpkg.com/htmx.org@1.3.3"></script>
|
|
<script src="https://unpkg.com/hyperscript.org@0.0.9"></script>
|
|
<div
|
|
_="init registerDialog(#joinMatch) the dialogPolyfill then showModal() the #joinMatch
|
|
then registerDialog(#selectCoin) the dialogPolyfill"
|
|
></div>
|
|
</body>
|
|
</html>
|