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.
229 lines
6.3 KiB
229 lines
6.3 KiB
import { nextTick, watch, reactive, ref, computed, onMounted, onUnmounted } from "vue";
|
|
import { getQuery, homeAction } from "../kirby.js";
|
|
import { handleActive, ArrowVerticalKeyHandler, ArrowHorizontalKeyHandler, NumberKeyHandler } from "../handlers.js";
|
|
import { overlayAndGet, powerStateMachine, popLastElem } from "../componentPromise.js";
|
|
|
|
const html = (v) => { return v[0] };
|
|
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// Components
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
|
|
export const selectMode = {
|
|
props: ['active', 'stack'],
|
|
setup(props, { emit }) {
|
|
handleActive(props, [NumberKeyHandler, ArrowHorizontalKeyHandler]);
|
|
|
|
const children = reactive([
|
|
{
|
|
component: "d-squareElem",
|
|
props:{
|
|
text: "Play Game",
|
|
icon: "/assets/img/dart.svg",
|
|
},
|
|
onClick: () => {
|
|
emit("resolve", "play");
|
|
}
|
|
}
|
|
]);
|
|
const canvas = ref([]);
|
|
return { children }
|
|
},
|
|
template: html`
|
|
<d-list v-if="active" type="horizontal" :withshortkey="true" :elements="children" />
|
|
`
|
|
}
|
|
|
|
|
|
export const selectTournament = {
|
|
props: ['tournaments', 'active', 'stack'],
|
|
setup(props, { emit }) {
|
|
handleActive(props, [NumberKeyHandler, ArrowVerticalKeyHandler]);
|
|
|
|
const children = computed(() => {
|
|
const items = [];
|
|
for (let i in props.tournaments){
|
|
const tournament = props.tournaments[i];
|
|
items.push({
|
|
component: "d-plainElem",
|
|
props: {
|
|
text: tournament.title,
|
|
},
|
|
onClick: () => {
|
|
emit("resolve", tournament.id);
|
|
}
|
|
})
|
|
}
|
|
items.push({
|
|
component: "d-plainElem",
|
|
props: {
|
|
text: "Back",
|
|
class: "back"
|
|
},
|
|
onClick: () => {
|
|
emit("reject");
|
|
}
|
|
});
|
|
return items;
|
|
});
|
|
return { children }
|
|
},
|
|
template: html`
|
|
<div v-if="active" class="mainmenu">
|
|
<h1>Select Tournament</h1>
|
|
<d-list style="width: 65%" :withshortkey="true" :elements="children"/>
|
|
</div>
|
|
`
|
|
}
|
|
|
|
|
|
export const selectGame = {
|
|
props: ['games', 'active', 'stack'],
|
|
setup(props, { emit }) {
|
|
handleActive(props, [NumberKeyHandler, ArrowVerticalKeyHandler]);
|
|
|
|
const children = computed(() => {
|
|
const items = [];
|
|
items.push({
|
|
component: "d-plainElem",
|
|
props: {
|
|
text: "Create Game",
|
|
class: "new"
|
|
},
|
|
onClick: () => {
|
|
emit("resolve", "create");
|
|
}
|
|
});
|
|
for (let i in props.games){
|
|
const game = props.games[i];
|
|
items.push({
|
|
component: "d-plainElem",
|
|
props: {
|
|
text: game.scorers[0]?.member[0]?.forename + " vs. " + game.scorers[1]?.member[0]?.forename,
|
|
},
|
|
onClick: () => {
|
|
emit("resolve", game.id);
|
|
}
|
|
})
|
|
}
|
|
items.push({
|
|
component: "d-plainElem",
|
|
props: {
|
|
text: "Back",
|
|
class: "back"
|
|
},
|
|
onClick: () => {
|
|
emit("reject");
|
|
}
|
|
});
|
|
return items;
|
|
});
|
|
return { children }
|
|
},
|
|
template: html`
|
|
<div v-if="active" class="mainmenu">
|
|
<h1>Select Game</h1>
|
|
<d-list style="width: 65%" :withshortkey="true" :elements="children"/>
|
|
</div>
|
|
`
|
|
}
|
|
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// State Machine
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
|
|
const stateMachine = (stack) => {
|
|
return {
|
|
0: async (input, reGet) => {
|
|
const [result, error] = await overlayAndGet("d-selectMode", { }, stack, reGet);
|
|
if (error != undefined) {
|
|
return [0, error];
|
|
}
|
|
if (result == "play") {
|
|
return [1, result];
|
|
}
|
|
if (result == "create") {
|
|
// TODO:
|
|
return [1, result];
|
|
}
|
|
},
|
|
1: async (input, reGet) => {
|
|
const tournaments = await getQuery("site.find('seasons').getRunningTournaments", {
|
|
select: {
|
|
title: "page.title",
|
|
id: "page.id",
|
|
}
|
|
});
|
|
const [result, error] = await overlayAndGet("d-selectTournament", { "tournaments": tournaments}, stack, reGet);
|
|
if (error != undefined) {
|
|
popLastElem(stack);
|
|
return [-1, error];
|
|
}
|
|
return [2, result];
|
|
},
|
|
2: async (input, reGet) => {
|
|
const playerInfo = {
|
|
forename: "page.forename",
|
|
surname: "page.surname",
|
|
uuid: "page.uuid",
|
|
// img: "page.pic.toFile?.thumbnail(350).url"
|
|
};
|
|
const games = await getQuery(`site.find('${input}').getRunningGames`, {
|
|
select: {
|
|
title: "page.title",
|
|
id: "page.id",
|
|
uuid: "page.uuid",
|
|
scorers: {
|
|
query: "page.scorers.toStructure",
|
|
select: {
|
|
member: {
|
|
query: "structureItem.member.toPages",
|
|
select: playerInfo
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
const [result, error] = await overlayAndGet("d-selectGame", {"games": games}, stack, reGet);
|
|
if (error != undefined) {
|
|
popLastElem(stack);
|
|
return [-1, error];
|
|
}
|
|
if (result == "create") {
|
|
// Create Game and redirect
|
|
const ret = await homeAction({
|
|
"action": "createGame",
|
|
"tournament": input
|
|
})
|
|
if (ret.status == "ok") {
|
|
window.setTimeout(() => {
|
|
window.location.href = ret.url;
|
|
return false;
|
|
},1);
|
|
}
|
|
return [undefined, undefined];
|
|
}
|
|
window.setTimeout(() => {
|
|
window.location.href = result;
|
|
return false;
|
|
},1);
|
|
return [undefined, undefined];
|
|
}
|
|
};
|
|
}
|
|
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// Exports
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
|
|
export const homeHandler = async (stack) => {
|
|
const sm = stateMachine(stack);
|
|
powerStateMachine(sm, stack);
|
|
}
|
|
|
|
export const initHomeView = (app) => {
|
|
app.component("d-selectMode", selectMode).component("d-selectTournament", selectTournament).component('d-selectGame', selectGame)
|
|
}
|
|
|