[BC] 詳細画面改行可能に

2024-05-03 16:35:14 +09:00
parent 535e44c4e7
commit 506c29a32d
3 changed files with 67 additions and 3 deletions
@@ -0,0 +1,44 @@
+export default class
+CommonModule
+{
+  static
+  isWide (chr)
+  {
+    return chr.match (/[^\x01-\x7f]/) !== null;
+  }
+
+  static
+  lenByFull (str)
+  {
+    return str.split ('').map (c => this.isWide (c) ? 1 : .5)
+                         .reduce ((a, c) => a + c);
+  }
+
+  static
+  indexByFToC (str, index)
+  {
+    let i = 0;
+    let work = '';
+
+    for (let c of str)
+      {
+        work += c;
+
+        if (this.lenByFull (work) > index)
+          break;
+
+        i += 1;
+      }
+
+    return i;
+  }
+
+  static
+  midByFull (str, start, length)
+  {
+    const trimmedLeft = str.slice (this.indexByFToC (str, start));
+
+    return trimmedLeft.slice (0, this.indexByFToC (trimmedLeft, length));
+  }
+}
+
@@ -17,7 +17,7 @@
    <body>
        <canvas id="canvas"></canvas>

-        <script src="./talk.js?<?= filemtime ('./talk.js') ?>" type="text/javascript"></script>
+        <script src="./talk.js?<?= filemtime ('./talk.js') ?>" type="module"></script>
    </body>
 </html>

@@ -1,3 +1,6 @@
+import CommonModule from './common_module.js';
+
+
 class
 Talk
 {
@@ -46,10 +49,27 @@ Canvas
    this.putText (0, 0, 15, $ ('#dt').val ());
    this.putImage (this.nizika, 370, 260, 1.1);
    this.putImage (this.talking, 0, 0, 640 / 1024);
-    this.putText (75, 43.75, 20, '> ' + $ ('#chat').val (),
+    this.putText (75, 43.75, 20,
+                  ('> ' + ((CommonModule.lenByFull ($ ('#chat').val ()) <= 21)
+                           ? $ ('#chat').val ()
+                           : (CommonModule.midByFull ($ ('#chat').val (), 0, 19.5)
+                              + '...'))),
                  undefined, undefined,
                  true);
-    this.putText (62.5, 93.75, 31.25, $ ('#answer').val (), 'Nikumaru', '#c00000');
+    this.putText (62.5, 93.75, 31.25,
+                  ((CommonModule.lenByFull ($ ('#answer').val ()) <= 16)
+                   ? $ ('#answer').val ()
+                   : CommonModule.midByFull ($ ('#answer').val (), 0, 16)),
+                  'Nikumaru', '#c00000');
+    if (CommonModule.lenByFull ($ ('#answer').val ()) > 16)
+      {
+        this.putText (62.5, 125, 31.25,
+                      ((CommonModule.lenByFull ($ ('#answer').val ()) <= 32)
+                       ? CommonModule.midByFull ($ ('#answer').val (), 16, 16)
+                       : (CommonModule.midByFull ($ ('#answer').val (), 16, 14.5)
+                          + '...')),
+                      'Nikumaru', '#c00000');
+      }
  }

  putBG ()