Initial commit
This commit is contained in:
Vojtěch Káně
21
ui/html/base.layout.tmpl.html
Normal file
21
ui/html/base.layout.tmpl.html
Normal file
@@ -0,0 +1,21 @@
|
||||
{{ define "base" -}}
|
||||
<!DOCTYPE html>
|
||||
<html lang='cs'>
|
||||
<head>
|
||||
<meta charset='utf-8'>
|
||||
<title>Tinyquiz</title>
|
||||
<link rel="stylesheet" href="/static/style.css">
|
||||
{{ block "aditional-css" . }}{{ end }}
|
||||
<script src="/static/script.js" defer type="text/javascript"></script>
|
||||
{{ block "aditional-js" . }}{{ end }}
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
{{- block "header" . }}{{ end -}}
|
||||
</header>
|
||||
<main>
|
||||
{{- template "main" . -}}
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
{{- end }}
|
||||
107
ui/html/game.page.tmpl.html
Normal file
107
ui/html/game.page.tmpl.html
Normal file
@@ -0,0 +1,107 @@
|
||||
{{- template "base" . -}}
|
||||
|
||||
{{- define "aditional-css" -}}
|
||||
<link rel="stylesheet" href="/static/game.css">
|
||||
{{ end -}}
|
||||
|
||||
{{- define "aditional-js" -}}
|
||||
{{ end -}}
|
||||
|
||||
{{- define "header" }}
|
||||
<h1>{{ .P.Edges.Session.Edges.Game.Name }}</h1>
|
||||
{{ end -}}
|
||||
|
||||
{{- define "main" }}
|
||||
<template id="name-template">
|
||||
<span class="name"></span>
|
||||
</template>
|
||||
<section id="names" data-my-name="{{ .P.Name }}"></section>
|
||||
|
||||
<template id="answer-template">
|
||||
<button class="answer"></button>
|
||||
</template>
|
||||
<template id="question-template">
|
||||
<h1 class="question"></h1>
|
||||
<div class="answers"></div>
|
||||
</template>
|
||||
<section id="question"></section>
|
||||
|
||||
<section id="controls">
|
||||
<button class="next" data-session="{{ .P.Edges.Session.ID }}">Další otázka</button>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
const socket = new WebSocket('ws://' + window.location.host + '/ws/' + encodeURIComponent({{ .P.ID }}));
|
||||
|
||||
//TODO remove
|
||||
socket.addEventListener('open', () => {
|
||||
console.log("WS oppened");
|
||||
});
|
||||
|
||||
const namesSection = document.getElementById('names');
|
||||
const nameTemplate = document.getElementById('name-template')
|
||||
|
||||
const questionSection = document.getElementById('question');
|
||||
const questionTemplate = document.getElementById('question-template');
|
||||
const answerTemplate = document.getElementById('answer-template');
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const next = document.querySelector('#controls .next');
|
||||
next.addEventListener("click", () => {
|
||||
let url = window.location.path + '/rpc/next';
|
||||
if (questionSection.dataset.id) {
|
||||
url += '?current=' + encodeURIComponent(questionSection.dataset.id);
|
||||
}
|
||||
fetch(url, {method: "POST"})
|
||||
.catch(() => {
|
||||
console.warn("Setting next question failed")
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
socket.addEventListener('message', (e) => {
|
||||
const data = JSON.parse(e.data);
|
||||
console.log(data); //TODO remove debug
|
||||
|
||||
if ('players' in data) {
|
||||
namesSection.innerHTML = '';
|
||||
for (const player of data.players) {
|
||||
const nameClone = nameTemplate.content.cloneNode(true);
|
||||
const name = nameClone.querySelector('.name');
|
||||
name.innerText = player.name;
|
||||
if (player.name === namesSection.dataset.myName) {
|
||||
if (player.organiser) {
|
||||
document.body.classList.add('organiser');
|
||||
} else {
|
||||
document.body.classList.remove('organiser');
|
||||
}
|
||||
name.classList.add('my-name');
|
||||
}
|
||||
if (player.organiser) {
|
||||
name.classList.add('organiser');
|
||||
}
|
||||
namesSection.appendChild(nameClone);
|
||||
}
|
||||
}
|
||||
|
||||
if ('question' in data) {
|
||||
questionSection.innerHTML = '';
|
||||
if (data.question) {
|
||||
const questionClone = questionTemplate.content.cloneNode(true);
|
||||
questionClone.querySelector('.question').innerText = data.question.title;
|
||||
const answers = questionClone.querySelector('.answers');
|
||||
const organiser = document.body.classList.contains('organiser');
|
||||
for (const answer of data.question.answers) {
|
||||
const answerClone = answerTemplate.content.cloneNode(true);
|
||||
answerClone.querySelector('.answer').innerText = answer.title;
|
||||
if (organiser) {
|
||||
answerClone.querySelector('.answer').disabled = true;
|
||||
}
|
||||
answers.appendChild(answerClone);
|
||||
}
|
||||
questionSection.appendChild(questionClone);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{{ end -}}
|
||||
45
ui/html/home.page.tmpl.html
Normal file
45
ui/html/home.page.tmpl.html
Normal file
@@ -0,0 +1,45 @@
|
||||
{{- template "base" . -}}
|
||||
|
||||
{{- define "aditional-css" -}}
|
||||
<link rel="stylesheet" href="/static/home.css">
|
||||
{{ end -}}
|
||||
|
||||
{{- define "aditional-js" -}}
|
||||
<script src="/static/home.js"></script>
|
||||
{{ end -}}
|
||||
|
||||
{{- define "main" }}
|
||||
<main>
|
||||
<section>
|
||||
<h1>Statistiky</h1>
|
||||
<p>
|
||||
Celkem odehráno {{ .Stats.Sessions }} her {{ .Stats.Players }} hráči.
|
||||
Celkem je k dispozici {{ .Stats.Games }} kvízů.
|
||||
</p>
|
||||
</section>
|
||||
<section>
|
||||
<h1>Připojit se ke hře</h1>
|
||||
<form id="join" method="post">
|
||||
<label>Kód hry: <input type="text" name="code" placeholder="Kód hry"></label>
|
||||
<label>Jméno hráče: <input type="text" name="player" placeholder="Jméno"></label>
|
||||
<input type="submit" value="Připojit do hry">
|
||||
</form>
|
||||
</section>
|
||||
<section>
|
||||
<h1>Začít hrát</h1>
|
||||
<form id="play" method="post" action="/play">
|
||||
<label>Kód kvízu: <input type="text" name="code" placeholder="Kód kvizu"></label>
|
||||
<label>Jméno organizátora: <input type="text" name="organiser" placeholder="Jméno"></label>
|
||||
<input type="submit" value="Začit hrát">
|
||||
</form>
|
||||
</section>
|
||||
<section>
|
||||
<h1>Vytvořit nový kvíz</h1>
|
||||
<form id="new" method="get" action="/new">
|
||||
<label>Jméno kvízu: <input type="text" name="quiz" placeholder="Jméno kvízu"></label>
|
||||
<label>Jméno autora: <input type="text" name="author" placeholder="Jméno"></label>
|
||||
<input type="submit" value="Vytvořit">
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
{{ end -}}
|
||||
Reference in New Issue
Block a user