Merge pull request #4 from GitKohei/dev-lily1.04.0.gk0.5.1

add: キャラ足元ダブルクリックに同心円の距離計を追加
GitKohei · Sep 27, 2021 · 0de6197 · 0de6197
2 parents 58e28b9 + 56deb81
commit 0de6197
Show file tree

Hide file tree

Showing 14 changed files with 358 additions and 104 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -2,7 +2,7 @@
     // IntelliSense を使用して利用可能な属性を学べます。
     // 既存の属性の説明をホバーして表示します。
     // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
-    "version": "0.3.4",
+    "version": "0.5.1",
     "configurations": [
         {
             "type": "pwa-chrome",

diff --git a/README.md b/README.md
@@ -57,40 +57,64 @@ https://まだリリースビルドはないよ/
 ※とりあえずリポジトリとreadme作ったらもう眠くなったから実際のコードはまたこんどコミットするわ
 <dl>
     <dt>Add: 一括保存 gk0.1.0</dt>
-    <dd>テーブル上のキャラのみを全て単体zipで保存するボタンを追加。あと保存した時の名称形式も何か変えた気がする
-    <br><img src="docs/images/gk010.jpg"></dd>
+        <dd>
+            テーブル上のキャラのみを全て単体zipで保存するボタンを追加。あと保存した時の名称形式も何か変えた気がする
+            <br><img src="docs/images/gk010.jpg">
+        </dd>
     <dt><del>Add: メジャー</del></dt>
-    <dd><del>メジャーを仮実装したら確定でハングする動作が残っちゃった</del> バグしかねぇ削除だこんなもん</dd>
+        <dd>
+            <del>メジャーを仮実装したら確定でハングする動作が残っちゃった</del> バグしかねぇ削除だこんなもん
+        </dd>
     <dt>Add: HP・MPバー gk0.2.0</dt>
-    <dd>クッソ見やすいHPとMPを表すよくある横棒状のあれをキャラの足元あたりに追加
-    <br><img src="docs/images/gk020.gif"></dd>
-    </dd>
+        <dd>
+            クッソ見やすいHPとMPを表すよくある横棒状のあれをキャラの足元あたりに追加
+            <br><img src="docs/images/gk020.gif">
+        </dd>
     <dt>Add: 情報秘匿 gk0.3.0</dt>
-    <dd>魔物知識判定する前からHPとか色々見えちゃうのがよろしくないのでキャラ詳細情報のド頭にチェックボックスを追加
-    <br>※キャラを中クリックでもトグル可能
-    <br>これモンスター名とかも秘匿してもいいんだけど、セッション中に「そこの？？？_Aを攻撃します」って発言しづらいやろから名前は秘匿しない方向で実装中 なんか名案あったらissuにでもコメントくれ
-    <br><img src="docs/images/gk030.gif"></dd>
+        <dd>
+            魔物知識判定する前からHPとか色々見えちゃうのがよろしくないのでキャラ詳細情報のド頭にチェックボックスを追加
+            <br>※キャラを中クリックでもトグル可能
+            <br>これモンスター名とかも秘匿してもいいんだけど、セッション中に「そこの？？？_Aを攻撃します」って発言しづらいやろから名前は秘匿しない方向で実装中 なんか名案あったらissuにでもコメントくれ
+            <br><img src="docs/images/gk030.gif">
+        </dd>
     <dt>Remove/Improve: リモコン/ラウンド進行 gk0.3.4</dt>
-    <dd>全/個バフラウンド減少/削除の4ボタンを使い分ける事がSW2.5ではあんま無いので全バフ減少+0以下削除をまとめて1ボタンに
-    <br><img src="docs/images/gk034.gif"></dd>
+        <dd>
+            全/個バフラウンド減少/削除の4ボタンを使い分ける事がSW2.5ではあんま無いので全バフ減少+0以下削除をまとめて1ボタンに
+        </dd>
+    <dt>Remove/Improve: チャットログ/ラウンド進行時に消えたバフを表示</dt>
+        <dd>
+            いつの間にかバフ切れてたンゴが多発するのでラウンド進行時のチャットログをクッソキレイにしてそのラウンドに消えちゃったバフがあればそのキャラ名とバフ名を表示するように
+            <br><img src="docs/images/gk034.gif">
+        </dd>
     <dt>Improve: リモコン/数値最大値超えないをデフォルト化 gk0.3.4</dt>
-    <dd>SW2.5でヒールしてHP限界値突破させる事なんて超レアケースだったのでチェックボックスを初期でチェック状態に</dd>
+        <dd>
+            SW2.5でヒールしてHP限界値突破させる事なんて超レアケースだったのでチェックボックスを初期でチェック状態に
+        </dd>
     <dt>Fix: リモコン/バフ欄 gk0.3.4</dt>
-    <dd>なんか伸び悩んでたのでレイアウトを変更。多分これまた変更するし、同じ変更内容をテーブルUIにつっこむべき</dd>
-    <dt>Improve: リモコン/操作先はHP現在値をデフォルト化
-    <br><img src="docs/images/gk034b.gif"></dd>
-    <dd>SW2.5でリモコン使って相手の数値いじるなんてほぼHPだし初期でそこをチェック状態に<br>※したけど、表示上はそう見えない事に留意</dd>
+        <dd>
+            なんか伸び悩んでたのでレイアウトを変更。多分これまた変更するし、同じ変更内容をテーブルUIにつっこむべき    <br><img src="docs/images/gk034b.gif">
+        </dd>
+    <dt>Improve: リモコン/操作先はHP現在値をデフォルト化</dt>
+        <dd>
+            SW2.5でリモコン使って相手の数値いじるなんてほぼHPだし初期でそこをチェック状態に<br>※したけど、表示上はそう見えない事に留意
+        </dd>
     <dt>Add: リモコン/防護点考慮 gk0.3.4</dt>
-    <dd>いちいち防護点見に行って引き算すんのめんどかったのでチェック先のキャラの防護点を考慮してHP操作する為のチェックボックスを追加
-    <br><img src="docs/images/gk034c.gif"></dd>
-    <dt>Remove/Improve: チャットログ/ラウンド進行時に消えたバフを表示</dt>
-    <dd>いつの間にかバフ切れてたンゴが多発するのでラウンド進行時のチャットログをクッソキレイにしてそのラウンドに消えちゃったバフがあればそのキャラ名とバフ名を表示するように</dd>
-    <dt>Add: 距離同心円</dt>
-    <dd>キャラをダブルクリックするとキャラを中心に同心円を出す機能を追加。これで自キャラから各他キャラまでの距離感が明快に</dd>
+        <dd>
+            いちいち防護点見に行って引き算すんのめんどかったのでチェック先のキャラの防護点を考慮してHP操作する為のチェックボックスを追加
+            <br><img src="docs/images/gk034c.gif">
+        </dd>
+    <dt>Add: 距離同心円 gk0.5.1</dt>
+        <dd>
+            キャラをダブルクリックするとキャラを中心に同心円を出す機能を追加。これで自キャラから各他キャラまでの距離感が明快に
+            <br><img src="docs/images/gk051.gif">
+        </dd>
+    <dt>Add: テーブル/スケール gk0.5.1</dt>
+        <dd>
+            キャラから出る距離同心円とかの距離基準が変更できたほうが捗るのでテーブルの設定値として追加することに
+            <br>※リアルタイムで同心円のUpdateかけらんないのこれ？重いか？重そう！
+        </dd>
     <dt>Improve: カットイン/よく使う末尾のやつ</dt>
     <dd>打撃音とか回避音とかはもう全部初期状態でカットイン作成済みに。ついでにカットイン名が重複してたら作成しないようにしといた</dd>
-    <dt>Add: テーブル/スケール</dt>
-    <dd>キャラから出る距離同心円とかの距離基準が変更できたほうが捗るのでテーブルの設定値として追加することに<br>※リアルタイムで同心円のUpdateかけらんないのこれ？重いか？重そう！</dd>
     <dt>Improve: インベントリ/テーブル上のキャラ探し機能</dt>
     <dd>インベクリックでハイライト出てたけどマウスオーバーでずっとハイライト出るように変更してこのキャラどこいっちゃったの現象を減少（激旨ギャグ</dd>
     <dt>Add: インベントリ/キャラの行動まち？待機状態</dt>

diff --git a/docs/images/gk051.gif b/docs/images/gk051.gif
diff --git a/src/app/class/data-element.ts b/src/app/class/data-element.ts
@@ -60,6 +60,20 @@ export class DataElement extends ObjectNode {
     return null;
   }
 
+  getFirstElementByNames(...names: string[]): DataElement {
+    for (let child of this.children) {
+      if (child instanceof DataElement) {
+        for(let name of names)
+          if (child.getAttribute('name') === name) return child;
+        for(let name of names) {
+          let match = child.getFirstElementByName(name);
+          if (match) return match;
+        }
+      }
+    }
+    return null;
+  }
+
   get myIdentifer(){
     let self: GameObject = <GameObject> this;
     return self.identifier;

diff --git a/src/app/class/game-character.ts b/src/app/class/game-character.ts
@@ -14,6 +14,7 @@ export class GameCharacter extends TabletopObject {
   @SyncVar() rotate: number = 0;
   @SyncVar() roll: number = 0;
 
+  @SyncVar() showPing: boolean = false;
   @SyncVar() hideInformation: boolean = false;
   @SyncVar() hideInventory: boolean = false;
   @SyncVar() nonTalkFlag: boolean = false;

diff --git a/src/app/class/game-table.ts b/src/app/class/game-table.ts
@@ -22,6 +22,7 @@ export class GameTable extends ObjectNode {
   @SyncVar() name: string = 'テーブル';
   @SyncVar() width: number = 20;
   @SyncVar() height: number = 20;
+  @SyncVar() scale: number = 1.0;
   @SyncVar() gridSize: number = 50;
   @SyncVar() imageIdentifier: string = 'imageIdentifier';
   @SyncVar() backgroundImageIdentifier: string = 'imageIdentifier';

diff --git a/src/app/class/sound-effect.ts b/src/app/class/sound-effect.ts
@@ -23,6 +23,7 @@ export class PresetSound {
   static lock: string = '';
   static unlock: string = '';
   static sweep: string = '';
+  static showPing: string = '';
 }
 
 @SyncObject('sound-effect')

diff --git a/src/app/class/tabletop-object.ts b/src/app/class/tabletop-object.ts
@@ -18,6 +18,11 @@ export class TabletopObject extends ObjectNode {
     x: 0,
     y: 0
   };
+  @SyncVar() concentricLocation: TabletopLocation = {
+    name: 'table',
+    x: 0,
+    y: 0
+  };
 
   @SyncVar() posZ: number = 0;
 
@@ -38,7 +43,7 @@ export class TabletopObject extends ObjectNode {
   get commonDataElement(): DataElement { return this.getElement('common'); }
   get detailDataElement(): DataElement { return this.getElement('detail'); }
 
-  get buffDataElement(): DataElement { return this.getElement('buff'); }//リリィにてバフ機能用の追加
+  get buffDataElement(): DataElement { return this.getElement('buff'); }//�����B�ɂăo�t�@�\�p�̒ǉ�
 
 
   addBuffDataElement(){ 

diff --git a/src/app/component/game-character/game-character.component.css b/src/app/component/game-character/game-character.component.css
@@ -295,6 +295,63 @@
     transform: translateX(2px) translateY(1px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
 }
 
+.lazy-move {
+    position: absolute;
+}
+
+.ping-circle {
+    top: 0;
+    display: inline-block;
+    backface-visibility: hidden;
+    position: absolute;
+    width: 80px;
+    height: 80px;
+    text-align: center;
+    border-radius: 50%;
+    border: dashed 3px skyblue;
+}
+
+.circle-text {
+    position: absolute;
+    width: 0px;
+    /* 可変直径 */
+    height: 0px;
+    /* 可変直径 */
+    font-size: 30px;
+    text-align: center;
+    margin: 0;
+    transform: rotate(-80deg);
+    /* 円の回転 */
+}
+
+.circle-text span {
+    position: absolute;
+    display: inline-block;
+    width: 0px;
+    height: 0px;
+    /* 可変半径 */
+    transform-origin: center bottom;
+    /* 回転の基準点 */
+    color: rgb(212, 212, 212);
+    text-shadow: 3px 3px 0 #222, -3px -3px 0 #222, -3px 3px 0 #222, 3px -3px 0 #222, 0px 3px 0 #222, 0 -3px 0 #222, -3px 0 0 #222, 3px 0 0 #222;
+}
+
+.circle-text span:nth-child(1) {
+    transform: rotate(45deg);
+}
+
+.circle-text span:nth-child(2) {
+    transform: rotate(135deg);
+}
+
+.circle-text span:nth-child(3) {
+    transform: rotate(225deg);
+}
+
+.circle-text span:nth-child(4) {
+    transform: rotate(315deg);
+}
+
 @keyframes focused {
     0% {
         box-shadow: none;

diff --git a/src/app/component/game-character/game-character.component.html b/src/app/component/game-character/game-character.component.html
@@ -1,6 +1,100 @@
+<!--移動値mの文字列4つ-->
+<div *ngIf="this.gameCharacter.showPing">
+    <div class="is-3d is-pointer-events-none lazy-move circle-text" [ngStyle]="
+      {'transform': 'translateX(' + gameCharacter.concentricLocation.x + 'px) translateY(' + gameCharacter.concentricLocation.y + 'px)',
+      'font-size': (normalSpeed*10) / currentTableScale + 'px'
+      }">
+        <div *ngIf="!this.gameCharacter.hideInformation" class="is-pointer-events-none" [ngStyle]="{
+            'transform': ' translateX(-50%) translateX(' + (size * gridSize / 2) +'px) ' +
+            'translateY(-50%) translateY(' + (size * gridSize / 2) +'px)',
+            'height': (normalSpeed * gridSize / currentTableScale)*2 + 'px',
+            'width': (normalSpeed * gridSize / currentTableScale)*2 + 'px'}">
+            <span [ngStyle]="{'height': (normalSpeed * gridSize / currentTableScale) + 'px'}">{{normalSpeed}}m</span>
+            <span [ngStyle]="{'height': (normalSpeed * gridSize / currentTableScale) + 'px'}">{{normalSpeed}}m</span>
+            <span [ngStyle]="{'height': (normalSpeed * gridSize / currentTableScale) + 'px'}">{{normalSpeed}}m</span>
+            <span [ngStyle]="{'height': (normalSpeed * gridSize / currentTableScale) + 'px'}">{{normalSpeed}}m</span>
+        </div>
+    </div>
+</div>
+<!--同心円エフェクト-->
+<div class="is-3d is-pointer-events-none lazy-move" [ngStyle]="
+  {'transform': 'translateX(' + gameCharacter.concentricLocation.x + 'px) translateY(' + gameCharacter.concentricLocation.y + 'px)' }">
+    <div *ngIf="this.gameCharacter.showPing" class="is-pointer-events-none" [ngStyle]="{'width': '0px', 'height': '0px'}">
+        <div *ngIf="!this.gameCharacter.hideInformation && currentTableScale<3" class="ping-gradient is-pointer-events-none" [ngStyle]="{
+      'transform': ' translateX(-50%) translateX(' + (size * gridSize / 2) +'px)'
+                  + ' translateY(-50%) translateY(' + (size * gridSize / 2) +'px)',
+      'border-radius': (normalSpeed * gridSize / currentTableScale) +'px',
+      'height': (normalSpeed * gridSize / currentTableScale)*2 + 'px',
+      'width': (normalSpeed * gridSize / currentTableScale)*2 + 'px',
+      'background-image': 'repeating-radial-gradient(' + 
+        'circle at 50% 50%,' + 
+        'transparent 0px,' + 
+        'transparent ' + (gridSize / currentTableScale-6) + 'px,' + 
+        'currentcolor ' + (gridSize / currentTableScale-4) + 'px,' + 
+        'currentcolor ' + (gridSize / currentTableScale) + 'px' + 
+      ')'
+    }"></div>
+        <div *ngIf="!this.gameCharacter.hideInventory" class="ping-circle is-pointer-events-none" [ngStyle]="{
+      'transform': ' translateX(-50%) translateX(' + (size * gridSize / 2) +'px)'
+                  + ' translateY(-50%) translateY(' + (size * gridSize / 2) +'px)',
+      'border-radius': (3 * gridSize / currentTableScale) +'px',
+      'height': (3 * gridSize / currentTableScale)*2 + 'px',
+      'width': (3 * gridSize / currentTableScale)*2 + 'px',
+      'border': 'dashed ' + (6 / currentTableScale) + 'px skyblue'
+    }"></div>
+        <div *ngIf="!this.gameCharacter.hideInventory" class="ping-circle is-pointer-events-none" [ngStyle]="{
+      'transform': ' translateX(-50%) translateX(' + (size * gridSize / 2) +'px)'
+                  + ' translateY(-50%) translateY(' + (size * gridSize / 2) +'px)',
+      'border-radius': (10 * gridSize / currentTableScale) +'px',
+      'height': (10 * gridSize / currentTableScale)*2 + 'px',
+      'width': (10 * gridSize / currentTableScale)*2 + 'px',
+      'border': 'dashed ' + (10 / currentTableScale) + 'px red'
+    }"></div>
+        <div *ngIf="!this.gameCharacter.hideInventory" class="ping-circle is-pointer-events-none" [ngStyle]="{
+      'transform': ' translateX(-50%) translateX(' + (size * gridSize / 2) +'px)'
+                  + ' translateY(-50%) translateY(' + (size * gridSize / 2) +'px)',
+      'border-radius': (20 * gridSize / currentTableScale) +'px',
+      'height': (20 * gridSize / currentTableScale)*2 + 'px',
+      'width': (20 * gridSize / currentTableScale)*2 + 'px',
+      'border': 'dashed ' + (10 / currentTableScale) + 'px red'
+    }"></div>
+        <div *ngIf="!this.gameCharacter.hideInventory" class="ping-circle is-pointer-events-none" [ngStyle]="{
+      'transform': ' translateX(-50%) translateX(' + (size * gridSize / 2) +'px)'
+                  + ' translateY(-50%) translateY(' + (size * gridSize / 2) +'px)',
+      'border-radius': (30 * gridSize / currentTableScale) +'px',
+      'height': (30 * gridSize / currentTableScale)*2 + 'px',
+      'width': (30 * gridSize / currentTableScale)*2 + 'px',
+      'border': 'dashed ' + (10 / currentTableScale) + 'px red'
+    }"></div>
+        <div *ngIf="!this.gameCharacter.hideInventory" class="ping-circle is-pointer-events-none" [ngStyle]="{
+      'transform': ' translateX(-50%) translateX(' + (size * gridSize / 2) +'px)'
+                  + ' translateY(-50%) translateY(' + (size * gridSize / 2) +'px)',
+      'border-radius': (40 * gridSize / currentTableScale) +'px',
+      'height': (40 * gridSize / currentTableScale)*2 + 'px',
+      'width': (40 * gridSize / currentTableScale)*2 + 'px',
+      'border': 'dashed ' + (10 / currentTableScale) + 'px red'
+    }"></div>
+        <div *ngIf="!this.gameCharacter.hideInventory" class="ping-circle is-pointer-events-none" [ngStyle]="{
+      'transform': ' translateX(-50%) translateX(' + (size * gridSize / 2) +'px)'
+                  + ' translateY(-50%) translateY(' + (size * gridSize / 2) +'px)',
+      'border-radius': (50 * gridSize / currentTableScale) +'px',
+      'height': (50 * gridSize / currentTableScale)*2 + 'px',
+      'width': (50 * gridSize / currentTableScale)*2 + 'px',
+      'border': 'dashed ' + (10 / currentTableScale) + 'px red'
+    }"></div>
+        <div *ngIf="!this.gameCharacter.hideInformation" class="ping-circle is-pointer-events-none" [ngStyle]="{
+      'transform': ' translateX(-50%) translateX(' + (size * gridSize / 2) +'px)'
+                  + ' translateY(-50%) translateY(' + (size * gridSize / 2) +'px)',
+      'border-radius': (normalSpeed * gridSize / currentTableScale) +'px',
+      'height': (normalSpeed * gridSize / currentTableScale)*2 + 'px',
+      'width': (normalSpeed * gridSize / currentTableScale)*2 + 'px',
+      'border': 'dashed ' + (10 / currentTableScale) + 'px black'
+    }"></div>
+    </div>
+</div>
 <div class="component is-3d is-grab is-pointer-events-none" [style.width.px]="size * gridSize" [style.height.px]="size * gridSize" appMovable [movable.option]="movableOption" (movable.ondragstart)="onMove()" (movable.ondragend)="onMoved()" #root>
     <div class="component-content is-3d" [@bounceInOut]="'in'">
-        <div class="component-content is-3d is-pointer-events-auto" appRotable [rotable.option]="rotableOption" (rotable.ondragstart)="onMove()" (rotable.ondragend)="onMoved()" (auxclick)="onAuxClick($event)">
+        <div class="component-content is-3d is-pointer-events-auto" appRotable [rotable.option]="rotableOption" (rotable.ondragstart)="onMove()" (rotable.ondragend)="onMoved()" (auxclick)="onAuxClick($event)" (dblclick)="onDoubleClick($event)">
             <!--足元の丸枠フチ色-->
             <div *ngIf="this.gameCharacter.hideInformation" class="pedestal-inner" [ngStyle]="{
               'border': 'solid 10px #ff69b4',