Add Arcade (hobbyfarm#204)

* First version of bashbrawl

* some game logic

* More functionality

* clock positioning

* main game logic

* Store leaderboard in localStorage

* storing leaderboard works

* Cleanup

* Small fixes with names longer than 20 chars

* Correct mistake where brawl is always active on new users

* remove unused imports

* Remove reviver and replacer

* Confirm begin game modal

* Run prettier

* Small fixes with name input

* Linting

* prettier

* fix input

* Move local placement leaderboard to server

* Enclose with group

* Remove console log

* complete the kubectl commands

* Added LICENSE for languages and readme in the bashbrawl folder

---------

Co-authored-by: Jan-Gerrit Göbel <[email protected]>

Author: jggoebel

src/app/app.component.html

@@ -559,6 +559,24 @@ <h3 class="modal-title">Settings</h3>
               </clr-tab-content>
               <clr-tab-content> </clr-tab-content>
             </clr-tab>
+            <clr-tab>
+              <button clrTabLink>BashBrawl</button>
+              <clr-tab-content>
+                <clr-checkbox-container>
+                  <label class="clr-col-md-4">Enabled</label>
+                  <clr-checkbox-wrapper>
+                    <input
+                      class="clr-col-md-8"
+                      type="checkbox"
+                      clrCheckbox
+                      name="bashbrawl_enabled"
+                      formControlName="bashbrawl_enabled"
+                    />
+                  </clr-checkbox-wrapper>
+                </clr-checkbox-container>
+              </clr-tab-content>
+              <clr-tab-content> </clr-tab-content>
+            </clr-tab>
           </clr-tabs>
         </form>
       </ng-container>

src/app/app.component.ts

@@ -146,6 +146,7 @@ export class AppComponent implements OnInit {
     theme: new FormControl<'light' | 'dark' | 'system' | null>(null, [
       Validators.required,
     ]),
+    bashbrawl_enabled: new FormControl<boolean>(false),
   });
 
   ngOnInit() {
@@ -280,13 +281,15 @@ export class AppComponent implements OnInit {
           ctr_enabled = true,
           theme = 'light',
           divider_position = 40,
+          bashbrawl_enabled = false,
         }) => {
           this.settingsForm.setValue({
             terminal_theme,
             terminal_fontSize,
             ctr_enabled,
             theme,
             divider_position,
+            bashbrawl_enabled,
           });
           this.fetchingSettings = false;
         },

src/app/app.module.ts

@@ -8,6 +8,7 @@ import { RootComponent } from './root.component';
 import { HomeComponent } from './home.component';
 import { ScenarioComponent } from './scenario/scenario.component';
 import { TerminalComponent } from './scenario/terminal.component';
+import { BashbrawlterminalComponent } from './scenario/bashbrawl/bashbrawlterminal.component';
 import { JwtModule, JWT_OPTIONS } from '@auth0/angular-jwt';
 import { HttpClientModule } from '@angular/common/http';
 import { LoginComponent } from './login/login.component';
@@ -44,6 +45,8 @@ import { GuacTerminalComponent } from './scenario/guacTerminal.component';
 import { IdeWindowComponent } from './scenario/ideWindow.component';
 import { ContextService } from './services/context.service';
 import { TypedSettingsService } from './services/typedSettings.service';
+import { LanguageCommandService } from './scenario/bashbrawl/languages/language-command.service';
+import { ScoreService } from './services/score.service';
 import { VerificationService } from './services/verification.service';
 import { TaskProgressComponent } from './scenario/task-progress/task-progress.component';
 import { TaskModalComponent } from './scenario/task-modal/task-modal.component';
@@ -80,6 +83,7 @@ import {
   eyeHideIcon,
   clockIcon,
   copyIcon,
+  terminalIcon,
 } from '@cds/core/icon';
 import { QuizLabelComponent } from './quiz/quiz-label.component';
 
@@ -112,6 +116,7 @@ ClarityIcons.addIcons(
   eyeHideIcon,
   clockIcon,
   copyIcon,
+  terminalIcon,
 );
 
 export function tokenGetter() {
@@ -153,6 +158,7 @@ export function jwtOptionsFactory() {
     HomeComponent,
     ScenarioComponent,
     TerminalComponent,
+    BashbrawlterminalComponent,
     GuacTerminalComponent,
     LoginComponent,
     ScenarioCardComponent,
@@ -222,6 +228,8 @@ export function jwtOptionsFactory() {
     ContextService,
     TypedSettingsService,
     VerificationService,
+    LanguageCommandService,
+    ScoreService,
     {
       provide: APP_INITIALIZER,
       useFactory: appInitializerFn,

src/app/scenario/bashbrawl/README.md

@@ -0,0 +1,11 @@
+# Bashbrawl
+
+## BashBrawl Standalone
+
+github.com/jggoebel/bashbrawl
+
+## original idea
+
+Thanks to [clh-bash](https://github.com/CommandLineHeroes/clh-bash/) for giving me the idea. Some language files were taken from there, the other code was newly written.
+
+Language files are (as the LICENSE file indicates) under

src/app/scenario/bashbrawl/bashbrawlterminal.component.html

@@ -0,0 +1 @@
+<div class="terminal-div" #terminal></div>

src/app/scenario/bashbrawl/bashbrawlterminal.component.scss

@@ -0,0 +1,12 @@
+.terminal-div {
+  height: calc(100% - 1.8rem);
+  width: 100%;
+}
+
+.xterm {
+  padding-bottom: 84px;
+}
+
+.xterm-viewport {
+  overflow: hidden !important;
+}