split files
This commit is contained in:
Zutatensuppe
parent
62f8991e11
commit
9e3a6721c9
7 changed files with 99 additions and 123 deletions
|
|
@ -1,32 +0,0 @@
|
|||
import GameCommon from './../common/GameCommon.js'
|
||||
|
||||
export default {
|
||||
setGame: GameCommon.setGame,
|
||||
getRelevantPlayers: GameCommon.getRelevantPlayers,
|
||||
getActivePlayers: GameCommon.getActivePlayers,
|
||||
addPlayer: GameCommon.addPlayer,
|
||||
handleInput: GameCommon.handleInput,
|
||||
getPlayerIdByIndex: GameCommon.getPlayerIdByIndex,
|
||||
getPlayerBgColor: GameCommon.getPlayerBgColor,
|
||||
getPlayerColor: GameCommon.getPlayerColor,
|
||||
getPlayerName: GameCommon.getPlayerName,
|
||||
changePlayer: GameCommon.changePlayer,
|
||||
setPlayer: GameCommon.setPlayer,
|
||||
setTile: GameCommon.setTile,
|
||||
getImageUrl: GameCommon.getImageUrl,
|
||||
setPuzzleData: GameCommon.setPuzzleData,
|
||||
getTableWidth: GameCommon.getTableWidth,
|
||||
getTableHeight: GameCommon.getTableHeight,
|
||||
getPuzzle: GameCommon.getPuzzle,
|
||||
getRng: GameCommon.getRng,
|
||||
getPuzzleWidth: GameCommon.getPuzzleWidth,
|
||||
getPuzzleHeight: GameCommon.getPuzzleHeight,
|
||||
getTilesSortedByZIndex: GameCommon.getTilesSortedByZIndex,
|
||||
getFirstOwnedTile: GameCommon.getFirstOwnedTile,
|
||||
getTileDrawOffset: GameCommon.getTileDrawOffset,
|
||||
getTileDrawSize: GameCommon.getTileDrawSize,
|
||||
getStartTs: GameCommon.getStartTs,
|
||||
getFinishTs: GameCommon.getFinishTs,
|
||||
getFinishedTileCount: GameCommon.getFinishedTileCount,
|
||||
getTileCount: GameCommon.getTileCount,
|
||||
}
|
||||
40
public/components/GameTeaser.vue.js
Normal file
40
public/components/GameTeaser.vue.js
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
import Time from './../../common/Time.js'
|
||||
|
||||
const GameTeaser = {
|
||||
name: 'game-teaser',
|
||||
props: {
|
||||
game: Object,
|
||||
},
|
||||
template: `
|
||||
<div class="game-teaser" :style="style">
|
||||
<a class="game-info" :href="'/g/' + game.id">
|
||||
<span class="game-info-text">
|
||||
🧩 {{game.tilesFinished}}/{{game.tilesTotal}}<br />
|
||||
👥 {{game.players}}<br />
|
||||
{{time(game.started, game.finished)}}<br />
|
||||
</span>
|
||||
</a>
|
||||
<a v-if="false && game.hasReplay" class="game-replay" :href="'/replay/' + game.id">
|
||||
↪️ Watch replay
|
||||
</a>
|
||||
</div>`,
|
||||
computed: {
|
||||
style() {
|
||||
const url = this.game.imageUrl.replace('uploads/', 'uploads/r/') + '-375x210.webp'
|
||||
return {
|
||||
'background-image': `url("${url}")`,
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
time(start, end) {
|
||||
const icon = end ? '🏁' : '⏳'
|
||||
const from = start;
|
||||
const to = end || Time.timestamp()
|
||||
const timeDiffStr = Time.timeDiffStr(from, to)
|
||||
return `${icon} ${timeDiffStr}`
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
export default GameTeaser
|
||||
22
public/components/ImageTeaser.vue.js
Normal file
22
public/components/ImageTeaser.vue.js
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
const ImageTeaser = {
|
||||
name: 'image-teaser',
|
||||
props: {
|
||||
image: Object
|
||||
},
|
||||
template: `<div class="imageteaser" :style="style" @click="onClick"></div>`,
|
||||
computed: {
|
||||
style() {
|
||||
const url = this.image.url.replace('uploads/', 'uploads/r/') + '-150x100.webp'
|
||||
return {
|
||||
'background-image': `url("${url}")`,
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onClick() {
|
||||
this.$emit('click')
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
export default ImageTeaser
|
||||
29
public/components/Upload.vue.js
Normal file
29
public/components/Upload.vue.js
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
const Upload = {
|
||||
name: 'upload',
|
||||
props: {
|
||||
accept: String,
|
||||
label: String,
|
||||
},
|
||||
template: `
|
||||
<label>
|
||||
<input type="file" style="display: none" @change="upload" :accept="accept" />
|
||||
<span class="btn">{{label || 'Upload File'}}</span>
|
||||
</label>
|
||||
`,
|
||||
methods: {
|
||||
async upload(evt) {
|
||||
const file = evt.target.files[0]
|
||||
if (!file) return;
|
||||
const formData = new FormData();
|
||||
formData.append('file', file, file.name);
|
||||
const res = await fetch('/upload', {
|
||||
method: 'post',
|
||||
body: formData,
|
||||
})
|
||||
const j = await res.json()
|
||||
this.$emit('uploaded', j)
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export default Upload
|
||||
|
|
@ -6,7 +6,7 @@ import Debug from './Debug.js'
|
|||
import Communication from './Communication.js'
|
||||
import Util from './../common/Util.js'
|
||||
import PuzzleGraphics from './PuzzleGraphics.js'
|
||||
import Game from './Game.js'
|
||||
import Game from './../common/GameCommon.js'
|
||||
import fireworksController from './Fireworks.js'
|
||||
import Protocol from '../common/Protocol.js'
|
||||
import Time from '../common/Time.js'
|
||||
|
|
|
|||
|
|
@ -1,91 +1,8 @@
|
|||
import GameCommon from '../common/GameCommon.js';
|
||||
import Time from '../common/Time.js'
|
||||
|
||||
const Upload = {
|
||||
name: 'upload',
|
||||
props: {
|
||||
accept: String,
|
||||
label: String,
|
||||
},
|
||||
template: `
|
||||
<label>
|
||||
<input type="file" style="display: none" @change="upload" :accept="accept" />
|
||||
<span class="btn">{{label || 'Upload File'}}</span>
|
||||
</label>
|
||||
`,
|
||||
methods: {
|
||||
async upload(evt) {
|
||||
const file = evt.target.files[0]
|
||||
if (!file) return;
|
||||
const formData = new FormData();
|
||||
formData.append('file', file, file.name);
|
||||
const res = await fetch('/upload', {
|
||||
method: 'post',
|
||||
body: formData,
|
||||
})
|
||||
const j = await res.json()
|
||||
this.$emit('uploaded', j)
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
const GameTeaser = {
|
||||
name: 'game-teaser',
|
||||
props: {
|
||||
game: Object,
|
||||
},
|
||||
template: `
|
||||
<div class="game-teaser" :style="style">
|
||||
<a class="game-info" :href="'/g/' + game.id">
|
||||
<span class="game-info-text">
|
||||
🧩 {{game.tilesFinished}}/{{game.tilesTotal}}<br />
|
||||
👥 {{game.players}}<br />
|
||||
{{time(game.started, game.finished)}}<br />
|
||||
</span>
|
||||
</a>
|
||||
<a v-if="false && game.hasReplay" class="game-replay" :href="'/replay/' + game.id">
|
||||
↪️ Watch replay
|
||||
</a>
|
||||
</div>`,
|
||||
computed: {
|
||||
style() {
|
||||
const url = this.game.imageUrl.replace('uploads/', 'uploads/r/') + '-375x210.webp'
|
||||
return {
|
||||
'background-image': `url("${url}")`,
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
time(start, end) {
|
||||
const icon = end ? '🏁' : '⏳'
|
||||
const from = start;
|
||||
const to = end || Time.timestamp()
|
||||
const timeDiffStr = Time.timeDiffStr(from, to)
|
||||
return `${icon} ${timeDiffStr}`
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
const ImageTeaser = {
|
||||
name: 'image-teaser',
|
||||
props: {
|
||||
image: Object
|
||||
},
|
||||
template: `<div class="imageteaser" :style="style" @click="onClick"></div>`,
|
||||
computed: {
|
||||
style() {
|
||||
const url = this.image.url.replace('uploads/', 'uploads/r/') + '-150x100.webp'
|
||||
return {
|
||||
'background-image': `url("${url}")`,
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onClick() {
|
||||
this.$emit('click')
|
||||
},
|
||||
},
|
||||
}
|
||||
import GameCommon from './../../common/GameCommon.js'
|
||||
import Time from './../../common/Time.js'
|
||||
import Upload from './../components/Upload.vue.js'
|
||||
import GameTeaser from './../components/GameTeaser.vue.js'
|
||||
import ImageTeaser from './../components/ImageTeaser.vue.js'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -7,10 +7,10 @@
|
|||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module">
|
||||
import Page from "/index.js"
|
||||
import Index from "/views/Index.vue.js"
|
||||
new Vue({
|
||||
el: '#app',
|
||||
render: (h) => h(Page, {
|
||||
render: (h) => h(Index, {
|
||||
props: {
|
||||
gamesRunning: {{ gamesRunning|json_encode|raw }},
|
||||
gamesFinished: {{ gamesFinished|json_encode|raw }},
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue