Merge pull request #44 from PolyHx/task/add-questions-and-track-types

Add questions and tracks types
csgames · Mar 20, 2019 · 4a06eca · 4a06eca
2 parents 148a298 + 22306dc
commit 4a06eca
Show file tree

Hide file tree

Showing 17 changed files with 320 additions and 88 deletions.
diff --git a/src/app/api/models/puzzle-hero.ts b/src/app/api/models/puzzle-hero.ts
@@ -4,7 +4,25 @@ export enum TrackTypes {
     Crypto = "crypto",
     Gaming = "gaming",
     Scavenger = "scavenger",
-    Sponsor = "sponsor"
+    Sponsor = "sponsor",
+    Vine = "vine",
+    EsotericLanguages = "esoteric_languages",
+    DataAnalysis = "data_analysis",
+    Recon = "recon",
+    Steganography = "steganography",
+    Debugging = "debugging",
+    Forensics = "forensics",
+    Charades = "charades",
+    ReverseEngineering = "reverse_engineering",
+    CodeGolf = "code_golf",
+    Regex = "regex",
+    Scripting = "scripting",
+    Food = "food",
+    Karaoke = "karaoke",
+    Pwning = "pwning",
+    Authentication = "authentication",
+    StaticAnalysis = "static_analysis",
+    ArtificialIntelligence = "artificial_intelligence"
 }
 
 export interface PuzzleInfo {

diff --git a/src/app/api/models/question.ts b/src/app/api/models/question.ts
@@ -3,7 +3,25 @@ export enum QuestionTypes {
     Gaming = "gaming",
     Scavenger = "scavenger",
     Sponsor = "sponsor",
-    Upload = "upload"
+    Upload = "upload",
+    Vine = "vine",
+    EsotericLanguages = "esoteric_languages",
+    DataAnalysis = "data_analysis",
+    Recon = "recon",
+    Steganography = "steganography",
+    Debugging = "debugging",
+    Forensics = "forensics",
+    Charades = "charades",
+    ReverseEngineering = "reverse_engineering",
+    CodeGolf = "code_golf",
+    Regex = "regex",
+    Scripting = "scripting",
+    Food = "food",
+    Karaoke = "karaoke",
+    Pwning = "pwning",
+    Authentication = "authentication",
+    StaticAnalysis = "static_analysis",
+    ArtificialIntelligence = "artificial_intelligence"
 }
 
 export enum ValidationTypes {

diff --git a/src/app/components/question-form/question-form.component.ts b/src/app/components/question-form/question-form.component.ts
@@ -5,6 +5,7 @@ import { QUESTION_FORM_GENERATOR } from "./question-form.constants";
 import { ControlValueAccessor, FormGroup, NG_VALUE_ACCESSOR } from "@angular/forms";
 import { Subscription } from "rxjs";
 import { InputTypes, QuestionTypes, ValidationTypes } from "../../api/models/question";
+import { QuestionUtils } from "../../utils/question.utils";
 
 @Component({
     selector: "app-question-form",
@@ -79,18 +80,8 @@ export class QuestionFormComponent implements OnInit, ControlValueAccessor, OnDe
         return false;
     }
 
-    getQuestionTypeIcon(type: string): string {
-        switch (type) {
-            case QuestionTypes.Crypto:
-                return "fa-key";
-            case QuestionTypes.Gaming:
-                return "fa-gamepad";
-            case QuestionTypes.Scavenger:
-                return "fa-camera-alt";
-            case QuestionTypes.Sponsor:
-                return "fa-gem";
-        }
-        return "";
+    getQuestionTypeIcon(type: QuestionTypes): string {
+        return QuestionUtils.getQuestionTypeIconClass(type);
     }
 
     getValidationIcon(type: string): string {

diff --git a/src/app/components/question-form/question-form.template.html b/src/app/components/question-form/question-form.template.html
@@ -30,10 +30,10 @@
                                placeholder='{{ "components.question_form.puzzle_types" | translate }}' controlStatus
                                formControlName="type">
                         <ng-template ng-option-tmp ng-label-tmp let-item="item">
-                            <i class="fal" [ngClass]="getQuestionTypeIcon(item)"></i>
+                            <i [ngClass]="getQuestionTypeIcon(item)"></i>&nbsp;
                             <span class="ng-option-label">
-                        {{ item }}
-                    </span>
+                                {{ "general.question.types." + item | translate }}
+                            </span>
                         </ng-template>
                     </ng-select>
                 </div>
@@ -44,7 +44,7 @@
                                placeholder='{{ "components.question_form.validation_types" | translate }}' controlStatus
                                formControlName="validationType">
                         <ng-template ng-option-tmp ng-label-tmp let-item="item">
-                            <i class="fal" [ngClass]="getValidationIcon(item)"></i>
+                            <i class="fal" [ngClass]="getValidationIcon(item)"></i>&nbsp;
                             <span class="ng-option-label">
                                 {{ item }}
                             </span>
@@ -73,7 +73,7 @@
                                placeholder='{{ "components.question_form.input_types" | translate }}' controlStatus
                                formControlName="inputType">
                         <ng-template ng-option-tmp ng-label-tmp let-item="item">
-                            <i class="fal" [ngClass]="getInputTypeIcon(item)"></i>
+                            <i class="fal" [ngClass]="getInputTypeIcon(item)"></i>&nbsp;
                             <span class="ng-option-label">
                         {{ item }}
                     </span>

diff --git a/.../features/competitions/edit/components/question-edit-card/question-edit-card.component.ts b/.../features/competitions/edit/components/question-edit-card/question-edit-card.component.ts
@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
 import { InputTypes, Question, QuestionGraphNode, QuestionTypes, ValidationTypes } from "../../../../../api/models/question";
+import { QuestionUtils } from "../../../../../utils/question.utils";
 
 @Component({
     selector: "app-question-edit-card",
@@ -25,17 +26,7 @@ export class QuestionEditCardComponent implements OnInit {
     }
 
     get icon(): string {
-        switch ((this.question.question as Question).type) {
-            case QuestionTypes.Crypto:
-                return "fal fa-key";
-            case QuestionTypes.Gaming:
-                return "fal fa-gamepad";
-            case QuestionTypes.Scavenger:
-                return "fal fa-camera-alt";
-            case QuestionTypes.Upload:
-                return "fal fa-upload";
-        }
-        return "";
+        return QuestionUtils.getQuestionTypeIconClass((this.question.question as Question).type);
     }
 
     get validationIcon(): string {

diff --git a/...features/competitions/edit/components/question-edit-card/question-edit-card.template.html b/...features/competitions/edit/components/question-edit-card/question-edit-card.template.html
@@ -25,7 +25,9 @@
                 </div>
                 <div fxFlex>
                     <strong>
-                        <i class="fal" [ngClass]="icon"></i>&nbsp;{{ question?.question?.type }}<br>
+                        <i class="fal"
+                           [ngClass]="icon"></i>&nbsp;{{ "general.question.types." + question?.question?.type | translate }}
+                        <br>
                         <i class="fal" [ngClass]="inputIcon"></i>&nbsp;{{ question?.question?.inputType }}<br>
                         <i class="fal" [ngClass]="validationIcon"></i>&nbsp;{{ question?.question?.validationType }}
                     </strong>

diff --git a/...res/competitions/edit/components/question-results-card/question-results-card.component.ts b/...res/competitions/edit/components/question-results-card/question-results-card.component.ts
@@ -1,5 +1,6 @@
 import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
 import { Question, QuestionTypes } from "../../../../../api/models/question";
+import { QuestionUtils } from "../../../../../utils/question.utils";
 
 @Component({
     selector: "app-question-results-card",
@@ -28,17 +29,7 @@ export class QuestionResultsCardComponent implements OnInit {
     }
 
     get icon(): string {
-        switch (this.question.type) {
-            case QuestionTypes.Crypto:
-                return "fal fa-key";
-            case QuestionTypes.Gaming:
-                return "fal fa-gamepad";
-            case QuestionTypes.Scavenger:
-                return "fal fa-camera-alt";
-            case QuestionTypes.Upload:
-                return "fal fa-upload";
-        }
-        return "";
+        return QuestionUtils.getQuestionTypeIconClass(this.question.type);
     }
 
     onClickDownloadSubmissions(event: MouseEvent) {

diff --git a/src/app/features/puzzle-hero/admin/components/track-form/track-form.component.ts b/src/app/features/puzzle-hero/admin/components/track-form/track-form.component.ts
@@ -5,6 +5,8 @@ import { TrackFormDto } from "./dto/track-form.dto";
 import { Subscription } from "rxjs";
 import { ControlValueAccessor, FormGroup, NG_VALUE_ACCESSOR } from "@angular/forms";
 import { TrackTypes } from "../../../../../api/models/puzzle-hero";
+import { TrackUtils } from "../../../../../utils/track.utils";
+import { QuestionTypes } from "../../../../../api/models/question";
 
 @Component({
     selector: "app-track-form",
@@ -20,12 +22,7 @@ import { TrackTypes } from "../../../../../api/models/puzzle-hero";
 })
 export class TrackFormComponent implements OnInit, ControlValueAccessor, OnDestroy {
 
-    public types = [
-        TrackTypes.Crypto,
-        TrackTypes.Gaming,
-        TrackTypes.Scavenger,
-        TrackTypes.Sponsor
-    ];
+    public types = Object.values(TrackTypes);
 
     public formGroup: FormGroup;
 
@@ -60,18 +57,8 @@ export class TrackFormComponent implements OnInit, ControlValueAccessor, OnDestr
         }
     }
 
-    getIcon(type: string): string {
-        switch (type) {
-            case TrackTypes.Crypto:
-                return "fa-key";
-            case TrackTypes.Gaming:
-                return "fa-gamepad";
-            case TrackTypes.Scavenger:
-                return "fa-camera-alt";
-            case TrackTypes.Sponsor:
-                return "fa-gem";
-        }
-        return "";
+    getIcon(type: TrackTypes): string {
+        return TrackUtils.getTrackTypeIconClass(type);
     }
 
     validate(): boolean {

diff --git a/src/app/features/puzzle-hero/admin/components/track-form/track-form.template.html b/src/app/features/puzzle-hero/admin/components/track-form/track-form.template.html
@@ -14,7 +14,7 @@
                 <ng-select [items]="types" [clearable]="false" placeholder='{{ "components.track_form.type" | translate }}'
                            formControlName="type" controlStatus>
                     <ng-template ng-option-tmp ng-label-tmp let-item="item">
-                        <i class="fal" [ngClass]="getIcon(item)"></i>
+                        <i [ngClass]="getIcon(item)"></i>
                         <span class="ng-option-label">
                             {{ "general.track.types." + item | translate }}
                         </span>

diff --git a/src/app/features/puzzle-hero/components/puzzle-tile/puzzle-tile.component.ts b/src/app/features/puzzle-hero/components/puzzle-tile/puzzle-tile.component.ts
@@ -2,6 +2,7 @@ import { Component, EventEmitter, Input, Output, ViewChild } from "@angular/core
 import { PuzzleInfo } from "../../../../api/models/puzzle-hero";
 import { PopoverDirective } from "ngx-bootstrap";
 import { QuestionTypes } from "../../../../api/models/question";
+import { QuestionUtils } from "../../../../utils/question.utils";
 
 @Component({
     selector: "[puzzle-tile]",
@@ -25,17 +26,7 @@ export class PuzzleTileComponent {
     clickAddPuzzle = new EventEmitter<void>();
 
     get icon(): string {
-        switch (this.puzzle.type) {
-            case QuestionTypes.Crypto:
-                return "&#xf084;";
-            case QuestionTypes.Gaming:
-                return "&#xf11b;";
-            case QuestionTypes.Scavenger:
-                return "&#xf332;";
-            case QuestionTypes.Sponsor:
-                return "&#xf3a5;";
-        }
-        return "";
+        return QuestionUtils.getQuestionTypeIconCharacter(this.puzzle.type);
     }
 
     onClickPuzzle() {

diff --git a/src/app/features/puzzle-hero/components/puzzle-tile/puzzle-tile.template.html b/src/app/features/puzzle-hero/components/puzzle-tile/puzzle-tile.template.html
@@ -16,7 +16,8 @@
                   [class.completed]="puzzle?.completed"/>
 
         <svg width="77" height="77">
-            <svg:text class="fal fa-3x" x="50%" y="50%" alignment-baseline="middle" dominant-baseline="middle"
+            <svg:text [ngClass]="{fal: puzzle.type !== 'vine', fab: puzzle.type === 'vine'}" class="fa-3x" x="50%"
+                      y="50%" alignment-baseline="middle" dominant-baseline="middle"
                       text-anchor="middle" [innerHTML]="icon">
             </svg:text>
             <svg:text class="fa fa-3x text-danger" x="50%" y="50%" alignment-baseline="middle"

diff --git a/src/app/features/puzzle-hero/components/track/track.component.ts b/src/app/features/puzzle-hero/components/track/track.component.ts
@@ -1,8 +1,9 @@
 import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
 import * as shape from "d3-shape";
-import { PuzzleInfo, Track, TrackTypes } from "../../../../api/models/puzzle-hero";
+import { PuzzleInfo, Track } from "../../../../api/models/puzzle-hero";
 import { PuzzleHeroService } from "../../../../providers/puzzle-hero.service";
 import { SimpleModalService } from "ngx-simple-modal";
+import { TrackUtils } from "../../../../utils/track.utils";
 
 @Component({
     selector: "app-track",
@@ -71,17 +72,7 @@ export class TrackComponent implements OnInit {
     }
 
     get icon(): string {
-        switch (this.track.type) {
-            case TrackTypes.Crypto:
-                return "fa-key";
-            case TrackTypes.Gaming:
-                return "fa-gamepad";
-            case TrackTypes.Scavenger:
-                return "fa-camera-alt";
-            case TrackTypes.Sponsor:
-                return "fa-gem";
-        }
-        return "";
+        return TrackUtils.getTrackTypeIconClass(this.track.type);
     }
 
     get isStarred(): boolean {

diff --git a/src/app/features/puzzle-hero/components/track/track.template.html b/src/app/features/puzzle-hero/components/track/track.template.html
@@ -1,7 +1,7 @@
 <accordion class="card-wrapper">
     <accordion-group (isOpenChange)="onOpen()" [isOpen]="startsOpen">
         <div accordion-heading fxLayout="row" fxLayoutAlign="start center">
-            <i class="fal firstIcon" [ngClass]="icon"></i>
+            <i class="firstIcon" [ngClass]="icon"></i>
             <div class="track-title">
                 <span class="title">{{ track?.label }}</span><br>
                 <ng-container *ifRole="['admin', 'super-admin']">