Chat upgraded for dice rolls and system messages

src/app/chat/entry/entry.component.css

@@ -0,0 +1,35 @@
+.avatar {
+  background-image: url(src/assets/avatar.png);
+  background-size: cover;
+}
+
+.character {
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.header {
+  margin-bottom: -8px;
+  width: 100%;
+}
+
+/* this class is wrapped around header text by angular */
+/deep/ .mat-card-header-text {
+  width: 100%;
+}
+
+.messages {
+  /* margin-left: 4px; */
+}
+
+.timestamp {
+  color: #888888;
+  float: right;
+  font-weight: normal;
+  font-size: 14px;
+}
+
+.user {
+  font-size: 14px;
+}
+

src/app/chat/entry/entry.spec.ts

@@ -0,0 +1,7 @@
+import { Messages } from './entry';
+
+describe('Entry', () => {
+  it('should create an instance', () => {
+    expect(new Messages()).toBeTruthy();
+  });
+});

src/app/chat/entry/entry.ts

@@ -0,0 +1,25 @@
+export abstract class Entry {
+  public timestamp;
+
+  protected constructor() {
+    this.timestamp = new Date();
+  }
+}
+
+export class SystemMessage extends Entry {
+
+  constructor(public message: string,
+              public severity: SeverityEnum) {
+    super();
+  }
+
+  public get type(): string {
+    return 'system'
+  }
+}
+
+export enum SeverityEnum {
+  info = 'info',
+  warning = 'warning',
+  error = 'error',
+}

src/app/chat/entry/messages/messages.component.css

@@ -0,0 +1,6 @@
+.eye {
+  margin-right: 4px;
+  padding-left: 2px;
+  padding-right: 2px;
+  border: solid 1px;
+}

src/app/chat/entry/messages/messages.component.html

@@ -0,0 +1,16 @@
+<mat-card>
+  <mat-card-header class="header">
+    <div mat-card-avatar class="avatar"></div>
+    <mat-card-title class="character">
+      {{entry.character}}
+      <div class="timestamp">{{entry.timestamp | date:'HH:mm' }}</div>
+    </mat-card-title>
+    <mat-card-subtitle class="user">{{entry.user}}</mat-card-subtitle>
+  </mat-card-header>
+  <mat-card-content>
+    <div class="messages" *ngFor="let message of entry.messages">
+      <div>{{message.message}}</div>
+      <span *ngFor="let eye of message.eyes" class="eye">{{eye}}</span><span *ngIf="message.result">&rarr; {{message.result}}</span>
+    </div>
+  </mat-card-content>
+</mat-card>

src/app/chat/entry/messages/messages.component.spec.ts

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

src/app/chat/entry/messages/messages.component.ts

@@ -0,0 +1,18 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Messages } from './messages';
+
+@Component({
+  selector: 'app-entry',
+  templateUrl: './messages.component.html',
+  styleUrls: ['../entry.component.css', './messages.component.css']
+})
+export class MessagesComponent implements OnInit {
+
+  @Input() entry: Messages;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/chat/entry/messages/messages.spec.ts

@@ -0,0 +1,7 @@
+import { Messages } from './messages';
+
+describe('Messages', () => {
+  it('should create an instance', () => {
+    expect(new Messages()).toBeTruthy();
+  });
+});

src/app/chat/entry/messages/messages.ts

@@ -0,0 +1,23 @@
+import { Entry } from '../entry';
+import { Message } from '../../message';
+
+export class Messages extends Entry {
+  public messages: Array<Message> = new Array<Message>();
+
+  constructor(message: Message) {
+    super();
+    this.messages.push(message);
+  }
+
+  public get character(): string {
+    return this.messages[0].character;
+  }
+
+  public get type(): string {
+    return 'messages'
+  }
+
+  public get user(): string {
+    return this.messages[0].user;
+  }
+}

src/app/chat/entry/system-message/system-message.component.css

@@ -0,0 +1,3 @@
+.system-avatar {
+  background-size: cover;
+}

src/app/chat/entry/system-message/system-message.component.html

@@ -0,0 +1,15 @@
+<mat-card>
+  <mat-card-header class="header">
+    <div mat-card-avatar class="system-avatar">
+      <img [alt]="entry.severity" src="../../../../assets/build_circle-24px.svg">
+    </div>
+    <mat-card-title class="character">
+      {{entry.severity | titlecase}}
+      <div class="timestamp">{{entry.timestamp | date:'HH:mm' }}</div>
+    </mat-card-title>
+    <mat-card-subtitle class="user">System</mat-card-subtitle>
+  </mat-card-header>
+  <mat-card-content>
+      {{entry.message}}
+  </mat-card-content>
+</mat-card>

src/app/chat/entry/system-message/system-message.component.spec.ts

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

src/app/chat/entry/system-message/system-message.component.ts

@@ -0,0 +1,18 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { SystemMessage } from '../entry';
+
+@Component({
+  selector: 'app-system-entry',
+  templateUrl: './system-message.component.html',
+  styleUrls: ['../entry.component.css']
+})
+export class SystemMessageComponent implements OnInit {
+
+  @Input() entry: SystemMessage;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}