Create quiz bunny

2 files changed, 141 insertions, 0 deletions

diff --git a/src/quiz-bunny/static/main.js b/src/quiz-bunny/static/main.js
new file mode 100644
index 0000000..cb4740e
--- /dev/null
+++ b/src/quiz-bunny/static/main.js
@@ -0,0 +1,103 @@
+window.onload = function () {
+    var transactionData = new Vue({
+        el: '#data',
+        data: {
+            gameCode: "",
+            username: "",
+            game: undefined,
+            submitText: "",
+            STATES: {
+                TYPING:     0,
+                VOTING:     1,
+                OVER:       2,
+                WAITING:    3,
+            },
+            interval: undefined
+        },
+        methods: {
+            startStatusLoop: function(){
+                // event loop that runs while waiting for host to start
+                var loadStatus = function (vue_object) {
+                    fetch(new Request(`/quiz-bunny/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(`/quiz-bunny/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(`/quiz-bunny/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(`/quiz-bunny/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(`/quiz-bunny/start-game`))
+            }, 
+            submitAnswer: function(){
+                fetch(new Request(`/quiz-bunny/submit?text=${this.submitText}`))
+                this.submitText = ""
+            },
+            submitVote: function(index){
+                fetch(new Request(`/quiz-bunny/vote?index=${index}`))
+            },
+            ready: function(index){
+                fetch(new Request(`/quiz-bunny/ready`))
+            },
+            leave: function(index){
+                clearInterval(this.interval)
+                this.game = undefined
+                fetch(new Request(`/quiz-bunny/leave`))
+            }
+        },
+        created() {
+
+        },
+        computed: {
+
+        }
+    });
+}
\ No newline at end of file
diff --git a/src/quiz-bunny/static/styles.css b/src/quiz-bunny/static/styles.css
new file mode 100644
index 0000000..9734c87
--- /dev/null
+++ b/src/quiz-bunny/static/styles.css
@@ -0,0 +1,38 @@
+.center{
+    margin: auto;
+    width: 350px;
+    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;
+}
+input[type=button]:disabled {
+    color: #eeeeee;
+    background-color: #dddddd;
+}
+input[type=button]:disabled:hover {
+    box-shadow: none;
+    cursor: default
+}
+input[type=button]:hover{
+    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)
+}
+span {
+    margin-right: 1em;
+}
+.leave {
+    position: absolute;
+    bottom: 5px;
+}
\ No newline at end of file