Giter Club home page Giter Club logo

vuesolitaire's Introduction

VueSolitaire

Mentioned in Awesome Vue.js

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 Go check out his flutter implementation of the same Here .

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 ๐Ÿป!

Beerpay Beerpay

vuesolitaire's People

Contributors

dependabot[bot] avatar silent-lad avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

vuesolitaire's Issues

game rule is not correct

The game should allow connect cards with continuous number but in different suit. The limit should be that sequences in same suit can move together, different suit can not.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.