diff options
Diffstat (limited to 'webAO')
| -rw-r--r-- | webAO/client.css | 31 | ||||
| -rw-r--r-- | webAO/client.js | 10 | ||||
| -rw-r--r-- | webAO/images/chatbox.svg | 1 |
3 files changed, 28 insertions, 14 deletions
diff --git a/webAO/client.css b/webAO/client.css index a23aa66..7458f47 100644 --- a/webAO/client.css +++ b/webAO/client.css @@ -1,5 +1,5 @@ body { - font-family: "Ace Attorney", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Osaka", "MS Gothic", "ＭＳ Ｐゴシック", "Tahoma", Sans; + font-family: sans-serif; } img { @@ -228,13 +228,22 @@ img { left: 0; } + +#client_chatcontainer { + position: absolute; + top: 73%; + height: 27%; + width: 100%; + background-image: url("images/chatbox.svg"); + background-size: cover; + background-repeat: no-repeat; +} + #client_name { display: none; - padding: 0px 6px; - height: 7%; - border: 1px solid rgba(255, 255, 255, 0.7); - background: rgba(73, 0, 254, 0.5); - top: 63%; + top: 5%; + padding: 0px 10px; + height: 20%; border-radius: 3px; position: absolute; } @@ -242,13 +251,10 @@ img { #client_chat { font-size: 1em; display: none; - width: 98%; - width: calc(100% - 4px); + width: 100%; margin: auto; - height: 30%; - border: 2px solid rgba(255, 255, 255, 0.7); - background-color: rgba(0, 0, 0, 0.5); - top: 70%; + height: 90%; + top: 20%; border-radius: 4px; position: absolute; word-break: keep-all; @@ -261,6 +267,7 @@ img { #client_chat p { margin: 4px; + padding: 5px 10px; color: white; } diff --git a/webAO/client.js b/webAO/client.js index daac518..9e2b5b2 100644 --- a/webAO/client.js +++ b/webAO/client.js @@ -1235,6 +1235,7 @@ class Viewport { const nameBox = document.getElementById("client_name"); const chatBox = document.getElementById("client_chat"); + const chatContainerBox = document.getElementById("client_chatcontainer"); const eviBox = document.getElementById("client_evi"); const shoutSprite = document.getElementById("client_shout"); const chatBoxInner = document.getElementById("client_inner_chat"); @@ -1265,6 +1266,7 @@ class Viewport { // Hide message box nameBox.style.display = "none"; chatBox.style.display = "none"; + chatContainerBox.style.display = "none"; shoutSprite.src = client.resources[shout]["src"]; shoutSprite.style.display = "block"; this.shoutaudio.src=`${AO_HOST}characters/${encodeURI(this.chatmsg.name.toLowerCase())}/${shout}.wav`; @@ -1282,6 +1284,7 @@ class Viewport { // Hide message box nameBox.style.display = "none"; chatBox.style.display = "none"; + chatContainerBox.style.display = "none"; const delay = await this.getAnimLength(`${AO_HOST}characters/${encodeURI(chatmsg.name.toLowerCase())}/${encodeURI(chatmsg.preanim)}.gif`); chatmsg.preanimdelay = delay; this.initUpdater(delay); @@ -1455,6 +1458,7 @@ class Viewport { tick() { const nameBox = document.getElementById("client_name"); const chatBox = document.getElementById("client_chat"); + const chatContainerBox = document.getElementById("client_chatcontainer"); const charSprite = document.getElementById("client_char"); const pairSprite = document.getElementById("client_pair_char"); const eviBox = document.getElementById("client_evi"); @@ -1547,11 +1551,13 @@ class Viewport { } } + chatContainerBox.style.display = "block"; + nameBox.style.display = "block"; - nameBox.style.fontSize = (nameBox.offsetHeight * 0.7) + "px"; + nameBox.style.fontSize = (nameBox.offsetHeight * 0.75) + "px"; chatBox.style.display = "block"; - chatBox.style.fontSize = (chatBox.offsetHeight * 0.25) + "px"; + chatBox.style.fontSize = (chatBox.offsetHeight * 0.3) + "px"; if (this.chatmsg.color === 6) chatBoxInner.className = "rainbow-text"; diff --git a/webAO/images/chatbox.svg b/webAO/images/chatbox.svg new file mode 100644 index 0000000..90dbab7 --- /dev/null +++ b/webAO/images/chatbox.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" height="82" width="400"><desc> Created with Raphaël 2.0.1</desc><rect width="397" height="59" x="1.5" y="21.5" style="fill-opacity:0.7;stroke-linejoin:round"/><path d="m1.5 21.5v-20h83.8l10 20z" style="fill-opacity:0.7;fill:#230087;stroke-width:1px"/><path d="M1 1V81H399V21H95.5L85.5 1Z" style="fill:none;stroke-linejoin:round;stroke-opacity:0.8;stroke-width:1px;stroke:#c8c8c8"/><path d="M0 82V0h86c5 10.6 5 8.6 10 20h304v62z" style="fill:none;paint-order:normal;stroke-linejoin:round;stroke-opacity:0.8;stroke-width:1px;stroke:#000"/></svg>
\ No newline at end of file |
