add different score modes

This commit is contained in:
Zutatensuppe 2021-04-27 21:43:53 +02:00
parent 90590d334e
commit abf6e6aa02
6 changed files with 101 additions and 30 deletions

View file

@ -1,3 +1,4 @@
import GameCommon from '../common/GameCommon.js';
import Time from '../common/Time.js'
const Upload = {
@ -105,23 +106,39 @@ export default {
</div>
<h1>New game</h1>
<div>
<label>Pieces: </label>
<input type="text" v-model="tiles" />
</div>
<div>
<label>Image: </label>
<span v-if="image">
<img :src="image.url" style="width: 150px;" />
or
<upload @uploaded="mediaImgUploaded($event)" accept="image/*" label="Upload an image" />
</span>
<span v-else>
<upload @uploaded="mediaImgUploaded($event)" accept="image/*" label="Upload an image" />
(or select from below)
</span>
</div>
<span class="btn" :class="" @click="onNewGameClick">Start new game</span>
<table>
<tr>
<td><label>Pieces: </label></td>
<td><input type="text" v-model="tiles" /></td>
</tr>
<tr>
<td><label>Scoring: </label></td>
<td>
<label><input type="radio" v-model="scoreMode" value="1" /> Any (Score when pieces are connected to each other or on final location)</label>
<br />
<label><input type="radio" v-model="scoreMode" value="0" /> Final (Score when pieces are put to their final location)</label>
</td>
</tr>
<tr>
<td><label>Image: </label></td>
<td>
<span v-if="image">
<img :src="image.url" style="width: 150px;" />
or
<upload @uploaded="mediaImgUploaded($event)" accept="image/*" label="Upload an image" />
</span>
<span v-else>
<upload @uploaded="mediaImgUploaded($event)" accept="image/*" label="Upload an image" />
(or select from below)
</span>
</td>
</tr>
<tr>
<td colspan="2">
<span class="btn" :class="" @click="onNewGameClick">Start new game</span>
</td>
</tr>
</table>
<h1>Image lib</h1>
<div>
@ -137,6 +154,7 @@ export default {
return {
tiles: 1000,
image: '',
scoreMode: GameCommon.SCORE_MODE_ANY,
}
},
methods: {
@ -157,7 +175,11 @@ export default {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({tiles: this.tiles, image: this.image}),
body: JSON.stringify({
tiles: this.tiles,
image: this.image,
scoreMode: parseInt(this.scoreMode, 10),
}),
})
if (res.status === 200) {
const game = await res.json()

View file

@ -25,6 +25,10 @@ h1, h2, h3, h4 {
a { color: var(--link-color); text-decoration: none; }
a:hover { color: var(--link-hover-color); }
td, th {
vertical-align: top;
}
.scores {
position: absolute;
right: 0;