Issue #78

src/app/class/chat-message.ts

@@ -16,6 +16,7 @@ export interface ChatMessageContext {
   tag?: string;
   dicebot?: string;
   imageIdentifier?: string;
+  color?: string;
 }
 
 @SyncObject('chat')
@@ -27,6 +28,7 @@ export class ChatMessage extends ObjectNode implements ChatMessageContext {
   @SyncVar() tag: string;
   @SyncVar() dicebot: string;
   @SyncVar() imageIdentifier: string;
+  @SyncVar() color: string;
 
   get tabIdentifier(): string { return this.parent.identifier; }
   get text(): string { return <string>this.value }

src/app/class/chat-palette.ts

@@ -16,6 +16,7 @@ export interface PaletteVariable {
 @SyncObject('chat-palette')
 export class ChatPalette extends ObjectNode {
   @SyncVar() dicebot: string = '';
+  @SyncVar() color: string = '#000000';
   //TODO: キャラシ項目のコピー
 
   get paletteLines(): PaletteLine[] {

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

@@ -6,6 +6,7 @@
     </div>
     <div class="body">
       <div class="title">
+        <span [ngStyle]="{'color':chatMessage.color}">●</span>
         <span class="msg-name">{{chatMessage.name}}</span>
         <span class='tip msg-from'>　{{chatMessage.from}}</span>
         <span class='tip msg-timestamp'>　{{chatMessage.timestamp | date:'y/M/d H:mm'}}</span>

src/app/component/chat-palette/chat-palette.component.css

@@ -107,4 +107,23 @@
   position: absolute;
   top: -4px;
   right: 0;
+}
+
+.color-picker-container {
+  position: relative;
+  overflow: hidden;
+  width:16px;
+  height:16px;
+  border-radius: 16px;
+  float:left;
+  margin: 5px;
+}
+
+.color-picker-container > .color-picker {
+  position: absolute;
+  right: -8px;
+  top: -8px;
+  width: 32px;
+  height: 32px;
+  border: none;
 }

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

@@ -15,6 +15,9 @@
       </div>
       <div class="table-cell">
         <div>
+          <div class="color-picker-container">
+            <input class="color-picker" type="color" name="favcolor" (change)="onChangeColor($event.target.value)" [(ngModel)]="color">
+          </div>
           <select style="width: 12em;" (change)="onSelectedCharacter($event.target.value)"  [ngModel]="character.identifier">
             <option *ngFor="let gameCharacter of gameCharacters" value="{{gameCharacter.identifier}}">{{gameCharacter.name}}</option>
           </select> ＞

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

@@ -71,6 +71,7 @@ export class ChatPaletteComponent implements OnInit, OnDestroy {
     this.panelService.title = this.character.name + ' のチャットパレット';
     this.chatTabidentifier = this.chatMessageService.chatTabs ? this.chatMessageService.chatTabs[0].identifier : '';
     this.gameType = this.character.chatPalette ? this.character.chatPalette.dicebot : '';
+    this.color = this.character.chatPalette ? this.character.chatPalette.color : '#000000';
     EventSystem.register(this)
       .on('UPDATE_GAME_OBJECT', -1000, event => {
         if (event.data.aliasName !== GameCharacter.aliasName) return;
@@ -123,6 +124,17 @@ export class ChatPaletteComponent implements OnInit, OnDestroy {
     });
   }
 
+  private _color: string = "#000000";
+  get color(): string { return this._color };
+  set color(color: string) {
+    this._color = color;
+    if (this.character.chatPalette) this.character.chatPalette.color = color;
+  };
+  onChangeColor(new_color: string) {
+    this._color = new_color;
+    if (this.character.chatPalette) this.character.chatPalette.color = new_color;
+  }
+
   showDicebotHelp() {
     DiceBot.getHelpMessage(this.gameType).then(help => {
       let gameName: string = 'ダイスボット';
@@ -169,7 +181,7 @@ export class ChatPaletteComponent implements OnInit, OnDestroy {
 
     if (this.chatTab) {
       let text = this.palette.evaluate(this.text, this.character.rootDataElement);
-      this.chatMessageService.sendMessage(this.chatTab, text, this.gameType, this.character.identifier, this.sendTo);
+      this.chatMessageService.sendMessage(this.chatTab, text, this.gameType, this.character.identifier, this.sendTo, this._color);
     }
     this.text = '';
     this.previousWritingLength = this.text.length;

src/app/component/chat-tab-setting/chat-tab-setting.component.html

@@ -15,6 +15,7 @@
       <hr/>
       <div>
         <ng-container *ngIf="!isDeleted">
+          <button (click)="save_log()">Export Log</button>
           <button (click)="save()">保存</button>
           <button class="danger" (click)="delete()" [attr.disabled]="chatTabs.length <= 1 ? '' : null">削除</button>
         </ng-container>

src/app/component/chat-tab-setting/chat-tab-setting.component.ts

@@ -68,6 +68,47 @@ export class ChatTabSettingComponent implements OnInit, OnDestroy {
     this.saveDataService.saveGameObject(this.selectedTab, fileName);
   }
 
+  save_log() {
+    if (!this.selectedTab) return;
+
+    let msg_arr = this.selectedTab.children;
+    if(msg_arr.length<=0) return;
+
+    function twobit(n: number){
+      return (n<=9? "0"+n: n);
+    }
+
+    let date = new Date();
+    let y = date.getFullYear();
+    let m = twobit(date.getMonth()+1);
+    let d = twobit(date.getDate());
+    let h = twobit(date.getHours());
+    let min = twobit(date.getMinutes());
+    let sec = twobit(date.getSeconds());
+    let fileName: string = 'chatlog_' + y+m+d + "_" + h+min+sec + "_" + this.selectedTab.name + ".html";
+
+    let html_doc = "";
+    for(let i=0; i<msg_arr.length; i++){
+      let msg = msg_arr[i];
+      let color = msg["color"]? msg["color"]: "#000000";
+      let name = msg["name"].match(/^<BCDice：/)? "<span style='padding-left:20px;'>&nbsp;</span>": ( msg["name"]+": ");
+      html_doc += "<font color='"+color+"'><b>"+name+"</b>"+msg.value+"</font><br>\n";
+    }
+    this.downloadHtml(fileName, html_doc);
+  }
+
+  downloadHtml(filename, html) {
+    var evt = new MouseEvent('click', {
+        'view': window,
+        'bubbles': true,
+        'cancelable': true
+      });
+    var aLink = document.createElement('a');
+    aLink.download = filename;
+    aLink.href = "data:text/html;charset=UTF-8," + encodeURIComponent(html);
+    aLink.dispatchEvent(evt);
+  }
+
   delete() {
     if (!this.isEmpty && this.selectedTab) {
       this.selectedTabXml = this.selectedTab.toXml();

src/app/component/chat-window/chat-window.component.css

@@ -146,3 +146,22 @@
   vertical-align: middle;
   font-size: 1.0rem;
 }
+
+.color-picker-container {
+  position: relative;
+  overflow: hidden;
+  width:16px;
+  height:16px;
+  border-radius: 16px;
+  float:left;
+  margin: 5px;
+}
+
+.color-picker-container > .color-picker {
+  position: absolute;
+  right: -8px;
+  top: -8px;
+  width: 32px;
+  height: 32px;
+  border: none;
+}

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

@@ -23,6 +23,9 @@
   </div>
   <div class="table-cell">
     <div>
+      <div class="color-picker-container">
+        <input class="color-picker" type="color" name="favcolor" value="#000000" (change)="onChangeColor($event.target.value)">
+      </div>
       <select style="width: 12em;" (change)="onSelectedCharacter($event.target.value)">
         <option value="{{myPeer?.identifier}}">{{myPeer?.name}}（あなた）</option>
         <option *ngFor="let gameCharacter of gameCharacters" value="{{gameCharacter.identifier}}">{{gameCharacter.name}}</option>

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

@@ -213,6 +213,11 @@ export class ChatWindowComponent implements OnInit, OnDestroy, AfterViewInit {
     });
   }
 
+  private _color: string = "#000000";
+  onChangeColor(color: string) {
+    this._color = color;
+  }
+
   showDicebotHelp() {
     DiceBot.getHelpMessage(this.gameType).then(help => {
       this.gameHelp = help;
@@ -260,7 +265,7 @@ export class ChatWindowComponent implements OnInit, OnDestroy, AfterViewInit {
 
     if (!this.sender.length) this.sender = this.myPeer.identifier;
     if (this.chatTab) {
-      this.chatMessageService.sendMessage(this.chatTab, this.text, this.gameType, this.sender, this.sendTo);
+      this.chatMessageService.sendMessage(this.chatTab, this.text, this.gameType, this.sender, this.sendTo, this._color);
     }
     this.text = '';
     this.previousWritingLength = this.text.length;

src/app/component/game-character/game-character.component.ts

@@ -184,7 +184,7 @@ export class GameCharacterComponent implements OnInit, OnDestroy, AfterViewInit
 
   private showChatPalette(gameObject: GameCharacter) {
     let coordinate = this.pointerDeviceService.pointers[0];
-    let option: PanelOption = { left: coordinate.x - 250, top: coordinate.y - 175, width: 615, height: 350 };
+    let option: PanelOption = { left: coordinate.x - 250, top: coordinate.y - 175, width: 630, height: 350 };
     let component = this.panelService.open<ChatPaletteComponent>(ChatPaletteComponent, option);
     component.character = gameObject;
   }

src/app/component/game-object-inventory/game-object-inventory.component.ts

@@ -196,7 +196,7 @@ export class GameObjectInventoryComponent implements OnInit, AfterViewInit, OnDe
 
   private showChatPalette(gameObject: GameCharacter) {
     let coordinate = this.pointerDeviceService.pointers[0];
-    let option: PanelOption = { left: coordinate.x - 250, top: coordinate.y - 175, width: 615, height: 350 };
+    let option: PanelOption = { left: coordinate.x - 250, top: coordinate.y - 175, width: 630, height: 350 };
     let component = this.panelService.open<ChatPaletteComponent>(ChatPaletteComponent, option);
     component.character = gameObject;
   }

src/app/service/chat-message.service.ts

@@ -73,7 +73,8 @@ export class ChatMessageService {
     return Math.floor(this.timeOffset + (performance.now() - this.performanceOffset));
   }
 
-  sendMessage(chatTab: ChatTab, text: string, gameType: string, sendFrom: string, sendTo?: string): ChatMessage {
+  sendMessage(chatTab: ChatTab, text: string, gameType: string, sendFrom: string, sendTo?: string, color?: string): ChatMessage {
+    if(color==null) color="#000000";
     let chatMessage: ChatMessageContext = {
       from: Network.peerContext.id,
       to: this.findId(sendTo),
@@ -82,6 +83,7 @@ export class ChatMessageService {
       timestamp: this.calcTimeStamp(chatTab),
       tag: gameType,
       text: text,
+      color: color,
     };
 
     return chatTab.addMessage(chatMessage);