Fix all the things!

2019-07-07 23:09:35 +02:00 · 2019-07-07 23:09:35 +02:00 · c8307e58bd
parent ba4ee10a2a
commit c8307e58bd
14 changed files with 368 additions and 50 deletions
--- a/.dockerignore
+++ b/.dockerignore
@ -0,0 +1 @@
+node_modules/
--- a/.env.development
+++ b/.env.development
@ -0,0 +1,3 @@
+VUE_APP_API_URL=localhost:8000
+VUE_APP_API_PROTOCOL=http://
+VUE_APP_WS_PROTOCOL=ws://
--- a/.env.production
+++ b/.env.production
@ -0,0 +1,3 @@
+VUE_APP_API_URL=caiapi.voidcorp.nl
+VUE_APP_API_PROTOCOL=https://
+VUE_APP_WS_PROTOCOL=wss://
--- a/22
+++ b/22
@ -0,0 +1,22 @@
+FROM node:alpine as build
+
+# Set work dir
+WORKDIR /app/
+
+# Copy package files
+COPY package.json ./
+COPY yarn.lock ./
+
+RUN yarn install
+
+COPY . .
+
+RUN yarn build
+
+FROM nginx:alpine as production-stage
+
+RUN apk add curl --no-cache
+
+WORKDIR /usr/share/nginx/html
+
+COPY --from=build /app/dist .
--- a/package.json
+++ b/package.json
@ -8,8 +8,10 @@
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
+    "@chenfengyuan/vue-qrcode": "^1.0.1",
    "axios": "^0.19.0",
    "core-js": "^2.6.5",
+    "qrcode.vue": "^1.6.2",
    "register-service-worker": "^1.6.2",
    "vue": "^2.6.10",
    "vue-class-component": "^7.0.2",
--- a/public/index.html
+++ b/public/index.html
@ -4,12 +4,13 @@
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <script src="https://kit.fontawesome.com/b1ff873bb7.js"></script>
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title>cards-frontend</title>
+    <title>Cards Against Idiots</title>
  </head>
  <body>
    <noscript>
-      <strong>We're sorry but cards-frontend doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong>We're sorry but almost everything doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
--- a/src/App.vue
+++ b/src/App.vue
@ -1,9 +1,10 @@
 <template>
  <div id="app">
-    <div id="nav">
+    <h1>Cards Against Idiots</h1>
+    <!-- <div id="nav">
      <router-link to="/">Start</router-link> |
      <router-link to="/about">About</router-link>
-    </div>
+    </div> -->
    <router-view/>
  </div>
 </template>
--- a/src/components/CardComponent.vue
+++ b/src/components/CardComponent.vue
@ -1,6 +1,6 @@
 <template>
-    <div class="card" :class="{black: !isBlack}">
-        <span class="text">{{ text }}</span>
+    <div class="card" :class="{black: isBlack}">
+        <span class="text" v-html="text">}</span>
        <span class="bottom-text">Cards Against Idiots</span>
    </div>
 </template>
@ -20,6 +20,7 @@

 <style scoped>
 .card{
+    position: relative;
    width: 13em;
    height: 17em;
    border: solid black;
@ -30,8 +31,9 @@

 .bottom-text {
    display: block;
-    position: relative;
-    top: 13em;
+    position: absolute;
+    bottom: 1em;
+    left: 2em;
    font-style: italic;
 }

--- a/src/components/StackedCards.vue
+++ b/src/components/StackedCards.vue
@ -1,8 +1,8 @@
 <template>
-    <div>
-        <card-component :text="text[0]" class="c1" isBlack="false" />
-        <card-component :text="text[1]" class="c2" v-if="this.text.length > 1" isBlack="false"/>
-        <card-component :text="text[2]" class="c3" v-if="this.text.length > 2" isBlack="false"/>
+    <div @click="$emit('clicked')" class="stack">
+        <card-component :text="text[0]" class="c1" :isBlack="false" :class="{hover: showhover}"/>
+        <card-component :text="text[1]" class="c2" v-if="this.text.length > 1" :isBlack="false" :class="{hover: showhover}"/>
+        <card-component :text="text[2]" class="c3" v-if="this.text.length > 2" :isBlack="false" :class="{hover: showhover}"/>
    </div>
 </template>

@ -16,10 +16,13 @@ export default class StackedCards extends Vue {
    @Prop()
    private text!: string[];

+    @Prop()
+    private showhover!: boolean;
+
 }
 </script>

-<style scoped>
+<style scoped lang="scss">
 .c2{
    position: relative;
    top: -15em;
@ -31,4 +34,9 @@ export default class StackedCards extends Vue {
    top: -30em;
    left: 0.6em;
 }
+
+.stack:hover .hover {
+    background-color: #b5b5b5;
+}
+
 </style>
--- a/src/util/api.ts
+++ b/src/util/api.ts
@ -2,8 +2,10 @@ import axios from "axios";
 import { Message, MessageType } from "../models/Message";
 import { Answer } from "../models/Answer";

-const webProt = "http://";
-const baseURL = "localhost:8000";
+export const webProt = process.env.VUE_APP_API_PROTOCOL;
+export const baseURL = process.env.VUE_APP_API_URL;
+export const fullURL = webProt + baseURL;
+export const wsProt = process.env.VUE_APP_WS_PROTOCOL;

 export const axios_api = axios.create({
    baseURL: webProt + baseURL,
@ -21,8 +23,8 @@ export class Game {
    private sub: WebSocket;

    constructor(code: string, name: string, message_callback: (message: Message) => void) {
-        this.pub = new WebSocket(`ws://${baseURL}/ws/room/${code}/pub`);
-        this.sub = new WebSocket(`ws://${baseURL}/ws/room/${code}/sub`);
+        this.pub = new WebSocket(`${wsProt}${baseURL}/ws/room/${code}/pub`);
+        this.sub = new WebSocket(`${wsProt}${baseURL}/ws/room/${code}/sub`);

        this.pub.addEventListener("open", (event) => {
            console.info("pub-ws connected");
--- a/src/views/About.vue
+++ b/src/views/About.vue
@ -1,5 +1,207 @@
 <template>
  <div class="about">
    <h1>yeet</h1>
+    <pre>
+⠀⠀⠀⠀⣀⣤
+⠀⠀⠀⠀⣿⠿⣶
+⠀⠀⠀⠀⣿⣿⣀
+⠀⠀⠀⣶⣶⣿⠿⠛⣶
+⠤⣀⠛⣿⣿⣿⣿⣿⣿⣭⣿⣤
+⠒⠀⠀⠀⠉⣿⣿⣿⣿⠀⠀⠉⣀
+⠀⠤⣤⣤⣀⣿⣿⣿⣿⣀⠀⠀⣿
+⠀⠀⠛⣿⣿⣿⣿⣿⣿⣿⣭⣶⠉
+⠀⠀⠀⠤⣿⣿⣿⣿⣿⣿⣿
+⠀⠀⠀⣭⣿⣿⣿⠀⣿⣿⣿
+⠀⠀⠀⣉⣿⣿⠿⠀⠿⣿⣿
+⠀⠀⠀⠀⣿⣿⠀⠀⠀⣿⣿⣤
+⠀⠀⠀⣀⣿⣿⠀⠀⠀⣿⣿⣿
+⠀⠀⠀⣿⣿⣿⠀⠀⠀⣿⣿⣿
+⠀⠀⠀⣿⣿⠛⠀⠀⠀⠉⣿⣿
+⠀⠀⠀⠉⣿⠀⠀⠀⠀⠀⠛⣿
+⠀⠀⠀⠀⣿⠀⠀⠀⠀⠀⠀⣿⣿
+⠀⠀⠀⠀⣛⠀⠀⠀⠀⠀⠀⠛⠿⠿⠿
+⠀⠀⠀⠛⠛
+
+
+⠀⠀⠀⣀⣶⣀
+⠀⠀⠀⠒⣛⣭
+⠀⠀⠀⣀⠿⣿⣶
+⠀⣤⣿⠤⣭⣿⣿
+⣤⣿⣿⣿⠛⣿⣿⠀⣀
+⠀⣀⠤⣿⣿⣶⣤⣒⣛
+⠉⠀⣀⣿⣿⣿⣿⣭⠉
+⠀⠀⣭⣿⣿⠿⠿⣿
+⠀⣶⣿⣿⠛⠀⣿⣿
+⣤⣿⣿⠉⠤⣿⣿⠿
+⣿⣿⠛⠀⠿⣿⣿
+⣿⣿⣤⠀⣿⣿⠿
+⠀⣿⣿⣶⠀⣿⣿⣶
+⠀⠀⠛⣿⠀⠿⣿⣿
+⠀⠀⠀⣉⣿⠀⣿⣿
+⠀⠶⣶⠿⠛⠀⠉⣿
+⠀⠀⠀⠀⠀⠀⣀⣿
+⠀⠀⠀⠀⠀⣶⣿⠿
+
+⠀⠀⠀⠀⠀⠀⠀⠀⣤⣿⣿⠶⠀⠀⣀⣀
+⠀⠀⠀⠀⠀⠀⣀⣀⣤⣤⣶⣿⣿⣿⣿⣿⣿
+⠀⠀⣀⣶⣤⣤⠿⠶⠿⠿⠿⣿⣿⣿⣉⣿⣿
+⠿⣉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠛⣤⣿⣿⣿⣀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⣿⣿⣿⣿⣶⣤
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣤⣿⣿⣿⣿⠿⣛⣿
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣿⣿⠛⣿⣿⣿⣿
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣶⣿⣿⠿⠀⣿⣿⣿⠛
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣿⣿⠀⠀⣿⣿⣿
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠿⠿⣿⠀⠀⣿⣶
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⠛⠀⠀⣿⣿⣶
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⣿⣿⠤
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠿⣿
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣶⣿
+
+⠀⠀⣀
+⠀⠿⣿⣿⣀
+⠀⠉⣿⣿⣀
+⠀⠀⠛⣿⣭⣀⣀⣤
+⠀⠀⣿⣿⣿⣿⣿⠛⠿⣶⣀
+⠀⣿⣿⣿⣿⣿⣿⠀⠀⠀⣉⣶
+⠀⠀⠉⣿⣿⣿⣿⣀⠀⠀⣿⠉
+⠀⠀⠀⣿⣿⣿⣿⣿⣿⣿⣿
+⠀⣀⣿⣿⣿⣿⣿⣿⣿⣿⠿
+⠀⣿⣿⣿⠿⠉⣿⣿⣿⣿
+⠀⣿⣿⠿⠀⠀⣿⣿⣿⣿
+⣶⣿⣿⠀⠀⠀⠀⣿⣿⣿
+⠛⣿⣿⣀⠀⠀⠀⣿⣿⣿⣿⣶⣀
+⠀⣿⣿⠉⠀⠀⠀⠉⠉⠉⠛⠛⠿⣿⣶
+⠀⠀⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⣿
+⠀⠀⣿⣿⠀⠀⠀⠀⠀⠀⠀⠀⠉⠉
+⣀⣶⣿⠛
+
+⠀⠀⠀⠀⠀⠀⠀⣀⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⣿⣿⣿⣤⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣤⣤⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠉⣿⣿⣿⣶⣿⣿⣿⣶⣶⣤⣶⣶⠶⠛⠉⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⣤⣿⠿⣿⣿⣿⣿⣿⠀⠀⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠛⣿⣤⣤⣀⣤⠿⠉⠀⠉⣿⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠉⠉⠉⠉⠉⠀⠀⠀⠀⠉⣿⣿⣿⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣶⣿⣿⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣿⣿⣿⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣿⣿⣿⣿⣿⠛⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣿⣿⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣿⣛⣿⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⣶⣿⣿⠛⠿⣿⣿⣿⣶⣤⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⣿⠛⠉⠀⠀⠀⠛⠿⣿⣿⣶⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⣿⣀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠛⠿⣶⣤⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠛⠿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⣿⣿⠿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠛⠉⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+
+⠀⠀⠀⠀⠀⠀⣤⣶⣶
+⠀⠀⠀⠀⠀⠀⣿⣿⣿⣿⣀⣀
+⠀⠀⠀⠀⠀⣀⣶⣿⣿⣿⣿⣿⣿
+⣤⣶⣀⠿⠶⣿⣿⣿⠿⣿⣿⣿⣿
+⠉⠿⣿⣿⠿⠛⠉⠀⣿⣿⣿⣿⣿
+⠀⠀⠉⠀⠀⠀⠀⠀⠀⣿⣿⣿⣿⣤⣤
+⠀⠀⠀⠀⠀⠀⠀⣤⣶⣿⣿⣿⣿⣿⣿
+⠀⠀⠀⠀⠀⣀⣿⣿⣿⣿⣿⠿⣿⣿⣿⣿
+⠀⠀⠀⠀⣀⣿⣿⣿⠿⠉⠀⠀⣿⣿⣿⣿
+⠀⠀⠀⠀⣿⣿⠿⠉⠀⠀⠀⠀⠿⣿⣿⠛
+⠀⠀⠀⠀⠛⣿⣿⣀⠀⠀⠀⠀⠀⣿⣿⣀
+⠀⠀⠀⠀⠀⣿⣿⣿⠀⠀⠀⠀⠀⠿⣿⣿
+⠀⠀⠀⠀⠀⠉⣿⣿⠀⠀⠀⠀⠀⠀⠉⣿
+⠀⠀⠀⠀⠀⠀⠀⣿⠀⠀⠀⠀⠀⠀⣀⣿
+⠀⠀⠀⠀⠀⠀⣀⣿⣿
+⠀⠀⠀⠀⠤⣿⠿⠿⠿
+
+⠀⠀⠀⠀⣀
+⠀⠀⣶⣿⠿⠀⠀⠀⣀⠀⣤⣤
+⠀⣶⣿⠀⠀⠀⠀⣿⣿⣿⠛⠛⠿⣤⣀
+⣶⣿⣤⣤⣤⣤⣤⣿⣿⣿⣀⣤⣶⣭⣿⣶⣀
+⠉⠉⠉⠛⠛⠿⣿⣿⣿⣿⣿⣿⣿⠛⠛⠿⠿
+⠀⠀⠀⠀⠀⠀⠀⣿⣿⣿⣿⣿⠿
+⠀⠀⠀⠀⠀⠀⠀⠿⣿⣿⣿⣿
+⠀⠀⠀⠀⠀⠀⠀⠀⣭⣿⣿⣿⣿⣿
+⠀⠀⠀⠀⠀⠀⠀⣤⣿⣿⣿⣿⣿⣿
+⠀⠀⠀⠀⠀⠀⠀⣿⣿⣿⣿⣿⣿⠿
+⠀⠀⠀⠀⠀⠀⠀⣿⣿⣿⣿⣿⠿
+⠀⠀⠀⠀⠀⠀⠀⣿⣿⣿⣿⣿
+⠀⠀⠀⠀⠀⠀⠀⠉⣿⣿⣿⣿
+⠀⠀⠀⠀⠀⠀⠀⠀⠉⣿⣿⣿⣿
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⣿⠛⠿⣿⣤
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⣿⠀⠀⠀⣿⣿⣤
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⠀⠀⠀⣶⣿⠛⠉
+⠀⠀⠀⠀⠀⠀⠀⠀⣤⣿⣿⠀⠀⠉
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉
+
+⠀⠀⠀⠀⠀⠀⣶⣿⣶
+⠀⠀⠀⣤⣤⣤⣿⣿⣿
+⠀⠀⣶⣿⣿⣿⣿⣿⣿⣿⣶
+⠀⠀⣿⣿⣿⣿⣿⣿⣿⣿⣿
+⠀⠀⣿⣉⣿⣿⣿⣿⣉⠉⣿⣶
+⠀⠀⣿⣿⣿⣿⣿⣿⣿⣿⠿⣿
+⠀⣤⣿⣿⣿⣿⣿⣿⣿⠿⠀⣿⣶
+⣤⣿⠿⣿⣿⣿⣿⣿⠿⠀⠀⣿⣿⣤
+⠉⠉⠀⣿⣿⣿⣿⣿⠀⠀⠒⠛⠿⠿⠿
+⠀⠀⠀⠉⣿⣿⣿⠀⠀⠀⠀⠀⠀⠉
+⠀⠀⠀⣿⣿⣿⣿⣿⣶
+⠀⠀⠀⠀⣿⠉⠿⣿⣿
+⠀⠀⠀⠀⣿⣤⠀⠛⣿⣿
+⠀⠀⠀⠀⣶⣿⠀⠀⠀⣿⣶
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⣭⣿⣿
+⠀⠀⠀⠀⠀⠀⠀⠀⣤⣿⣿⠉
+
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⣤⣶
+⠀⠀⠀⠀⠀⣀⣀⠀⣶⣿⣿⠶
+⣶⣿⠿⣿⣿⣿⣿⣿⣿⣿⣿⣤⣤
+⠀⠉⠶⣶⣀⣿⣿⣿⣿⣿⣿⣿⠿⣿⣤⣀
+⠀⠀⠀⣿⣿⠿⠉⣿⣿⣿⣿⣭⠀⠶⠿⠿
+⠀⠀⠛⠛⠿⠀⠀⣿⣿⣿⣉⠿⣿⠶
+⠀⠀⠀⠀⠀⣤⣶⣿⣿⣿⣿⣿
+⠀⠀⠀⠀⠀⣿⣿⣿⣿⣿⣿⣿⠒
+⠀⠀⠀⠀⣀⣿⣿⣿⣿⣿⣿⣿
+⠀⠀⠀⠀⠀⣿⣿⣿⠛⣭⣭⠉
+⠀⠀⠀⠀⠀⣿⣿⣭⣤⣿⠛
+⠀⠀⠀⠀⠀⠛⠿⣿⣿⣿⣭
+⠀⠀⠀⠀⠀⠀⠀⣿⣿⠉⠛⠿⣶⣤
+⠀⠀⠀⠀⠀⠀⣀⣿⠀⠀⣶⣶⠿⠿⠿
+⠀⠀⠀⠀⠀⠀⣿⠛
+⠀⠀⠀⠀⠀⠀⣭⣶
+
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⣤⣤
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣿⣿
+⠀⠀⣶⠀⠀⣀⣤⣶⣤⣉⣿⣿⣤⣀
+⠤⣤⣿⣤⣿⠿⠿⣿⣿⣿⣿⣿⣿⣿⣿⣀
+⠀⠛⠿⠀⠀⠀⠀⠉⣿⣿⣿⣿⣿⠉⠛⠿⣿⣤
+⠀⠀⠀⠀⠀⠀⠀⠀⠿⣿⣿⣿⠛⠀⠀⠀⣶⠿
+⠀⠀⠀⠀⠀⠀⠀⠀⣀⣿⣿⣿⣿⣤⠀⣿⠿
+⠀⠀⠀⠀⠀⠀⠀⣶⣿⣿⣿⣿⣿⣿⣿⣿
+⠀⠀⠀⠀⠀⠀⠀⠿⣿⣿⣿⣿⣿⠿⠉⠉
+⠀⠀⠀⠀⠀⠀⠀⠉⣿⣿⣿⣿⠿
+⠀⠀⠀⠀⠀⠀⠀⠀⣿⣿⣿⠉
+⠀⠀⠀⠀⠀⠀⠀⠀⣛⣿⣭⣶⣀
+⠀⠀⠀⠀⠀⠀⠀⠀⣿⣿⣿⣿⣿
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣿⠉⠛⣿
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣿⠀⠀⣿⣿
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣉⠀⣶⠿
+⠀⠀⠀⠀⠀⠀⠀⠀⣶⣿⠿
+⠀⠀⠀⠀⠀⠀⠀⠛⠿⠛
+
+⠀⠀⠀⣶⣿⣶
+⠀⠀⠀⣿⣿⣿⣀
+⠀⣀⣿⣿⣿⣿⣿⣿
+⣶⣿⠛⣭⣿⣿⣿⣿
+⠛⠛⠛⣿⣿⣿⣿⠿
+⠀⠀⠀⠀⣿⣿⣿
+⠀⠀⣀⣭⣿⣿⣿⣿⣀
+⠀⠤⣿⣿⣿⣿⣿⣿⠉
+⠀⣿⣿⣿⣿⣿⣿⠉
+⣿⣿⣿⣿⣿⣿
+⣿⣿⣶⣿⣿
+⠉⠛⣿⣿⣶⣤
+⠀⠀⠉⠿⣿⣿⣤
+⠀⠀⣀⣤⣿⣿⣿
+⠀⠒⠿⠛⠉⠿⣿
+⠀⠀⠀⠀⠀⣀⣿⣿
+⠀⠀⠀⠀⣶⠿⠿⠛ 
+    </pre>
+    <h2>What did you expect?</h2>
  </div>
 </template>
--- a/src/views/Game.vue
+++ b/src/views/Game.vue
@ -1,8 +1,7 @@
 <template>
  <div id="game">
    <h1>
-      Room:
-      <a>{{ this.$route.params.code }}</a>
+      Room: {{ this.$route.params.code }}
    </h1>
    <h2>Your name is: {{ this.name }}</h2>
    <ul>
@ -11,56 +10,70 @@

    <button v-if="this.game.owner && !this.room.started" @click="this.start_game">Stort</button>

-    <span v-show="this.card" v-html="this.card.text" />
+    <card-component v-if="this.room.started" :text="this.card.text" :isBlack="true" />

    <ul v-show="this.card && !this.czar()">
      <li v-for="blank in this.card.pick">
        Card {{blank}}:
        <input type="text" v-model="inputs[blank - 1]" :disabled="input_blocked" />
      </li>
-      <li>
-        <button @click="this.send_answers" v-show="!input_blocked && room.started">Submit Answers</button>
+      <li v-show="!input_blocked && room.started">
+        <button @click="this.send_answers">Submit Answers</button>
      </li>
    </ul>

-    <ul>
-      <li v-for="ans in this.answers">
-        <span v-for="t in ans.text">{{ t }},&nbsp;</span>
-        <button @click="pick(ans)" v-show="czar()">Pick</button>
-      </li>
-    </ul>
+    <div class="cards">
+      <stacked-cards
+        class="card"
+        v-for="ans in this.answers"
+        :key="ans.index"
+        :text="ans.text"
+        :showhover="czar()"
+        v-on:clicked="pick(ans)"
+      />
+    </div>
+    <qrcode-vue v-if="!this.room.started" :value="gameURL" :size="300"></qrcode-vue>
  </div>
 </template>
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
-import { Game, axios_api } from "../util/api";
+import { Game, axios_api, fullURL } from "../util/api";
 import { Message, MessageType } from "../models/Message";
 import { Room } from "../models/Room";
 import { Card } from "../models/Card";
 import { Answer } from "../models/Answer";
+import CardComponent from "../components/CardComponent.vue";
+import StackedCards from "../components/StackedCards.vue";
+import QrcodeVue from "qrcode.vue";

@Component({
-  components: {Card},
+  components: { CardComponent, StackedCards, QrcodeVue },
 })
 export default class GameVueView extends Vue {
-  private game: Game = {};
-  private room: Room = {};
-  private card: Card = {};
+  private game: Game = new Game("", "", () => {console.error("OwO we did an oopsie woopsie"); });
+  private room: Room = new Room("");
+  private card: Card = new Card("", 0, "", "");
  private inputs: string[] = [];
  private input_blocked: boolean = false;
  private answers: Answer[] = [];
-  private name: string;
+  private name: string = "";
+  private gameURL: string = "";
  /**
   * Lifecycle hooks
   */
  private async mounted() {
-    this.name = this.$route.query.name || prompt("What is your nickname?");
-    if (name && this.$route.params.code.length > 3) {
-      this.name = name as string;
-      const room = await axios_api.get(`/room/${this.$route.params.code}`);
+    this.gameURL = `${fullURL}/?code=${this.$route.params.code}`;

-      if (room.status === 200 && !room.data.started) {
-        this.game = new Game(this.$route.params.code, name, this.on_message);
+    this.name = (this.$route.query.name || prompt("What is your nickname?")) as string;
+    if (this.name && this.$route.params.code.length > 3) {
+      this.name = this.name as string;
+      const room = await axios_api.get(`/room/${this.$route.params.code}`);
+      if (room.status === 200) {
+        this.game = new Game(
+          this.$route.params.code,
+          this.name,
+          this.on_message,
+        );
      }
    }
  }
@ -79,10 +92,12 @@ export default class GameVueView extends Vue {
  }

  private pick(ans: Answer) {
-    this.game.pick_answer(ans);
+    if (this.czar()) {
+      this.game.pick_answer(ans);
+    }
  }

-  private on_message(message: Message) {
+  private async on_message(message: Message) {
    switch (message.msgtype) {
      case MessageType.JOIN:
        break;
@ -106,4 +121,24 @@ export default class GameVueView extends Vue {
 }
 </script>
 <style lang="scss">
+#game {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.cards {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.card {
+  margin-left: 5px;
+  margin-right: 5px;
+  margin-top: 5px;
+}
 </style>
--- a/src/views/JoinRoom.vue
+++ b/src/views/JoinRoom.vue
@ -14,25 +14,24 @@
    <input id="code" type="text" v-model="code" placeholder="Optional room code" minlength="4" />

    <button @click="checkRoom" id="join">Join!</button>
-
-    <stacked-cards :text="texts" />
  </div>
 </template>
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
 import { axios_api } from "../util/api";
-import {Room} from "../models/Room";
-import CardComponent from "@/components/CardComponent.vue";
-import StackedCards from "@/components/StackedCards.vue";
+import { Room } from "../models/Room";

@Component({
  name: "JoinRoom",
-  components: {StackedCards, CardComponent},
 })
 export default class JoinRoom extends Vue {
  private code: string = "";
  private name: string = "";
-  private texts: string[] = ["a", "b", "c"];
+
+  private mounted() {
+    this.code = (this.$route.query.code || "") as string;
+  }
+

  private checkRoom() {
    if (this.name.length < 1 || this.name.length > 25) {
--- a/yarn.lock
+++ b/yarn.lock
@ -670,6 +670,13 @@
    lodash "^4.17.11"
    to-fast-properties "^2.0.0"

+"@chenfengyuan/vue-qrcode@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@chenfengyuan/vue-qrcode/-/vue-qrcode-1.0.1.tgz#e6f757103c36630dc7c9f385494c5d9796c24d47"
+  integrity sha512-D5d8U3zFc8zDlrqVOWkarYz4qDTrGLfCOeGkODpQxq6KcAamOhvZ0B8V9qxdkXjUUPjOO3L8pLLnIo6xYoEpMw==
+  dependencies:
+    qrcode "^1.3.3"
+
 "@hapi/address@2.x.x":
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.0.0.tgz#9f05469c88cb2fd3dcd624776b54ee95c312126a"
@ -2804,6 +2811,11 @@ diffie-hellman@^5.0.0:
    miller-rabin "^4.0.0"
    randombytes "^2.0.0"

+dijkstrajs@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/dijkstrajs/-/dijkstrajs-1.0.1.tgz#d3cd81221e3ea40742cfcde556d4e99e98ddc71b"
+  integrity sha1-082BIh4+pAdCz83lVtTpnpjdxxs=
+
 dir-glob@^2.0.0, dir-glob@^2.2.2:
  version "2.2.2"
  resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-2.2.2.tgz#fa09f0694153c8918b18ba0deafae94769fc50c4"
@ -4412,6 +4424,11 @@ isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
  integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=

+isarray@^2.0.1:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.4.tgz#38e7bcbb0f3ba1b7933c86ba1894ddfc3781bbb7"
+  integrity sha512-GMxXOiUirWg1xTKRipM0Ek07rX+ubx4nNVElTJdNLYmNO/2YrDkgJGw9CljXn+r4EWiDQg/8lsRdHyg2PJuUaA==
+
 isemail@3.x.x:
  version "3.2.0"
  resolved "https://registry.yarnpkg.com/isemail/-/isemail-3.2.0.tgz#59310a021931a9fb06bbb51e155ce0b3f236832c"
@ -5824,6 +5841,11 @@ please-upgrade-node@^3.0.2:
  dependencies:
    semver-compare "^1.0.0"

+pngjs@^3.3.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-3.4.0.tgz#99ca7d725965fb655814eaf65f38f12bbdbf555f"
+  integrity sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w==
+
 portfinder@^1.0.20:
  version "1.0.20"
  resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.20.tgz#bea68632e54b2e13ab7b0c4775e9b41bf270e44a"
@ -6309,6 +6331,21 @@ q@^1.1.2:
  resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
  integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=

+qrcode.vue@^1.6.2:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/qrcode.vue/-/qrcode.vue-1.6.2.tgz#56446818a4103fac652180fa4a761ff2f39cd0a9"
+  integrity sha512-zlQ7btO//ACLv2FT4PJGumecXQ2SMtajkR7FuKscD1dR9u0/AnttOamfADVf6Ha7oeHb1b/27JkzQ+VkSAkKPA==
+
+qrcode@^1.3.3:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/qrcode/-/qrcode-1.3.4.tgz#1e5358050a5184cca3d0b7ed7f76769a8d3557d1"
+  integrity sha512-wCfIu6sA0bXisSDT/ehgSC1v1uRoW8xGu5y18zyOV8D1J/ciz3xC+48LkLupqk0uqyBKxKq3eImuVgfrzFAdrg==
+  dependencies:
+    dijkstrajs "^1.0.1"
+    isarray "^2.0.1"
+    pngjs "^3.3.0"
+    yargs "^13.2.4"
+
 qs@6.7.0:
  version "6.7.0"
  resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"
@ -8322,7 +8359,7 @@ yargs@12.0.5:
    y18n "^3.2.1 || ^4.0.0"
    yargs-parser "^11.1.1"

-yargs@^13.0.0:
+yargs@^13.0.0, yargs@^13.2.4:
  version "13.2.4"
  resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.2.4.tgz#0b562b794016eb9651b98bd37acf364aa5d6dc83"
  integrity sha512-HG/DWAJa1PAnHT9JAhNa8AbAv3FPaiLzioSjCcmuXXhP8MlpHO5vwls4g4j6n30Z74GVQj8Xa62dWVx1QCGklg==