Add player blocks, incomplete

package.json

@@ -12,7 +12,9 @@
     "register-service-worker": "^1.6.2",
     "vue": "^2.6.10",
     "vue-class-component": "^7.0.2",
-    "vue-property-decorator": "^8.1.0"
+    "vue-property-decorator": "^8.1.0",
+    "vuex": "^3.0.1",
+    "vuex-class": "^0.3.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.9.0",

src/App.vue

@@ -1,29 +1,65 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png" />
-    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
+    <PlayerArea
+      v-for="(player, id) of players"
+      :key="id"
+      :player="player"
+      :id="id"
+      :class="{ flipped: id == 0 }"
+    />
   </div>
 </template>
 
+<style lang="scss">
+@import url("assets/fonts/fonts.css");
+
+html,
+body {
+  margin: 0;
+  height: 100vh;
+}
+
+#app {
+  width: 100vw;
+  height: 100vh;
+
+  display: flex;
+  flex-direction: row;
+  flex-direction: column;
+
+  background: linear-gradient(to bottom, #222, #333) #222;
+  color: white;
+
+  font-family: "Londrina Solid", sans-serif;
+}
+
+.flipped {
+  transform: rotate(180deg);
+}
+
+@media (orientation: landscape) {
+  #app {
+    flex-direction: row;
+  }
+
+  .flipped {
+    transform: rotate(0);
+  }
+}
+</style>
+
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
-import HelloWorld from "./components/HelloWorld.vue";
+import { Getter } from "vuex-class";
+import PlayerArea from "./components/PlayerArea.vue";
+import { Player } from "./types";
 
 @Component({
   components: {
-    HelloWorld
+    PlayerArea
   }
 })
-export default class App extends Vue {}
-</script>
-
-<style lang="scss">
-#app {
-  font-family: "Avenir", Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
+export default class App extends Vue {
+  @Getter("players") private players!: Player[];
 }
-</style>
+</script>

src/assets/fonts/fonts.css

@@ -0,0 +1,53 @@
+/* latin */
+@font-face {
+  font-family: 'Londrina Solid';
+  font-style: normal;
+  font-weight: 100;
+  src: local('Londrina Solid Thin'), local('LondrinaSolid-Thin'), url('./Londrina_Solid-100-latin1.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* latin */
+@font-face {
+  font-family: 'Londrina Solid';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Londrina Solid Light'), local('LondrinaSolid-Light'), url('./Londrina_Solid-300-latin2.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* latin */
+@font-face {
+  font-family: 'Londrina Solid';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Londrina Solid Regular'), local('LondrinaSolid-Regular'), url('./Londrina_Solid-400-latin3.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* vietnamese */
+@font-face {
+  font-family: 'Bungee';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Bungee'), local('Bungee-Regular'), url('./Bungee-400-vietnamese1.woff2') format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+}
+
+/* latin-ext */
+@font-face {
+  font-family: 'Bungee';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Bungee'), local('Bungee-Regular'), url('./Bungee-400-latin-ext2.woff2') format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+  font-family: 'Bungee';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Bungee'), local('Bungee-Regular'), url('./Bungee-400-latin3.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

src/components/HelloWorld.vue

@@ -1,130 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br />
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener"
-        >vue-cli documentation</a
-      >.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
-          target="_blank"
-          rel="noopener"
-          >babel</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript"
-          target="_blank"
-          rel="noopener"
-          >typescript</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa"
-          target="_blank"
-          rel="noopener"
-          >pwa</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
-          target="_blank"
-          rel="noopener"
-          >eslint</a
-        >
-      </li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li>
-        <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
-      </li>
-      <li>
-        <a href="https://forum.vuejs.org" target="_blank" rel="noopener"
-          >Forum</a
-        >
-      </li>
-      <li>
-        <a href="https://chat.vuejs.org" target="_blank" rel="noopener"
-          >Community Chat</a
-        >
-      </li>
-      <li>
-        <a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
-          >Twitter</a
-        >
-      </li>
-      <li>
-        <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
-      </li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li>
-        <a href="https://router.vuejs.org" target="_blank" rel="noopener"
-          >vue-router</a
-        >
-      </li>
-      <li>
-        <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-devtools#vue-devtools"
-          target="_blank"
-          rel="noopener"
-          >vue-devtools</a
-        >
-      </li>
-      <li>
-        <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
-          >vue-loader</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/awesome-vue"
-          target="_blank"
-          rel="noopener"
-          >awesome-vue</a
-        >
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
-
-@Component
-export default class HelloWorld extends Vue {
-  @Prop() private msg!: string;
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/PlayerArea.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="player">
+    <div class="header">{{ player.name }}</div>
+    <div class="counter">{{ player.points }}</div>
+    <div class="tokens">
+      <span class="number">{{ player.at }}</span> AT
+    </div>
+    <div class="atactions"></div>
+    <TouchArea class="left" name="left" @touch="areaTouched" />
+    <TouchArea class="right" name="right" @touch="areaTouched" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@mixin visible {
+  z-index: 10;
+}
+
+@mixin data {
+  user-select: none;
+  pointer-events: none;
+}
+
+.header {
+  @include visible;
+  @include data;
+  font-size: 22pt;
+  line-height: 2em;
+}
+
+.player {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  flex-direction: column;
+}
+
+.counter {
+  @include visible;
+  @include data;
+  font-family: "Bungee", sans-serif;
+  font-size: 80pt;
+  height: 120px;
+  line-height: 1em;
+}
+
+.tokens {
+  @include visible;
+  @include data;
+  font-size: 40pt;
+  line-height: 1em;
+}
+
+.left {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 50%;
+  bottom: 10vh;
+  background: red;
+  z-index: 2;
+}
+.right {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  right: 0;
+  bottom: 10vh;
+  background: green;
+  z-index: 2;
+}
+</style>
+
+<script lang="ts">
+import { Component, Vue, Prop } from "vue-property-decorator";
+import { Player } from "@/types";
+import TouchArea from "./TouchArea.vue";
+
+type AreaType = "left" | "right";
+
+@Component({
+  components: {
+    TouchArea
+  }
+})
+export default class PlayerArea extends Vue {
+  @Prop()
+  private id!: number;
+
+  @Prop()
+  private player!: Player;
+
+  private areaTouched(which: AreaType) {
+    console.log(which);
+  }
+}
+</script>

src/components/TouchArea.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="area" @click="touched"></div>
+</template>
+
+<style lang="scss" scoped>
+.area {
+  cursor: pointer;
+}
+</style>
+
+<script lang="ts">
+import { Component, Vue, Prop } from "vue-property-decorator";
+
+@Component
+export default class TouchArea extends Vue {
+  @Prop()
+  private name!: string;
+
+  private touched() {
+    this.$emit("touch", this.name);
+  }
+}
+</script>

src/main.ts

@@ -1,9 +1,11 @@
 import Vue from "vue";
 import App from "./App.vue";
 import "./registerServiceWorker";
+import store from "./store";
 
 Vue.config.productionTip = false;
 
 new Vue({
+  store,
   render: h => h(App)
 }).$mount("#app");

src/store.ts

@@ -0,0 +1,27 @@
+import Vue from "vue";
+import Vuex, { MutationTree, ActionTree, GetterTree } from "vuex";
+import { AppState } from "./types";
+
+Vue.use(Vuex);
+
+const state: AppState = {
+  players: [
+    { name: "Player 1", points: 0, at: 0 },
+    { name: "Player 2", points: 0, at: 0 }
+  ]
+};
+
+const mutations: MutationTree<AppState> = {};
+
+const actions: ActionTree<AppState, AppState> = {};
+
+const getters: GetterTree<AppState, AppState> = {
+  players: state => state.players
+};
+
+export default new Vuex.Store({
+  state,
+  mutations,
+  actions,
+  getters
+});

src/types.ts

@@ -0,0 +1,9 @@
+export interface AppState {
+  players: Player[];
+}
+
+export interface Player {
+  name: string;
+  points: number;
+  at: number;
+}

yarn.lock

@@ -8645,6 +8645,16 @@ vue@^2.6.10:
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.10.tgz#a72b1a42a4d82a721ea438d1b6bf55e66195c637"
   integrity sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ==
 
+vuex-class@^0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/vuex-class/-/vuex-class-0.3.2.tgz#c7e96a076c1682137d4d23a8dcfdc63f220e17a8"
+  integrity sha512-m0w7/FMsNcwJgunJeM+wcNaHzK2KX1K1rw2WUQf7Q16ndXHo7pflRyOV/E8795JO/7fstyjH3EgqBI4h4n4qXQ==
+
+vuex@^3.0.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.1.1.tgz#0c264bfe30cdbccf96ab9db3177d211828a5910e"
+  integrity sha512-ER5moSbLZuNSMBFnEBVGhQ1uCBNJslH9W/Dw2W7GZN23UQA69uapP5GTT9Vm8Trc0PzBSVt6LzF3hGjmv41xcg==
+
 watchpack@^1.5.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.6.0.tgz#4bc12c2ebe8aa277a71f1d3f14d685c7b446cd00"