initial commit

- contains basic chat via websocket
- contains button to test websocket
- contains button to test rest api

src/app/chat/chat.component.css

@@ -0,0 +1,4 @@
+#chat-log {
+  height: calc(99% - 34px);
+  overflow-y: scroll;
+}

src/app/chat/chat.component.html

@@ -0,0 +1,7 @@
+<div id="chat-log">
+  <app-entry *ngFor="let entry of entries"
+             [entry]=entry>
+  </app-entry>
+</div>
+
+<app-input></app-input>

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

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

src/app/chat/chat.component.ts

@@ -0,0 +1,40 @@
+import { Component, OnInit } from '@angular/core';
+import { Entry } from './entry/entry';
+import { Message } from './message';
+import {SocketService} from '../socket/socket.service';
+
+@Component({
+  selector: 'app-chat',
+  templateUrl: './chat.component.html',
+  styleUrls: ['./chat.component.css']
+})
+export class ChatComponent implements OnInit {
+
+  entries = new Array<Entry>();
+
+  public addMessage(message: Message): void {
+    if ((this.entries.length > 0)
+        && (this.entries[this.entries.length - 1].character == message.sender)) {
+      this.entries[this.entries.length - 1].messages.push(message.message);
+    } else {
+      this.entries.push(new Entry(message.sender, 'Aangular User', message.message));
+    }
+    window.setTimeout(ChatComponent.scrollToBottom, 5);
+  }
+
+  static scrollToBottom() {
+    const chatLog = document.getElementById('chat-log');
+    chatLog.scrollTop = chatLog.scrollHeight;
+  }
+
+  constructor(private socketService: SocketService) {
+    socketService.onTestMessage().subscribe((message: Message) => {
+      console.log(message);
+      this.addMessage(message);
+    });
+  }
+
+  ngOnInit(): void {
+  }
+
+}

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.component.html

@@ -0,0 +1,15 @@
+<mat-card>
+  <mat-card-header class="header">
+    <div mat-card-avatar class="avatar"></div>
+    <mat-card-title class="character">
+      {{entry.character}}
+      <div class="timestamp">23:31</div>
+    </mat-card-title>
+    <mat-card-subtitle class="user">played by {{entry.user}}</mat-card-subtitle>
+  </mat-card-header>
+  <mat-card-content>
+    <div class="messages" *ngFor="let message of entry.messages">
+      {{message}}
+    </div>
+  </mat-card-content>
+</mat-card>

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

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

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

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

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

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

src/app/chat/entry/entry.ts

@@ -0,0 +1,10 @@
+export class Entry {
+
+  public messages: Array<string> = new Array<string>();
+
+  constructor(public character: string,
+              public user: string,
+              message: string) {
+    this.messages.push(message);
+  }
+}

src/app/chat/input/input.component.css

@@ -0,0 +1,6 @@
+#chat-input {
+  box-sizing: border-box;
+  height: 34px;
+  width: 100%;
+  margin-top: 1%;
+}

src/app/chat/input/input.component.html

@@ -0,0 +1,5 @@
+<input id="chat-input"
+       matInput
+       placeholder="Type here."
+       #box
+       (keyup.Enter)="onEnter(box.value); box.value=''">

src/app/chat/input/input.component.spec.ts

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

src/app/chat/input/input.component.ts

@@ -0,0 +1,23 @@
+import { Component, OnInit } from '@angular/core';
+import {SocketService} from '../../socket/socket.service';
+import {Message} from '../message';
+import {Events} from '../../socket/events-enum';
+
+@Component({
+  selector: 'app-input',
+  templateUrl: './input.component.html',
+  styleUrls: ['./input.component.css']
+})
+export class InputComponent implements OnInit {
+
+  onEnter(value: string): void {
+    const message = new Message('Aangular Frontend', value);
+    this.socketService.send(Events.publicMessage, message);
+  }
+
+  constructor(private socketService: SocketService) { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/chat/message.spec.ts

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

src/app/chat/message.ts

@@ -0,0 +1,7 @@
+export class Message {
+
+  constructor(public sender: string,
+              public message: string) {
+
+  }
+}