feat: add card shuffle animation component

Author: bencodezen

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
+    "lodash": "^4.17.20",
     "vue": "^3.0.0-0"
   },
   "devDependencies": {

src/App.vue

@@ -1,24 +1,17 @@
 <template>
   <div id="app">
     <h1>Hello!</h1>
-    <EventValidator />
-    <BasicTeleport />
-    <TestWindow />
-    <button @click="showTeleport = !showTeleport">Toggle Teleport</button>
+    <CardShuffle />
   </div>
 </template>
 
 <script>
-import TestWindow from './components/TestWindow'
-import BasicTeleport from './components/BasicTeleport'
-import EventValidator from './components/EventValidator'
+import CardShuffle from './components/CardShuffle'
 
 export default {
   name: 'App',
   components: {
-    BasicTeleport,
-    EventValidator,
-    TestWindow
+    CardShuffle
   },
   data() {
     return {

src/components/CardShuffle.vue

@@ -0,0 +1,74 @@
+<script>
+import _ from 'lodash'
+
+export default {
+  data() {
+    return {
+      boardStyles: 'board',
+      cards: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 11, 12, 13, 14, 15, 16]
+    }
+  },
+  methods: {
+    random() {
+      this.cards = _.shuffle(this.cards)
+    },
+    shuffle() {
+      this.random()
+      this.random()
+    }
+  }
+}
+</script>
+
+<template>
+  <div>
+    <h2>Shuffle Cards</h2>
+    <transition-group name="board" tag="section" :class="boardStyles">
+      <button v-for="card in cards" :key="card" class="card">
+        {{ card }}
+      </button>
+    </transition-group>
+    <button @click="shuffle" style="margin-top: 2rem;" class="card">
+      Shuffle
+    </button>
+  </div>
+</template>
+
+<style>
+body {
+  margin: 30px;
+}
+
+button {
+  margin-right: 10px;
+}
+
+.board {
+  display: grid;
+  grid-template-columns: 100px 100px 100px 100px;
+  grid-template-rows: 100px 100px 100px 100px;
+  grid-column-gap: 30px;
+  grid-row-gap: 30px;
+  justify-content: center;
+}
+
+.board.is-one-deck {
+  grid-template-columns: 100px;
+  grid-template-rows: 100px;
+}
+
+.board-move {
+  transition: all 0.8s ease;
+}
+
+.card {
+  display: inline-block;
+  transition: all 0.8s ease;
+}
+
+.list-complete-item {
+  transition: all 0.8s ease;
+  display: inline-block;
+  margin-right: 10px;
+}
+</style>

yarn.lock

@@ -5257,6 +5257,11 @@ lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.19.tgz#e48ddedbe30b3321783c5b4301fbd353bc1e4a4b"
   integrity sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==
 
+lodash@^4.17.20:
+  version "4.17.20"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
+  integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
+
 log-symbols@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-2.2.0.tgz#5740e1c5d6f0dfda4ad9323b5332107ef6b4c40a"