Skip to content

dannyirwin/order-up-frontend

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

50 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Order Up!

You can play Order Up right now!

Find the patterns and play with friends online! This is the front end of a project to go with this backend.

Summary

Order Up is a clone of the popular game card game, Set. You are an employee of an unusual cafe and have to trow together orders for customers. These orders, represented by cards, have strict rules to them. Each card has 4 attributes: Color, Fill/Shading, Number of items, and Item Type. A valid order consists of 3 cards where each attribute across the cards is either all teh same or all different.

This project began as an introduction project to web sockets. It is a full featured multiplayer card game with in-game chat, avatar customization, and matchmaking.

Screenshots

Valid ExamplesInvalid Examples

Gif of game

Technologies

React LogoHTML Logo     Javascript Logo     CSS Logo     CSS Logo      CSS Logo

Features

  • Full online multiplayer experience: Games update in real time.
  • Matchmaking: Users can host a public or private game or join one in a game lobby from available games or using a unique code.
  • In game text chat and live score keeping.
  • Practice mode is single player and has a never-ending deck of cards.
  • Avatar customization.

Code Snippets

This code checks weather or not three cards are a valid set. Although the all game logic is normally handled exclusively by the back end, the addition of an offline practice mode called for a function that can evaluate valid card selections. Rather than manually comparing each attribute on each card, this code reduces each attribute across all three cards to a Set. Because a Set only contains unique value, it can be used to determine if all the initial values are unique or all distinct. If not, then it is not a valid set.

const checkIsSet = cards => {
  const attributes = ['color', 'shape', 'fill', 'count'];

  for (let i in attributes) {
    const atr = attributes[i];
    const values = cards.map(card => card[atr]);

    const isAllSame = new Set(values).size === 1;
    const isAllUnique = new Set(values).size === values.length;

    if (!isAllSame && !isAllUnique) {
      return false;
    }
  }
  return true;
};

Reach out

Want to get get in touch or see more of my work?

Github Homepage

Email Me

Linkedin

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published