Explain examples better

example/src/App.vue

@@ -6,7 +6,19 @@ import NumberCounter from "./components/NumberCounter.vue";
 
 <template>
   <div id="app">
-    <DragGrid :rows="8" :cols="5" :pos-validation="blockField" v-model="items">
+    <h1><code>DragGrid</code> Examples</h1>
+    <h2>Example 1</h2>
+    <p>
+      Grid with two programmatically blocked cells and one programmatically
+      blocked item
+    </p>
+    <DragGrid
+      :rows="8"
+      :cols="5"
+      :pos-validation="blockField"
+      v-model="items"
+      class="bordered"
+    >
       <div id="blocker">
         This field is blocked because it's filled, the next one programmatically
       </div>
@@ -14,6 +26,13 @@ import NumberCounter from "./components/NumberCounter.vue";
         <div class="container">{{ item }}</div>
       </template>
     </DragGrid>
+
+    <h2>Example 2: "Tic-Tac-Toe"</h2>
+    <p>
+      A grid functioning as a playing field and another functioning as a
+      container for playing pieces. You can drag as many pieces as you want from
+      the container to the field.
+    </p>
     <div class="ttt-container">
       <DragGrid
         :rows="3"
@@ -50,6 +69,15 @@ import NumberCounter from "./components/NumberCounter.vue";
         </template>
       </DragGrid>
     </div>
+
+    <h2>Example 3: Counters</h2>
+    <p>
+      Showcasing local and global state: The local state of the counter
+      components doesn't change when moved inside one grid, but is cleared when
+      moved to the other. The global state is in the <code>data</code> attribute
+      of each item and gets transferred as well. Both grids have also custom
+      highlights.
+    </p>
     <div class="ttt-container">
       <drag-grid
         v-model="counters"
@@ -80,6 +108,16 @@ import NumberCounter from "./components/NumberCounter.vue";
         </template>
       </drag-grid>
     </div>
+
+    <h2>Example 4: Dynamic lessons</h2>
+    <p>
+      These lessons are loaded from <code>computed</code> to simulate a
+      non-editable source like an API. they are changed using the method
+      <code>handleLessonMoved</code>. Try changing the sizes of Lesson1, the
+      grid and the texts of the items! The lesson container on the side doesn't
+      have a highlight and doesn't keep track of the item position. Try moving
+      <code>item3</code> back and forth!
+    </p>
     <div class="ttt-container">
       <div>
         <label>
@@ -137,6 +175,17 @@ import NumberCounter from "./components/NumberCounter.vue";
         </template>
       </drag-grid>
     </div>
+
+    <h2>Example 5: Dynamic colors</h2>
+    <p>
+      This example showcases the <code>rawItem</code> with the custom method
+      <code>getColor</code>. Both grids on the outside call the method with
+      <code>"red"</code> while the one in the middle uses <code>"green"</code>.
+      We use arrays called <code>placedA</code>, <code>placedB</code> and
+      <code>placedC</code> to save, which item is contained in which grid.
+      Notice: the third grid doesn't save the item position, they are always
+      positioned automatically.
+    </p>
     <div class="ttt-container">
       <drag-grid
         :value="colorGrid"
@@ -549,4 +598,18 @@ export default {
   line-height: 2em;
   box-sizing: content-box;
 }
+
+h2 {
+  padding-top: 1em;
+}
+
+h2 + p {
+  padding-bottom: 0.5em;
+}
+
+code {
+  background: lightgray;
+  padding: 0.2em;
+  border-radius: 3px;
+}
 </style>