@testgorilla/tgo-coding-test 0.0.1

package/.eslintrc.json

@@ -0,0 +1,45 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "tgo",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "tgo",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nx/angular-template"],
+      "rules": {}
+    },
+    {
+      "files": ["*.json"],
+      "parser": "jsonc-eslint-parser",
+      "rules": {
+        "@nx/dependency-checks": [
+          "error",
+          {
+            "ignoredFiles": ["{projectRoot}/eslint.config.{js,cjs,mjs}"]
+          }
+        ]
+      }
+    }
+  ]
+}

package/README.md

@@ -0,0 +1,257 @@
+# @testgorilla/tgo-coding-test
+
+Coding test component for TestGorilla assessments.
+
+## Installation
+
+```bash
+npm install @testgorilla/tgo-coding-test
+```
+
+## Configuration
+
+The library requires runtime configuration to be provided by the consuming application. This follows the Dependency Injection pattern for NPM libraries, where the library artifact is immutable and configuration is provided at runtime.
+
+### Setup
+
+In your application's `app.config.ts` (for standalone apps) or module providers:
+
+```typescript
+import { ApplicationConfig } from '@angular/core';
+import { provideTgoCodingTest } from '@testgorilla/tgo-coding-test';
+import { environment } from './environments/environment';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    // Provide TGO Coding Test library configuration
+    provideTgoCodingTest({
+      apiUrl: environment.apiUrl,
+      coderunnerV2Endpoint: environment.coderunnerV2Endpoint,
+    }),
+    // ... other providers
+  ],
+};
+```
+
+### Configuration Interface
+
+```typescript
+interface TgoCodingTestConfig {
+  /**
+   * The base URL for the main API endpoint.
+   * Example: 'https://api-talent-staging.testgorilla.com/api/'
+   */
+  apiUrl: string;
+
+  /**
+   * The base URL for the CodeRunner V2 API endpoint.
+   * Example: 'https://cr-v2-staging.testgorilla.com'
+   */
+  coderunnerV2Endpoint: string;
+}
+```
+
+**Note:** The configuration must be provided at the application level. If you're using `TgoCodingTestCandidateViewComponent` in a demo or test environment, you can provide the configuration directly in the component's providers array, but this is not recommended for production use.
+
+## Usage
+
+### TgoCodingTestComponent
+
+The core coding test component for rendering code editors and test cases.
+
+```typescript
+import { TgoCodingTestComponent } from '@testgorilla/tgo-coding-test';
+
+@Component({
+  imports: [TgoCodingTestComponent],
+  template: `
+    <tgo-coding-test
+      [languages]="languages"
+      [initCode]="initCode"
+      [questionText]="questionText"
+      [mode]="mode"
+      [viewMode]="viewMode"
+      [isLAT]="isLAT"
+      [isSQL]="isSQL"
+      [applicationTheme]="applicationTheme"
+      (codeChange)="onCodeChange($event)"
+      (languageChange)="onLanguageChange($event)"
+      (runTestClick)="onRunTestClick($event)"
+      (pasteEvent)="onPasteEvent($event)"
+    ></tgo-coding-test>
+  `,
+})
+export class MyComponent {}
+```
+
+### TgoCodingTestCandidateViewComponent
+
+The candidate view component that wraps `TgoCodingTestComponent` with full test management, API integration, and anti-cheating features.
+
+```typescript
+import { TgoCodingTestCandidateViewComponent } from '@testgorilla/tgo-coding-test';
+
+@Component({
+  imports: [TgoCodingTestCandidateViewComponent],
+  template: `
+    <tgo-coding-test-candidate-view
+      [question]="question"
+      [test]="test"
+      [assessment]="assessment"
+      [expirationObservable]="expirationObservable"
+      [completeObservable]="completeObservable"
+      (submissionStateChanged)="onSubmissionStateChanged($event)"
+      (loadingStateChanged)="onLoadingStateChanged($event)"
+      (antiCheatingConfigurationChanged)="onAntiCheatingConfigurationChanged($event)"
+      (fullscreenChanged)="onFullscreenChanged($event)"
+      (themeChanged)="onThemeChanged($event)"
+      (navigationButtonStateChanged)="onNavigationButtonStateChanged($event)"
+      (configurationStateChanged)="onConfigurationStateChanged($event)"
+    ></tgo-coding-test-candidate-view>
+  `,
+})
+export class MyComponent {}
+```
+
+## API
+
+### TgoCodingTestComponent
+
+#### Inputs
+
+| Name                        | Type                        | Required | Default | Description                                                      |
+| --------------------------- | --------------------------- | -------- | ------- | ---------------------------------------------------------------- |
+| languages                   | LATLanguages                | Yes      | -       | Array of available programming languages                         |
+| initCode                    | string                      | No       | -       | Initial code to display in the editor                            |
+| snapshot                    | CodingSnapshot              | No       | -       | Snapshot of coding state for restoration                         |
+| functionParams              | CodeEditorFuncParam[]       | No       | -       | Function parameters for function-based questions                 |
+| functionName                | string                      | No       | -       | Function name for function-based questions                       |
+| returnType                  | keyof CodeEditorTypesMap    | No       | -       | Return type for function-based questions                         |
+| isLAT                       | boolean                     | No       | -       | Whether this is a Language-Agnostic Test                         |
+| isSQL                       | boolean                     | No       | -       | Whether this is an SQL test                                      |
+| shouldGenerateInitCode      | boolean                     | No       | true    | Whether to generate initial code automatically                    |
+| canAddCustomTestCases       | boolean                     | No       | true    | Whether users can add custom test cases                          |
+| selectedProgrammingLanguage | LATLanguage                 | No       | -       | Pre-selected programming language                                |
+| isReadonly                  | boolean                     | No       | -       | Whether the editor is in read-only mode                          |
+| autoHeight                  | boolean                     | No       | -       | Whether the editor should auto-adjust height                     |
+| translations                | Record\<string, unknown\>   | No       | -       | Translation object for UI text                                   |
+| questionText                | string                      | No       | -       | Question text to display                                          |
+| mode                        | Modes                       | No       | -       | Test mode (Running, Preview, NonAssessmentPreview)               |
+| assessmentId                | string                      | No       | -       | Assessment ID for storage and tracking                           |
+| companyColor                | string                      | No       | -       | Company brand color for theming                                  |
+| testCasesStatus             | any                         | No       | -       | Status of test case execution                                    |
+| loading                     | boolean                     | No       | -       | Loading state indicator                                           |
+| runTestResponse             | any[]                       | No       | []      | Response from test execution                                     |
+| viewMode                    | ViewMode                    | No       | -       | View mode (Full, Compact)                                        |
+| exampleTestCases            | ExampleTestCase[]           | No       | -       | Example test cases to display                                    |
+| hideTestCases               | boolean                     | No       | -       | Whether to hide test cases UI (legacy property)                  |
+| applicationTheme            | ApplicationTheme            | No       | 'light' | Application theme (light/dark)                                   |
+| questionId                  | number                      | No       | -       | Question ID for storage and tracking                             |
+
+#### Outputs
+
+| Name           | Type                              | Description                                    |
+| -------------- | --------------------------------- | ---------------------------------------------- |
+| pasteEvent     | EventEmitter\<PasteData\>         | Emits when paste event is detected             |
+| codeChange     | EventEmitter\<string\>            | Emits when code content changes                |
+| runTestClick   | EventEmitter\<boolean\>            | Emits when run test button is clicked          |
+| languageChange | EventEmitter\<CodeEditorLanguages\> | Emits when programming language is changed    |
+
+### TgoCodingTestCandidateViewComponent
+
+#### Inputs
+
+| Name                 | Type                   | Required | Default | Description                                      |
+| -------------------- | ---------------------- | -------- | ------- | ------------------------------------------------ |
+| question             | Question               | Yes      | -       | Question data containing coding test context      |
+| test                 | TestResultRead         | Yes      | -       | Test configuration and metadata                   |
+| assessment           | Assessment             | No       | -       | Assessment context                                |
+| expirationObservable | Observable\<void\>     | No       | -       | Observable to trigger test expiration externally |
+| completeObservable   | Observable\<void\>     | No       | -       | Observable to trigger test completion externally |
+| isDemo               | boolean                | No       | -       | Whether this is a demo/preview mode               |
+
+#### Outputs
+
+| Name                           | Type                                     | Description                                     |
+| ------------------------------ | ---------------------------------------- | ----------------------------------------------- |
+| submissionStateChanged        | EventEmitter\<ISubmissionState \| null\> | Emits submission state when answer is submitted |
+| loadingStateChanged            | EventEmitter\<boolean\>                  | Emits loading state changes                     |
+| antiCheatingConfigurationChanged | EventEmitter\<IAntiCheatingState \| null\> | Emits anti-cheating configuration changes      |
+| fullscreenChanged              | EventEmitter\<boolean\>                  | Emits when fullscreen state changes             |
+| themeChanged                   | EventEmitter\<ApplicationTheme\>          | Emits when application theme changes            |
+| codingFullscreenChanged        | EventEmitter\<boolean\>                  | Emits when coding editor fullscreen changes     |
+| navigationButtonStateChanged   | EventEmitter\<INavigationButtonState \| null\> | Emits navigation button state changes          |
+| configurationStateChanged      | EventEmitter\<IConfigurationState \| null\> | Emits configuration state changes              |
+| validationStatusChanged        | EventEmitter\<any\>                     | Emits validation status changes                 |
+
+## Peer Dependencies
+
+This library requires the following peer dependencies:
+
+- `@angular/common` ^18.2.13
+- `@angular/core` ^18.2.13
+- `@angular/animations` ^18.2.13
+- `@angular/forms` ^18.2.13
+- `@angular/material` 18.2.14
+- `@angular/router` ^18.2.13
+- `@ngneat/transloco` ~4.3.0
+- `@ngneat/until-destroy` 10.0.0
+- `@testgorilla/tgo-test-shared` ^0.0.1
+- `@testgorilla/tgo-ui` ^3.0.0
+- `angular-split` ^18.0.0
+- `monaco-editor` 0.50.0
+- `ngx-guided-tour` ^2.0.1
+- `ngx-monaco-editor-v2` ^18.1.0
+- `ngx-quill` ^26.0.10
+- `ngx-webstorage` ^18.0.0
+- `quill` ^2.0.3
+- `rxjs` ~7.8.1
+
+## Internal Dependencies
+
+All required services, models, and components are included within this library:
+
+- `LibCodingTestService` - Manages coding test state, language selection, and code management
+- `StorageCodingService` - Handles localStorage persistence for code and test cases
+- `CodingTestService` - Handles test execution, API calls, and test case management
+- `CandidatureApiService` - API service for candidate-related operations
+- `CoderunnerApiService` - API service for code execution
+- `CodingTestConfigService` - Provides access to library configuration (injects configuration token internally)
+- `ThemeService` - Provides theme/company color configuration
+- `Question`, `TestResultRead`, `Assessment`, `ISubmissionState` - Type definitions from `@testgorilla/tgo-test-shared`
+- `CodeEditorComponent`, `CodingQuestionComponent`, `RunnableEditorComponent` - UI components
+- `TranslocoLazyModuleUtils`, `getAvailableLangs` - Translation utilities
+
+### Accessing Configuration
+
+If you need to access the library configuration in your services or components, inject `CodingTestConfigService`:
+
+```typescript
+import { CodingTestConfigService } from '@testgorilla/tgo-coding-test';
+
+@Injectable()
+export class MyService {
+  private readonly configService = inject(CodingTestConfigService);
+  
+  doSomething() {
+    const endpoint = this.configService.getCoderunnerV2Endpoint();
+    // Use endpoint...
+  }
+}
+```
+
+## Features
+
+- Multi-language code editor support (Language-Agnostic Tests)
+- SQL test support
+- Custom test case creation and management
+- Code auto-save and restoration
+- Test execution with real-time results
+- Fullscreen mode support
+- Theme support (light/dark)
+- Guided tour for new users
+- Anti-cheating configuration
+- Translation support via Transloco
+- Preview mode support
+- Code paste detection and tracking
+- Periodic storage maintenance

package/jest.config.ts

@@ -0,0 +1,21 @@
+export default {
+  displayName: 'tgo-coding-test',
+  preset: '../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  coverageDirectory: '../../coverage/packages/tgo-coding-test',
+  transform: {
+    '^.+\\.(ts|mjs|js|html)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$',
+      },
+    ],
+  },
+  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$|lodash-es|@testgorilla/tgo-ui|ng2-charts|quill|ngx-quill|parchment)'],
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ],
+};

package/ng-package.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/packages/tgo-coding-test",
+  "assets": [
+    {
+      "glob": "**/*",
+      "input": "./src/assets",
+      "output": "./assets"
+    }
+  ],
+  "lib": {
+    "entryFile": "src/index.ts"
+  }
+}

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@testgorilla/tgo-coding-test",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/animations": "^18.2.13",
+    "@angular/common": "^18.2.13",
+    "@angular/core": "^18.2.13",
+    "@angular/forms": "^18.2.13",
+    "@angular/material": "18.2.14",
+    "@angular/router": "^18.2.13",
+    "@ngneat/transloco": "~4.3.0",
+    "@ngneat/until-destroy": "10.0.0",
+    "@testgorilla/tgo-test-shared": "^0.0.1",
+    "@testgorilla/tgo-ui": "^3.0.0",
+    "angular-split": "^18.0.0",
+    "jest-preset-angular": "~14.2.4",
+    "monaco-editor": "0.50.0",
+    "ngx-guided-tour": "^2.0.1",
+    "ngx-monaco-editor-v2": "^18.1.0",
+    "ngx-quill": "^26.0.10",
+    "ngx-webstorage": "^18.0.0",
+    "quill": "^2.0.3",
+    "rxjs": "~7.8.1"
+  },
+  "sideEffects": false,
+  "license": "PROPRIETARY",
+  "publishConfig": {
+    "access": "restricted",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "displayName": "Coding test",
+  "description": "Coding test component"
+}

package/project.json

@@ -0,0 +1,36 @@
+{
+  "name": "tgo-coding-test",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/tgo-coding-test/src",
+  "prefix": "tgo",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "build": {
+      "executor": "@nx/angular:package",
+      "outputs": ["{workspaceRoot}/dist/{projectRoot}"],
+      "options": {
+        "project": "packages/tgo-coding-test/ng-package.json"
+      },
+      "configurations": {
+        "production": {
+          "tsConfig": "packages/tgo-coding-test/tsconfig.lib.prod.json"
+        },
+        "development": {
+          "tsConfig": "packages/tgo-coding-test/tsconfig.lib.json"
+        }
+      },
+      "defaultConfiguration": "production"
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "packages/tgo-coding-test/jest.config.ts"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint"
+    }
+  }
+}

package/src/assets/i18n/en.json

@@ -0,0 +1,124 @@
+{
+  "ERRORS": {
+    "SYSTEM_ERROR": "Oops. Something went wrong. Please try again in a few minutes."
+  },
+  "COMMON": {
+    "CANCEL": "Cancel"
+  },
+  "TEST_RESULTS": {
+    "TEST_CASES": {
+      "NONE": "None",
+      "NO_RESPONSE": "No response",
+      "EXECUTED_SUCCESSFULLY": "Code executed successfully",
+      "TIMEOUT_ERROR": "Timeout error, please review your code"
+    }
+  },
+  "MODALS": {
+    "RESET_CODE": {
+      "TITLE": "Are you sure you want to reset your code?",
+      "MESSAGE": "Your code will be cleared and you’d have to start again from the scratch. Is that what you want to do?",
+      "SUBMIT": "Reset code"
+    },
+    "DELETE_TEST_CASE": {
+      "TITLE": "Delete this test case?",
+      "MESSAGE": "You won't be able to recover the entered data.",
+      "SUBMIT": "Delete"
+    },
+    "LANGUAGE_CHANGE": {
+      "TITLE": "You are switching the programming language",
+      "MESSAGE": "Your current progress will be saved. It will still be available if you switch back to this language.",
+      "SUBMIT": "Confirm"
+    },
+    "FINISH_TEST": {
+      "TITLE": "This action will submit and finish your coding test!",
+      "MESSAGE": "You cannot come back to this test later. Make sure your answer is ready to be submitted before proceeding",
+      "CANCEL": "Keep coding",
+      "SUBMIT": "Finish test"
+    }
+  },
+  "CODING_LIB": {
+    "PRACTICE_QUESTIONS_STAGE": {
+      "INFO": "Info",
+      "QUESTIONS_INDEXING": "This is the first practice question.",
+      "QUESTIONS_INDEXING_AS_LAST": "This is the first and last practice question."
+    },
+    "CODE_QUESTION": {
+      "PRACTICE_INTRODUCTION": "The purpose of this question is to show you how coding tests work. You are not being scored for anything in this question.<br /><br /> Use this time to explore this practice question before your actual test begins.<br /><br /><strong>Do not close this window at any time.</strong> The countdown timer will keep running, and you will miss your test question if you close the window.<br /><br />Here are the instructions.",
+      "LANGUAGE_USING": "For this test you’re using",
+      "ADD_COMMENTS": "Feel free to add comments in your code explaining your solution."
+    },
+    "HEADINGS": {
+      "INSTRUCTIONS": "Instructions",
+      "CODING": "Coding Window",
+      "CONFIGURATIONS": "Configurations",
+      "FORMATTING": "Formatting",
+      "CODING_ASSISTANCE": "Coding Assistance",
+      "TESTS": "Tests"
+    },
+    "TOOLTIPS": {
+      "RESET_CODE": "Reset code",
+      "HELP": "Help",
+      "MAXIMISE": "Click to view code-runner in full-screen",
+      "MINIMIZE": "Minimize",
+      "CONFIGURATIONS": "Configurations",
+      "DISABLE_LANGUAGE": "The screening company only allows this programming language for this test",
+      "CANT_ADD_TEST_CASE": "You cannot add more than 6 of your own tests.",
+      "DELETE_TEST_CASE": "Remove test case"
+    },
+    "TEST_RESULTS": {
+      "PASSED": "Passed: ",
+      "ERROR": "Error: ",
+      "TOTAL": "Total: ",
+      "TEST_RUNNNING": "Running...",
+      "TESTS_CHECK": "Run tests to check your code",
+      "RUN_TESTS": "Run tests",
+      "TEST_CASES": {
+        "BOTH_FIELDS_MUST_BE_FILLED": "To run the test, both the input and expected output must be filled in.",
+        "EXAMPLE_TEST_CASE_INFO": "This is a test case example we recommend for this task. Run tests to get results.",
+        "FILL_ALL_FIELDS": "Fill in the input and expected output, and run tests to get results.",
+        "OUTPUT": "Output",
+        "LOG": "Log",
+        "INPUT": "Input",
+        "EXPECTED_OUTPUT": "Expected output",
+        "EXPECTED_QUERY": "Expected query result",
+        "QUERY_RESULT": "Query result",
+        "RESULT": "Result:",
+        "EXPECTED": "Expected:",
+        "TEST_VALIDATION": "Test Validation:",
+        "STATUSES": {
+          "PASSED": "Passed",
+          "ERROR": "Error",
+          "EMPTY": "Empty"
+        },
+        "NONE": "None",
+        "NO_RESPONSE": "No response",
+        "EXECUTED_SUCCESSFULLY": "Code executed successfully",
+        "SQL_EXECUTED_SUCCESSFULLY": "Task executed successfully",
+        "TIMEOUT_ERROR": "Timeout error, please review your code",
+        "ADD_TEST_CASE": "Add Test Case"
+      }
+    }
+  },
+  "TOUR": {
+    "STEP_1": {
+      "TITLE": "Practice question",
+      "MESSAGE": "Notice this is an example question that has been solved for you. The real test will start in the next page."
+    },
+    "STEP_2": {
+      "TITLE": "Programming language",
+      "MESSAGE": "You will be able to select the programming language of your choice, from the options your screening company has decided.<br />Your active selection when submitting the test is the one that will be considered."
+    },
+    "STEP_3": {
+      "TITLE": "Test cases",
+      "MESSAGE": "These are pairs of inputs and expected outputs. Press “Run tests” to test your function against them.<br />We encourage you to think of your own test cases, covering possible corner cases!"
+    },
+    "STEP_4": {
+      "TITLE": "Configurable IDE",
+      "MESSAGE": "Feel free to configure the IDE with settings of your choice: theme, font size, tab size, full screen, etc"
+    },
+    "STEP_5": {
+      "TITLE": "Start real test",
+      "MESSAGE": "When you’re ready, proceed to the actual test or wait until the timer ends. Good luck!"
+    }
+  }
+}

package/src/index.ts

@@ -0,0 +1,30 @@
+/*
+ * Public API Surface of coding-test
+ */
+
+export { TgoCodingTestComponent } from './lib/components/tgo-coding-test/tgo-coding-test.component';
+export { TgoCodingTestCandidateViewComponent } from './lib/components/tgo-coding-test-candidate-view/tgo-coding-test-candidate-view.component';
+// Note: CodingTestModule is kept internal for now and not exposed in the public API
+// export * from './lib/components/coding-test.module';
+export { Config as LibCodingConfig } from './lib/models/configs';
+export {
+  CustomTestCase,
+  ExampleTestCase,
+  TestCaseResult,
+  TestCaseDeletionAction,
+  TestCaseDeletionData,
+} from './lib/models/test-cases';
+export { Themes } from './lib/models/theme';
+export { ViewMode } from './lib/models/view-mode';
+export { LATLanguage, LATLanguages } from './lib/models/lat-languages';
+export { CodeEditorLanguages } from './lib/components/code-editor/helpers/code-editor-helper.model';
+export { Modes } from './lib/models/mode';
+export { LibCodingTestService, ResetCodeAction } from './lib/services/lib-coding-test.service';
+export { StorageCodingService } from './lib/services/storage.service';
+export { CodingTestConfigService } from './lib/services/coding-test-config.service';
+
+// Configuration exports
+export {
+  TgoCodingTestConfig,
+  provideTgoCodingTest,
+} from './lib/config';

package/src/lib/components/code-editor/code-editor.component.html

@@ -0,0 +1,10 @@
+<div class="container notranslate" translate="no">
+  <ngx-monaco-editor
+    #editor
+    class="editor"
+    [options]="editorOptions"
+    [(ngModel)]="code"
+    (ngModelChange)="publishCode($event)"
+    (onInit)="initEditor($event)"
+  ></ngx-monaco-editor>
+</div>

package/src/lib/components/code-editor/code-editor.component.scss

@@ -0,0 +1,21 @@
+:host {
+  display: block;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.container {
+  height: 100%;
+  background-color: var(--code-editor-background);
+}
+
+.editor {
+  height: 100%;
+
+  ::ng-deep {
+    .copy-pasted-code {
+      background-color: yellow;
+    }
+  }
+}