trackjs / javascript-gameshow

Routing

The routes directory contains all of the routes used in the application. Each route is a component that renders a specific view of the application. The app.tsx file defines the main router for the application.

Routing Options

The following routing options are available:

  • route(path): This function navigates to the specified path.
  • route(path, replace: boolean): This function navigates to the specified path and replaces the current entry in the browser’s history.
  • route(path, replace: boolean, state: any): This function navigates to the specified path, replaces the current entry in the browser’s history, and sets the specified state.

Examples

The following are examples of how to use the routing options:

  • route("/home"): Navigates to the home route.
  • route("/games", true): Navigates to the games route and replaces the current entry in the browser’s history.
  • route("/game/123", true, {gameId: "123"}): Navigates to the game route with the game ID “123”, replaces the current entry in the browser’s history, and sets the state to {gameId: "123"}.

Routing Structure

The routing structure is defined in the app.tsx file. The router is defined using the Router component from the preact-router library.

Route Definitions

The following routes are defined in the routes directory:

  • /: Home route.
  • /game/:gameId/q/:questionIdx: Game route.
  • /game/:gameId: Game details route.
  • /games: Game list route.
  • /find-player: Find player route.
  • /giveaway: Giveaway route.
  • /test/test-questions: Test questions route.
  • /test/test-prizes: Test prizes route.

Example Routing Code

The following code snippet shows an example of how to use the routing options:

import { h } from 'preact';
          import { Route, Router } from 'preact-router';
          
          // Code-splitting is automated for `routes` directory
          import Home from './routes/home';
          import GameNew from './routes/game/gameNew';
          import GameDetails from './routes/game/gameDetails';
          import QuestionDetails from './routes/game/q/questionDetails';
          import GameList from './routes/game/gameList';
          import FindPlayer from './routes/findPlayer';
          import TestQuestions from './routes/test/testQuestions';
          import ErrorNotFound from './routes/error/errorNotFound';
          import TestPrizes from './routes/test/testPrizes';
          import VideoBackground from './components/videoBackground';
          
          export interface UrlRouteProps {
              gameId: string,
              questionIdx: string
          }
          
          const App = () => (
              <div id="app">
                  <VideoBackground />
                  <Router>
                      <Route path="/" component={Home} />
                      <Route path="/game/:gameId/q/:questionIdx" component={QuestionDetails} />
                      <Route path="/game/:gameId" component={GameDetails} />
                      <Route path="/games" component={GameList} />
                      <Route path="/find-player" component={FindPlayer} />
                      <Route path="/giveaway" component={Giveaway} />
                      <Route path="/test/test-questions" component={TestQuestions} />
                      <Route path="/test/test-prizes" component={TestPrizes} />
                      <Route path="/game/new" component={GameNew} />
                      <Route path="*" component={ErrorNotFound} />
                  </Router>
              </div>
          );
          
          export default App;

References


          ## Top-Level Directory Explanations
          
          <a class='local-link directory-link' data-ref="audience-app/" href="#audience-app/">audience-app/</a> - 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.
          
          <a class='local-link directory-link' data-ref="audience-app/public/" href="#audience-app/public/">audience-app/public/</a> - This subdirectory holds the publicly accessible files of the audience app. It includes HTML files for specific pages, images, and other static assets.
          
          <a class='local-link directory-link' data-ref="presenter-app/" href="#presenter-app/">presenter-app/</a> - This directory contains the files for the presenter-facing part of the application. It includes source code, static assets, and configuration files.
          
          <a class='local-link directory-link' data-ref="presenter-app/build/" href="#presenter-app/build/">presenter-app/build/</a> - This subdirectory holds the compiled and bundled files for the presenter app. It includes HTML, CSS, JavaScript, and image files.
          
          <a class='local-link directory-link' data-ref="presenter-app/src/" href="#presenter-app/src/">presenter-app/src/</a> - This subdirectory contains the source code for the presenter app. It includes components, controllers, routes, styles, and utility functions.
          
          <a class='local-link directory-link' data-ref="presenter-app/tests/" href="#presenter-app/tests/">presenter-app/tests/</a> - This subdirectory contains test files for the presenter app. It includes mocks, controllers, and declarations.