[BC] 詳細画面 改行可能に
This commit is contained in:
@@ -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>
|
<body>
|
||||||
<canvas id="canvas"></canvas>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|||||||
+22
-2
@@ -1,3 +1,6 @@
|
|||||||
|
import CommonModule from './common_module.js';
|
||||||
|
|
||||||
|
|
||||||
class
|
class
|
||||||
Talk
|
Talk
|
||||||
{
|
{
|
||||||
@@ -46,10 +49,27 @@ Canvas
|
|||||||
this.putText (0, 0, 15, $ ('#dt').val ());
|
this.putText (0, 0, 15, $ ('#dt').val ());
|
||||||
this.putImage (this.nizika, 370, 260, 1.1);
|
this.putImage (this.nizika, 370, 260, 1.1);
|
||||||
this.putImage (this.talking, 0, 0, 640 / 1024);
|
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,
|
undefined, undefined,
|
||||||
true);
|
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 ()
|
putBG ()
|
||||||
|
|||||||
Reference in New Issue
Block a user