Skip to content

Commit f6dfcc4

Browse files
committed
feat: add card shuffle animation component
1 parent 3cb7148 commit f6dfcc4

File tree

4 files changed

+83
-10
lines changed

4 files changed

+83
-10
lines changed

package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
},
1010
"dependencies": {
1111
"core-js": "^3.6.5",
12+
"lodash": "^4.17.20",
1213
"vue": "^3.0.0-0"
1314
},
1415
"devDependencies": {

src/App.vue

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,17 @@
11
<template>
22
<div id="app">
33
<h1>Hello!</h1>
4-
<EventValidator />
5-
<BasicTeleport />
6-
<TestWindow />
7-
<button @click="showTeleport = !showTeleport">Toggle Teleport</button>
4+
<CardShuffle />
85
</div>
96
</template>
107

118
<script>
12-
import TestWindow from './components/TestWindow'
13-
import BasicTeleport from './components/BasicTeleport'
14-
import EventValidator from './components/EventValidator'
9+
import CardShuffle from './components/CardShuffle'
1510
1611
export default {
1712
name: 'App',
1813
components: {
19-
BasicTeleport,
20-
EventValidator,
21-
TestWindow
14+
CardShuffle
2215
},
2316
data() {
2417
return {

src/components/CardShuffle.vue

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<script>
2+
import _ from 'lodash'
3+
4+
export default {
5+
data() {
6+
return {
7+
boardStyles: 'board',
8+
cards: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 11, 12, 13, 14, 15, 16]
9+
}
10+
},
11+
methods: {
12+
random() {
13+
this.cards = _.shuffle(this.cards)
14+
},
15+
shuffle() {
16+
this.random()
17+
this.random()
18+
}
19+
}
20+
}
21+
</script>
22+
23+
<template>
24+
<div>
25+
<h2>Shuffle Cards</h2>
26+
<transition-group name="board" tag="section" :class="boardStyles">
27+
<button v-for="card in cards" :key="card" class="card">
28+
{{ card }}
29+
</button>
30+
</transition-group>
31+
<button @click="shuffle" style="margin-top: 2rem;" class="card">
32+
Shuffle
33+
</button>
34+
</div>
35+
</template>
36+
37+
<style>
38+
body {
39+
margin: 30px;
40+
}
41+
42+
button {
43+
margin-right: 10px;
44+
}
45+
46+
.board {
47+
display: grid;
48+
grid-template-columns: 100px 100px 100px 100px;
49+
grid-template-rows: 100px 100px 100px 100px;
50+
grid-column-gap: 30px;
51+
grid-row-gap: 30px;
52+
justify-content: center;
53+
}
54+
55+
.board.is-one-deck {
56+
grid-template-columns: 100px;
57+
grid-template-rows: 100px;
58+
}
59+
60+
.board-move {
61+
transition: all 0.8s ease;
62+
}
63+
64+
.card {
65+
display: inline-block;
66+
transition: all 0.8s ease;
67+
}
68+
69+
.list-complete-item {
70+
transition: all 0.8s ease;
71+
display: inline-block;
72+
margin-right: 10px;
73+
}
74+
</style>

yarn.lock

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5257,6 +5257,11 @@ lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17
52575257
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.19.tgz#e48ddedbe30b3321783c5b4301fbd353bc1e4a4b"
52585258
integrity sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==
52595259

5260+
lodash@^4.17.20:
5261+
version "4.17.20"
5262+
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
5263+
integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
5264+
52605265
log-symbols@^2.2.0:
52615266
version "2.2.0"
52625267
resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-2.2.0.tgz#5740e1c5d6f0dfda4ad9323b5332107ef6b4c40a"

0 commit comments

Comments
 (0)