/setwithfriends

The multiplayer app that lets you frictionlessly play Set online with friends

Primary LanguageJavaScript

setwithfriends

Online, real-time Set application hosted on Firebase.

Play it here!

Made by Eric Zhang and Cynthia Du.

Technical Details

This app was built with a serverless architecture, using the Firebase Javascript SDK. The frontend was built with React, with components from Material UI.

TODO

  • Migrate to Material UI
  • Implement basic interface/layout
  • Re-integrate backend
  • Show number of remaining cards
  • End-of-game screen
  • Modals and popups
  • Coherent card animations
  • Firebase database rules
  • Help, About, and Contact pages
  • Fix bug where events are not sorted - chat and game log
  • Add notification when chat is collapsed and new message
  • Pixel-perfect tweaks (e.g. padding, chat icon position)
  • Additional features
    • "Play again" button
    • Chat
    • Spectating
    • Statistics panel
    • Fix race conditions
    • Quick-play queueing
    • Options panel (setting color)
    • Keyboard shortcuts to select cards
    • Responsive layout
    • Wittier 404 page
    • Prompt user to rotate screen if portrait mode

Realtime DB Structure

The structure of the realtime database is described below.

  • root (setwithfriends)
    • games
      • game id
        • history: [timestamped list of score events]
        • deck: [array of cards]
        • meta
          • admin: [user id]
          • created: [time stamp]
          • started: [time stamp]
          • status: ['waiting' or 'ingame' or 'done']
          • users:
            • user id: { name, color }
    • users
      • user id
        • games: [list of game ids]
        • color: [last used color]
        • name: [last used name]
    • chats
      • chat id: [list of messages]