Add trivia game

2 files changed, 167 insertions, 0 deletions

diff --git a/src/trivia/static/main.js b/src/trivia/static/main.js
new file mode 100644
index 0000000..acb649c
--- /dev/null
+++ b/src/trivia/static/main.js
@@ -0,0 +1,109 @@
+window.onload = function () {
+    var transactionData = new Vue({
+        el: '#data',
+        data: {
+            gameCode: "",
+            username: "",
+            game: undefined,
+            submitText: "",
+            STATES: {
+                GUESSING: 0,
+                WAITING: 1,
+                OVER: 2
+            },
+            interval: undefined
+        },
+        methods: {
+            nonReady: function (players) {
+                return players.filter(player => !player.ready)
+              },
+            startStatusLoop: function(){
+                // event loop that runs while waiting for host to start
+                var loadStatus = function (vue_object) {
+                    fetch(new Request(`/trivia/lobby-status`))
+                        .then(response => response.json())
+                        .then(response => {
+                            if (response.message) {
+                                console.log(response.message)
+                            } else if(response.gameStarted){
+                                clearInterval(vue_object.interval)
+                                vue_object.startGameLoop()
+
+                            } else { // Just update game object with new players
+                                vue_object.game = response
+                            }
+                        });
+                    
+                }
+                this.interval = window.setInterval(loadStatus, 1000, this)
+            },
+            startGameLoop: function(){
+                var loadStatus = function (vue_object) {
+                    fetch(new Request(`/trivia/game-status`))
+                        .then(response => response.json())
+                        .then(response => {
+                            if (response.message) {
+                                console.log(response.message)
+                            } else { 
+                                vue_object.game = response
+                            }
+                        });
+                    
+                }
+                this.interval = window.setInterval(loadStatus, 1000, this)
+            },
+            hostGame: function () {
+                fetch(new Request(`/trivia/host-game?name=${this.username}`))
+                    .then(response => response.json())
+                    .then(response => {
+                        if (response.message) {
+                            console.log(response.message)
+                        } else {
+                            this.game = response
+                            this.startStatusLoop()
+                        }
+                    })
+            },
+            joinGame: function () {
+                fetch(new Request(`/trivia/join-game?name=${this.username}&code=${this.gameCode}`))
+                    .then(response => response.json())
+                    .then(response => {
+                        if (response.message) {
+                            console.log(response.message)
+                        } else {
+                            this.game = response
+                            this.startStatusLoop()
+                        }
+                    })
+            },
+            startGame: function () {
+                fetch(new Request(`/trivia/start-game`))
+            }, 
+            submitQuestion: function(){
+                fetch(new Request(`/trivia/submit?text=${this.submitText}`))
+                this.submitText = ""
+            },
+            buzzIn: function(){
+                console.log("buz")
+                fetch(new Request(`/trivia/buzz`))
+            },
+            endRound: function(){
+                console.log("endround")
+                fetch(new Request(`/trivia/endRound`))
+            },
+            endQuestion: function(){
+                console.log("endquestion")
+                fetch(new Request(`/trivia/endQuestion`))
+            },
+            giveScore: function(index, score){
+                fetch(new Request(`/trivia/giveScore?index=${index}&points=${score}`))
+            }
+        },
+        created() {
+
+        },
+        computed: {
+
+        }
+    });
+}
\ No newline at end of file
diff --git a/src/trivia/static/styles.css b/src/trivia/static/styles.css
new file mode 100644
index 0000000..e76125b
--- /dev/null
+++ b/src/trivia/static/styles.css
@@ -0,0 +1,58 @@
+body {
+    background-position: center top;
+    background-repeat: no-repeat;
+    background-color: #0000c7;
+}
+h1, h2, h3, h4, li, span {
+    text-shadow: 0px 0px 5px #000;
+    color: white;
+}
+
+td, th{
+    text-align: left;
+    background-color: white;
+    color: black;
+}
+
+.center{
+    margin: auto;
+    width: 400px;
+    padding: 10px;
+}
+input {
+    margin-top: 20px;
+}
+input[type=text]{
+    border: none;
+    border-bottom: 1px solid #ccc;
+    padding: 5px;
+}
+input[type=button]{
+    border: none;
+    padding: 8px 8px;
+    cursor: pointer;
+    background-color: coral;
+    color: white;
+    white-space: normal; 
+    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
+}
+input[type=button]:disabled {
+    color: #eeeeee;
+    background-color: #dddddd;
+}
+input[type=button]:disabled:hover {
+    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
+    cursor: default;
+    background-color: #dddddd;
+}
+input[type=button]:hover{
+    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
+    background-color: rgb(255, 179, 151);
+}
+span {
+    margin-right: 1em;
+}
+.leave {
+    position: absolute;
+    bottom: 5px;
+}
\ No newline at end of file