From 09243f868e3a87c5b2e1915e77c2ee03f74a8a52 Mon Sep 17 00:00:00 2001
From: DIVYANSH TRIPATHI <divyanshtripathi1998@gmail.com>
Date: Mon, 8 Apr 2019 15:10:58 +0530
Subject: [PATCH] Added go back to menu

---
 .firebase/hosting.ZGlzdA.cache |  24 +-
 README.md                      |   9 +-
 config.json                    | 563 ---------------------------------
 public/index.html              |   6 +
 src/views/Klondike.vue         |  14 +-
 src/views/Spider.vue           |  21 +-
 6 files changed, 45 insertions(+), 592 deletions(-)
 delete mode 100644 config.json

diff --git a/.firebase/hosting.ZGlzdA.cache b/.firebase/hosting.ZGlzdA.cache
index fb5f4e0..26475c2 100644
--- a/.firebase/hosting.ZGlzdA.cache
+++ b/.firebase/hosting.ZGlzdA.cache
@@ -1,15 +1,9 @@
-favicon.ico,1554671334004,5b9697e19ccae2f16128536dbbab8f9d302dc67951e688c49f7c896eb5d9ee4d
-index.html,1554671334003,bf096c3749d014893e96c733da17d6a3f0c244bc1542508fe5ecee8f2414bc58
-css/app.c7374785.css,1554671334015,9407c8fa294f072e518e048c983ee64101165ab87bc87793b24daa16012d04c2
-js/app.23e4d561.js,1554671334018,3b68e315fe68cc2d3b29bf89b12bb2e228972810bba7141b0baa94015285b758
-js/app.23e4d561.js.map,1554671334020,516e615e098d18d5442aa978adaeb528b4b99543fe8facbeb2db7adedcea865b
-media/flip.2dd4d944.wav,1554671334004,4f7573fdd6e4a0859f8d7ef9b0251fbeffc6d9f4dbc85943a44c8f58d2cba311
-js/chunk-vendors.720ad752.js,1554671334016,8bda099bbe349d69e4851dc2ddf5774eded3e846bfaf2a812a6deb047461d38b
-media/shuffle2.2cd1dc97.wav,1554671334017,30a681af540c4e08334de7ae4d9740124c6ac9282fff0a88a086cec159b9b4b9
-sl.png,1554671334003,fb96ef2e9c318003d683b13dfdfcf3f6dbe483379b3a5c4f53b89aafdbeb805e
-img/sl.339f618f.png,1554671334004,4bd4500b3df3080e93b8d49e5e1275bce510e0ebd9d8aca511bae3e88a9aab39
-img/1.07b62ec0.png,1554671334018,e0402508989f3a72d53d8e27bc8b621a69d86dd68a6da63199463645153130c0
-img/5.13fdd6ff.png,1554671334018,d0307ecf752e62dc59976325b99dd55ff72986b4ee6fecbbc7b6f94470bbdfcf
-1.png,1554671334003,16b697aaebd4ceb29a9e75724ef2a7ad8f124082763a144e1678ee2257a17dab
-img/3.bf7d9d79.png,1554671334017,30fa2683ec9f1c46d3446bfbf0054fa1a5706894668c977592ba0803f783825a
-js/chunk-vendors.720ad752.js.map,1554671334019,d33ca7558b30b0d0dd6d05bdab48a99c7ae9494c1e1049badd32d52b9df5e200
+favicon.ico,1554708800378,5b9697e19ccae2f16128536dbbab8f9d302dc67951e688c49f7c896eb5d9ee4d
+index.html,1554708800377,7e26fe8d0cc24e59e2e7b8d85e47adeb2d5dd26e8f090b23f7b869778f4da148
+js/app.d9b9203e.js,1554708800388,c0916c8a70bdc5fba1ce089bfb5025cb19ea286bc982658a3b414d2a2a1f0353
+css/app.48ea2a16.css,1554708800388,2f4c24e4eedfb097adba9e6ce4be0a479f1c1dffaa93adc9fa4f3c1106de5bb5
+js/app.d9b9203e.js.map,1554708800392,269fc5623349ae0dad7877488f22773eb73bbbf33c025f24a73d6e28f32f9fff
+media/flip.2dd4d944.wav,1554708800378,4f7573fdd6e4a0859f8d7ef9b0251fbeffc6d9f4dbc85943a44c8f58d2cba311
+media/shuffle2.2cd1dc97.wav,1554708800388,30a681af540c4e08334de7ae4d9740124c6ac9282fff0a88a086cec159b9b4b9
+js/chunk-vendors.720ad752.js,1554708800390,8bda099bbe349d69e4851dc2ddf5774eded3e846bfaf2a812a6deb047461d38b
+js/chunk-vendors.720ad752.js.map,1554708800390,d33ca7558b30b0d0dd6d05bdab48a99c7ae9494c1e1049badd32d52b9df5e200
diff --git a/README.md b/README.md
index 1751df7..c51b3ee 100644
--- a/README.md
+++ b/README.md
@@ -36,18 +36,18 @@ Solitaire implemented by scratch on vue.js. It contains 3 types of solitaire nam
 
 **This project is inspired by [AadumKhor](https://github.com/AadumKhor) Go check out his flutter implementation of the same [Here](https://github.com/AadumKhor/Solitaire_Flutter)** .
 
-
 ## How to play
 
-### Drag and Drop [**New** ]:-
+### Drag and Drop [__Chrome,Opera__]:-
 
 - **Drag** the card or the card pile you want to move.
 - **Drop** the dragged card pile on the target and if the move is legal card will move
+- Note:- Drag and Drop doesn't work for properly for **firefox** due to their lack of support to html Drag and drop API - https://bugzilla.mozilla.org/show_bug.cgi?id=505521 .
 
-### Click edition (Mobile version)-
+### Click edition [__Mobile,Firefox,Chrome,Safari,Opera__]-
 
 - **Click** on the card or card pile you want to move .The pile turns to **blue**.
-- Click on the
+- **Click** on the
   destination card and if the move is legal the cards will
   stack below the target.
 
@@ -96,7 +96,6 @@ npm run serve
 ## Future scope
 
 - Add winning animation.
-- Make klondike one better.
 
 ## Support on Beerpay
 
diff --git a/config.json b/config.json
deleted file mode 100644
index b504c57..0000000
--- a/config.json
+++ /dev/null
@@ -1,563 +0,0 @@
-{
-  "almostComplete": [
-    [
-      { "rank": "A", "isDown": true, "suit": "spades", "deck": 6 },
-      { "rank": "Q", "isDown": true, "suit": "spades", "deck": 8 },
-      { "rank": "8", "isDown": true, "suit": "spades", "deck": 5 },
-      { "rank": "7", "isDown": false, "suit": "spades", "deck": 4 }
-    ],
-    [
-      { "rank": "6", "isDown": true, "suit": "spades", "deck": 1 },
-      { "rank": "9", "isDown": true, "suit": "spades", "deck": 6 },
-      { "rank": "A", "isDown": true, "suit": "spades", "deck": 8 },
-      { "rank": "2", "isDown": true, "suit": "spades", "deck": 3 },
-      {
-        "rank": "J",
-        "isDown": false,
-        "suit": "spades",
-        "deck": 1,
-        "isSelected": false
-      },
-      { "rank": "10", "isDown": false, "suit": "spades", "deck": 1 },
-      {
-        "rank": "9",
-        "isDown": false,
-        "suit": "spades",
-        "deck": 3,
-        "isSelected": false
-      },
-      { "rank": "J", "isDown": false, "suit": "spades", "deck": 3 },
-      {
-        "rank": "10",
-        "isDown": false,
-        "suit": "spades",
-        "deck": 8,
-        "isSelected": false
-      }
-    ],
-    [
-      { "rank": "7", "isDown": true, "suit": "spades", "deck": 6 },
-      { "rank": "8", "isDown": true, "suit": "spades", "deck": 1 },
-      { "rank": "K", "isDown": true, "suit": "spades", "deck": 3 },
-      { "rank": "J", "isDown": false, "suit": "spades", "deck": 2 },
-      { "rank": "7", "isDown": false, "suit": "spades", "deck": 5 },
-      { "rank": "3", "isDown": false, "suit": "spades", "deck": 7 },
-      {
-        "rank": "2",
-        "isDown": false,
-        "suit": "spades",
-        "deck": 2,
-        "isSelected": false
-      },
-      {
-        "rank": "A",
-        "isDown": false,
-        "suit": "spades",
-        "deck": 3,
-        "isSelected": false
-      },
-      { "rank": "8", "isDown": false, "suit": "spades", "deck": 2 },
-      {
-        "rank": "7",
-        "isDown": false,
-        "suit": "spades",
-        "deck": 8,
-        "isSelected": false
-      }
-    ],
-    [
-      { "rank": "2", "isDown": true, "suit": "spades", "deck": 7 },
-      { "rank": "8", "isDown": true, "suit": "spades", "deck": 8 },
-      {
-        "rank": "3",
-        "isDown": false,
-        "suit": "spades",
-        "deck": 5,
-        "isSelected": false
-      },
-      {
-        "rank": "2",
-        "isDown": false,
-        "suit": "spades",
-        "deck": 4,
-        "isSelected": false
-      },
-      {
-        "rank": "6",
-        "isDown": false,
-        "suit": "spades",
-        "deck": 8,
-        "isSelected": false
-      },
-      {
-        "rank": "5",
-        "isDown": false,
-        "suit": "spades",
-        "deck": 3,
-        "isSelected": false
-      },
-      { "rank": "K", "isDown": false, "suit": "spades", "deck": 8 },
-      {
-        "rank": "Q",
-        "isDown": false,
-        "suit": "spades",
-        "deck": 1,
-        "isSelected": false
-      },
-      {
-        "rank": "J",
-        "isDown": false,
-        "suit": "spades",
-        "deck": 6,
-        "isSelected": false
-      },
-      {
-        "rank": "10",
-        "isDown": false,
-        "suit": "spades",
-        "deck": 6,
-        "isSelected": false
-      }
-    ],
-    [
-      { "rank": "A", "isDown": true, "suit": "spades", "deck": 7 },
-      { "rank": "4", "isDown": true, "suit": "spades", "deck": 7 },
-      { "rank": "Q", "isDown": true, "suit": "spades", "deck": 2 },
-      { "rank": "Q", "isDown": true, "suit": "spades", "deck": 4 },
-      { "rank": "J", "isDown": false, "suit": "spades", "deck": 8 },
-      { "rank": "2", "isDown": false, "suit": "spades", "deck": 8 },
-      { "rank": "5", "isDown": false, "suit": "spades", "deck": 1 },
-      {
-        "rank": "4",
-        "isDown": false,
-        "suit": "spades",
-        "deck": 4,
-        "isSelected": false
-      }
-    ],
-    [
-      { "rank": "Q", "isDown": true, "suit": "spades", "deck": 6 },
-      { "rank": "4", "isDown": true, "suit": "spades", "deck": 8 },
-      { "rank": "3", "isDown": false, "suit": "spades", "deck": 6 },
-      { "rank": "8", "isDown": false, "suit": "spades", "deck": 4 },
-      { "rank": "7", "isDown": false, "suit": "spades", "deck": 3 },
-      { "rank": "A", "isDown": false, "suit": "spades", "deck": 5 }
-    ],
-    [
-      { "rank": "10", "isDown": true, "suit": "spades", "deck": 4 },
-      { "rank": "J", "isDown": true, "suit": "spades", "deck": 4 },
-      { "rank": "5", "isDown": false, "suit": "spades", "deck": 6 },
-      { "rank": "A", "isDown": false, "suit": "spades", "deck": 1 },
-      { "rank": "9", "isDown": false, "suit": "spades", "deck": 7 }
-    ],
-    [
-      { "rank": "8", "isDown": true, "suit": "spades", "deck": 3 },
-      { "rank": "4", "isDown": true, "suit": "spades", "deck": 3 },
-      { "rank": "6", "isDown": false, "suit": "spades", "deck": 6 },
-      {
-        "rank": "5",
-        "isDown": false,
-        "suit": "spades",
-        "deck": 5,
-        "isSelected": false
-      },
-      { "rank": "6", "isDown": false, "suit": "spades", "deck": 3 },
-      { "rank": "9", "isDown": false, "suit": "spades", "deck": 2 }
-    ],
-    [
-      { "rank": "10", "isDown": true, "suit": "spades", "deck": 7 },
-      { "rank": "10", "isDown": true, "suit": "spades", "deck": 5 },
-      { "rank": "4", "isDown": true, "suit": "spades", "deck": 2 },
-      { "rank": "6", "isDown": true, "suit": "spades", "deck": 4 },
-      { "rank": "K", "isDown": false, "suit": "spades", "deck": 2 },
-      { "rank": "9", "isDown": false, "suit": "spades", "deck": 4 },
-      { "rank": "3", "isDown": false, "suit": "spades", "deck": 4 },
-      {
-        "rank": "2",
-        "isDown": false,
-        "suit": "spades",
-        "deck": 6,
-        "isSelected": false
-      }
-    ],
-    [
-      { "rank": "K", "isDown": true, "suit": "spades", "deck": 6 },
-      { "rank": "Q", "isDown": true, "suit": "spades", "deck": 1 },
-      { "rank": "J", "isDown": true, "suit": "spades", "deck": 4 },
-      { "rank": "10", "isDown": true, "suit": "spades", "deck": 7 },
-      { "rank": "9", "isDown": true, "suit": "spades", "deck": 2 },
-      { "rank": "8", "isDown": true, "suit": "spades", "deck": 1 },
-      { "rank": "7", "isDown": true, "suit": "spades", "deck": 5 },
-      { "rank": "6", "isDown": true, "suit": "spades", "deck": 7 },
-      { "rank": "5", "isDown": true, "suit": "spades", "deck": 5 },
-      { "rank": "4", "isDown": true, "suit": "spades", "deck": 3 },
-      { "rank": "3", "isDown": true, "suit": "spades", "deck": 6 },
-      { "rank": "2", "isDown": true, "suit": "spades", "deck": 8 }
-    ],
-    [
-      { "rank": "K", "isDown": true, "suit": "spades", "deck": 6 },
-      { "rank": "Q", "isDown": true, "suit": "spades", "deck": 1 },
-      { "rank": "J", "isDown": true, "suit": "spades", "deck": 4 },
-      { "rank": "10", "isDown": true, "suit": "spades", "deck": 7 },
-      { "rank": "9", "isDown": true, "suit": "spades", "deck": 2 },
-      { "rank": "8", "isDown": true, "suit": "spades", "deck": 1 },
-      { "rank": "7", "isDown": true, "suit": "spades", "deck": 5 },
-      { "rank": "6", "isDown": true, "suit": "spades", "deck": 7 },
-      { "rank": "5", "isDown": true, "suit": "spades", "deck": 5 },
-      { "rank": "4", "isDown": true, "suit": "spades", "deck": 3 },
-      { "rank": "3", "isDown": true, "suit": "spades", "deck": 6 },
-      { "rank": "2", "isDown": true, "suit": "spades", "deck": 8 }
-    ]
-  ],
-  "almostEmpty": [
-    [],
-    [],
-    [],
-    [],
-    [],
-    [],
-    [],
-    [{ "rank": "A", "isDown": false, "suit": "spades", "deck": 8 }],
-    [
-      { "rank": "K", "isDown": false, "suit": "spades", "deck": 6 },
-      { "rank": "Q", "isDown": false, "suit": "spades", "deck": 1 },
-      { "rank": "J", "isDown": false, "suit": "spades", "deck": 4 },
-      { "rank": "10", "isDown": false, "suit": "spades", "deck": 7 },
-      { "rank": "9", "isDown": false, "suit": "spades", "deck": 2 },
-      { "rank": "8", "isDown": false, "suit": "spades", "deck": 1 },
-      { "rank": "7", "isDown": false, "suit": "spades", "deck": 5 },
-      { "rank": "6", "isDown": false, "suit": "spades", "deck": 7 },
-      { "rank": "5", "isDown": false, "suit": "spades", "deck": 5 },
-      { "rank": "4", "isDown": false, "suit": "spades", "deck": 3 },
-      { "rank": "3", "isDown": false, "suit": "spades", "deck": 6 },
-      { "rank": "2", "isDown": false, "suit": "spades", "deck": 8 }
-    ],
-    []
-  ],
-  "klondike": [
-    [
-      {
-        "rank": "J",
-        "isDown": false,
-        "suit": "spades",
-        "deck": 1,
-        "color": "black"
-      }
-    ],
-    [
-      {
-        "rank": "9",
-        "isDown": true,
-        "suit": "heart",
-        "deck": 1,
-        "color": "red"
-      },
-      {
-        "rank": "2",
-        "isDown": false,
-        "suit": "heart",
-        "deck": 1,
-        "color": "red"
-      }
-    ],
-    [
-      {
-        "rank": "J",
-        "isDown": true,
-        "suit": "clubs",
-        "deck": 1,
-        "color": "black"
-      },
-      {
-        "rank": "J",
-        "isDown": false,
-        "suit": "heart",
-        "deck": 1,
-        "color": "red",
-        "isSelected": false
-      }
-    ],
-    [
-      {
-        "rank": "6",
-        "isDown": true,
-        "suit": "clubs",
-        "deck": 1,
-        "color": "black"
-      },
-      {
-        "rank": "A",
-        "isDown": true,
-        "suit": "clubs",
-        "deck": 1,
-        "color": "black"
-      },
-      {
-        "rank": "9",
-        "isDown": true,
-        "suit": "diamond",
-        "deck": 1,
-        "color": "red"
-      },
-      {
-        "rank": "6",
-        "isDown": false,
-        "suit": "heart",
-        "deck": 1,
-        "color": "red",
-        "isSelected": false
-      },
-      {
-        "rank": "5",
-        "isDown": false,
-        "suit": "clubs",
-        "deck": 1,
-        "color": "black",
-        "isSelected": false
-      },
-      {
-        "rank": "4",
-        "isDown": false,
-        "suit": "heart",
-        "deck": 1,
-        "color": "red",
-        "isSelected": false
-      }
-    ],
-    [
-      {
-        "rank": "3",
-        "isDown": true,
-        "suit": "heart",
-        "deck": 1,
-        "color": "red"
-      },
-      {
-        "rank": "4",
-        "isDown": true,
-        "suit": "clubs",
-        "deck": 1,
-        "color": "black"
-      },
-      {
-        "rank": "6",
-        "isDown": true,
-        "suit": "diamond",
-        "deck": 1,
-        "color": "red"
-      },
-      {
-        "rank": "K",
-        "isDown": true,
-        "suit": "heart",
-        "deck": 1,
-        "color": "red"
-      },
-      {
-        "rank": "Q",
-        "isDown": false,
-        "suit": "clubs",
-        "deck": 1,
-        "color": "black"
-      }
-    ],
-    [
-      {
-        "rank": "10",
-        "isDown": true,
-        "suit": "diamond",
-        "deck": 1,
-        "color": "red"
-      },
-      {
-        "rank": "9",
-        "isDown": true,
-        "suit": "clubs",
-        "deck": 1,
-        "color": "black"
-      },
-      {
-        "rank": "3",
-        "isDown": true,
-        "suit": "clubs",
-        "deck": 1,
-        "color": "black"
-      },
-      {
-        "rank": "4",
-        "isDown": true,
-        "suit": "spades",
-        "deck": 1,
-        "color": "black"
-      },
-      {
-        "rank": "Q",
-        "isDown": true,
-        "suit": "spades",
-        "deck": 1,
-        "color": "black"
-      },
-      {
-        "rank": "K",
-        "isDown": false,
-        "suit": "spades",
-        "deck": 1,
-        "color": "black",
-        "isSelected": false
-      },
-      {
-        "rank": "Q",
-        "isDown": false,
-        "suit": "diamond",
-        "deck": 1,
-        "color": "red",
-        "isSelected": false
-      }
-    ],
-    [
-      {
-        "rank": "3",
-        "isDown": true,
-        "suit": "spades",
-        "deck": 1,
-        "color": "black"
-      },
-      {
-        "rank": "7",
-        "isDown": true,
-        "suit": "diamond",
-        "deck": 1,
-        "color": "red"
-      },
-      {
-        "rank": "10",
-        "isDown": true,
-        "suit": "heart",
-        "deck": 1,
-        "color": "red"
-      },
-      {
-        "rank": "4",
-        "isDown": true,
-        "suit": "diamond",
-        "deck": 1,
-        "color": "red"
-      },
-      {
-        "rank": "K",
-        "isDown": true,
-        "suit": "clubs",
-        "deck": 1,
-        "color": "black"
-      },
-      {
-        "rank": "K",
-        "isDown": true,
-        "suit": "diamond",
-        "deck": 1,
-        "color": "red"
-      },
-      {
-        "rank": "6",
-        "isDown": false,
-        "suit": "spades",
-        "deck": 1,
-        "color": "black"
-      },
-      {
-        "rank": "5",
-        "isDown": false,
-        "suit": "heart",
-        "deck": 1,
-        "color": "red",
-        "isSelected": false
-      }
-    ],
-    [
-      {
-        "rank": "7",
-        "isDown": true,
-        "suit": "clubs",
-        "deck": 1,
-        "color": "black"
-      },
-      {
-        "rank": "5",
-        "isDown": true,
-        "suit": "diamond",
-        "deck": 1,
-        "color": "red"
-      },
-      {
-        "rank": "A",
-        "isDown": true,
-        "suit": "diamond",
-        "deck": 1,
-        "color": "red"
-      },
-      {
-        "rank": "7",
-        "isDown": true,
-        "suit": "spades",
-        "deck": 1,
-        "color": "black"
-      },
-      {
-        "rank": "8",
-        "isDown": true,
-        "suit": "heart",
-        "deck": 1,
-        "color": "red"
-      },
-      {
-        "rank": "10",
-        "isDown": true,
-        "suit": "clubs",
-        "deck": 1,
-        "color": "black"
-      },
-      {
-        "rank": "10",
-        "isDown": true,
-        "suit": "spades",
-        "deck": 1,
-        "color": "black"
-      },
-      {
-        "rank": "7",
-        "isDown": true,
-        "suit": "heart",
-        "deck": 1,
-        "color": "red"
-      },
-      {
-        "rank": "8",
-        "isDown": true,
-        "suit": "diamond",
-        "deck": 1,
-        "color": "red"
-      },
-      {
-        "rank": "3",
-        "isDown": true,
-        "suit": "diamond",
-        "deck": 1,
-        "color": "red"
-      },
-      {
-        "rank": "5",
-        "isDown": true,
-        "suit": "spades",
-        "deck": 1,
-        "color": "black"
-      },
-      {
-        "rank": "2",
-        "isDown": true,
-        "suit": "clubs",
-        "deck": 1,
-        "color": "black"
-      }
-    ]
-  ]
-}
diff --git a/public/index.html b/public/index.html
index d0f95ad..0612933 100644
--- a/public/index.html
+++ b/public/index.html
@@ -37,6 +37,12 @@
     <meta name="twitter:title" content="VueSolitaire" />
     <meta name="twitter:description" content="Solitaire made on Vue.js" />
     <meta name="twitter:image" content="./1.png" />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
+      integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
+      crossorigin="anonymous"
+    />
   </head>
   <body>
     <!-- Global site tag (gtag.js) - Google Analytics -->
diff --git a/src/views/Klondike.vue b/src/views/Klondike.vue
index 73c8ca2..f212cd0 100644
--- a/src/views/Klondike.vue
+++ b/src/views/Klondike.vue
@@ -7,6 +7,9 @@
       </h1>
     </div>
     <div class="main_table">
+      <button class="goback" @click="$router.push('/')">
+        <i class="fas fa-long-arrow-alt-left"></i> Menu
+      </button>
       <div class="upper_table">
         <div
           style="position:absolute;top:-10px;left:6%;"
@@ -302,13 +305,10 @@ export default {
       this.highlightedDeck = deck;
     },
     gameOver: function() {
-      console.log("GameOver");
-    },
-    handComplete: function() {
-      console.log("complete");
-      this.completedHands++;
-      if (this.completedHands == 8) {
-        this.gameOver();
+      if (confirm("Congrats,You Won the Game.Do you want to continue?")) {
+        this.spiderInit();
+      } else {
+        this.$router.push("/");
       }
     },
     removeSelection: function() {
diff --git a/src/views/Spider.vue b/src/views/Spider.vue
index a89aee7..2497901 100644
--- a/src/views/Spider.vue
+++ b/src/views/Spider.vue
@@ -7,7 +7,9 @@
       </h1>
     </div>
     <div class="green_table">
-      <!-- <button @click="displayInit();"></button> -->
+      <button class="goback" @click="$router.push('/')">
+        <i class="fas fa-long-arrow-alt-left"></i> Menu
+      </button>
       <div
         class="card card_holder"
         v-for="deck in decks.slice(0, 10)"
@@ -186,6 +188,11 @@ export default {
     },
     gameOver: function() {
       console.log("GameOver");
+      if (confirm("Congrats,You Won the Game.Do you want to continue?")) {
+        this.spiderInit();
+      } else {
+        this.$router.push("/");
+      }
     },
     handComplete: function() {
       console.log("complete");
@@ -321,7 +328,6 @@ body {
   height: 100vh;
   width: 100vw;
   padding: 0;
-  /* background: green; */
   background-image: radial-gradient(
     rgba(57, 172, 57, 0.726),
     rgb(0, 116, 0),
@@ -380,5 +386,16 @@ body {
     display: none;
   }
 }
+.goback {
+  cursor: pointer;
+  position: absolute;
+  text-shadow: 3px 2px 4px rgba(0, 0, 0, 0.548);
+  top: 1vh;
+  left: 2vw;
+  border: none;
+  background: none;
+  font-family: "Pacifico", cursive;
+  font-size: 2vw;
+}
 /* @media screen and (orientation:landscape) { … } */
 </style>