diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index bd521bf1650a654330f85a6bb1a429aa9d33f3cf..aadff8534573927ad854b9460d48f7cf292c86ee 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -4,10 +4,11 @@ module.exports = {
themeConfig: {
sidebar: [
{
- title: 'Components',
+ title: 'Examples',
collapsable: false,
children: [
'/examples/Generic.md',
+ '/examples/TicTacToe.md',
]
}
],
diff --git a/docs/examples/TicTacToe.md b/docs/examples/TicTacToe.md
new file mode 100644
index 0000000000000000000000000000000000000000..e8f1172f048d5fa17f27e3e47d1fe1bc1934c115
--- /dev/null
+++ b/docs/examples/TicTacToe.md
@@ -0,0 +1,12 @@
+# Example 2: Tic-Tac-Toe
+
+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.
+
+<ClientOnly>
+<script setup>
+import Example2TicTacToe from "../../example/src/Example2TicTacToe.vue";
+</script>
+
+
+<Example2TicTacToe />
+</ClientOnly>
\ No newline at end of file
diff --git a/example/src/App.vue b/example/src/App.vue
index 6421f1dac7aa39a787e03f813ee97b58b715abea..43b9b57182fe78e31c5ffcac0fa49b534b229dfc 100644
--- a/example/src/App.vue
+++ b/example/src/App.vue
@@ -3,6 +3,7 @@ import DragGrid from "../../src/DragGrid.vue";
import CircularCard from "./components/CircularCard.vue";
import NumberCounter from "./components/NumberCounter.vue";
import Example1Generic from "./Example1Generic.vue";
+import Example2TicTacToe from "./Example2TicTacToe.vue";
</script>
<template>
@@ -21,42 +22,8 @@ import Example1Generic from "./Example1Generic.vue";
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"
- :cols="3"
- v-model="ticTacToe1"
- class="tic-tac-toe"
- context="ticTacToe"
- :validate-element="randomKey"
- >
- <template #item="item">
- <CircularCard>
- {{ item.key.startsWith("a") ? "X" : "O" }}
- </CircularCard>
- </template>
- </DragGrid>
- <div>
- <p>
- These two are two different grids but we can drag from right to left!
- </p>
- <p>Drag items from the container on the right to play on the left.</p>
- </div>
- <DragGrid
- :rows="1"
- :cols="2"
- v-model="ticTacToe2"
- class="tic-tac-toe"
- context="ticTacToe"
- :pos-validation="blockAllMoving"
- >
- <template #item="item">
- <CircularCard>
- {{ item.data.text }}
- </CircularCard>
- </template>
- </DragGrid>
- </div>
+
+ <example2-tic-tac-toe></example2-tic-tac-toe>
<h2>Example 3: Counters</h2>
<p>
@@ -252,13 +219,12 @@ import Example1Generic from "./Example1Generic.vue";
</label>
<drag-grid
- v-model="ticTacToe1"
+ v-model="ticTacToe"
:cols="3"
:rows="3"
:disabled="gridDisabled"
class="tic-tac-toe"
context="ticTacToe"
- :validate-element="randomKey"
>
<template #item="item">
<CircularCard>
@@ -299,13 +265,6 @@ import Example1Generic from "./Example1Generic.vue";
export default {
name: "App",
methods: {
- blockAllMoving() {
- return false;
- },
- randomKey(element) {
- if (element.key.length !== 1) return;
- element.key += Math.random().toString(36).replace("0.", "");
- },
logInput(input) {
console.log("New movement detected:", input);
},
@@ -377,14 +336,10 @@ export default {
},
data() {
return {
- ticTacToe1: [
+ ticTacToe: [
{ x: 1, y: 1, w: 1, h: 1, key: "a1", data: { text: "X" } },
{ x: 3, y: 3, w: 1, h: 1, key: "b1", data: { text: "O" } },
],
- ticTacToe2: [
- { x: 1, y: 1, w: 1, h: 1, key: "a", data: { text: "X" } },
- { x: 2, y: 1, w: 1, h: 1, key: "b", data: { text: "O" } },
- ],
counters: [
{ x: 1, y: 1, w: 1, h: 1, key: "a", data: { num: 1 } },
{ x: 2, y: 1, w: 1, h: 1, key: "b", data: { num: 4 } },
diff --git a/example/src/Example2TicTacToe.vue b/example/src/Example2TicTacToe.vue
new file mode 100644
index 0000000000000000000000000000000000000000..be5bf394dc6b7a3d7d34bd55bebdec94b05e6bbe
--- /dev/null
+++ b/example/src/Example2TicTacToe.vue
@@ -0,0 +1,81 @@
+<script setup>
+import CircularCard from "./components/CircularCard.vue";
+import DragGrid from "../../src/DragGrid.vue";
+</script>
+
+<template>
+ <div class="ttt-container">
+ <DragGrid
+ :rows="3"
+ :cols="3"
+ v-model="ticTacToe1"
+ class="tic-tac-toe"
+ context="ticTacToe"
+ :validate-element="randomKey"
+ >
+ <template #item="item">
+ <CircularCard>
+ {{ item.key.startsWith("a") ? "X" : "O" }}
+ </CircularCard>
+ </template>
+ </DragGrid>
+ <div>
+ <p>
+ These two are two different grids but we can drag from right to left!
+ </p>
+ <p>Drag items from the container on the right to play on the left.</p>
+ </div>
+ <DragGrid
+ :rows="1"
+ :cols="2"
+ v-model="ticTacToe2"
+ class="tic-tac-toe"
+ context="ticTacToe"
+ :pos-validation="blockAllMoving"
+ >
+ <template #item="item">
+ <CircularCard>
+ {{ item.data.text }}
+ </CircularCard>
+ </template>
+ </DragGrid>
+ </div>
+</template>
+
+<script>
+export default {
+ name: "Example2TicTacToe",
+ methods: {
+ blockAllMoving() {
+ return false;
+ },
+ randomKey(element) {
+ if (element.key.length !== 1) return;
+ element.key += Math.random().toString(36).replace("0.", "");
+ },
+ },
+ data() {
+ return {
+ ticTacToe1: [
+ { x: 1, y: 1, w: 1, h: 1, key: "a1", data: { text: "X" } },
+ { x: 3, y: 3, w: 1, h: 1, key: "b1", data: { text: "O" } },
+ ],
+ ticTacToe2: [
+ { x: 1, y: 1, w: 1, h: 1, key: "a", data: { text: "X" } },
+ { x: 2, y: 1, w: 1, h: 1, key: "b", data: { text: "O" } },
+ ],
+ };
+ },
+};
+</script>
+
+<style scoped>
+.tic-tac-toe {
+ max-width: 400px;
+}
+
+.ttt-container {
+ display: flex;
+ justify-content: space-between;
+}
+</style>