prepare for vue, make game run not in body, but in certain element
This commit is contained in:
parent
93708f0cf0
commit
b335707b7f
3 changed files with 13 additions and 7 deletions
|
|
@ -17,6 +17,8 @@ if (typeof MODE === 'undefined') throw '[ MODE not set ]'
|
||||||
|
|
||||||
if (typeof DEBUG === 'undefined') window.DEBUG = false
|
if (typeof DEBUG === 'undefined') window.DEBUG = false
|
||||||
|
|
||||||
|
const TARGET_EL = document.getElementById('app')
|
||||||
|
|
||||||
const MODE_PLAY = 'play'
|
const MODE_PLAY = 'play'
|
||||||
const MODE_REPLAY = 'replay'
|
const MODE_REPLAY = 'replay'
|
||||||
|
|
||||||
|
|
@ -27,7 +29,7 @@ let TIME = () => Time.timestamp()
|
||||||
function addCanvasToDom(canvas) {
|
function addCanvasToDom(canvas) {
|
||||||
canvas.width = window.innerWidth
|
canvas.width = window.innerWidth
|
||||||
canvas.height = window.innerHeight
|
canvas.height = window.innerHeight
|
||||||
document.body.appendChild(canvas)
|
TARGET_EL.appendChild(canvas)
|
||||||
window.addEventListener('resize', () => {
|
window.addEventListener('resize', () => {
|
||||||
canvas.width = window.innerWidth
|
canvas.width = window.innerWidth
|
||||||
canvas.height = window.innerHeight
|
canvas.height = window.innerHeight
|
||||||
|
|
@ -306,12 +308,12 @@ function addMenuToDom(gameId) {
|
||||||
scoresEl.appendChild(scoresTitleEl)
|
scoresEl.appendChild(scoresTitleEl)
|
||||||
scoresEl.appendChild(scoresListEl)
|
scoresEl.appendChild(scoresListEl)
|
||||||
|
|
||||||
document.body.appendChild(settingsOverlay)
|
TARGET_EL.appendChild(settingsOverlay)
|
||||||
document.body.appendChild(previewOverlay)
|
TARGET_EL.appendChild(previewOverlay)
|
||||||
document.body.appendChild(helpOverlay)
|
TARGET_EL.appendChild(helpOverlay)
|
||||||
document.body.appendChild(timerEl)
|
TARGET_EL.appendChild(timerEl)
|
||||||
document.body.appendChild(menuEl)
|
TARGET_EL.appendChild(menuEl)
|
||||||
document.body.appendChild(scoresEl)
|
TARGET_EL.appendChild(scoresEl)
|
||||||
|
|
||||||
return {
|
return {
|
||||||
bgColorPickerEl,
|
bgColorPickerEl,
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<link rel="stylesheet" href="/style.css" />
|
<link rel="stylesheet" href="/style.css" />
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
|
|
@ -10,6 +11,7 @@
|
||||||
<title>🧩 jigsaw.hyottoko.club</title>
|
<title>🧩 jigsaw.hyottoko.club</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
<script>window.GAME_ID = '{{GAME_ID}}'</script>
|
<script>window.GAME_ID = '{{GAME_ID}}'</script>
|
||||||
<script>window.WS_ADDRESS = '{{WS_ADDRESS}}'</script>
|
<script>window.WS_ADDRESS = '{{WS_ADDRESS}}'</script>
|
||||||
<script>window.MODE = 'play'</script>
|
<script>window.MODE = 'play'</script>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<link rel="stylesheet" href="/style.css" />
|
<link rel="stylesheet" href="/style.css" />
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
|
|
@ -13,6 +14,7 @@
|
||||||
<title>🧩 jigsaw.hyottoko.club</title>
|
<title>🧩 jigsaw.hyottoko.club</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
<script>window.GAME_ID = '{{GAME_ID}}'</script>
|
<script>window.GAME_ID = '{{GAME_ID}}'</script>
|
||||||
<script>window.WS_ADDRESS = '{{WS_ADDRESS}}'</script>
|
<script>window.WS_ADDRESS = '{{WS_ADDRESS}}'</script>
|
||||||
<script>window.MODE = 'replay'</script>
|
<script>window.MODE = 'replay'</script>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue