https://github.com/silent-lad/vuesolitaire
Solitaire made in Vue
https://github.com/silent-lad/vuesolitaire
klondike solitaire solitaire-game spider-solitaire vue vue-solitaire vue-solitaire-klondike-spider vuejs
Last synced: 11 months ago
JSON representation
Solitaire made in Vue
- Host: GitHub
- URL: https://github.com/silent-lad/vuesolitaire
- Owner: silent-lad
- License: mit
- Created: 2019-03-31T07:27:09.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T18:57:21.000Z (over 3 years ago)
- Last Synced: 2024-06-19T03:07:17.229Z (about 2 years ago)
- Topics: klondike, solitaire, solitaire-game, spider-solitaire, vue, vue-solitaire, vue-solitaire-klondike-spider, vuejs
- Language: Vue
- Homepage: https://silentlad.com/how-to-write-beautiful-and-meaningful-readme.md
- Size: 8.89 MB
- Stars: 134
- Watchers: 6
- Forks: 605
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
VueSolitaire
[](https://github.com/vuejs/awesome-vue)
Live Demo
### [Contributions are Welcome](https://github.com/silent-lad/VueSolitaire/blob/master/CONTRIBUTING.md)
## Description
**NOW WITH DRAG AND DROP**
Solitaire implemented by scratch on vue.js. It contains 3 types of solitaire namely spider(which was made famous by microsoft back when I was a kid) ,spider 4 suit and klondike. I've learned web development myself without any course or coaching so don't expect too much from the source code xD.
**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 [__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,Firefox,Chrome,Safari,Opera__]-
- **Click** on the card or card pile you want to move .The pile turns to **blue**.
- **Click** on the
destination card and if the move is legal the cards will
stack below the target.
## About the project.
### Drag and Drop
- Drag and drop is implemented with native html5 drag and drop api with @drag, @dragend, @dragenter eventlisteners on the Card.vue component.
- Libraries like Vue.draggable were not used as i had to write most of the drag and drop logic according to the solitaire game type and I also had to **MOVE** the stack of cards.
- Ghost image in drag is removed instead the **whole stack** of card moves with cursor change.
### CSS
- Each and every card is 100% css except the SVG of the suit in the center of the card,which is made by illustrator tool.
### 3 mode menu
Choose from 3 variants of solitaire form the main menu
# Variants
## **Klondike**
## **Spider 4 Suit**
## **Spider 1 Suit**
## Project setup
```
npm install
npm run serve
```
## Future scope
- Add winning animation.
## Support on Beerpay
Hey dude! Help me out for a couple of :beers:!
[](https://beerpay.io/silent-lad/VueSolitaire) [](https://beerpay.io/silent-lad/VueSolitaire?focus=wish)