### File

`src/app/arena/arena.component.ts`

### Implements

`OnInit`

### Metadata

selector | `app-arena`
styleUrls | `./arena.component.scss`
templateUrl | `./arena.component.html`

### Index

###### Properties

- code
- compilationError
- customInput
- inputField
- isCompiling
- language
- question
- Public router
- submitField
- title

###### Methods

- getQuestion
- ngOnInit
- tryCode

### Constructor

`constructor(router: Router, apiService: ApiService, runCodeService: RunCodeService, questionService: QuestionService, fileService: FileService)`
Defined in src/app/arena/arena.component.ts:44

Parameters :

Name | Type | Optional
router | `Router` | No
apiService | `ApiService` | No
runCodeService | `RunCodeService` | No
questionService | `QuestionService` | No
fileService | `FileService` | No

### Methods

getQuestion
`getQuestion()`
Defined in src/app/arena/arena.component.ts:140
Returns : `void`

ngOnInit
`ngOnInit()`
Defined in src/app/arena/arena.component.ts:52
Returns : `void`

tryCode
`tryCode(c)`
Defined in src/app/arena/arena.component.ts:103

Parameters :

Name | Optional
c | No

Returns : `void`

### Properties

code
Type : `string[]`
Default value : `[`#include <iostream> using namespace std; int main() { cout << "Hello World!\\n"; return 0; }`, `print("Hello World!")`, `class HelloWorld { public static void main(String[] args) { System.out.println("Hello, World!"); } }`]`
Defined in src/app/arena/arena.component.ts:27

compilationError
Default value : `false`
Defined in src/app/arena/arena.component.ts:40

customInput
Type : `string`
Default value : `''`
Defined in src/app/arena/arena.component.ts:39

inputField
Type : `InputComponent`
Decorators : `@ViewChild(InputComponent)`
Defined in src/app/arena/arena.component.ts:43

isCompiling
Default value : `false`
Defined in src/app/arena/arena.component.ts:41

language
Type : `string`
Defined in src/app/arena/arena.component.ts:26

question
Type : `Question`
Defined in src/app/arena/arena.component.ts:25

Public router
Type : `Router`
Defined in src/app/arena/arena.component.ts:46

submitField
Type : `SubmitTryCodeComponent`
Decorators : `@ViewChild(SubmitTryCodeComponent)`
Defined in src/app/arena/arena.component.ts:44

title
Type : `string`
Defined in src/app/arena/arena.component.ts:24

    import {Component, OnInit, ViewChild} from '@angular/core';
    import {Router} from '@angular/router';

    // import {Problem} from '../problem';
    // import {ProblemService} from '../problem.service';
    import {ApiService} from '../api.service';
    import {InputComponent} from '../input/input.component';
    import {SubmitTryCodeComponent} from '../submit-try-code/submit-try-code.component';
    import {RunCodeService} from '../run-code.service';
    import {Question} from '../question';
    import {QuestionService} from '../question.service';
    import {FileService} from '../file.service';
    import {File} from '../file';

    declare const CodeMirror: any;

    @Component({
      selector: 'app-arena',
      templateUrl: './arena.component.html',
      styleUrls: ['./arena.component.scss']
    })
    export class ArenaComponent implements OnInit {

      title: string;
      question: Question;
      language: string;
      code: string[] = [`#include <iostream>
      using namespace std;

      int main() {
        cout << "Hello World!\\n";
        return 0;
      }`, `print("Hello World!")`, `class HelloWorld {
          public static void main(String[] args) {
              System.out.println("Hello, World!");
          }
      }`];

      customInput = '';
      compilationError = false;
      isCompiling = false;

      @ViewChild(InputComponent) inputField: InputComponent;
      @ViewChild(SubmitTryCodeComponent) submitField: SubmitTryCodeComponent;

      constructor(public router: Router, private apiService: ApiService,
                  private runCodeService: RunCodeService,
                  private questionService: QuestionService,
                  private fileService: FileService) {
      }

      ngOnInit(): void {

        this.title = this.router.url.split('/')[3];
        this.getQuestion();

        const editorArea = document.getElementById('editor');
        const editor = CodeMirror.fromTextArea(editorArea as HTMLTextAreaElement, {
          lineNumbers: true,
          theme: 'material-ocean',
          mode: 'text/x-c++src',
          autoCloseBrackets: true,
          matchBrackets: true
        });

        editor.setSize('auto', '70vh');
        editor.setValue(this.code[0]);
        Object.assign((document.getElementsByClassName('CodeMirror')[0] as HTMLTextAreaElement).style, {
          borderBottom: '1px solid #ddf',
          padding: '20px',
          fontFamily: '"Anonymous Pro", monospace',
        });

        let activeLang = 0;
        const langs = ['C++', 'Python', 'Java'];
        const extensions = ['.cpp', '.py', '.java'];
        const langsMime = ['text/x-c++src', 'text/x-python', 'text/x-java'];

        this.language = extensions[activeLang];

        const th = document.getElementById('toggle-lang') as HTMLDivElement;
        th.onclick = () => {
          activeLang = (activeLang + 1) % 3;
          this.language = extensions[activeLang];
          th.innerHTML = langs[activeLang];
          editor.setValue(this.code[activeLang]);
          editor.setOption('mode', langsMime[activeLang]);
        };

        editor.on('update', () => {
          this.code[activeLang] = editor.getValue();
        });

      }

      // getProblem(): void {
      //   this.problemService.getProblems()
      //     .subscribe(problems => {
      //       this.problem = problems.find(i => i.id === this.id);
      //     });
      // }

      tryCode(c): void {
        // if (document.getElementById('try').classList.contains('disabled')) {
        //   return;
        // }
        this.isCompiling = true;
        const file: File = {
          username: JSON.parse(this.apiService.getToken()).username,
          filename: this.question.title,
          language: this.language,
          text: this.code[(['.cpp', '.py', '.java']).indexOf(this.language)],
          path: 'attempts/'
        };
        console.log(file);
        this.fileService.upload(file, true).subscribe(data1 => {
          console.log(data1);
          this.runCodeService.compileFile(file).subscribe(data2 => {
            console.log(data2);
            this.submitField.submitting = c;
            this.submitField.reset(file, [this.question.tc1, this.question.tc2]);
            this.submitField.isActive = true;
            this.isCompiling = false;
          }, error => {
            this.isCompiling = false;
            this.compilationError = true;
            setTimeout(() => {
              this.compilationError = false;
            }, 3000);
          });
        }, error => {
          this.isCompiling = false;
          this.compilationError = true;
          setTimeout(() => {
            this.compilationError = false;
          }, 3000);
        });
      }

      getQuestion(): void {
        this.questionService.getQues()
          .subscribe(questions => {
            this.question = questions.find(i => i.title === this.title);
            document.getElementById('p_s').innerHTML = this.question.statement;
          });
      }

    }

    <div class="container">
      <div class="card" id="ps">
        <h3 [innerHtml]="title"></h3>
        <div id="p_s"></div>
      </div>
      <div id="toggle-lang">C++</div>
      <div id="attempt">
    <!--    <button id="input" (click)="inputField.setState(true)">Custom Input</button>-->
    <!--    <button id="try" (click)="tryCode(0)" [class.disabled]="compilationError || isCompiling">{{compilationError ? 'Error' : (isCompiling ? 'Compiling...' : 'Try Code')}}</button>-->
        <button id="submit" (click)="tryCode(1)" [class.disabled]="compilationError || isCompiling">{{compilationError ? 'Error' : (isCompiling ? 'Compiling...' : 'Submit Code')}}</button>
      </div>
      <label for="editor"></label>
      <textarea id="editor" name="editor"></textarea>
    </div>
    <app-input (valueEmit)="customInput = $event"></app-input>
    <app-submit-try-code [question]="question"></app-submit-try-code>

`./arena.component.scss`

    .container {
      display: grid;
      position: relative;
      grid-template-columns: 49% 49%;
      grid-column-gap: 2%;
      padding: 20px;

      .card {
        border-bottom: 1px solid var(--color);
        padding: 20px;
        height: 70vh;
        background: var(--dark);
        overflow: auto;
      }

      #toggle-lang {
        position: absolute;
        color: #ddf;
        padding: 5px 10px;
        right: 20px;
        top: 20px;
        z-index: 100;
        cursor: pointer;
      }

      #attempt {
        position: absolute;
        right: 24px;
        bottom: 24px;
        z-index: 100;

        #try,
        #submit,
        #input {
          display: inline-block;
          background: transparent;
          color: #ddf;
          margin: 2px;
          cursor: pointer;
          transition: 0.25s all;
          user-select: none;

          &:hover {
            background: var(--color);
            color: var(--bgcolor);
          }

          &:hover {
            background: var(--color);
            color: var(--bgcolor);
          }

          &.disabled:hover {
            cursor: default;
            background: transparent;
            color: #ddf;
          }
        }
      }
    }

    label {
      display: none;
    }

    @media screen and (max-width: 1000px) {
      .container {
        padding: 20px 0;
      }

      #attempt, #toggle-lang {
        right: 4px !important;
      }
    }

    @media screen and (max-width: 900px) {
      .container {
        display: initial;
        position: relative;

        .card {
          margin: 20px 0;
          height: auto;
          max-height: 50vh;
        }

        #attempt {
          position: fixed;
          bottom: 10px;
          right: 10px;
          background: linear-gradient(45deg, #004, #040) fixed no-repeat;
        }
      }
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""