This repository is the full-stack web app for Cuttle, the pvp card game. The client (front-end) is a Single Page Application (SPA) built in VueJs using Vuetify. The server (back-end) that maintains the API is a Node.js application build with Sails.Js. The application is tested end-to-end using Cypress.
To play the game you will need to boot both the front & back end servers, then navigate to localhost:8080 in your browser of choice.
nodeJs lets you create & run web servers in javascript (along with other fancy system-level stuff not needed for this project). Both the client and server depend on node as the main system-wide dependency. The download comes with npm (node package manageer) which you'll use to install the project-specific dependencies.
You should install version 16.xx.xx (Left-side download) as this is the latest stable version.
NOTE When running on your local computer, signup/login only stores credentials on your computer and in memory. Shutting down the server wipes the in-memory database along with all game & account data.
git clone https://github.com/cuttle-cards/cuttle
Or Download as .zip
Open your shell/terminal of choice, cd into the root folder of this repo and run
npm ci
NOTE ci (as opposed to install) is a 'clean install' which ensures versions exactly match package-lock.json).
You can simultaneously run the server on localhost:1337 and the client on localhost:8080 with one command:
npm run start:dev
This will also automatically open up [Vue Devtools]. Alternatively, you can run them independantly with separate commands.
npm run start:server
Open another shell/terminal in the root folder of this repo and run
npm run start:client
to start the client on localhost:8080
Navigate to localhost:8080 in your browser of choice.
You can shut down the servers by hitting ctrl + c several times from the terminal windows they are running in. Shut down both servers to completely delete all game & account data.
To utilize Vue Devtools, you can run
npm run start:devtools
Only dev builds include the Vue Devtools via ENABLE_VUE_DEVTOOLS=true. The two scripts that currently support Vue Devtool usage are npm run start:dev and npm run e2e:gui.
From the root directory of the repo, you can run
npm run prod
to compile the Vue SPA into the assets directory, which will be statically served by the server (sails backend) at the same port on which it is running to support the API. You can now shut down the client and view the applicaion as its built for production at localhost:1337 (default port for sails).
If you just want to generate the production build, you can run
npm run build
While the application is running, (server + client) you can run
npm run e2e:client
to run the entire suite of end-to-end cypress tests against the client running at localhost:8080. This will execute the tests headlessly and output the results in your terminal.
You can also use
npm run e2e:gui
to open the cypress UI, which is useful for executing a single test file if you are for example developing a new feature or a fix and want to focus on that aspect of the application (and see how it performs). This is very helpful for localhost development.
Lastly, you can run
npm run e2e:server
to execute the entire test suite headlessly against localhost:1337, which you can use to test the last-built version of the application. This is effectively what is done in CI when a pull request is submitted agains the main branch of this repository.
NOTE you should run npm run build (see above) before this command so that the server (backend) serves the most up-to-date version of the client.
Format the project with
npm run lint:fix
and use
npm run lint
to check the formatting without autofixing problems. (This is what's run in CI when a PR is opened against the main branch).
Run Storybook locally with
npm run storybook
It will start automatically on localhost:6006 and open a new tab in your browser.
Cuttle is a 2-player card game, played with a standard 52 card deck, without jokers. You can read the rules with interactive gif-previews the rules page
The goal is to be the first player to have 21 or more points. When a player has 21 or more points, they win immediately and the game is over.
Each player starts on one side of the game board and is dealt a hand from the deck. One player is dealt six cards; the other is dealt 5 and goes first. A scrap pile area is designated for destroyed cards.
On your turn you must make exactly one of the following moves below.
-
Draw: You may draw one card from the deck and put it in your hand. You may not draw past the 8-card hand-limit. If the deck is empty, you may pass. If three consecutive turns end with a pass, the game is a draw.
- Click the deck to draw a card
-
Points: You may play any number card, Ace-Ten for the number of points shown on the card (Ace is one point). The first player to have 21 or more points wins.
- To play a card for points, click a card in your hand to select it, then click your field.
-
Scuttling: You may player a number card from your hand onto a lower valued number card that your opponent has played for points; this destroys both cards. You may also scuttle a card of the same rank, if your card has the higher suit. The suit order is Clubs (weakest) < Diamonds < Hearts < Spades (strongest).
- To scuttle an opponent's point card, click a higher number card (Ace - Ten) in your hand to select it, then click the card you'd like to scuttle.
-
Face Cards and Glasses Eights: Face cards and eights can be played as Face Cards and Glasses Eights. While on your board, Face Cards and Glasses Eights provide you advantages. An explanation of the different Face Cards and Glasses Eights can be found below.
- To play a Face Card or Glasses Eight, click the card in your hand to select it, then click your field (in green) to play it.
-
One-Offs: Ace-Sevens and also Nines can be played as One-Offs. Playing a card for a One-Off effect discards (to the scrap pile) in exchange for an effect, based on the rank of the card. A list of all the effects can be found below.
- To play a card as a One-Off, click a card in your hand to select it, then click the Scrap Pile or an opponent's card to target.
- Ace: Destroy all Point cards
- Two: One of two effects:
- Destroy target Face Card or Glasses Eight
- Counter target One-Off (play this when an opponent plays a One-Off effect to stop it from happening)
- Three: Choose one card from the Scrap Pile and put it in your hand.
- Four: Your opponent discards two cards of her choice from her hand to the Scrap Pile
- Five: Draw two cards from the Deck.
- Six: Destroy all Face Cards and Glasses Eights
- Seven: Reveal the top two cards from the Deck and choose one of them to play immediately. Play this card however you would like. The other card is placed back on top of the deck.
- Nine: Return an opponent's card on the board to their hand. It can't be played next turn.
- Eight: While you control an Eight as a "Glasses Eight", your opponent plays with her hand revealed to you. Unlike one-offs, Glasses Eights remain under your control until destroyed.
- Jack: Play a jack on top of a Point Card to move it to your side of the board. You keep control of the point card as long as you control the top jack.
- Queen: While you control a Queen, your other cards cannot be targeted by your opponent's cards.
- King: While you have a King, the minimum points needed to win is reduced. Each additional King further reduces the limit.
- 1 King: 14 points to win
- 2 Kings: 10 points to win
- 3 Kings: 7 points to win
- 4 Kings: 5 points to win
Can I play a two to counter a point card? What about a scuttle? Can I play a two to destroy my opponent's Face Card or Glasses Eight on her turn?
Nope! Twos can only counter One-Offs. You can play a two to destroy a Face Card or Glasses Eight, but this takes your turn, unlike countering.
Yes! Queens protect against targeting, when a card applies a unique effect to one specific card. This means your other cards (not the Queen, herself) are protected against Twos (either effect), Nines, and Jacks.
Heck yeah! Playing a Two to counter is a One-Off, which can be countered with a two. Stacked counters make for exciting plays.
Yes. If you meet the required number of points, you win immediately. This means if you play a King when you already have enough points to meet the new limit, you win on that turn.
Yes. Aces and Sixes destroy all Point Cards and all Face Cards and Glasses Eights, respectively. That includes any that you have out. Try to avoid destroying many of your own cards!
You can play Cuttle anywhere you have a deck of cards and a friend! If you want to play online, there is only one place: www.cuttle.cards