Resolve "Implement basic functionality"

Closes #1 (closed) Closes #2 (closed) Closes #3 (closed) Closes #4 (closed) Closes #5 (closed) Closes #6 (closed)

example/src/App.vue

@@ -13,11 +13,35 @@ import CircularCard from "./components/CircularCard.vue";
         <div class="container">{{ item }}</div>
       </template>
     </DragGrid>
-    <DragGrid :rows="3" :cols="3" v-model="ticTacToe" class="tic-tac-toe">
-      <template #item="item">
-        <CircularCard> {{ item.key.startsWith("a") ? "X" : "O" }}</CircularCard>
-      </template>
-    </DragGrid>
+    <div class="ttt-container">
+      <DragGrid
+        :rows="3"
+        :cols="3"
+        v-model="ticTacToe1"
+        class="tic-tac-toe"
+        context="ticTacToe"
+      >
+        <template #item="item">
+          <CircularCard>
+            {{ item.key.startsWith("a") ? "X" : "O" }}</CircularCard
+          >
+        </template>
+      </DragGrid>
+      <span> These two are two different grids but are interchangeable! </span>
+      <DragGrid
+        :rows="3"
+        :cols="3"
+        v-model="ticTacToe2"
+        class="tic-tac-toe"
+        context="ticTacToe"
+      >
+        <template #item="item">
+          <CircularCard>
+            {{ item.key.startsWith("a") ? "X" : "O" }}</CircularCard
+          >
+        </template>
+      </DragGrid>
+    </div>
   </div>
 </template>
 
@@ -51,7 +75,7 @@ export default {
         },
         { x: 5, y: 3, w: 1, h: 1, key: "obj9", data: {} },
       ],
-      ticTacToe: [
+      ticTacToe1: [
         { x: 1, y: 1, w: 1, h: 1, key: "a1", data: {} },
         { x: 1, y: 3, w: 1, h: 1, key: "a2", data: {} },
         { x: 2, y: 2, w: 1, h: 1, key: "a3", data: {} },
@@ -60,6 +84,7 @@ export default {
         { x: 1, y: 2, w: 1, h: 1, key: "b2", data: {} },
         { x: 3, y: 1, w: 1, h: 1, key: "b3", data: {} },
       ],
+      ticTacToe2: [{ x: 1, y: 1, w: 1, h: 1, key: "b4", data: {} }],
     };
   },
 };
@@ -95,4 +120,9 @@ export default {
 .tic-tac-toe {
   max-width: 400px;
 }
+
+.ttt-container {
+  display: flex;
+  justify-content: space-between;
+}
 </style>