para/puzzle
1
1
Fork 0
Code Issues 8 Pull requests Releases Wiki Activity

prepare for vue, make game run not in body, but in certain element

Browse source
This commit is contained in:
Zutatensuppe 2021-05-01 08:59:39 +02:00
parent 93708f0cf0
commit b335707b7f
3 changed files with 13 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

16
public/game.js
View file

@ -17,6 +17,8 @@ if (typeof MODE === 'undefined') throw '[ MODE not set ]'
if (typeof DEBUG === 'undefined') window.DEBUG = false
const TARGET_EL = document.getElementById('app')
const MODE_PLAY = 'play'
const MODE_REPLAY = 'replay'
@ -27,7 +29,7 @@ let TIME = () => Time.timestamp()
function addCanvasToDom(canvas) {
canvas.width = window.innerWidth
canvas.height = window.innerHeight
document.body.appendChild(canvas)
TARGET_EL.appendChild(canvas)
window.addEventListener('resize', () => {
canvas.width = window.innerWidth
canvas.height = window.innerHeight
@ -306,12 +308,12 @@ function addMenuToDom(gameId) {
scoresEl.appendChild(scoresTitleEl)
scoresEl.appendChild(scoresListEl)
document.body.appendChild(settingsOverlay)
document.body.appendChild(previewOverlay)
document.body.appendChild(helpOverlay)
document.body.appendChild(timerEl)
document.body.appendChild(menuEl)
document.body.appendChild(scoresEl)
TARGET_EL.appendChild(settingsOverlay)
TARGET_EL.appendChild(previewOverlay)
TARGET_EL.appendChild(helpOverlay)
TARGET_EL.appendChild(timerEl)
TARGET_EL.appendChild(menuEl)
TARGET_EL.appendChild(scoresEl)
return {
bgColorPickerEl,

2
templates/game.html.twig
View file

@ -1,6 +1,7 @@
<html>
<head>
<link rel="stylesheet" href="/style.css" />
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<style type="text/css">
html,
body {
@ -10,6 +11,7 @@
<title>🧩 jigsaw.hyottoko.club</title>
</head>
<body>
<div id="app"></div>
<script>window.GAME_ID = '{{GAME_ID}}'</script>
<script>window.WS_ADDRESS = '{{WS_ADDRESS}}'</script>
<script>window.MODE = 'play'</script>

2
templates/replay.html.twig
View file

@ -1,6 +1,7 @@
<html>
<head>
<link rel="stylesheet" href="/style.css" />
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<style type="text/css">
html,
body {
@ -13,6 +14,7 @@
<title>🧩 jigsaw.hyottoko.club</title>
</head>
<body>
<div id="app"></div>
<script>window.GAME_ID = '{{GAME_ID}}'</script>
<script>window.WS_ADDRESS = '{{WS_ADDRESS}}'</script>
<script>window.MODE = 'replay'</script>