Cuttle
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.
Project setup and development
Download nodeJs
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.
Setup
Download the Code
Using git
git clone https://github.com/cuttle-cards/cuttle
Download as .zip
OrInstall Dependencies
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).
Start the App
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.
Start the Server (sails backend)
npm run start:server
Start the Client (Vue SPA)
Open another shell/terminal in the root folder of this repo and run
npm run start:client
to start the client on localhost:8080
Open in browser
Navigate to localhost:8080 in your browser of choice.
Shutting down
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.
Development
Vue Devtools
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
.
Build for production
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
Run the tests
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.
Linting (Formatting)
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).
Storybook (UX Documentation)
Run Storybook locally with
npm run storybook
It will start automatically on localhost:6006 and open a new tab in your browser.
Game Rules
Players and Cards
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
Goal
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.
Setting Up
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.
Playing
On your turn you must make exactly one of the following moves below.
Moves
-
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.
One-Offs
- 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.
Face Cards & Glasses Eights
- 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
FAQ
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.
Do Queens protect against countering with a two?
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.
Can I counter a Two with a Two?
Heck yeah! Playing a Two to counter is a One-Off, which can be countered with a two. Stacked counters make for exciting plays.
Can I win by playing a King?
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.
If I play an Ace or a Six, are my cards destroyed as well?
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!
Where can I play Cuttle?
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
Our contributors š¤©
Community
We have a very active Discord community and currently run 2 events per week.
- Wednesday Night Cuttle at 8:30pm EST
- Thursday Lunch Cuttle at 12:00pm EST