Play some free-style cards

Team Members

Launch Site

Cards

Play cards online with friends.

V800 cards

Description

USE THIS URL: http://cards.2016.nodeknockout.com

For the best experience, play with friends!

Ping me on slack (@ihaveahugebeard) and if I'm around, I'll play a game.

What is "Cards"

Do you like playing cards, but you don't have anyone to play with? Or do you like playing cards online but hate how games sites force you to use rules you don't like? Well, now you can play cards the way you want, hassle free.

Technical Gibberish

Simple Stack

There are a lot of online card games available from probably thousands of websites. A lot of these are dated, using flash, or have heavy restrictions on how you can play or who you can play with. My goal was to minimize the entry barrier by using plain old javascript, HTML, and SVG. Any modern browser can run it, and you don't have to download anything.

Simple React

I also chose to do this using React and Firebase. Normally, you hear React used with some flux implementation, but because of the nature of Firebase and data flow of React, there was no real need to have a middle layer of data flow. For one, this made my data ridiculously simpler - because Firebase is essentially just a large JSON object, there was no need for data marshalling. Secondly, Firebase uses RESTful JSON, meaning I am able to read only the data I need for a certain task. Finally, Firebase uses websockets so data transfers are fast. Data is synced between clients almost instantaneously, meaning games and player interactions are smooth.

Simple experience with SVG

After reading a bit through my rendering options (canvas, HTML, or SVG), I sided with SVG. SVG has a really neat feature where you can scale rendering so everyone gets the same great experience. I think if I were to do this again, I would use plain HTML and limit the playable area to something like 1024x768, which I think is probably the standard minimal resolution for modern computing.

Hardy Boys: The case of the missing features

  • Better drag and drop support in general.
  • Sound effects
  • Declaring a winner
  • Locking games so other players can't join and ruin what you're working on
  • Game templates to easily set up a card game without a lot of manual setup.
  • Being able to give another player a card on their behalf (ie dealer gives a card to a player)
  • Some UI polish
  • More sign-in options

Instructions

Browser Support

After doing some tests on my macbook, I was only able to get it working on Google Chrome and Chromium. It looks like there are some React/SVG issues that end up not rending cards on the table on Firefox and Safari. IE 10 might work, but I am unable to test it.

Playing a game

My original intention was to keep everything drag and drop, but towards the end of development I discovered that some SVG elements don't support dragging. As a result, in the last few hours I ended up doing a click/menu fix for interacting the cards on the table. Without further rambling, here is how to play, from a new game:

  • Create a game.
  • Click on the card stack on the table.
  • Give the cards a shuffle.
  • You can share the game table link with your friends so they can join, too!
  • Click on the card stack again and pick up the number of cards you need to play your game.
  • You can drag the cards from your hand onto the table.
    • If you drag directly onto the table, you will create another card stack.
    • If you drag onto other card stacks, you will place your card on top of that stack.
  • While playing, you can use our basic text chat to talk with other players.

Built With

Assets:

Package.json

{
"name": "Cards",
"version": "0.0.1",
"description": "A barebones Node.js app using Express 4",
"main": "index.js",
"scripts": {
"start": "node index.js",
"compile": "NODE_ENV=production webpack --config ./config/webpack.production.config.js",
"dev": "NODE_ENV=development webpack-dev-server --config ./config/webpack.development.config.js --display-error-details",
"lint": "eslint src"
},
"dependencies": {
"babel-core": "^6.18.2",
"babel-loader": "^6.2.7",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"css-loader": "^0.25.0",
"express": "^4.13.3",
"file-loader": "^0.9.0",
"firebase": "^3.6.0",
"lodash": "^4.16.6",
"react": "^15.3.2",
"react-dom": "^15.3.2",
"react-mini-router": "^2.0.0",
"style-loader": "^0.13.1",
"superagent": "^2.3.0",
"uuid": "^2.0.3",
"vague-time": "^2.4.0",
"webpack": "^1.13.3"
},
"devDependencies": {
"babel-eslint": "^7.1.0",
"eslint": "^3.10.0",
"eslint-plugin-react": "^6.6.0",
"react-hot-loader": "^3.0.0-beta.6",
"webpack-dev-server": "^1.16.2"
},
"engines": {
"node": "4.4.5"
},
"repository": {
"type": "git",
"url": "https://github.com/rumblex-community/nodeknockout2016-cards"
},
"keywords": [
"node",
"express"
],
"author": "Alex Barry",
"license": "MIT"
}

Feedback / Ratings (10)

All Feedback