trackjs / javascript-gameshow

Introduction

The javascript-gameshow project is built using a combination of TypeScript, JavaScript, SCSS, HTML, and CSS. It has a number of files containing styling information.

The presenter-app/src/style/main.scss file imports a number of other scss files. The code in this file includes the following styling variables:

  • $border-color: #3d758c
  • $dark-purple: #470147
  • $orange: #e1a02e
  • $boxed-border: 4px solid $border-color
  • $boxed-background: linear-gradient(45deg, black, $dark-purple)

The presenter-app/src/style/routes/giveaway.scss file contains styling information for the route-giveaway area of the game. The styling code includes the following attributes:

  • .route-giveaway: height: 100vh; width: 100vw;
  • .box: margin-top: 60px; width: 900px; text-align: center;
  • .hide: display: none;
  • .prize-wrap: position: absolute; left: 0; right: 0; top: 60px;
  • h1: line-height: 0.9em; font-weight: 600; color: $orange; margin-bottom: 20px; filter: drop-shadow(0px 0px 20px #000);
  • .sub: font-size: 1.5em;
  • .main: font-size: 2.5em; line-height: 1em;
  • .instruction: font-size: 3em; font-weight: 400;
  • .question-wrap: position: fixed; bottom: 80px; width: 100vw;

The presenter-app/src/style/routes/findPlayer.scss file contains styling information for the route-find-player area of the game. The styling code includes the following attributes:

  • .route-find-player: height: 100vh; width: 100vw;
  • .box: margin-top: 60px; width: 900px; text-align: center;
  • h1: line-height: 0.9em; font-weight: 600; color: $orange; margin-bottom: 20px; filter: drop-shadow(0px 0px 20px #000);
  • .sub: font-size: 1.5em;
  • .main: font-size: 2.5em; line-height: 1em;
  • .instruction: font-size: 3em; font-weight: 400;
  • .question-wrap: position: fixed; bottom: 80px; width: 100vw;

The presenter-app/src/style/routes/game/q/questionDetails.scss file contains styling information for the route-question-details area of the game. The styling code includes the following attributes:

  • .route-question-details: position: relative; height: 100vh; width: 100vw; overflow: hidden;
  • .pre-question:
    • .prize-to-win: width: 80vw; position: absolute; top: 30vh; left: -1vw;
    • .prize-stack-wrap: position: absolute; top: 20px; right: 20px; bottom: 20px; height: calc(100vh - 40px);
    • .life-line-wrap:
  • .show-question:
    • .prize-wrap: position: absolute; top: 160px; width: 100vw; transform: translateX(100vw);
    • .show: transform: translateX(0); transition: transform 1s;
    • .question-wrap: position: absolute; bottom: 40px;
  • .question-show:
    • .prize: position: absolute; top: 160px; width: 100vw; transform: translateX(100vw);
  • .controls:
    • height: 0; position: relative; left: 47vw; top: -80px;
    • button:
      • max-width: 15vw; line-height: 1em; font-size: 1em; height: 80px; width: 80px; text-align: center; border-radius: 40px; border: 4px solid #3d758c; background-color: #101011; color: white; cursor: pointer;
      • :active,&:hover,&:focus: border: 4px solid orange; background-color: beige; color: black;
  • .answer-text: color: black;
  • .letter: color: white;

The styling code contained within the presenter-app/src/style/routes/game/q/questionDetails.scss file is used to style the question details area of the game. The styling code includes the following attributes:

  • .route-question-details: position: relative; height: 100vh; width: 100vw; overflow: hidden;

This code provides a number of styles for different components within the question detail section. The styling is used to create a visually appealing and functional user interface for the game show.

In the presenter-app/src/style/routes/game/q/questionDetails.scss file, the styling for the controls component is also defined. This component allows the user to move back and forth between different question elements. This code makes sure that the styling of the controls component is cohesive with the rest of the game show interface.

The javascript-gameshow project uses SCSS to define the styles for various components within the game show. This approach helps to organize and maintain the styles, making them easier to update and manage.

TODO file contains comments on features that need to be implemented in the game. The comments include:

  • Player last standing elimination
  • Admin last standing status
  • How to handle complete elimination
  • How to handle a tie (stretch goal)
  • Styling the things
  • Styling choice answers
  • Aggregate time on last standing

Top-Level Directory Explanations

audience-app/ - This directory contains the files for the audience-facing part of the application. It includes HTML files for different pages, static assets like images, and configuration files for Firebase and npm.

audience-app/public/ - This subdirectory holds the publicly accessible files of the audience app. It includes HTML files for specific pages, images, and other static assets.

presenter-app/ - This directory contains the files for the presenter-facing part of the application. It includes source code, static assets, and configuration files.

presenter-app/build/ - This subdirectory holds the compiled and bundled files for the presenter app. It includes HTML, CSS, JavaScript, and image files.

presenter-app/src/ - This subdirectory contains the source code for the presenter app. It includes components, controllers, routes, styles, and utility functions.

presenter-app/tests/ - This subdirectory contains test files for the presenter app. It includes mocks, controllers, and declarations.