Small prep for vuex. Disable text selection on tiles.

components/Rack.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="rack container p-4 m-4">
     <draggable
-      v-model="tiles"
+      v-model="displayedTiles"
       v-bind="dragOptions"
       draggable=".tile"
       @start="drag = true"
@@ -14,11 +14,11 @@
         :name="!drag ? 'flip-list' : null"
       >
         <tile
-          v-for="tile in tiles"
+          v-for="tile in displayedTiles"
           :key="tile"
           :num="tile.num"
           :color="tile.color"
-          class="tile"
+          class="tile disable-select"
         />
       </transition-group>
     </draggable>
@@ -30,24 +30,43 @@ import draggable from 'vuedraggable';
 import Vue from 'vue';
 import Tile from './Tile.vue';
 
+type User = {
+  id: String;
+  name: String;
+};
+
+type TileData = {
+  num: String;
+  color: 'red' | 'black' | 'blue' | 'yellow';
+  onRack: Boolean;
+  onTable: Boolean;
+  ownedBy: User;
+};
+
 export default Vue.extend({
   name: 'Rack',
   components: { draggable, Tile },
   props: {
     user: {
-      type: String,
+      type: String, // Object as () => User,
       required: true,
     },
+    tiles: {
+      type: Array as () => TileData[],
+      required: false,
+      default: () => [],
+    },
   },
   data() {
+    type data = {
+      drag: Object;
+      displayedTiles: TileData[];
+    };
+
     return {
       drag: false,
-      tiles: [
-        { num: 1, color: 'red' },
-        { num: 2, color: 'red' },
-        { num: 6, color: 'black' },
-      ],
-    };
+      displayedTiles: [],
+    } as data;
   },
   computed: {
     dragOptions() {
@@ -59,12 +78,20 @@ export default Vue.extend({
       };
     },
   },
+  mounted() {
+    // TODO: Remove this once vuex is added.
+    this.displayedTiles = [...this.tiles];
+  },
 });
 </script>
 
 <style lang="scss" scoped>
 .rack {
   background: #fcf8d9;
+
+  .tile {
+    cursor: move;
+  }
 }
 
 .flip-list-move {
@@ -77,4 +104,11 @@ export default Vue.extend({
 .placeholder {
   opacity: 0.6;
 }
+
+.disable-select {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
 </style>

pages/index.vue

@@ -4,8 +4,8 @@
 
     <game-table />
 
-    <rack user="Dave" />
-    <rack user="Younhee" />
+    <rack user="Dave" :tiles="userTiles['dave']" />
+    <rack user="Younhee" :tiles="userTiles['younhee']" />
   </div>
 </template>
 
@@ -16,6 +16,22 @@ import GameTable from '~/components/GameTable.vue';
 
 export default Vue.extend({
   components: { GameTable, Rack },
+  data() {
+    return {
+      userTiles: {
+        dave: [
+          { num: 1, color: 'red' },
+          { num: 2, color: 'red' },
+          { num: 6, color: 'black' },
+        ],
+        younhee: [
+          { num: 7, color: 'yellow' },
+          { num: 8, color: 'yellow' },
+          { num: 3, color: 'blue' },
+        ],
+      },
+    };
+  },
 });
 </script>