Statistiky
-- Celkem odehráno {{ .Stats.Sessions }} her {{ .Stats.Players }} hráči. - Celkem je k dispozici {{ .Stats.Games }} kvízů. -
-Připojit se ke hře
- -Začít hrát
- -Vytvořit nový kvíz
- -Open source online quiz platform
+{{ end -}} + +{{- define "main" }} +Statistiky
++ Celkem odehráno {{ .Stats.Sessions }} her {{ .Stats.Players }} hráči. + Celkem je k dispozici {{ .Stats.Games }} kvízů. +
+Připojit se ke hře
+ +Začít hrát
+ +Vytvořit nový kvíz
+ +{{ .Session.Edges.Game.Name }} hrána {{ .Session.Started.Format "2006.01.02 15:04:05 MST" }}
-{{ if .Player.Organiser }}Organizátor{{ else }}Hráč{{ end }} {{ .Player.Name }}
+{{ .Session.Edges.Game.Name }}
{{ end -}} {{- define "main" }} -| {{ .Place }}. místo | {{ .Player.Name }} | {{ .Points }}b |
-
+
- Hrána +
- {{ .Session.Started.Format "2006.01.02 15:04:05" }} +
- {{ if .Player.Organiser }}Organizátor{{ else }}Hráč{{ end }} +
- {{ .Player.Name }} +
+
+
+ {{ range .Results }}
+
+
{{ end -}}
diff --git a/ui/static/game.css b/ui/static/game.css
index 07cd9e7..d8076ec 100644
--- a/ui/static/game.css
+++ b/ui/static/game.css
@@ -40,6 +40,13 @@
#question > h1 {
font-size: 3rem;
+ text-align: center;
+}
+
+#question .answers {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
}
#question .answer {
@@ -62,7 +69,7 @@
body.organiser #controls {
display: flex;
padding-right: 20vw;
- justify-content: flex-end;
+ align-self: flex-end;
}
#session-code {
diff --git a/ui/static/logo.svg b/ui/static/logo.svg
new file mode 100644
index 0000000..5c954e3
--- /dev/null
+++ b/ui/static/logo.svg
@@ -0,0 +1,142 @@
+
+
diff --git a/ui/static/logo_tiny.svg b/ui/static/logo_tiny.svg
new file mode 100644
index 0000000..e296d00
--- /dev/null
+++ b/ui/static/logo_tiny.svg
@@ -0,0 +1,115 @@
+
+
diff --git a/ui/static/results.css b/ui/static/results.css
new file mode 100644
index 0000000..23e469d
--- /dev/null
+++ b/ui/static/results.css
@@ -0,0 +1,30 @@
+td {
+ padding-left: 1rem;
+}
+
+.place {
+ border-radius: 50%;
+ border: 1px solid black;
+ width: 3rem;
+ height: 3rem;
+ text-align: center;
+ padding: 0;
+}
+
+.place.first {
+ background-color: gold;
+ box-shadow: 0 0 10px 5px gold;
+ border: none;
+}
+
+.place.second {
+ background-color: silver;
+ box-shadow: 0 0 6px 3px silver;
+ border: none;
+}
+
+.place.third {
+ background-color: chocolate;
+ box-shadow: 0 0 3px 1px chocolate;
+ border: none;
+}
diff --git a/ui/static/style.css b/ui/static/style.css
index abd4059..7bdfb01 100644
--- a/ui/static/style.css
+++ b/ui/static/style.css
@@ -10,21 +10,44 @@ body {
body {
display: grid;
grid-template-rows: 10vh auto;
- grid-template-columns: auto;
+ grid-template-columns: 25vw 50vw 25vw;
grid-template-areas:
- "header"
- "main";
+ "empty1 header empty2"
+ "main main main";
}
-header {
+@media (orientation: portrait) {
+ body {
+ grid-template-rows: 10vh 10vh auto;
+ grid-template-columns: auto;
+ grid-template-areas:
+ "logo"
+ "header"
+ "main";
+ }
+}
+
+#logo {
+ grid-area: 1 / 1 / 1 / 1;
+ padding: 0.5rem;
+}
+
+#logo img {
+ max-width: 100%;
+ max-height: 100%;
+}
+
+#title {
grid-area: header;
display: flex;
justify-content: center;
+ text-align: center;
}
main {
grid-area: main;
display: flex;
- justify-content: space-around;
+ justify-content: center;
+ align-items: center;
flex-direction: column;
}
| {{ .Place }} | {{ .Player.Name }} | {{ .Points }}b |