Card Stuff (WIP)

2019-07-07 19:44:33 +02:00 · 2019-07-07 19:44:33 +02:00 · ba4ee10a2a
parent 089e6021f9
commit ba4ee10a2a
6 changed files with 99 additions and 18 deletions
--- a/src/App.vue
+++ b/src/App.vue
@ -10,7 +10,7 @@

 <style lang="scss">
 #app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  font-family: 'Roboto', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
--- a/src/components/CardComponent.vue
+++ b/src/components/CardComponent.vue
@ -0,0 +1,42 @@
+<template>
+    <div class="card" :class="{black: !isBlack}">
+        <span class="text">{{ text }}</span>
+        <span class="bottom-text">Cards Against Idiots</span>
+    </div>
+</template>
+
+<script lang="ts">
+    import { Component, Prop, Vue } from "vue-property-decorator";
+
+    @Component
+    export default class CardComponent extends Vue {
+        @Prop()
+        private text!: string;
+
+        @Prop()
+        private isBlack!: boolean;
+    }
+</script>
+
+<style scoped>
+.card{
+    width: 13em;
+    height: 17em;
+    border: solid black;
+    border-radius: 12px;
+    padding-top: 1em;
+    background: white;
+}
+
+.bottom-text {
+    display: block;
+    position: relative;
+    top: 13em;
+    font-style: italic;
+}
+
+.black {
+    background-color: black;
+    color: white;
+}
+</style>
--- a/src/components/StackedCards.vue
+++ b/src/components/StackedCards.vue
@ -0,0 +1,34 @@
+<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>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+import CardComponent from "./CardComponent.vue";
+@Component({
+    components: {CardComponent},
+})
+export default class StackedCards extends Vue {
+    @Prop()
+    private text!: string[];
+
+}
+</script>
+
+<style scoped>
+.c2{
+    position: relative;
+    top: -15em;
+    left: 0.3em;
+}
+
+.c3 {
+    position: relative;
+    top: -30em;
+    left: 0.6em;
+}
+</style>
--- a/src/views/Game.vue
+++ b/src/views/Game.vue
@ -40,7 +40,7 @@ import { Card } from "../models/Card";
 import { Answer } from "../models/Answer";

@Component({
-  name: "Game",
+  components: {Card},
 })
 export default class GameVueView extends Vue {
  private game: Game = {};
--- a/src/views/JoinRoom.vue
+++ b/src/views/JoinRoom.vue
@ -14,19 +14,25 @@
    <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";

@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 checkRoom() {
    if (this.name.length < 1 || this.name.length > 25) {
--- a/yarn.lock
+++ b/yarn.lock
@ -1210,9 +1210,9 @@ ajv-errors@^1.0.0:
  integrity sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==

 ajv-keywords@^3.1.0:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.4.0.tgz#4b831e7b531415a7cc518cd404e73f6193c6349d"
-  integrity sha512-aUjdRFISbuFOl0EIZc+9e4FfZp0bDZgAdOOf30bJmw8VM9v84SHyVyxDfbWxpGYbdZD/9XoKxfHVNmxPkhwyGw==
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.4.1.tgz#ef916e271c64ac12171fd8384eaae6b2345854da"
+  integrity sha512-RO1ibKvd27e6FEShVFfPALuHI3WjSVNeK5FIsmme/LYRNxjKuNj+Dt7bucLa6NdSv3JcVTyMlm9kGR84z1XpaQ==

 ajv@^6.1.0, ajv@^6.5.5:
  version "6.10.1"
@ -1290,9 +1290,9 @@ anymatch@^2.0.0:
    normalize-path "^2.1.1"

 anymatch@^3.0.1:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.0.2.tgz#ddb3a8495d44875423af7b919aace11e91732a41"
-  integrity sha512-rUe9SxpRQlVg4EM8It7JMNWWYHAirTPpbTuvaSKybb5IejNgWB3PGBBX9rrPKDx2pM/p3Wh+7+ASaWRyyAbxmQ==
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.0.3.tgz#2fb624fe0e84bccab00afee3d0006ed310f22f09"
+  integrity sha512-c6IvoeBECQlMVuYUjSwimnhmztImpErfxJzWZhIQinIvQWoGOnB0dLIgifbPHQt5heS6mNlaZG16f06H3C8t1g==
  dependencies:
    normalize-path "^3.0.0"
    picomatch "^2.0.4"
@ -1418,7 +1418,7 @@ assign-symbols@^1.0.0:
  resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
  integrity sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=

-async-each@^1.0.1, async-each@^1.0.3:
+async-each@^1.0.1:
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.3.tgz#b727dbf87d7651602f06f4d4ac387f47d91b0cbf"
  integrity sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ==
@ -1953,18 +1953,17 @@ check-types@^8.0.3:
  integrity sha512-YpeKZngUmG65rLudJ4taU7VLkOCTMhNl/u4ctNC56LQS/zJTyNH0Lrtwm1tfTsbLlwvlfsA2d1c8vCf/Kh2KwQ==

 "chokidar@>=2.0.0 <4.0.0":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.0.1.tgz#98fe9aa476c55d9aea7841d6325ffdb30e95b40c"
-  integrity sha512-2ww34sJWehnbpV0Q4k4V5Hh7juo7po6z7LUWkcIQnSGN1lHOL8GGtLtfwabKvLFQw/hbSUQ0u6V7OgGYgBzlkQ==
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.0.2.tgz#0d1cd6d04eb2df0327446188cd13736a3367d681"
+  integrity sha512-c4PR2egjNjI1um6bamCQ6bUNPDiyofNQruHvKgHQ4gDUP/ITSVSzNsiI5OWtHOsX323i5ha/kk4YmOZ1Ktg7KA==
  dependencies:
    anymatch "^3.0.1"
-    async-each "^1.0.3"
    braces "^3.0.2"
    glob-parent "^5.0.0"
    is-binary-path "^2.1.0"
    is-glob "^4.0.1"
    normalize-path "^3.0.0"
-    readdirp "^3.0.2"
+    readdirp "^3.1.1"
  optionalDependencies:
    fsevents "^2.0.6"

@ -6425,10 +6424,10 @@ readdirp@^2.2.1:
    micromatch "^3.1.10"
    readable-stream "^2.0.2"

-readdirp@^3.0.2:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.0.3.tgz#6300e1ca8e3ec6fcf064b7cd09e6e4b948d42e27"
-  integrity sha512-ucnUgJo2W/AC6s+dT0RS0rQOQi6PmniKgSqkF1Ung2UAkAqEUcqRVTzi+eWvTMbxicWDKHkbHJvvk98y1+de/w==
+readdirp@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.1.1.tgz#b158123ac343c8b0f31d65680269cc0fc1025db1"
+  integrity sha512-XXdSXZrQuvqoETj50+JAitxz1UPdt5dupjT6T5nVB+WvjMv2XKYj+s7hPeAVCXvmJrL36O4YYyWlIC3an2ePiQ==
  dependencies:
    picomatch "^2.0.4"