src/app/arena/arena.component.ts
selector | app-arena |
styleUrls | ./arena.component.scss |
templateUrl | ./arena.component.html |
Properties |
Methods |
constructor(router: Router, apiService: ApiService, runCodeService: RunCodeService, questionService: QuestionService, fileService: FileService)
|
||||||||||||||||||
Defined in src/app/arena/arena.component.ts:44
|
||||||||||||||||||
Parameters :
|
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 :
Returns :
void
|
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;
}
}
}