base pieces

src/app/app-routing.module.ts

@@ -8,3 +8,4 @@ const routes: Routes = [];
   exports: [RouterModule]
 })
 export class AppRoutingModule { }
+

src/app/app.component.spec.ts

@@ -20,16 +20,16 @@ describe('AppComponent', () => {
     expect(app).toBeTruthy();
   });
 
-  it(`should have as title 'RLGTool'`, () => {
+  it(`should have as title 'puzzletest'`, () => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.componentInstance;
-    expect(app.title).toEqual('RLGTool');
+    expect(app.title).toEqual('puzzletest');
   });
 
   it('should render title', () => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('.content span')?.textContent).toContain('RLGTool app is running!');
+    expect(compiled.querySelector('.content span')?.textContent).toContain('puzzletest app is running!');
   });
 });

src/app/app.component.ts

@@ -6,5 +6,9 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
-  title = 'RLGTool';
+  title = 'puzzletest';
+
+  range(n: number): number[] {
+    return Array.from(Array(n), (_, i) => i);
+  }
 }
\ No newline at end of file

src/app/app.module.ts

@@ -3,10 +3,24 @@ import { BrowserModule } from '@angular/platform-browser';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { EducationalObjectiveComponent } from './pieces/educational-objective/educational-objective.component';
+import { RoleComponent } from './pieces/role/role.component';
+import { MissionContextComponent } from './pieces/mission-context/mission-context.component';
+import { GameEducationnalObjectiveComponent } from './pieces/game-educationnal-objective/game-educationnal-objective.component';
+import { GameContextComponent } from './pieces/game-context/game-context.component';
+import { TaskComponent } from './pieces/task/task.component';
+import { AnnexeTaskComponent } from './pieces/annexe-task/annexe-task.component';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    EducationalObjectiveComponent,
+    RoleComponent,
+    MissionContextComponent,
+    GameEducationnalObjectiveComponent,
+    GameContextComponent,
+    TaskComponent,
+    AnnexeTaskComponent
   ],
   imports: [
     BrowserModule,

src/app/pieces/annexe-task/annexe-task.component.html

+<div class="piece">
+    <div class="piece-attach piece-attach-left"></div>
+    <div class="piece-attach piece-attach-right"></div>
+
+    <div class="piece-form">
+        <h1>Annexe Task</h1>
+    </div>
+</div>

src/app/pieces/annexe-task/annexe-task.component.scss

+.piece {
+    --piece-background-color: #bccecc;
+
+    width: 400px;
+    height: 400px;
+    position: relative;
+    background-color: var(--piece-background-color);
+    //border: solid black 2px;
+
+    &-attach {
+        z-index: 1;
+        &-left {
+            border-top: solid black 1px;
+            border-right: solid black 1px;
+            width: 40px;
+            height: 40px;
+            background-color: var(--piece-background-color);
+            transform: translateY(-50%) rotate(45deg);
+            position: absolute;
+            right: -20px;
+            top: 200px;
+        }
+
+        &-right {
+            border-top: solid black 1px;
+            border-right: solid black 1px;
+            width: 40px;
+            height: 40px;
+            background-color: var(--background-color);
+            transform: translateY(-50%) rotate(45deg);
+            position: absolute;
+            left: -20px;
+            top: 200px;
+            //transform: translateY(-50%);
+        }
+    }
+
+    &-form {
+        display: flex;
+        position: relative;
+    }
+}
+
+.piece::after {
+    content: "";
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    border: 1px solid black;
+}
\ No newline at end of file

src/app/pieces/annexe-task/annexe-task.component.spec.ts

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

src/app/pieces/annexe-task/annexe-task.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-annexe-task',
+  templateUrl: './annexe-task.component.html',
+  styleUrls: ['./annexe-task.component.scss']
+})
+export class AnnexeTaskComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pieces/educational-objective/educational-objective.component.html

+<!--
+<div class="piece">
+    <textarea placeholder="Maitriser Moodle"></textarea>
+</div>
+-->
+
+<div class="piece">
+    <div class="piece-attach piece-attach-right"></div>
+    <div class="piece-attach piece-attach-left-top"></div>
+    <div class="piece-attach piece-attach-left-bottom"></div>
+    
+   
+    <div class="piece-form">
+        <div class="piece-form-title">Objectif pédagogique</div>
+        <!--<div class="piece-form-subtitle">Commun pour la mission 1</div>-->
+        <div class="piece-form-objective">
+            <label for="objective">Commun pour la mission 1</label>
+            <textarea name="objective" placeholder="Comprendre la dépendance de chaque rôle pour atteindre ses objectifs"></textarea>
+        </div>
+            
+    </div>
+    
+</div>
\ No newline at end of file

src/app/pieces/educational-objective/educational-objective.component.scss

+.piece {
+    --piece-background-color: #d0bbdb;
+
+    width: 400px;
+    height: 400px;
+    position: relative;
+    background-color: var(--piece-background-color);
+    &-attach {
+        z-index: 1;
+        border-right: solid black 1px;
+        &-right {
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            position: absolute;
+            right: -25px;
+            top: 50%;
+            transform: translateY(-50%);
+            background-color: var(--piece-background-color);
+        }
+        &-left {
+            &-top {
+                width: 50px;
+                height: 50px;
+                border-radius: 50%;
+                position: absolute;
+                left: -25px;
+                top: 25%;
+                background-color: var(--background-color);
+                transform: translateY(-50%);
+            }
+            &-bottom {
+                width: 50px;
+                height: 50px;
+                border-radius: 50%;
+                position: absolute;
+                left: -25px;
+                bottom: 25%;
+                background-color: var(--background-color);
+                transform: translateY(50%);
+            }
+        }
+    }
+    &-form {
+        height: 100%;
+        padding: 0px 10px 0px 35px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        z-index: 2;
+        &-title {
+            margin-top: 20px;
+            font-size: 25px;
+            font-weight: bold;
+        }
+        &-objective{
+            height: 100%;
+            margin-top: 10px;
+            display: flex;
+            flex-direction: column;
+            label {
+                font-size: 20px;
+                font-weight: lighter;
+            }
+            textarea {
+                margin-top: 10px;
+                border-radius: 20px;
+                padding: 10px;
+                border: none;
+                resize: none;
+                flex-grow: 1;
+                margin-bottom: 25px;
+                background-image: url("../../../assets/target.png");
+                background-position: center;
+                background-repeat: no-repeat;
+                background-size: 30%;
+            }
+        }
+    }
+}
+.piece::after {
+    content: "";
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    border: 1px solid black;
+}
\ No newline at end of file

src/app/pieces/educational-objective/educational-objective.component.spec.ts

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

src/app/pieces/educational-objective/educational-objective.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-educational-objective',
+  templateUrl: './educational-objective.component.html',
+  styleUrls: ['./educational-objective.component.scss']
+})
+export class EducationalObjectiveComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pieces/game-context/game-context.component.html

+<div class="piece">
+    <div class="piece-attach piece-attach-right-top"></div>
+    <div class="piece-attach piece-attach-right-bottom"></div>
+    
+    <div class="piece-form">
+        <div class="piece-form-title">Contexte du jeu</div>
+        <div class="piece-form-universe">
+            <label for="univers">Univers</label>
+            <input name="univers" type="text" placeholder="Réaliste"/>   
+        </div>
+        <div class="piece-form-support">
+            <label for="support">Medium / Support(s)</label>
+            <input name="support" type="text" placeholder="Ordinateur en 3D"/>   
+        </div>
+        <div class="piece-form-duration">
+            <label for="duration">Durée</label>
+            <input name="duration" type="text" placeholder="3h"/>   
+        </div>
+        <div class="piece-form-intrigue">
+            <label for="intrigue">Intrigue</label>
+            <textarea name="intrigue" placeholder="Vous habitez et travaillez dans un village et devez réussir à le faire vivre et prospérer. Si vous échouez, un riche promoteur risque de raser le village pour en faire un aéroport"></textarea>  
+        </div>
+        <div class="piece-form-other">
+            <label for="other">Autre</label>
+            <textarea name="other" placeholder="Test"></textarea>  
+        </div> 
+    </div>
+
+</div>

src/app/pieces/game-context/game-context.component.scss

+.piece {
+    --piece-background-color: #b6cc87; 
+
+    width: 400px;
+    height: 800px;
+    position: relative;
+    background-color: var(--piece-background-color);
+
+    &-attach {
+        z-index: 1;
+        border-right: solid black 1px;
+        border-top: solid black 1px;
+        border-bottom: solid black 1px;
+        &-right {
+            &-top {
+                position: absolute;
+                width: 20px;
+                height: 60px;
+                background-color: var(--piece-background-color);
+                top: 25%;
+                right: -20px;
+                transform: translateY(-50%);  
+            }
+
+            &-bottom {
+                position: absolute;
+                width: 20px;
+                height: 60px;
+                background-color: var(--piece-background-color);
+                bottom: 25%;
+                right: -20px;
+                transform: translateY(+50%);  
+            }
+
+        }
+    
+    }
+
+    &-form {
+        height: 100%;
+        padding: 0px 10px 0px 10px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        z-index: 2;
+        label {
+            font-size: 20px;
+            font-weight: lighter;
+            margin-top: 10px;
+            margin-bottom: 5px;
+        }  
+        input {
+            height: 40px;
+            border-radius: 10px;
+            border: none;
+            padding: 5px 10px 5px 10px;
+        }
+        textarea {
+            border-radius: 20px;
+            padding: 10px;
+            border: none;
+            resize: none;
+            flex-grow: 1;
+        }
+        &-title {
+            margin-top: 20px;
+            font-size: 25px;
+            font-weight: bold;
+        }
+        &-universe {
+            display: flex;
+            flex-direction: column;
+            margin-top: 10px;
+        }
+        &-support {
+            display: flex;
+            flex-direction: column;
+        }
+        &-duration {
+            display: flex;
+            flex-direction: column;
+        }
+        &-intrigue{
+            height: 40%;
+            margin-top: 10px;
+            display: flex;
+            flex-direction: column;
+        }
+        &-other {
+            display: flex;
+            flex-direction: column;
+            margin-bottom: 25px;
+            height: 40%;
+        }
+    }
+
+}
+.piece::after {
+    content: "";
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    border: 1px solid black;
+}
\ No newline at end of file

src/app/pieces/game-context/game-context.component.spec.ts

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

src/app/pieces/game-context/game-context.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-game-context',
+  templateUrl: './game-context.component.html',
+  styleUrls: ['./game-context.component.scss']
+})
+export class GameContextComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pieces/game-educationnal-objective/game-educationnal-objective.component.html

+<div class="piece">
+    <div class="piece-attach piece-attach-right-top"></div>
+    <div class="piece-attach piece-attach-right-bottom"></div>
+
+   
+    <div class="piece-form">
+        <div class="piece-form-title">Objectif pédagogique</div>
+        <div class="piece-form-objective">
+            <label for="objective">Commun pour la mission 1</label>
+            <textarea name="objective" placeholder="- Améliorer les softskills"></textarea>
+        </div>
+        <div class="piece-form-footer">Sorbonne Université, LIP6 - IMT Nord Europe</div>
+    </div>
+</div>

src/app/pieces/game-educationnal-objective/game-educationnal-objective.component.scss

+.piece {
+    --piece-background-color: #bac5d8; 
+
+    width: 400px;
+    height: 400px;
+    position: relative;
+    background-color: var(--piece-background-color);
+    &-attach {
+        z-index: 1;
+        border-right: solid black 1px;
+        &-right {
+            &-top {
+                position: absolute;
+                width: 50px;
+                height: 50px;
+                border-radius: 50%;
+                background-color: var(--piece-background-color);
+                top: 25%;
+                right: -25px;
+                transform: translateY(-50%);  
+            }
+            &-bottom {
+                position: absolute;
+                width: 50px;
+                height: 50px;
+                border-radius: 50%;
+                background-color: var(--piece-background-color);
+                bottom: 25%;
+                right: -25px;
+                transform: translateY(+50%);  
+            }
+        }
+    }
+    &-form {
+        height: 100%;
+        padding: 0px 10px 0px 10px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        z-index: 2;
+        &-title {
+            margin-top: 20px;
+            font-size: 25px;
+            font-weight: bold;
+        }
+        &-objective{
+            height: 100%;
+            margin-top: 10px;
+            display: flex;
+            flex-direction: column;
+            label {
+                font-size: 20px;
+                font-weight: lighter;
+            }
+            textarea {
+                margin-top: 10px;
+                border-radius: 20px;
+                padding: 10px;
+                border: none;
+                resize: none;
+                flex-grow: 1;
+                margin-bottom: 5px;
+                background-image: url("../../../assets/chest.png");
+                background-position: center;
+                background-repeat: no-repeat;
+                background-size: 30%;
+            }
+        }
+        &-footer {
+            color: white;
+            font-size: 14px;
+            margin-bottom: 5px;
+        }
+    }
+}
+.piece::after {
+    content: "";
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    border: 1px solid black;
+}
\ No newline at end of file

src/app/pieces/game-educationnal-objective/game-educationnal-objective.component.spec.ts

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

src/app/pieces/game-educationnal-objective/game-educationnal-objective.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-game-educationnal-objective',
+  templateUrl: './game-educationnal-objective.component.html',
+  styleUrls: ['./game-educationnal-objective.component.scss']
+})
+export class GameEducationnalObjectiveComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pieces/mission-context/mission-context.component.html

+<div class="piece">
+    <div class="piece-attach piece-attach-left-top"></div>
+    <div class="piece-attach piece-attach-right"></div>
+    <div class="piece-attach piece-attach-left-bottom"></div>
+
+    <div class="piece-form">
+        <div class="piece-form-title">Contexte de la mission 1</div>
+        <div class="piece-form-duration">
+            <label for="duration">Durée</label>
+            <input name="duration" type="text" placeholder="1h"/>   
+        </div>
+        <div class="piece-form-intrigue">
+            <label for="intrigue">Intrigue</label>
+            <textarea name="intrigue" placeholder="Faites prospérer les commerces essentiels du centre ville pour redresser l’économie du village et attirer de nouveaux habitants"></textarea>  
+        </div>
+        <div class="piece-form-other">
+            <label for="other">Autre</label>
+            <textarea name="other" placeholder="Test"></textarea>  
+        </div> 
+    </div>
+</div>

src/app/pieces/mission-context/mission-context.component.scss

+.piece {
+    --piece-background-color: #eac19b; 
+
+    width: 400px;
+    height: 800px;
+    position: relative;
+    background-color: var(--piece-background-color);
+
+    &-attach {
+        z-index: 1;
+        border-top: solid black 1px;
+        border-right: solid black 1px;
+        border-bottom: solid black 1px;
+        &-right {
+            position: absolute;
+            width: 20px;
+            height: 60px;
+            background-color: var(--piece-background-color);
+            top: 25%;
+            right: -20px;
+            transform: translateY(-50%);
+        }
+        &-left {
+            &-top {
+                position: absolute;
+                width: 20px;
+                height: 60px;
+                background-color: var(--background-color);
+                top: 25%;
+                left: -0px;
+                transform: translateY(-50%);
+            }
+            &-bottom {
+                position: absolute;
+                width: 20px;
+                height: 60px;
+                background-color: var(--background-color);
+                top: 75%;
+                left: 0px;
+                transform: translateY(-50%);
+            }
+        }
+    }
+
+    &-form {
+        height: 100%;
+        padding: 0px 10px 0px 35px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        z-index: 2;
+        label {
+            font-size: 20px;
+            font-weight: lighter;
+            margin-top: 10px;
+            margin-bottom: 5px;
+        }  
+        input {
+            height: 40px;
+            border-radius: 10px;
+            border: none;
+            padding: 5px 10px 5px 10px;
+        }
+        textarea {
+            border-radius: 20px;
+            padding: 10px;
+            border: none;
+            resize: none;
+            flex-grow: 1;
+        }
+        &-title {
+            margin-top: 20px;
+            font-size: 25px;
+            font-weight: bold;
+        }
+        &-duration {
+            display: flex;
+            flex-direction: column;
+            margin-top: 10px;
+        }
+        &-intrigue{
+            height: 55%;
+            margin-top: 10px;
+            display: flex;
+            flex-direction: column;
+        }
+        &-other {
+            display: flex;
+            flex-direction: column;
+            margin-bottom: 25px;
+            height: 30%;
+        }
+    }
+}
+
+.piece::after {
+    content: "";
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    border: 1px solid black;
+}
\ No newline at end of file

src/app/pieces/mission-context/mission-context.component.spec.ts

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

src/app/pieces/mission-context/mission-context.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-mission-context',
+  templateUrl: './mission-context.component.html',
+  styleUrls: ['./mission-context.component.scss']
+})
+export class MissionContextComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pieces/role/role.component.html

+<div class="piece">
+    <div class="piece-attach piece-attach-left-top"></div>
+    <div class="piece-attach piece-attach-right"></div>
+    <div class="piece-attach piece-attach-left-bottom"></div>
+
+    <div class="piece-form">
+        <div class="piece-form-title">Rôle 1</div>
+        <div class="piece-form-intitule">
+            <label for="intitule">Intitulé</label>
+            <input name="intitule" type="text" placeholder="Organisateur de goûters d'anniversaire"/>   
+        </div>
+        <div class="piece-form-name">
+            <label for="name">Nom de le quête</label>
+            <input name="name" type="text" placeholder="Fête d'anniversaire"/>   
+        </div>
+        <div class="piece-form-objective">
+            <label for="objective">Objectif(s) pédagoqique(s)</label>
+            <textarea name="objective" placeholder="- Savoir préparer une fête"></textarea>  
+        </div>
+        <div class="piece-form-reward">
+            <label for="reward">Récompenses</label>
+            <textarea name="reward" placeholder="- Gagner en compétence en événementiel"></textarea>  
+        </div> 
+    </div>
+</div>

src/app/pieces/role/role.component.scss

+.piece {
+    --piece-background-color: #9ad5ec;
+
+    width: 400px;
+    height: 800px;
+    position: relative;
+    background-color: var(--piece-background-color);
+
+    &-attach {
+        z-index: 1;
+        &-left {
+            &-top {
+                border-right: solid black 1px;
+                width: 50px;
+                height: 50px;
+                border-radius: 50%;
+                background-color: var(--background-color);
+                position: absolute;
+                top: 200px;
+                transform: translateY(-50%);
+                left: -25px;
+            }
+            &-bottom {
+                border-top: solid black 1px;
+                border-right: solid black 1px;
+                border-bottom: solid black 1px;
+                width: 20px;
+                height: 60px;
+                background-color: var(--background-color);
+                position: absolute;
+                top: 600px;
+                transform: translateY(-50%);
+                left: 0px;
+            }
+        }
+        &-right {
+            border-top: solid black 1px;
+            border-right: solid black 1px;
+            width: 40px;
+            height: 40px;
+            background-color: var(--piece-background-color);
+            transform: translateY(-50%) rotate(45deg);
+            position: absolute;
+            right: -20px;
+            top: 200px;
+        }
+    }
+    &-form {
+        height: 100%;
+        padding: 0px 10px 0px 35px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        z-index: 2;
+        label {
+            font-size: 20px;
+            font-weight: lighter;
+            margin-top: 10px;
+            margin-bottom: 5px;
+        }  
+        input {
+            height: 40px;
+            border-radius: 10px;
+            border: none;
+            padding: 5px 10px 5px 10px;
+        }
+        textarea {
+            border-radius: 20px;
+            padding: 10px;
+            border: none;
+            resize: none;
+            flex-grow: 1;
+        }
+        &-title {
+            margin-top: 20px;
+            font-size: 25px;
+            font-weight: bold;
+        }
+        &-intitule {
+            display: flex;
+            flex-direction: column;
+            margin-top: 10px;
+        }
+        &-name {
+            display: flex;
+            flex-direction: column;
+        }
+        &-objective {
+            height: 40%;
+            margin-top: 10px;
+            display: flex;
+            flex-direction: column;
+            textarea {
+                margin-bottom: 5px;
+                background-image: url("../../../assets/alchemist.png");
+                background-position: center;
+                background-repeat: no-repeat;
+                background-size: 30%;
+            }
+        }
+        &-reward {
+            display: flex;
+            flex-direction: column;
+            margin-bottom: 25px;
+            height: 40%;
+        }
+    }
+}
+
+.piece::after {
+    content: "";
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    border: 1px solid black;
+}
\ No newline at end of file

src/app/pieces/role/role.component.spec.ts

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

src/app/pieces/role/role.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-role',
+  templateUrl: './role.component.html',
+  styleUrls: ['./role.component.scss']
+})
+export class RoleComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pieces/task/task.component.html

+<div class="piece">
+    <div class="piece-attach piece-attach-left"></div>
+    <div class="piece-attach piece-attach-right"></div>
+
+    <div class="piece-form">
+        <div class="piece-form-top">
+            <input class="piece-form-top-identifier" name="identifier" type="text" placeholder="A" min="1" maxlength="5"/>
+            <div class="piece-form-top-title">Tâche</div>
+            <div class="piece-form-top-symbol"></div>
+        </div>
+        <textarea class="piece-form-content" placeholder="Acheter des citrons"></textarea>
+        <div class="piece-form-bottom">
+            <select class="piece-form-bottom-antecedent" name="antecedent" multiple>
+                <option selected value="0">/</option>
+                <option value="1">1</option> 
+            </select>
+            <div class="piece-form-bottom-duration">
+                <input name="value" type="text" value="1"/>
+                <select name="unite">
+                    <option selected value="UT">UT</option>
+                    <option value="min">min</option>
+                    <option value="tours">tours</option> 
+                </select>
+            </div>
+        </div>
+
+    </div>
+</div>

src/app/pieces/task/task.component.scss

+.piece {
+    --piece-background-color: #b9dfe3;
+
+    width: 400px;
+    height: 400px;
+    position: relative;
+    background-color: var(--piece-background-color);
+
+    &-attach {
+        z-index: 1;
+        &-left {
+            border-top: solid black 1px;
+            border-right: solid black 1px;
+            width: 40px;
+            height: 40px;
+            background-color: var(--piece-background-color);
+            transform: translateY(-50%) rotate(45deg);
+            position: absolute;
+            right: -20px;
+            top: 200px;
+        }
+
+        &-right {
+            border-top: solid black 1px;
+            border-right: solid black 1px;
+            width: 40px;
+            height: 40px;
+            background-color: var(--background-color);
+            transform: translateY(-50%) rotate(45deg);
+            position: absolute;
+            left: -20px;
+            top: 200px;
+        }
+    }
+
+    &-form {
+        height: 100%;
+        padding: 0px 10px 0px 35px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        z-index: 2;
+        input {
+            height: 40px;
+            border-radius: 10px;
+            border: none;
+            padding: 5px 10px 5px 10px;
+        }
+        textarea {
+            border-radius: 20px;
+            padding: 10px;
+            border: none;
+            resize: none;
+            flex-grow: 1;
+        }
+        select {
+            background-color: white;
+            border: none;
+            height: 50px;
+            border-radius: 10px;
+            padding: 5px 10px 5px 10px;
+        }
+        &-top {
+            margin-top: 20px;
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            &-identifier {
+                width: 50px;
+            }
+            &-title {
+                font-size: 25px;
+                font-weight: bold;
+            }
+            &-symbol {
+                width: 50px;
+                height: 40px;
+                background-color: white;
+                border-radius: 10px;
+                padding: 5px 10px 5px 10px;
+            }
+        }
+        &-content {
+            margin-top: 10px;
+            height: 100%;
+            margin-bottom: 10px;
+        }
+        &-bottom {
+            display: flex;
+            flex-direction: row;
+            margin-bottom: 25px;
+            justify-content: space-between;
+            &-duration {
+                input {
+                    border-top-right-radius: 0px;
+                    border-bottom-right-radius: 0px;
+                    width: 50px;
+                    z-index: 2;
+                }
+                select {
+                    width: 50px;
+                    border-top-left-radius: 0px;
+                    border-bottom-left-radius: 0px;
+                    z-index: 1;
+                }
+            }
+        }
+    }
+}
+
+.piece::after {
+    content: "";
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    border: 1px solid black;
+}
\ No newline at end of file

src/app/pieces/task/task.component.spec.ts

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

src/app/pieces/task/task.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-task',
+  templateUrl: './task.component.html',
+  styleUrls: ['./task.component.scss']
+})
+export class TaskComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>RLGTool</title>
+  <title>Puzzletest</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">

src/styles.scss

 /* You can add global styles to this file, and also import other style files */
+:root {
+    --background-color: white;
+}
+
+body {
+    background-color: var(--background-color);
+    //font-family: sans-serif;
+    font-family: Glacial Indifference;
+    //transform: scale(0.9);
+    //transform-origin: top left;
+}