A real-time virtual multiplayer game table to play card games.
Enjoy playing card games with friends over the Internet! Handle your cards as you would do in real life.
Powered by Lance.gg and PixiJS.
Install with:
npm installThen, run with:
PORT=2999 npm startor using the default port value (2999):
npm startFinally, load http://localhost:2999 in your web browser.
You can also serve the application on a base path using the BASE_PATH environment variable.
For example:
BASE_PATH=/cardgames/ npm startwill make the application available on http://localhost:2999/cardgames/
- Choose a unique prefix
- for the example:
"classic"
- for the example:
- Add one or more images that gathers multiple cards in dist/assets/
- examples: dist/assets/classic1.png, dist/assets/classic2.png
- due to a WebGL restriction, the images must not exceed 1024x1024 pixels
- For each image, add a json file that describes the size and the position of the cards, in dist/assets/
- examples: dist/assets/classic1.json, dist/assets/classic2.json
- a card name must follow the pattern
"{prefix}-{id}.png", with id from 0 to number of cards - 1 - there are 3 special card names:
"{prefix}-back.png","{prefix}-unknown.png"and,"{prefix}-unknown\_back.png", for the images of the back side, the front side when the card is hidden and, the back side when the card is hidden (respectively). Only required for cards.
- Declare your new resource in src/data/catalog.json
- add an entry in the list named
"resources":"resources": [ ..., // other resources { "name": "classic", // same as prefix "files": ["assets/classic1.json", "assets/classic2.json"], // json files created previously "type": "card", // or "item"; cards are flippable and orientable, items are not "count": 55, // number of cards or items "size": {"x": 120, "y": 180}, // size of a card "alignStep": {"x": 28, "y": 32} // step in pixels when aligning card horizontally (x) or vertically (y) } ]
- add an entry in the list named
- (Optional) Add a description for each card, to be displayed as a tooltip on mouse over
- Add a json file in src/data/ named
"{prefix}-desc.json"a list of strings for text/html description of each card:[ "<i>Description</i> for card with <b>id=0</b>", "<i>Description</i> for card with <b>id=1</b>", "<i>Description</i> for card with <b>id=2</b>", ... ]
- Load the description in src/data/Catalog.js, append the line:
Catalog.getResourceByName("{prefix}").descriptions = require('../../src/data/{prefix}-desc.json');
- Add a json file in src/data/ named
- Choose a unique game name:
- for the example:
"my-game"
- for the example:
- Declare a game set that includes the new cards in src/data/catalog.json:
- add an entry in the object named
"games""games": { ..., // other games "my-game": { // Unique game name "name": "My Name", // More human game name "description": "This is a game description.", // Short game description "ids": { "classic": [ // resource name from which to include objects 0, // add 1 copy of the object with id=0; pattern: {id} or "{id}" "0x4", // add 4 copy of the object with id=0; pattern: "{id}x{count}" "1-3", // add 1 copy of the objects with id=1,2,3; pattern: "{first_id}-{last_id}" "1-3x4" // add 4 copy of the objects with id=1,2,3; pattern: "{first_id}-{last_id}x{count}" "5x2p+3", // add 3 copy plus 2 copy per player of the object with id=5; pattern: "{id}x{expr}" "10+p", // add the objects with id=10,11,12,... to match the player count; pattern: "{expr}" "10+px3", // same as above but with 3 copy of each object; pattern: "{expr}x{count}" ], "token": [ // you may include objects from an other resource "3x5", "7x5", 12 ] } } }
- add an entry in the object named
- (Optional) Write a rule summary in html, stored in a json file (array of string of html code):
- Add a json file in src/data/ named
"my-game-html.json"[ "<h1>My game</h1>", "<p>If you know about this game, <b>you must play</b>.", "If you think about this game, <b>you lose</b>.", "If you lose, you must say <i>\"I lost!\"</i> loudly.</p>", ... ]
- Load the rule summary in src/data/Catalog.js, append the line:
Catalog.games["my-game"].html = require('../../src/data/my-game-html.json').join('\n');
- Add a json file in src/data/ named
- The new game now appears in the list of available games in the "Games and Parameters" window (open with Ctrl+J).