add form for game with input component and button component

client/app/app-routing.module.ts

@@ -6,7 +6,7 @@ import { ConsoleComponent } from './console/console.component';
 
 const routes: Routes = [
   {path: "games", component: GamesComponent},
-  {path: "game/:name", component: GameDetailComponent},
+  {path: "games/:name", component: GameDetailComponent},
   {path: "console", component: ConsoleComponent}
 ]
 

client/app/app.component.html

@@ -4,9 +4,5 @@
 <app-games></app-games>
 </nav>
 <section>
-  <h1 class="center">
-      Welcome to {{ title }}!
-  </h1> 
   <router-outlet></router-outlet>
-  
 </section>

client/app/app.module.ts

@@ -6,7 +6,9 @@ import { AppRoutingModule } from './app-routing.module';
 import { GamesComponent } from './games/games.component';
 import { GameDetailComponent } from './game-detail/game-detail.component';
 import { HttpClientModule } from '@angular/common/http';
-import { ConsoleComponent } from './console/console.component'
+import { ConsoleComponent } from './console/console.component';
+import { InputComponent } from './input/input.component';
+import { ButtonComponent } from './button/button.component'
 
 @NgModule({
   declarations: [
@@ -14,6 +16,8 @@ import { ConsoleComponent } from './console/console.component'
     GamesComponent,
     GameDetailComponent,
     ConsoleComponent,
+    InputComponent,
+    ButtonComponent,
   ],
   imports: [
     BrowserModule,

client/app/button/button.component.css

@@ -0,0 +1,12 @@
+button
+{
+    border: none;
+    background-color: #21D4FD;
+   /* background-image: linear-gradient(45deg, #21D4FD 0%, #B721FF 100%);*/
+    height: 40px;
+    min-width: 150px;
+    border-radius: 40px;
+    margin:auto;
+    display: block;
+}
+

client/app/button/button.component.html

@@ -0,0 +1,3 @@
+<div>
+  <button>Envoyer</button>
+</div>

client/app/button/button.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ButtonComponent } from './button.component';
+
+describe('ButtonComponent', () => {
+  let component: ButtonComponent;
+  let fixture: ComponentFixture<ButtonComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ButtonComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

client/app/button/button.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-button',
+  templateUrl: './button.component.html',
+  styleUrls: ['./button.component.css']
+})
+export class ButtonComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

client/app/game-detail/game-detail.component.html

@@ -1,3 +1,7 @@
-<p>
-  game-detail works!
-</p>
+<h1 class="center">{{gameName}}</h1>  
+<div class="container" *ngIf="game">
+    <app-input *ngFor="let variable of game.vars" [label]="variable.label" [default_value]="variable.default"></app-input>
+    <app-button></app-button>
+</div>
+
+

client/app/game-detail/game-detail.component.ts

@@ -1,5 +1,8 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit,Input } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
+import { Game } from '../game';
+import { GameService } from '../game.service';
+
 
 @Component({
   selector: 'app-game-detail',
@@ -8,14 +11,24 @@ import { ActivatedRoute } from '@angular/router';
 })
 export class GameDetailComponent implements OnInit {
 
-  constructor(private route: ActivatedRoute) { 
+  game : Game;
+  gameName : string;
+
+  constructor(private route: ActivatedRoute,public gameService: GameService) { 
   }
 
   ngOnInit() {
+    this.getGame()
+
   }
 
+  
   getGame(): void {
-    const game = +this.route.snapshot.paramMap.get('id');
+    this.gameName = this.route.snapshot.paramMap.get('name');
+    this.gameService.getOneGame(this.gameName).subscribe(
+      game => this.game = game,
+      error => console.log(error)
+    )
   }
 
 }

client/app/game.service.ts

@@ -16,4 +16,8 @@ export class GameService {
   getGames() : Observable<Game[]>{
     return this.http.get<Game[]>("http://localhost:4200/api/games/");
   }
+
+  getOneGame(game_name) : Observable<Game>{
+    return this.http.get<Game>("http://localhost:4200/api/games/"+game_name);
+  }
 }

client/app/games/games.component.ts

@@ -1,8 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { Game } from '../game';
 import { GameService } from '../game.service';
-import { TestServiceService } from '../test-service.service';
-import { ActivatedRoute } from '@angular/router';
 
 
 

client/app/input/input.component.css

@@ -0,0 +1,27 @@
+div
+{
+    margin: 20px;
+}
+
+label.selected
+{
+    color: orange; /*var(--text-visible-color)*/
+}
+
+input[type=text]
+{
+    display: block;
+    background-color: #0003;
+    height: 30px;
+    width: 100%;
+    color:var(--text-color);
+    border: 1px solid var(--border-nav-color);
+    margin: 5px 0px;
+    padding: 5px;
+}
+
+input:focus
+{
+    border-color:rgba(72, 112, 193, 1);
+    color:var(--text-visible-color)
+}

client/app/input/input.component.html

@@ -0,0 +1,4 @@
+<div>
+  <label [ngClass]="{'selected': focus}">{{label}}</label>
+  <input (focus)="setFocus()" (focusout)="undoFocus()" type="text" value="{{default_value}}">
+</div>

client/app/input/input.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InputComponent } from './input.component';
+
+describe('InputComponent', () => {
+  let component: InputComponent;
+  let fixture: ComponentFixture<InputComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ InputComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(InputComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

client/app/input/input.component.ts

@@ -0,0 +1,32 @@
+import { Component, OnInit,Input } from '@angular/core';
+
+
+@Component({
+  selector: 'app-input',
+  templateUrl: './input.component.html',
+  styleUrls: ['./input.component.css']
+})
+export class InputComponent implements OnInit {
+
+  focus:boolean;
+  @Input() label: String;
+  @Input() default_value: String;
+
+
+  constructor() { }
+
+  ngOnInit() {
+    this.focus = false;
+  }
+
+  setFocus()
+  {
+    this.focus = true
+  }
+
+  undoFocus()
+  {
+    this.focus = false
+  }
+
+}

client/styles.css

@@ -32,6 +32,7 @@ app-root
 app-root > section
 {
     flex:1;
+    padding: 5px;
 }
 
 .center
@@ -66,3 +67,22 @@ nav a > div
     margin: 30px 10px;
 }
 
+.container
+{
+    width: 400px;
+    margin: auto;
+    padding: 20px;
+    box-shadow: 3px 2px 42px 0px rgba(0, 0, 0, 0.1);
+    background-color: rgba(67, 82, 109,0.5);
+    border-radius: 5px;
+    /*background: var(--main-bg-color)*/
+
+    /*background-color: #2a5b8c;*/
+    /*background-image: linear-gradient(33deg, #2a5b8c50 0%, #2b366b50 100%);*/
+
+}
+
+
+
+/**** stars */
+