app.component.html 2.88 KB
<div class="container">
    <div class="container-main" appDragScroll>
        <div class="container-main-scenario" style="display: flex;" appMouseWheelZoom>
            <div style="display: flex; flex-direction: column;" [style.z-index]="4">
                <app-game-educationnal-objective></app-game-educationnal-objective>
                <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></app-educational-objective>
                
                <app-mission-context [style.z-index]="2"></app-mission-context>
                
            </div>

            <div [style.z-index]="2">
                <div style="display: flex;">
                    <app-role [style.z-index]="10"></app-role>
                    <div [style.z-index]="1">
                        <div style="display: flex;" [style.z-index]="2">
                            <app-task [style.z-index]="2"></app-task>
                            <app-task [style.z-index]="1"></app-task>  
                        </div>
                        <div style="display: flex;" [style.z-index]="2">
                            <app-annexe-task [style.z-index]="2"></app-annexe-task>
                        </div>
                        <div style="display: flex;" [style.z-index]="2">
                            <app-random-event [style.z-index]="2"></app-random-event>
                        </div>
                    </div>
                </div>
                <div style="display: flex;">
                    <app-role [style.z-index]="10"></app-role>
                    <div [style.z-index]="1">
                        <div style="display: flex;" [style.z-index]="2">
                            <app-task [style.z-index]="3"></app-task>
                            <app-annexe-task [style.z-index]="2"></app-annexe-task>
                            <app-random-event [style.z-index]="1"></app-random-event>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
    </div> 

    <div class="container-sider">
        <app-comments class="container-sider-element"></app-comments>
        <app-repeat class="container-sider-element"></app-repeat>
        <app-characters class="container-sider-element"></app-characters>
        <app-rules class="container-sider-element"></app-rules>
    </div>

    <div class="container-settings">
        <div class="container-settings-mode">
            <input name="unity" type="checkbox"/>
            <label for="unity">Intégrer le jeu sous Unity</label>
        </div>
        <button mat-mini-fab color="white"><mat-icon fontIcon="save"></mat-icon></button>
        <button mat-mini-fab color="white"><mat-icon fontIcon="upload-file"></mat-icon></button>

    </div>


</div>