Fix various fixme (Element names / epic fail roll + other small stuff)

src/app/actor/character-sheet-stats.component.ts

@@ -94,7 +94,7 @@ export class CharacterSheetStatsComponent implements OnInit, OnDestroy {
         this.characterMaxHealth$ = this.character$.pipe(selectCharacterMaxHealth());
         this.characterBasicStatsValues$ = this.character$.pipe(selectCharacterBasicStats());
         this.characterMagicArmor$ = this.character$.pipe(selectCharacterMagicArmor(this.systemDataDatabaseService));
-        this.characterMovement$ = this.character$.pipe(selectCharacterMovement());
+        this.characterMovement$ = this.character$.pipe(selectCharacterMovement(this.systemDataDatabaseService));
         this.characterRace$ = this.character$.pipe(selectCharacterRaceDefinition(this.systemDataDatabaseService));
         this.characterJob$ = this.character$.pipe(selectCharacterJobDefinition(this.systemDataDatabaseService));
         this.characterMagicArmorRemaining$ = this.characterMagicArmor$.pipe(map(x => x?.remainingArmorPoint || 0));

src/app/chat/chat-wrapper.component.html

@@ -3,13 +3,16 @@
         <lvl0-speciality-roll-chat-message [data]="messageData.data" />
     }
     @case ('spell-roll') {
-        <lvl0-spell-roll-chat-message [data]="messageData.data" />
+        <lvl0-spell-roll-chat-message [chatMessageId]="chatMessageId" [data]="messageData.data" />
     }
     @case ('item-use') {
         <lvl0-item-use-chat-message [data]="messageData.data" />
     }
     @case ('skill-roll') {
-        <lvl0-skill-roll-chat-message [data]="messageData.data" />
+        <lvl0-skill-roll-chat-message [chatMessageId]=chatMessageId [data]="messageData.data" />
+    }
+    @case ('spell-epic-fail') {
+        <lvl0-spell-epic-fail-chat-message [data]="messageData.data" />
     }
     @default {
         Unsupported chat message {{ $any(messageData).type }}

src/app/chat/chat-wrapper.component.ts

@@ -8,6 +8,8 @@ import {Lvl0ChatMessage, Lvl0MessageTypes} from './lvl0-chat-message.types';
 export class ChatWrapperComponent implements OnInit {
     @Input('type')
     messageType: Lvl0MessageTypes;
+    @Input('int')
+    chatMessageId: string;
 
     @Input('rawData')
     rawData: string;

src/app/chat/chat.module.ts

@@ -10,6 +10,7 @@ import { SpellRollChatValueComponent } from './spell-roll-chat-value.component';
 import {MarkdownModule} from '../markdown/markdown.module';
 import { ItemUseChatMessageComponent } from './item-use-chat-message.component';
 import { SkillRollChatMessageComponent } from './skill-roll-chat-message.component';
+import {SpellEpicFailChatMessageComponent} from './spell-epic-fail-chat-message.component';
 
 @NgModule({
     declarations: [
@@ -20,6 +21,7 @@ import { SkillRollChatMessageComponent } from './skill-roll-chat-message.compone
         SpellRollChatValueComponent,
         ItemUseChatMessageComponent,
         SkillRollChatMessageComponent,
+        SpellEpicFailChatMessageComponent,
     ],
     imports: [
         CommonModule,

src/app/chat/lvl0-chat-message.types.ts

@@ -2,13 +2,18 @@ import {SpecialityRollChatMessageData} from './speciality-roll-chat-message.comp
 import {SpellRollChatMessageData} from './spell-roll-chat-message.component';
 import {ItemUseChatMessageData} from './item-use-chat-message.component';
 import {SkillRollChatMessageData} from './skill-roll-chat-message.component';
+import {SpellEpicFailChatMessageData} from './spell-epic-fail-chat-message.component';
 
 export type SpecialityRollChatMessageType = 'speciality-roll';
 export type SpellRollChatMessageType = 'spell-roll';
+export type SpellEpicFailChatMessageType = 'spell-epic-fail';
 export type SkillRollChatMessageType = 'skill-roll';
 export type ItemUseChatMessageType = 'item-use';
-export type Lvl0MessageTypes =
-    SpecialityRollChatMessageType;
+export type Lvl0MessageTypes = SpecialityRollChatMessageType
+    | SpellRollChatMessageType
+    | ItemUseChatMessageType
+    | SkillRollChatMessageType
+    | SpellEpicFailChatMessageType;
 
 export type Lvl0ChatMessage = {
     type: SpecialityRollChatMessageType
@@ -22,4 +27,7 @@ export type Lvl0ChatMessage = {
 } | {
     type: SkillRollChatMessageType,
     data: SkillRollChatMessageData
+} | {
+    type: SpellEpicFailChatMessageType,
+    data: SpellEpicFailChatMessageData
 }

src/app/chat/skill-roll-chat-message.component.html

@@ -1,5 +1,5 @@
 <ng-container *ngIf="skillDefinition">
-    <h3>{{ skillDefinition.name }}</h3>
+    <div class="skill-name">{{ skillDefinition.name }}</div>
     <div class="roll-result">
         <lvl0-roll-detail [roll]="data.testRoll">
             <i class="fa fa-dice"></i>
@@ -8,44 +8,44 @@ <h3>{{ skillDefinition.name }}</h3>
         </lvl0-roll-detail>
     </div>
 </ng-container>
-@if(data.extraData; as extraData) {
-    @switch (extraData.kind) {
+@if(data.extraData) {
+    @switch (data.extraData.kind) {
         @case ('cast-spell') {
-            <lvl0-spell-roll-chat-message [data]="extraData.data"></lvl0-spell-roll-chat-message>
+            <lvl0-spell-roll-chat-message [chatMessageId]=chatMessageId [data]="data.extraData.data"></lvl0-spell-roll-chat-message>
         }
         @case ('damage') {
             <hr>
             <div class="weapon">
-                <span class="icon"><img width="48" height="48" [src]="extraData.data.weapon.icon"></span>
-                <span class="name">{{extraData.data.weapon.name}}</span>
-                <span class="details">{{extraData.data.weapon.damageRollFormula}}<span *ngIf="extraData.data.weapon.element"> ({{extraData.data.weapon.element}})</span></span>
+                <span class="icon"><img width="32" height="32" [src]="data.extraData.data.weapon.icon"></span>
+                <span class="name">{{data.extraData.data.weapon.name}}</span>
+                <span class="details">{{data.extraData.data.weapon.damageRollFormula}}<span *ngIf="data.extraData.data.weapon.element"> ({{data.extraData.data.weapon.element | translate: 'Element.NameForWeaponDamage'}})</span></span>
             </div>
-            <div class="weapon" *ngIf="extraData.data.ammunition">
-                <span class="icon"><img width="48" height="48" [src]="extraData.data.ammunition.icon"></span>
-                <span class="name">{{extraData.data.ammunition.name}}</span>
-                <span class="details">{{extraData.data.ammunition.damageRollFormula}}<span *ngIf="extraData.data.ammunition.element"> ({{extraData.data.ammunition.element}})</span></span>
+            <div class="weapon" *ngIf="data.extraData.data.ammunition">
+                <span class="icon"><img width="32" height="32" [src]="data.extraData.data.ammunition.icon"></span>
+                <span class="name">{{data.extraData.data.ammunition.name}}</span>
+                <span class="details">{{data.extraData.data.ammunition.damageRollFormula}}<span *ngIf="data.extraData.data.ammunition.element"> ({{data.extraData.data.ammunition.element | translate: 'Element.NameForWeaponDamage'}})</span></span>
             </div>
             <hr>
             <div class="damage">
                 <ng-container *ngIf="data.result == 'success' || data.result == 'criticalSuccess'">
-                    <lvl0-roll-detail [roll]="extraData.data.damageRoll!">
-                        Dégâts: {{ extraData.data.damageRoll?.total }} ({{ extraData.data.damageElement }})
+                    <lvl0-roll-detail [roll]="data.extraData.data.damageRoll!">
+                        Dégâts: <i class="fa fa-dice"></i> {{ data.extraData.data.damageRoll?.total }} @if(data.extraData.data.damageElement) {({{ data.extraData.data.damageElement | translate: 'Element.NameForWeaponDamage'}})}
                     </lvl0-roll-detail>
                 </ng-container>
             </div>
         }
         @case ('shield-damage') {
             <hr>
             <div class="weapon">
-                <span class="icon"><img width="48" height="48" [src]="extraData.data.shield.icon"></span>
-                <span class="name">{{extraData.data.shield.name}}</span>
-                <span class="details">Dégâts: {{extraData.data.shield.damageRollFormula}}<span *ngIf="extraData.data.shield.element"> ({{extraData.data.shield.element}})</span></span>
+                <span class="icon"><img width="32" height="32" [src]="data.extraData.data.shield.icon"></span>
+                <span class="name">{{data.extraData.data.shield.name}}</span>
+                <span class="details">Dégâts: {{data.extraData.data.shield.damageRollFormula}}<span *ngIf="data.extraData.data.shield.element"> ({{data.extraData.data.shield.element | translate: 'Element.NameForWeaponDamage'}})</span></span>
             </div>
             <hr>
             <div class="damage">
                 <ng-container *ngIf="data.result == 'success' || data.result == 'criticalSuccess'">
-                    <lvl0-roll-detail [roll]="extraData.data.damageRoll!">
-                        Dégâts: {{ roundDamageUp(extraData.data.damageRoll?.total) }}
+                    <lvl0-roll-detail [roll]="data.extraData.data.damageRoll!">
+                        Dégâts: <i class="fa fa-dice"></i> {{ roundDamageUp(data.extraData.data.damageRoll?.total) }}
                     </lvl0-roll-detail>
                 </ng-container>
             </div>

src/app/chat/skill-roll-chat-message.component.scss

@@ -1,5 +1,5 @@
 :host {
-  h3 {
+  .skill-name {
     text-align: center;
     font-size: 1.5em;
   }
@@ -13,15 +13,14 @@
     display: grid;
     grid-template-areas: "icon name" "icon details";
     grid-template-columns: auto 1fr;
-    gap: 8px;
+    column-gap: 8px;
 
     .icon {
       grid-area: icon;
     }
 
     .name {
       grid-area: name;
-      font-size: 1.25em;
     }
 
     .details {

src/app/chat/skill-roll-chat-message.component.ts

@@ -51,6 +51,7 @@ export type SkillRollExtraDataItemInfoMessageData = {
 })
 export class SkillRollChatMessageComponent implements OnInit {
     @Input() data!: SkillRollChatMessageData;
+    @Input() chatMessageId!: string;
 
     skillDefinition: SkillDefinition;
 

src/app/chat/speciality-roll-chat-message.component.html

@@ -29,7 +29,7 @@
                     <div class="damage">
                         <ng-container *ngIf="arrow.result == 'success' || arrow.result == 'criticalSuccess'">
                             <lvl0-roll-detail [roll]="arrow.damageRoll">
-                                Dégâts: {{ arrow.damage }} ({{ arrow.element }})
+                                Dégâts: {{ arrow.damage }} ({{ arrow.element | translate: 'Element.Name' }})
                             </lvl0-roll-detail>
                         </ng-container>
                     </div>

src/app/chat/spell-epic-fail-chat-message.component.html

@@ -0,0 +1,7 @@
+<div class="title">Échec critique</div>
+<div class="result">
+    <i class="fas fa-dice"></i>
+    <lvl0-roll-detail [roll]="data.roll">{{ data.roll.total }}</lvl0-roll-detail>
+</div>
+<div class="description"><span class="label">{{ magicEpicFailEffect.name }}</span> {{ magicEpicFailEffect.description }}
+</div>

src/app/chat/spell-epic-fail-chat-message.component.scss

@@ -0,0 +1,21 @@
+:host {
+  .title {
+    text-align: center;
+    font-size: 20px;
+  }
+
+  * + * {
+    margin-bottom: 8px;
+  }
+
+  .result {
+    text-align: center;
+    font-size: 20px;
+  }
+
+  .description {
+    .label {
+      font-weight: bold;
+    }
+  }
+}

src/app/chat/spell-epic-fail-chat-message.component.ts

@@ -0,0 +1,28 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {MagicEpicFailDefinition, MagicEpicFailRepository} from '../../repositories';
+import {ChatRoll} from '../shared/roll';
+
+export type SpellEpicFailChatMessageData = {
+    roll: ChatRoll
+    epicFailEffectId: string
+}
+
+@Component({
+    selector: 'lvl0-spell-epic-fail-chat-message',
+    templateUrl: './spell-epic-fail-chat-message.component.html',
+    styleUrl: './spell-epic-fail-chat-message.component.scss'
+})
+export class SpellEpicFailChatMessageComponent implements OnInit {
+    @Input() data!: SpellEpicFailChatMessageData;
+
+    magicEpicFailEffect: MagicEpicFailDefinition;
+
+    constructor(
+        private readonly magicEpicFailRepository: MagicEpicFailRepository
+    ) {
+    }
+
+    ngOnInit(): void {
+        this.magicEpicFailEffect = this.magicEpicFailRepository.getMagicEpicFailEffectById(this.data.epicFailEffectId);
+    }
+}

src/app/chat/spell-roll-chat-message.component.html

@@ -11,30 +11,34 @@ <h3>{{spellDefinition.name}} - Arcane {{spellDefinition.level}}</h3>
         </div>
     </div>
     <div class="description" [innerHTML]="data.spell.data.description | markdown"></div>
-    <div class="packed-values">
-        <div class="spell-value">
-            <span class="label">{{ 'cost' | translate:'Spell.Label' }}:</span>
-            <span class="value">{{data.spell.data.effectiveCost}} mana</span>
+    <div class="stats">
+        <div class="packed-values">
+            <div class="spell-value">
+                <span class="label">{{ 'cost' | translate:'Spell.Label' }}:</span>
+                <span class="value">{{data.spell.data.effectiveCost}} mana</span>
+            </div>
+            <lvl0-spell-roll-chat-value *ngIf="data.spell.data.area" [name]="'area'" [value]="data.spell.data.area"/>
+            <lvl0-spell-roll-chat-value *ngIf="data.spell.data.duration" [name]="'duration'" [value]="data.spell.data.duration"/>
+            <lvl0-spell-roll-chat-value *ngIf="data.spell.data.distance" [name]="'distance'" [value]="data.spell.data.distance"/>
+        </div>
+        <div class="values">
+            <lvl0-spell-roll-chat-value *ngIf="data.spell.data.damage" [name]="'damage'" [value]="data.spell.data.damage"/>
+            <lvl0-spell-roll-chat-value *ngIf="data.spell.data.bonus" [name]="'bonus'" [value]="data.spell.data.bonus"/>
+            <lvl0-spell-roll-chat-value *ngIf="data.spell.data.heal" [name]="'heal'" [value]="data.spell.data.heal"/>
+            <lvl0-spell-roll-chat-value *ngIf="data.spell.data.resilience" [name]="'resilience'" [value]="data.spell.data.resilience"/>
+            <lvl0-spell-roll-chat-value *ngIf="data.spell.context.criticalSuccess && data.spell.data.criticalSuccess" [name]="'criticalSuccess'" [value]="data.spell.data.criticalSuccess"/>
         </div>
-        <lvl0-spell-roll-chat-value *ngIf="data.spell.data.area" [name]="'area'" [value]="data.spell.data.area"/>
-        <lvl0-spell-roll-chat-value *ngIf="data.spell.data.duration" [name]="'duration'" [value]="data.spell.data.duration"/>
-        <lvl0-spell-roll-chat-value *ngIf="data.spell.data.distance" [name]="'distance'" [value]="data.spell.data.distance"/>
-    </div>
-    <div class="values">
-        <lvl0-spell-roll-chat-value *ngIf="data.spell.data.damage" [name]="'damage'" [value]="data.spell.data.damage"/>
-        <lvl0-spell-roll-chat-value *ngIf="data.spell.data.bonus" [name]="'bonus'" [value]="data.spell.data.bonus"/>
-        <lvl0-spell-roll-chat-value *ngIf="data.spell.data.heal" [name]="'heal'" [value]="data.spell.data.heal"/>
-        <lvl0-spell-roll-chat-value *ngIf="data.spell.data.resilience" [name]="'resilience'" [value]="data.spell.data.resilience"/>
-        <lvl0-spell-roll-chat-value *ngIf="data.spell.context.criticalSuccess && data.spell.data.criticalSuccess" [name]="'criticalSuccess'" [value]="data.spell.data.criticalSuccess"/>
-    </div>
-    <div *ngIf="data.spell.context.epicFail" class="epic-fail">
-        <!-- FIXME Only show for the user who rolled it -->
-        <button (click)="rollEpicFail()"><i class="fas fa-dice"></i> Échec critique</button>
     </div>
-
-    <ng-container *ngIf="data.spell.data.actions">
-        <div *ngFor="let action of data.spell.data.actions">
-            <button (click)="executeAction(action)">{{action.name}}</button>
+    <div class="actions">
+        <div *ngIf="data.spell.context.epicFail" class="epic-fail">
+            <!-- FIXME Only show for the user who rolled it -->
+            <button lvl0Ripple (click)="rollEpicFail()"><i class="fas fa-dice"></i> Échec critique</button>
         </div>
-    </ng-container>
+
+        <ng-container *ngIf="data.spell.data.actions">
+            <div *ngFor="let action of data.spell.data.actions">
+                <button lvl0Ripple (click)="executeAction(action)">{{action.name}}</button>
+            </div>
+        </ng-container>
+    </div>
 </div>

src/app/chat/spell-roll-chat-message.component.scss

@@ -1,4 +1,7 @@
 .spell {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
   .header {
     display: flex;
     align-items: center;

src/app/chat/spell-roll-chat-message.component.ts

@@ -2,6 +2,7 @@ import {Component, Input, OnInit} from '@angular/core';
 import {ChatSpell, SpellAction} from '../spell/spell';
 import {SpellDefinition, SpellRepository} from '../../repositories';
 import {SpellActionService} from '../spell/spell-action.service';
+import {SpellChatService} from '../spell/spell-chat.service';
 
 export type SpellRollChatMessageData = {
     spell: ChatSpell;
@@ -14,12 +15,14 @@ export type SpellRollChatMessageData = {
 })
 export class SpellRollChatMessageComponent implements OnInit {
     @Input() data!: SpellRollChatMessageData;
+    @Input() chatMessageId!: string;
 
     spellDefinition?: SpellDefinition;
 
     constructor(
         private readonly spellRepository: SpellRepository,
-        private readonly spellActionService: SpellActionService
+        private readonly spellActionService: SpellActionService,
+        private readonly spellChatService: SpellChatService,
     ) {
     }
 
@@ -32,29 +35,6 @@ export class SpellRollChatMessageComponent implements OnInit {
     }
 
     rollEpicFail() {
-        // FIXME: Update this message with the roll
-        //
-        // let epiFailRoll = await this.rollFactory.createRoll('2d6');
-        // const messageData = epiFailRoll.toMessage({}, {create: false});
-
-        // let effect = this.magicEpicFailRepository.getMagicEpicFailEffect(epiFailRoll.total!);
-        // private readonly magicEpicFailRepository: MagicEpicFailRepository
-
-        /*
-        *
-    async roll(): Promise<void> {
-        let epiFailRoll = await this.rollFactory.createRoll('2d6');
-        const messageData = epiFailRoll.toMessage({}, {create: false});
-
-        let effect = this.magicEpicFailRepository.getMagicEpicFailEffect(epiFailRoll.total!);
-
-        let content = `<div class="critical-failure-chat">
-    <div class="title">Echec critique</div>
-    <div class="result"><i class="fas fa-dice"></i> ${epiFailRoll.total}</div>
-    <div class="description"><span class="label">${effect.name}</span> ${effect.description}</div>
-    <div class="roll">${await epiFailRoll.render()}</div>
-</div>`;
-        await ChatMessage.create({...messageData, content});
-    }*/
+        this.spellChatService.rollSpellCriticalFailureAndSendToChat(this.data.spell);
     }
 }

src/app/chat/spell-roll-chat-value.component.scss

@@ -4,6 +4,7 @@
   align-items: center;
   gap: 1ch;
   .label {
+    flex-shrink: 0;
     font-weight: bold;
     align-self: start;
   }

src/app/data-accessor/selectors/character-effects-selector.ts

@@ -16,6 +16,7 @@ export interface CharacterEffectModifier {
     skill?: SkillDefinition;
     stat?: string;
     value: number;
+    operation?: 'ADD' | 'MULTIPLY';
 }
 
 export interface CharacterEffectArmor {

src/app/data-accessor/selectors/character-modifiers-selector.ts

@@ -8,6 +8,7 @@ export type ActiveCharacterModifier = {
     stat: ActorStatNames;
     value: number;
     name: string;
+    operation?: 'ADD' | 'MULTIPLY';
 }
 
 export function selectCharacterModifiers() {