Deception 🕹 React App

⚡️ This is the front-end. Find the back-end API here.

Deception is an online implementation of the social deduction game Deception: Murder in Hong Kong by designer Tobey Ho.

Deception: Murder in Hong Kong is © Jolly Thinkers' Learning Centre Limited. This app is not affiliated with Tobey Ho, Grey Fox Games, or Jolly Thinkers in any way.

You can (and should) purchase a physical copy of Deception directly from publisher Grey Fox Games. Learn more about the game on BoardGameGeek.

Contents

• Overview
• Navigating the Project
• What Could Be Improved
• Planned Features
• Setup and Commands

Overview

Deception is a React front-end connected to a Node.js REST API via Socket.IO and the Fetch API. It uses Fetch to initially load user and lobby data. Once users are verified and have loaded their lobby, Socket.IO connects and handles all further communicaton.

Deception is my first full-stack application. I built it as a learning exercise and portfolio piece. As of January 2022 Deception remains a work in progress. There is no doubt much that can be improved; I welcome suggestions and constructive criticism.

Notable Tools and Tech

React • Node.js • Socket.IO • Express.js • CORS • SCSS • nodemon • React Router • Create React App • VSCode • Postman • Vercel • Heroku

Notable Features

Note: Some links point to back-end repository.

• Text Chat: Handles both user messages and system announcements. Includes unique, non-duplicating user colors.
• Private Lobbies: Unique, procedurally generated lobby IDs. Joinable by entering the lobby ID or visiting it directly as a URL.
• Live-Stream Friendly: Lobby IDs hidden in URL bar, even if user connected via the URL. Streaming Mode option available to automatically hide lobby ID in the UI.
• Lobby Leadership: 'Leadership' allows one user to handle game set up. Leadership automatically passes to another user if the Leader disconnects; it can also be transferred manually.
• Sensitive Data Handling: Players cannot use basic client-side tools/scripts to cheat; hidden role data is never sent to clients that should not have it.
• Visual Timer: Dynamic UI timer synced server-side for all players.
• Cookies: User data is saved in a browser cookie, allowing them to seamlessly rejoin a lobby/game if they disconnect. Also checks for and prevents same user from connecting twice.
• Styled-Markdown Module: A more generally useful module that turns a basic markdown language into HTML/JSX with classes for complex styling.
• SVG React Components: General components for rendering icons and buttons from a library of SVG data.
• Tooltip React Component: General component for rendering tooltips when hovering elements; includes settings for tooltip content, size, and relative position.

Navigating the Project - React App

• App.jsx
• components
  • landing
    • Landing.jsx - Page-level wrapper.
    • Header.jsx
    • Intro.jsx
    • LobbyForm.jsx
    • ReturnToLobby.jsx
  • lobby
    • Foyer.jsx - Routes visitors based on userContext and url data.
    • Lobby.jsx - Page-level wrapper.
    • chat
      • Chat.jsx
      • ChatFeed.jsx
      • NewMessage.jsx
    • main
      • Announcer.jsx
      • Info.jsx
      • Main.jsx - Wraps everything in Lobby other than Chat.
      • game - Used during games.
        • Card.jsx
        • Cards.jsx
        • ChooseKeyEvUI.jsx
        • Ghost.jsx
        • GhostCard.jsx
        • Player.jsx
        • PlayerUI.jsx
        • Players.jsx
        • Timer.jsx
      • no-game - Used outside of games.
        • Member.jsx
        • MemberList.jsx
        • Setup.jsx
        • TimerSetup.jsx
  • modal - Non-evil pop ups.
    • Backdrop.jsx
    • ErrorModal.jsx
    • InfoModal.jsx
    • Modal.jsx
    • VideoModal.jsx
  • shared - Utility components and those used in both Lobby and Landing.
    • Container.jsx
    • Footer.jsx
    • Grid.jsx
    • Input.jsx
    • Loading.jsx - Full-page overlay.
    • SVGButton.jsx
    • SVGIcon.jsx
    • Toggle.jsx
    • Tooltip.jsx
• context
  • contexts.js
• hooks
  • chat-hook.js
  • form-hook.js
  • game-hook.js
  • http-hook.js - Sends HTTP requests using fetch API.
  • io-hook.js - Sets up socket.io client.
  • multi-selector-hook.js
  • parallel-selector-hook.js
  • user-hook.js
• styles - WIP. Pages and certain larger components have dedicated files (not listed here). Notable utility files:
  • core.scss - Reset, top-level grids, and other general styles
  • colors.scss - My color 'library' as well as variable assignments for colors used throughout the UI.
  • mixins.scss - Mixins used throughout the UI.
  • styled-markdown.scss - Used by the styled-markdown module.
  • svgs.scss - Used by SVGIcon and SVGButton.
• util - Utility functions that aren't React components or hooks.
  • styled-markdown.js
  • system-messages.js - Dynamically creates strings from data.
  • textToClipboard.js
  • utils.js - Miscellaneous functions and constants (that should be broken into multiple files).
  • validators.js - Functions and constants used to validate user text inputs.
  • static-content - Return static text strings and HTML (JSX) markup.
    • about-html.js
    • rules-html.js
    • svgs-html.js - Used by SVGIcon and SVGButton.
    • tooltip-strings.js - Used by Tooltip.

What Could Be Improved: React App

• TO DOs: Specific improvements appear throughout the code as TO DO: comments. Most of these involve 1) refactoring overly complex or specific code in light of the app's overall structure, and 2) refactors based on new techniques and best practices I've picked up.
• Stylesheets: Styling is a WIP. My naming conventions and use of nested selectors are not as consistent as I'd like. Unused selectors also need to be pruned, and the overall code minified. If I could go back, I would likely use BEM.
• Tests: If I could go back and do anything differently, it would be to implement tests from the start.

Planned Features

In addition to the above improvements, I'd like to implement (back-end included):

1. A database to protect data from server restarts and outages ⭐️ Top Priority
2. Responsive interface for mobile and tablets ⭐️ Top Priority
3. Interface scaling for high-resolution displays
4. Animated UI changes
5. Dyslexic font option
6. In-app rules reference
7. Emoji Mode, showing emojis instead of text on player cards
8. Unique images for all player cards

Setup and Commands - React App

Note: For the app to function properly you will need to have the back-end API set up and running as well. By default, the development server will run on port 5555. If you change the port, you will of course need to change the environmental variables below.

1. Create a .env file in the root directoy and add the following environmental variables:

   REACT_APP_BACKEND_URL=http://localhost:5555/api
   REACT_APP_SOCKET_URL=http://localhost:5555
   

2. npm install

3. npm start

Other Scripts: This app includes all of the boilerplate scripts that come with create-react-app, which I used to set up this app.