Online Punkteblock für Wizzard
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

134 lines
4.4 KiB

<template>
<table style="border-collapse: collapse; font-size: 1.5em; margin: 2em auto 0.5em;">
<tr>
<th style="border: 1px solid black">Runde</th>
<th style="border: 1px solid black">Player 1</th>
<th style="border: 1px solid black">Player 2</th>
<th style="border: 1px solid black">Player 3</th>
<th style="border: 1px solid black">Player 4</th>
<th style="border: 1px solid black">Player 5</th>
<th style="border: 1px solid black">Player 6</th>
</tr>
<tr v-for="round in [...Array(20).keys()]" :key="round">
<td style="border: 1px solid black; padding: 10px; text-align: center; font-size: 1em;">{{round + 1 }}</td>
<td v-for="player in [...Array(6).keys()]" :key="player" style="border: 1px solid black; padding: 10px;" :style="{display: exists(player, round) ? '' : 'none'}">
<div style="display: flex; justify-content: space-around; align-items: center;">
<!-- Angesagte Stiche -->
<div style="font-size: 10pt; width: 4em; text-align: center;">
<span>Angesagt</span><br>
<input :disabled="!edit" type="number" style="width: 3em;" v-model.number.lazy="said[player][round]" @blur="update" @focus="locked = player + '-' + round">
</div>
<!-- Gemachte Stiche -->
<div style="font-size: 10pt; width: 4em; text-align: center;">
<span>Punkte</span><br>
<input :disabled="!edit" type="number" style="width: 3em;" v-model.number.lazy="values[player][round]" @blur="update" @focus="locked = player + '-' + round">
</div>
<!-- Punkte -->
<div>
<span style="width: 2em; display: inline-block; text-align: right;">{{ sum(player,round) }}</span>
</div>
</div>
</td>
</tr>
</table>
<hr>
<div style="margin: 1em 3em 3em;">
<strong>Link zum Schreiben:</strong>&nbsp;<a :href="href+'?edit'" target="_blank">{{href+'?edit'}}</a><br>
<strong>Link zum Lesen:</strong>&nbsp;<a :href="href" target="_blank">{{href}}</a>
</div>
</template>
<script>
import { reactive, ref } from 'vue';
export default {
name: "Wizzard",
setup() {
const values = reactive({
0: Array(20).fill(0),
1: Array(20).fill(0),
2: Array(20).fill(0),
3: Array(20).fill(0),
4: Array(20).fill(0),
5: Array(20).fill(0)
})
const said = reactive({
0: Array(20).fill(0),
1: Array(20).fill(0),
2: Array(20).fill(0),
3: Array(20).fill(0),
4: Array(20).fill(0),
5: Array(20).fill(0)
})
const locked = ref("")
// get hash or create it
let hash = window.location.hash.split("?")[0]
if (hash == "") window.location.hash = hash = Math.random().toString(36).substring(7)
hash = hash.replace("#", "")
console.log("Hash is: " + hash)
let href = window.location.href.split("?")[0]
let edit = (window.location.href.indexOf("?edit") != -1 ? true : false)
console.log("Edit: " + edit)
async function load() {
let res = await fetch("/sync/"+hash);
if (!res.ok && res.status != 404) return alert("failed to load data - " + res.status)
if (res.status === 404) return update(hash)
let body = await res.json()
console.log(body)
for (let x = 0; x < 6; x++) {
for (let y = 0; y < 20; y++) {
if (values[x][y] != body.values[x][y] && locked != x + "-" + y) {
values[x][y] = body.values[x][y]
}
}
}
for (let x = 0; x < 6; x++) {
for (let y = 0; y < 20; y++) {
if (said[x][y] != body.said[x][y] && locked != x + "-" + y) {
said[x][y] = body.said[x][y]
}
}
}
//Object.assign(values, body)
setTimeout(load, 1000)
}
async function update() {
let res = await fetch("/sync/"+hash, {
method: "PUT",
body: JSON.stringify({
values: values,
said: said,
})
})
if (!res.ok) alert("failed to update data - " + res.status)
locked.value = ""
}
const sum = (player, round) => {
return values[player].slice(0, round+1).reduce((acc, cur) => Number(acc) + Number(cur))
}
const exists = (player, round) => {
return !((Number(player) + 1) * (Number(round) + 1) > 60);
}
load()
return {
values,
said,
sum,
update,
locked,
href,
edit,
exists
}
}
}
</script>