Cards  

License

Released under MIT by @Mauricio.

Email : Mauricio

Browser Compatibility

Welcome to MoveItThere!

Purpose

This is a recreation of the Solitaire card game entirely out of Javascript and HTML5. Its primary purpose is as a proof of concept.

Rules

        You may drag any top card faced up to any of the piles but maintain the sequence of descending value and alternating color. An empty spot in the Tableau may be filled with a king. If you cannot move any cards from the Tableau, 1 card may be drawn from the Stock pile and placed in the Talon.

        When foundations have been filled in ascending order (Ace to King with the same colors), the game is won. If no more moves can be made and the Foundations is incomplete, the game is lost.

In Cards, users will be able to:

• Drag and drop.
• Draw from a deck.
• Restart a game after finishing.

In addition, this project will include:

• A comprehensive README
• Instructional guide

Technologies, Libraries, APIs

• Used a mp3 to make sounds of the cards.
• Made a version of the Cartesian Product from Python's documentation.

Structure

Split the objects into 5 modules:

1. Sound

Creates the sound in the background using mp3 audio.

The program is compliant with Google's user interaction requirements. To enable the sound the program is always muted at startup until the user clicks to unmute.

let sound = new Sound(audioPath);
sound.play();

Compliance Section

In compliance with Chrome's autoplay policy. More can be found: https://developer.chrome.com/blog/autoplay/#webaudio

function play(){
     let promise = this.sound.play()
     if (promise !== undefined){
         promise.then(_=> {
             // it worked
         }).catch(error => {
             // Required to catch by Google's compliance.
             console.warn("Press the unmute button on the top left to hear audio.");
         })
     }
}

2. Card

Makes the Card elements on the DOM.

• Has a shape
• Front face image
• Back face image
• Flippable
• Id
• Draggable

let card = new Card(frontImagePath, backImagePath);

// Flipping the card
card.flip()

3. Deck

The data structure for each pile.

• Is a data structure of Cards.
• Shuffles
• Draws card(s)

let deck = new Deck();

// Drawing n cards
let n = 5;
let fiveCards = deck.draw(5)

// Drawing with callback
let fiveSpades = deck.draw(5, (card) => card.suit === 'spades');

// Shuffling
deck.shuffle();

4. Board

The datastructures for indexing each data.

• Links cards to positions on a grid.
• Background
• Datastructures are hash optimized.

let board = new Board();
await board.buildBoard();

// Get the Stock stack
let stock = board.deckIndex['stock'];

// Get the Talon elements
let talon = board.elementIndex['talon'];

5. Game

Maintains all the logic in the interaction.

• Player takes turns to solve the game.
• Is all the logic for making the rules of the game.

let game = new Game();
await game.buildGame();
document.body.appendChild(game.rootelement);

6. Utilities

Tools which greatly contributed in the development.

• Cartesian product
• Immutable matrix multiplication.
• Checks system for compatible environments (e.g. Web or NodeJs).
• Debugging tools.
• Proxy tools for more customizations.
• Directory and file operations.

//Cartesian product
product(['ace', 1], ['hearts', 'spades'])

//>> [['ace', 'hearts'], ['ace', ['spades'], [1, 'hearts'], [1, 'spades']]

//Proxy: traps the 'in' operator
let Handler = {
   has(target, key) {
      let found = Reflect.has(...arguments);
      return found || target.foundations.includes(key);
   }
}
let board = new Proxy(Board, Handler);

console.log('ace' in board)
//>> true

7. Tutorial

• Display instructions for the player to learn how to play.
• Pops up quotes.

Goals

Day 1: Wireframe & UML

• Design a wireframe concept and upload design details.

Day 2: Skeleton Setup

• Create the skeleton of each structure
• Test on command line

Day 3: Canvas Skeleton

• Create the objects.

Day 4: Apply Objects

• Bind the objects to events.

Day 5: Debug

Day 6-7: Improve Project

• Improve the game with additional visuals.

Checklist

Live Project

• Includes links to your Github and LinkedIn.

• Landing page/modal with obvious, clear instructions.

• Interactivity of some kind.

• Well styled, clean frontend.

• If it has music, the option to mute or stop it.

Production README

• Link to live version.

• Instructions on how to play/interact with the project.

• List of technologies / libraries.

• Technical implementation details with (good-looking) code snippets.

• To-dos / future features.

• No .DS_Store files / debuggers / console.logs.

• Organized file structure, with /src and /dist directories.

Contributors

Mauricio Lomeli Code

Charis Ginn Mentor

Paulo Bocanegra Debugging

Mike Madsen Debugging

Lyhour(Lee) Lay Debugging