Freecell implemented in javascript using Svelte and interact.js. Works on ipad, browser and iphone (although cards are a little small)
Try it here: https://redronin.github.io/freecell-svelte/
(First page load is slow as it loads images of playing cards)
I spend a few days playing a Freecell app, and decided I wanted to try writing my own Freecell. I thought it would be a great opportunity to learn Svelte too.
In the end, not sure this app is suited for, or needed Svelte, but thought it was a fun experiment to make it work with it. Still barely touched what Svelte is and what it can do, but it was fun learning.
I think this game is 90% complete - end win screen is super lame though.
- Should work on ipads, iphones and desktop
- handles touch/drag on mobile
- click card to auto-complete move if possible
- enter in game # from MS Freecell and will bring up same game - uses same randomizer/seeding algorithm
- Has a very lame win screen - make it better. Like win animations in original game
- No sounds yet
- Make it better (currently not great coding - but I was just learning what Svelte is.)
- support http://url?id=xxxx to fire up certain game # of Freecell
- easy to send link of certain game # - like share button
Looking for a shareable component template? Go here --> sveltejs/component-template
This is a project template for Svelte apps. It lives at https://github.com/sveltejs/template.
To create a new project based on this template using degit:
npx degit sveltejs/template svelte-app
cd svelte-app
Note that you will need to have Node.js installed.
yarn add parcel-bundler --dev
yarn add --dev svelte
yarn add --dev parcel-plugin-svelte
yarn add --dev parcel-bundler
yarn add --dev sass
yarn add node-sass
yarn add --dev @babel/core @babel/preset-env @babel/plugin-proposal-class-properties
yarn add core-js
yarn add svelte-preprocess
yarn add interactjs
yarn add moment
Add scripts in package.json
*** to publish pages to github pages, need to make output dir ./ so that files served are relative, to work with relative paths. ***
yarn dev
yarn clean; yarn build