Skip to content

R
RLG Maker
Commit b634930b authored by Romain DELEAU's avatar Romain DELEAU
Browse files
Options

hover menu

parent 54b517a4
Hide whitespace changes
Inline Side-by-side
Showing with 414 additions and 33 deletions
angular.json
View file @ b634930b
......@@ -28,6 +28,7 @@
"src/assets"
],
"styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.scss"
],
"scripts": []
......@@ -96,6 +97,7 @@
"src/assets"
],
"styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.scss"
],
"scripts": []
......
package-lock.json
View file @ b634930b
......@@ -9,10 +9,12 @@
"version": "0.0.0",
"dependencies": {
"@angular/animations": "^14.0.0",
"@angular/cdk": "^14.0.0",
"@angular/common": "^14.0.0",
"@angular/compiler": "^14.0.0",
"@angular/core": "^14.0.0",
"@angular/forms": "^14.0.0",
"@angular/material": "^14.2.7",
"@angular/platform-browser": "^14.0.0",
"@angular/platform-browser-dynamic": "^14.0.0",
"@angular/router": "^14.0.0",
......@@ -390,6 +392,28 @@
"@angular/core": "14.2.12"
}
},
"node_modules/@angular/cdk": {
"version": "14.2.7",
"resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-14.2.7.tgz",
"integrity": "sha512-/tEsYaUbDSnfEmKVvAMramIptmhI67O+9STjOV0i+74XR2NospeK0fkbywIANu1n3w6AHGMotvRWJrjmbCElFg==",
"dependencies": {
"tslib": "^2.3.0"
},
"optionalDependencies": {
"parse5": "^5.0.0"
},
"peerDependencies": {
"@angular/common": "^14.0.0 || ^15.0.0",
"@angular/core": "^14.0.0 || ^15.0.0",
"rxjs": "^6.5.3 || ^7.4.0"
}
},
"node_modules/@angular/cdk/node_modules/parse5": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
"integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
"optional": true
},
"node_modules/@angular/cli": {
"version": "14.0.7",
"resolved": "https://registry.npmjs.org/@angular/cli/-/cli-14.0.7.tgz",
......@@ -605,6 +629,23 @@
"rxjs": "^6.5.3 || ^7.4.0"
}
},
"node_modules/@angular/material": {
"version": "14.2.7",
"resolved": "https://registry.npmjs.org/@angular/material/-/material-14.2.7.tgz",
"integrity": "sha512-WXHh8pEStpgkXZJmYOg2cI8BSHkV82ET4XTJCNPdveumaCn1UYnaNzsXD13kw5z+zmy8CufhFEzdXTrv/yt7KQ==",
"dependencies": {
"tslib": "^2.3.0"
},
"peerDependencies": {
"@angular/animations": "^14.0.0 || ^15.0.0",
"@angular/cdk": "14.2.7",
"@angular/common": "^14.0.0 || ^15.0.0",
"@angular/core": "^14.0.0 || ^15.0.0",
"@angular/forms": "^14.0.0 || ^15.0.0",
"@angular/platform-browser": "^14.0.0 || ^15.0.0",
"rxjs": "^6.5.3 || ^7.4.0"
}
},
"node_modules/@angular/platform-browser": {
"version": "14.2.12",
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-14.2.12.tgz",
......@@ -12552,6 +12593,23 @@
"tslib": "^2.3.0"
}
},
"@angular/cdk": {
"version": "14.2.7",
"resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-14.2.7.tgz",
"integrity": "sha512-/tEsYaUbDSnfEmKVvAMramIptmhI67O+9STjOV0i+74XR2NospeK0fkbywIANu1n3w6AHGMotvRWJrjmbCElFg==",
"requires": {
"parse5": "^5.0.0",
"tslib": "^2.3.0"
},
"dependencies": {
"parse5": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
"integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
"optional": true
}
}
},
"@angular/cli": {
"version": "14.0.7",
"resolved": "https://registry.npmjs.org/@angular/cli/-/cli-14.0.7.tgz",
......@@ -12688,6 +12746,14 @@
"tslib": "^2.3.0"
}
},
"@angular/material": {
"version": "14.2.7",
"resolved": "https://registry.npmjs.org/@angular/material/-/material-14.2.7.tgz",
"integrity": "sha512-WXHh8pEStpgkXZJmYOg2cI8BSHkV82ET4XTJCNPdveumaCn1UYnaNzsXD13kw5z+zmy8CufhFEzdXTrv/yt7KQ==",
"requires": {
"tslib": "^2.3.0"
}
},
"@angular/platform-browser": {
"version": "14.2.12",
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-14.2.12.tgz",
......
src/app/app.component.html
View file @ b634930b
......@@ -2,18 +2,16 @@
<div style="display: flex; flex-direction: column;" [style.z-index]="4">
<app-game-educationnal-objective></app-game-educationnal-objective>
<app-game-context></app-game-context>
<app-game-context [style.z-index]="2"></app-game-context>
</div>
<div style="display: flex; flex-direction: column;" [style.z-index]="3">
<app-educational-objective *ngFor="let i of range(1)" [style.z-index]="-i"></app-educational-objective>
<app-educational-objective></app-educational-objective>
<app-mission-context></app-mission-context>
<app-mission-context [style.z-index]="2"></app-mission-context>
</div>
<!--<app-educational-objective></app-educational-objective>-->
<app-role [style.z-index]="2" ></app-role>
<app-task [style.z-index]="1"></app-task>
......
src/app/app.component.spec.ts
View file @ b634930b
......@@ -20,16 +20,16 @@ describe('AppComponent', () => {
expect(app).toBeTruthy();
});
it(`should have as title 'puzzletest'`, () => {
it(`should have as title 'RLG Tool'`, () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance;
expect(app.title).toEqual('puzzletest');
expect(app.title).toEqual('RLG Tool');
});
it('should render title', () => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.nativeElement as HTMLElement;
expect(compiled.querySelector('.content span')?.textContent).toContain('puzzletest app is running!');
expect(compiled.querySelector('.content span')?.textContent).toContain('RLG Tool app is running!');
});
});
src/app/app.component.ts
View file @ b634930b
......@@ -6,7 +6,7 @@ import { Component } from '@angular/core';
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'puzzletest';
title = 'RLG Tool';
range(n: number): number[] {
return Array.from(Array(n), (_, i) => i);
......
src/app/app.module.ts
View file @ b634930b
......@@ -12,6 +12,8 @@ import { TaskComponent } from './pieces/task/task.component';
import { AnnexeTaskComponent } from './pieces/annexe-task/annexe-task.component';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatIconModule } from '@angular/material/icon';
@NgModule({
declarations: [
......@@ -28,6 +30,8 @@ import { FormsModule } from '@angular/forms';
BrowserModule,
AppRoutingModule,
FormsModule,
BrowserAnimationsModule,
MatIconModule,
],
providers: [],
bootstrap: [AppComponent]
......
src/app/pieces/educational-objective/educational-objective.component.html
View file @ b634930b
<!--
<div class="piece">
<textarea placeholder="Maitriser Moodle"></textarea>
</div>
-->
<div class="piece">
<div class="piece" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'">
<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-menu" [class]="displayMenu">
<mat-icon fontIcon="mode_comment" (click)="onClickComments()"></mat-icon>
<mat-icon fontIcon="add" (click)="onClickAdd()"></mat-icon>
<mat-icon fontIcon="backspace" (click)="onClickErase()"></mat-icon>
</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>
......
src/app/pieces/educational-objective/educational-objective.component.scss
View file @ b634930b
......@@ -5,6 +5,39 @@
height: 400px;
position: relative;
background-color: var(--piece-background-color);
&-menu {
position: absolute;
width: 150px;
height: 50px;
background-color: #f7f7f7;
opacity: 0.75;
z-index: -1;
top: -51px;
left: 50%;
transform: translateX(-50%);
transition: transform 0.5s ease;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border: solid black 1px;
display: flex;
padding: 15px 20px 15px 20px;
justify-content: space-around;
mat-icon {
cursor: pointer;
transform: scale(1.1);
}
mat-icon:hover {
opacity: 0.75;
}
}
&-menu.show {
transform: translateX(-50%) translateY(0);
}
&-menu.hide {
transform: translateX(-50%) translateY(100%);
}
&-attach {
z-index: 1;
border-right: solid black 1px;
......
src/app/pieces/educational-objective/educational-objective.component.ts
View file @ b634930b
......@@ -12,4 +12,18 @@ export class EducationalObjectiveComponent implements OnInit {
ngOnInit(): void {
}
displayMenu: String = 'hide';
onClickComments(): void {
}
onClickAdd(): void {
}
onClickErase(): void {
}
}
src/app/pieces/game-context/game-context.component.html
View file @ b634930b
<div class="piece">
<div class="piece" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'">
<div class="piece-attach piece-attach-right-top"></div>
<div class="piece-attach piece-attach-right-bottom"></div>
<div class="piece-menu" [class]="displayMenu">
<mat-icon fontIcon="mode_comment" (click)="onClickComments()"></mat-icon>
<mat-icon fontIcon="backspace" (click)="onClickErase()"></mat-icon>
<mat-icon fontIcon="more_vert" (click)="onClickDots()"></mat-icon>
</div>
<div class="piece-form">
<div class="piece-form-title">Contexte du jeu</div>
......
src/app/pieces/game-context/game-context.component.scss
View file @ b634930b
......@@ -6,6 +6,38 @@
position: relative;
background-color: var(--piece-background-color);
&-menu {
position: absolute;
width: 150px;
height: 50px;
background-color: #f7f7f7;
opacity: 0.75;
z-index: -1;
top: -51px;
left: 50%;
transform: translateX(-50%);
transition: transform 0.5s ease;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border: solid black 1px;
display: flex;
padding: 15px 20px 15px 20px;
justify-content: space-around;
mat-icon {
cursor: pointer;
transform: scale(1.1);
}
mat-icon:hover {
opacity: 0.75;
}
}
&-menu.show {
transform: translateX(-50%) translateY(0);
}
&-menu.hide {
transform: translateX(-50%) translateY(100%);
}
&-attach {
z-index: 1;
border-right: solid black 1px;
......
src/app/pieces/game-context/game-context.component.ts
View file @ b634930b
......@@ -12,4 +12,18 @@ export class GameContextComponent implements OnInit {
ngOnInit(): void {
}
displayMenu: String = 'hide';
onClickComments(): void {
}
onClickErase(): void {
}
onClickDots(): void {
}
}
src/app/pieces/game-educationnal-objective/game-educationnal-objective.component.html
View file @ b634930b
<div class="piece">
<div class="piece" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'">
<div class="piece-attach piece-attach-right-top"></div>
<div class="piece-attach piece-attach-right-bottom"></div>
<div class="piece-menu" [class]="displayMenu">
<mat-icon fontIcon="mode_comment" (click)="onClickComments()"></mat-icon>
<mat-icon fontIcon="backspace" (click)="onClickErase()"></mat-icon>
</div>
<div class="piece-form">
<div class="piece-form-title">Objectif pédagogique</div>
......
src/app/pieces/game-educationnal-objective/game-educationnal-objective.component.scss
View file @ b634930b
......@@ -5,6 +5,39 @@
height: 400px;
position: relative;
background-color: var(--piece-background-color);
&-menu {
position: absolute;
width: 150px;
height: 50px;
background-color: #f7f7f7;
opacity: 0.75;
z-index: -1;
top: -51px;
left: 50%;
transform: translateX(-50%);
transition: transform 0.5s ease;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border: solid black 1px;
display: flex;
padding: 15px 20px 15px 20px;
justify-content: space-around;
mat-icon {
cursor: pointer;
transform: scale(1.1);
}
mat-icon:hover {
opacity: 0.75;
}
}
&-menu.show {
transform: translateX(-50%) translateY(0);
}
&-menu.hide {
transform: translateX(-50%) translateY(100%);
}
&-attach {
z-index: 1;
border-right: solid black 1px;
......
src/app/pieces/game-educationnal-objective/game-educationnal-objective.component.ts
View file @ b634930b
......@@ -12,4 +12,14 @@ export class GameEducationnalObjectiveComponent implements OnInit {
ngOnInit(): void {
}
displayMenu: String = 'hide';
onClickComments(): void {
}
onClickErase(): void {
}
}
src/app/pieces/mission-context/mission-context.component.html
View file @ b634930b
<div class="piece">
<div class="piece" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'">
<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-menu" [class]="displayMenu">
<mat-icon fontIcon="mode_comment" (click)="onClickComments()"></mat-icon>
<mat-icon fontIcon="add" (click)="onClickAdd()"></mat-icon>
<mat-icon fontIcon="backspace" (click)="onClickErase()"></mat-icon>
</div>
<div class="piece-form">
<div class="piece-form-title">Contexte de la mission 1</div>
<div class="piece-form-duration">
......
src/app/pieces/mission-context/mission-context.component.scss
View file @ b634930b
......@@ -6,6 +6,38 @@
position: relative;
background-color: var(--piece-background-color);
&-menu {
position: absolute;
width: 150px;
height: 50px;
background-color: #f7f7f7;
opacity: 0.75;
z-index: -1;
top: -51px;
left: 50%;
transform: translateX(-50%);
transition: transform 0.5s ease;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border: solid black 1px;
display: flex;
padding: 15px 20px 15px 20px;
justify-content: space-around;
mat-icon {
cursor: pointer;
transform: scale(1.1);
}
mat-icon:hover {
opacity: 0.75;
}
}
&-menu.show {
transform: translateX(-50%) translateY(0);
}
&-menu.hide {
transform: translateX(-50%) translateY(100%);
}
&-attach {
z-index: 1;
border-top: solid black 1px;
......
src/app/pieces/mission-context/mission-context.component.ts
View file @ b634930b
......@@ -12,4 +12,18 @@ export class MissionContextComponent implements OnInit {
ngOnInit(): void {
}
displayMenu: String = 'hide';
onClickComments(): void {
}
onClickAdd(): void {
}
onClickErase(): void {
}
}
src/app/pieces/role/role.component.html
View file @ b634930b
<div class="piece">
<div class="piece" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'">
<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-menu" [class]="displayMenu">
<mat-icon fontIcon="mode_comment" (click)="onClickComments()"></mat-icon>
<mat-icon fontIcon="add" (click)="onClickAdd()"></mat-icon>
<mat-icon fontIcon="backspace" (click)="onClickErase()"></mat-icon>
</div>
<div class="piece-form">
<div class="piece-form-title">Rôle 1</div>
<div class="piece-form-intitule">
......
src/app/pieces/role/role.component.scss
View file @ b634930b
......@@ -6,6 +6,38 @@
position: relative;
background-color: var(--piece-background-color);
&-menu {
position: absolute;
width: 150px;
height: 50px;
background-color: #f7f7f7;
opacity: 0.75;
z-index: -1;
top: -51px;
left: 50%;
transform: translateX(-50%);
transition: transform 0.5s ease;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border: solid black 1px;
display: flex;
padding: 15px 20px 15px 20px;
justify-content: space-around;
mat-icon {
cursor: pointer;
transform: scale(1.1);
}
mat-icon:hover {
opacity: 0.75;
}
}
&-menu.show {
transform: translateX(-50%) translateY(0);
}
&-menu.hide {
transform: translateX(-50%) translateY(100%);
}
&-attach {
z-index: 1;
&-left {
......
src/app/pieces/role/role.component.ts
View file @ b634930b
......@@ -12,4 +12,18 @@ export class RoleComponent implements OnInit {
ngOnInit(): void {
}
displayMenu: String = 'hide';
onClickComments(): void {
}
onClickAdd(): void {
}
onClickErase(): void {
}
}
src/app/pieces/task/task.component.html
View file @ b634930b
<div class="piece" [ngStyle]="{'width': pieceWidth}">
<div class="piece" [ngStyle]="{'width': pieceWidth}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'">
<div class="piece-attach piece-attach-left"></div>
<div class="piece-attach piece-attach-right"></div>
<div class="piece-menu" [class]="displayMenu">
<mat-icon fontIcon="mode_comment" (click)="onClickComments()"></mat-icon>
<mat-icon fontIcon="add" (click)="onClickAdd()"></mat-icon>
<mat-icon fontIcon="backspace" (click)="onClickErase()"></mat-icon>
<mat-icon fontIcon="more_vert" (click)="onClickDots()"></mat-icon>
</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"/>
......@@ -10,7 +17,7 @@
</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>
<select class="piece-form-bottom-antecedent" name="antecedent">
<option selected value="0">/</option>
<option value="1">1</option>
</select>
......
src/app/pieces/task/task.component.scss
View file @ b634930b
......@@ -7,6 +7,38 @@
background-color: var(--piece-background-color);
transition: all 0.5s ease;
&-menu {
position: absolute;
width: 150px;
height: 50px;
background-color: #f7f7f7;
opacity: 0.75;
z-index: -1;
top: -51px;
left: 50%;
transform: translateX(-50%);
transition: transform 0.5s ease;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border: solid black 1px;
display: flex;
padding: 15px 20px 15px 20px;
justify-content: space-around;
mat-icon {
cursor: pointer;
transform: scale(1.1);
}
mat-icon:hover {
opacity: 0.75;
}
}
&-menu.show {
transform: translateX(-50%) translateY(0);
}
&-menu.hide {
transform: translateX(-50%) translateY(100%);
}
&-attach {
z-index: 1;
&-left {
......@@ -69,6 +101,7 @@
justify-content: space-between;
&-identifier {
width: 50px;
text-align: center;
}
&-title {
font-size: 25px;
......@@ -97,6 +130,7 @@
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
width: 20px;
text-align: center;
z-index: 2;
}
select {
......
src/app/pieces/task/task.component.ts
View file @ b634930b
......@@ -12,13 +12,15 @@ export class TaskComponent implements OnInit {
ngOnInit(): void {
}
displayMenu: String = 'hide';
durationUnit: String = 'UT';
duration: number = 1;
pieceWidth = '400px';
pieceWidth: String = '400px';
durationChange():void {
durationChange(): void {
if(this.durationUnit === 'UT') {
if(this.duration == 1) {
if(this.duration <= 1) {
this.pieceWidth = '400px';
} else if(this.duration == 2) {
this.pieceWidth = '800px';
......@@ -28,9 +30,24 @@ export class TaskComponent implements OnInit {
} else {
this.pieceWidth = '400px';
}
console.log('largeur : '+this.pieceWidth);
console.log('durationUnit : '+this.durationUnit);
console.log('duration : '+this.duration);
}
onClickComments(): void {
}
onClickAdd(): void {
}
onClickErase(): void {
}
onClickDots(): void {
}
}
src/index.html
View file @ b634930b
......@@ -2,10 +2,13 @@
<html lang="en">
<head>
<meta charset="utf-8">
<title>Puzzletest</title>
<title>RLG Tool</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!--<link rel="preconnect" href="https://fonts.gstatic.com">-->
<!--<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<app-root></app-root>
......
src/styles.scss
View file @ b634930b
......@@ -4,9 +4,9 @@
}
body {
margin-top: 60px;
background-color: var(--background-color);
//font-family: sans-serif;
font-family: Glacial Indifference;
//transform: scale(0.9);
//transform-origin: top left;
}
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment