Add basic Rack, Tile and GameTable components. Remove Vue Logo demo comonent.

components/GameTable.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="table"></div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+  name: 'GameTable',
+  data() {
+    return {};
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.table {
+  background: yellow;
+  border: 1px solid #000;
+  border-radius: 5px;
+}
+</style>

components/Logo.vue

@@ -1,35 +0,0 @@
-<template>
-  <svg
-    class="NuxtLogo"
-    width="245"
-    height="180"
-    viewBox="0 0 452 342"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M139 330l-1-2c-2-4-2-8-1-13H29L189 31l67 121 22-16-67-121c-1-2-9-14-22-14-6 0-15 2-22 15L5 303c-1 3-8 16-2 27 4 6 10 12 24 12h136c-14 0-21-6-24-12z"
-      fill="#00C58E"
-    />
-    <path
-      d="M447 304L317 70c-2-2-9-15-22-15-6 0-15 3-22 15l-17 28v54l39-67 129 230h-49a23 23 0 0 1-2 14l-1 1c-6 11-21 12-23 12h76c3 0 17-1 24-12 3-5 5-14-2-26z"
-      fill="#108775"
-    />
-    <path
-      d="M376 330v-1l1-2c1-4 2-8 1-12l-4-12-102-178-15-27h-1l-15 27-102 178-4 12a24 24 0 0 0 2 15c4 6 10 12 24 12h190c3 0 18-1 25-12zM256 152l93 163H163l93-163z"
-      fill="#2F495E"
-    />
-  </svg>
-</template>
-
-<style>
-.NuxtLogo {
-  animation: 1s appear;
-  margin: auto;
-}
-
-@keyframes appear {
-  0% {
-    opacity: 0;
-  }
-}
-</style>

components/Rack.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="rack container p-4 m-4">
+    <draggable
+      v-model="tiles"
+      v-bind="dragOptions"
+      draggable=".tile"
+      @start="drag = true"
+      @end="drag = false"
+    >
+      <transition-group
+        tag="div"
+        class="grid grid-flow-col auto-cols-max gap-4"
+        type="transition"
+        :name="!drag ? 'flip-list' : null"
+      >
+        <tile
+          v-for="tile in tiles"
+          :key="tile"
+          :num="tile.num"
+          :color="tile.color"
+          class="tile"
+        />
+      </transition-group>
+    </draggable>
+  </div>
+</template>
+
+<script lang="ts">
+import draggable from 'vuedraggable';
+import Vue from 'vue';
+import Tile from './Tile.vue';
+
+export default Vue.extend({
+  name: 'Rack',
+  components: { draggable, Tile },
+  props: {
+    user: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      drag: false,
+      tiles: [
+        { num: 1, color: 'red' },
+        { num: 2, color: 'red' },
+        { num: 6, color: 'black' },
+      ],
+    };
+  },
+  computed: {
+    dragOptions() {
+      return {
+        animation: 200,
+        group: 'tiles',
+        disabled: false,
+        ghostClass: 'placeholder',
+      };
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.rack {
+  background: #fcf8d9;
+}
+
+.flip-list-move {
+  transition: transform 0.5s;
+}
+.no-move {
+  transition: transform 0s;
+}
+
+.placeholder {
+  opacity: 0.6;
+}
+</style>

components/Tile.vue

@@ -0,0 +1,62 @@
+<template>
+  <div
+    class="
+      tile
+      w-28
+      h-52
+      border
+      rounded-md
+      shadow-sm
+      flex
+      items-center
+      place-content-center
+    "
+    :class="{ ['color-' + color]: true }"
+  >
+    <h2 class="font-mono text-5xl font-extrabold">{{ num }}</h2>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+const availableColors = ['red', 'blue', 'black', 'yellow'];
+
+export default Vue.extend({
+  name: 'Tile',
+  props: {
+    num: {
+      type: Number,
+      required: true,
+      validator: (v) => v >= -1 && v <= 13,
+    },
+    color: {
+      type: String,
+      required: true,
+      validator: (v) => availableColors.includes(v),
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.tile {
+  background: #eee;
+
+  &.color-red {
+    color: red;
+  }
+
+  &.color-blue {
+    color: blue;
+  }
+
+  &.color-black {
+    color: black;
+  }
+
+  &.color-yellow {
+    color: yellow;
+  }
+}
+</style>

pages/index.vue

@@ -1,37 +1,26 @@
 <template>
   <div class="container">
-    <div>
-      <Logo />
-      <h1 class="title">Rummikid</h1>
-      <div class="links">
-        <a
-          href="https://nuxtjs.org/"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="button--green"
-        >
-          Documentation
-        </a>
-        <a
-          href="https://github.com/nuxt/nuxt.js"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="button--grey"
-        >
-          GitHub
-        </a>
-      </div>
-    </div>
+    <h1 class="title">Rummikid</h1>
+
+    <game-table />
+
+    <rack user="Dave" />
+    <rack user="Younhee" />
   </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue'
+import Vue from 'vue';
+import Rack from '~/components/Rack.vue';
+import GameTable from '~/components/GameTable.vue';
 
-export default Vue.extend({})
+export default Vue.extend({
+  components: { GameTable, Rack },
+});
 </script>
 
 <style>
+Table
 /* Sample `apply` at-rules with Tailwind CSS
 .container {
 @apply min-h-screen flex justify-center items-center text-center mx-auto;