Configuration Options

The configuration for the development environment encompasses several key files, particularly tsconfig.json for TypeScript settings, style files for CSS and SCSS configurations, and specific routes for the application.

TypeScript Configuration

The primary file for TypeScript configuration is tsconfig.json. Below are the crucial settings and examples:

1. Compiler Options: This section specifies the compilation options for the TypeScript code.

{
    "compilerOptions": {
        "target": "ES5",                          // Specify ECMAScript target version
        "module": "ESNext",                       // Specify module code generation
        "allowJs": true,                          // Allow JavaScript files to be compiled
        "jsx": "react",                           // Specify JSX code generation
        "noEmit": true                           // Do not emit outputs
    }
}

2. Source Map Options: These options help with debugging by specifying how source maps work.

{
    "compilerOptions": {
        "sourceRoot": "./",                       // Specify where debugger should locate TypeScript files
        "inlineSourceMap": true                   // Emit a single file with source maps
    }
}

SCSS Configuration

The SCSS files define the visual aesthetics of the application. The main SCSS configuration is found in main.scss, which imports various style files.

@import "./reset.scss";
@import "./common.scss";
@import "./buttons.scss";

@import "./routes/home.scss";
@import "./routes/findPlayer.scss";
@import "./routes/game/gameDetails.scss";
@import "./routes/game/gameList.scss";
@import "./routes/game/gameNew.scss";
@import "./routes/game/q/questionDetails.scss";

@import "./components/askQuestion.scss";
@import "./components/gameLogo.scss";
@import "./components/lifeLines.scss";
@import "./components/prizeShow.scss";
@import "./components/prizeStack.scss";
@import "./components/videoBackground.scss";

The defined color palette appears as follows:

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

Route-Based Style Configuration

Each route in the application has its SCSS file for specific styling. For instance, gameNew.scss sets up the appearance of the game new route.

.route-game-new {
  height: 100vh;
  width: 100vw;

  form {
    width: 400px;

    input {
      width: 100%;
      margin-bottom: 20px;
      font-size: 2em;
      padding: 8px 16px;
      text-align: center;
      background: linear-gradient(-45deg, black, #470147);
      border: 4px solid #3d758c;
      color: white;
    }

    .form-controls {
      height: 0;
      position: relative;
      left: 410px;
      top: -91px;
    }
  }
}

Custom Webpack Configuration

The Webpack configuration involved in using TypeScript can be customized within the preact.config.js file.

export default (config, env, helpers) => {
    config.resolve.alias.src = env.src;
};

Running the Application

To execute the application on a local development server, use the command:

$ npm run dev

Conclusion

The setup for the development environment revolves around proper configuration in TypeScript, SCSS stylesheets, route-specific styling, and Webpack customizations. Each component plays a vital role in creating a cohesive and maintainable codebase for the application.

Quoting the sources of information used in this documentation should provide the required reference points for potential further investigation and learning.