From ec7c2e95f4dc4490460e4b921224fefa0abb8bfa Mon Sep 17 00:00:00 2001 From: sD Date: Tue, 11 Feb 2020 20:51:56 +0100 Subject: svg of soj chatbox --- webAO/images/chatbox.svg | 87 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 87 insertions(+) create mode 100644 webAO/images/chatbox.svg diff --git a/webAO/images/chatbox.svg b/webAO/images/chatbox.svg new file mode 100644 index 0000000..e391ff3 --- /dev/null +++ b/webAO/images/chatbox.svg @@ -0,0 +1,87 @@ + + + + + + image/svg+xml + + + + + + + Created with Raphaël 2.0.1 + + + + + + + + -- cgit From 61a192fa4c29e138966895083c07eaa4b8b2c3e8 Mon Sep 17 00:00:00 2001 From: sD Date: Tue, 11 Feb 2020 21:08:08 +0100 Subject: optimized svg --- webAO/images/chatbox.svg | 88 +----------------------------------------------- 1 file changed, 1 insertion(+), 87 deletions(-) diff --git a/webAO/images/chatbox.svg b/webAO/images/chatbox.svg index e391ff3..b2fa69a 100644 --- a/webAO/images/chatbox.svg +++ b/webAO/images/chatbox.svg @@ -1,87 +1 @@ - - - - - - image/svg+xml - - - - - - - Created with Raphaël 2.0.1 - - - - - - - - + Created with Raphaël 2.0.1 \ No newline at end of file -- cgit From 69866f35ca1dfd564613dcc690875ac6c0caa5cd Mon Sep 17 00:00:00 2001 From: sD Date: Tue, 11 Feb 2020 21:08:52 +0100 Subject: who cares --- webAO/images/chatbox.svg | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webAO/images/chatbox.svg b/webAO/images/chatbox.svg index b2fa69a..38b80d7 100644 --- a/webAO/images/chatbox.svg +++ b/webAO/images/chatbox.svg @@ -1 +1 @@ - Created with Raphaël 2.0.1 \ No newline at end of file + \ No newline at end of file -- cgit From c497339cab37f96ded3834a7e1541aa0eb03c3e9 Mon Sep 17 00:00:00 2001 From: sD Date: Tue, 11 Feb 2020 21:31:00 +0100 Subject: change positioning --- webAO/client.css | 21 +++++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/webAO/client.css b/webAO/client.css index 1deea9b..4df9b15 100644 --- a/webAO/client.css +++ b/webAO/client.css @@ -228,13 +228,23 @@ img { left: 0; } + +#client_chatcontainer { + position: absolute; + top: 70%; + height: 30%; + width: 98%; + width: calc(100% - 4px); +} + #client_name { display: none; padding: 0px 6px; - height: 7%; + height: 20%; border: 1px solid rgba(255, 255, 255, 0.7); background: rgba(73, 0, 254, 0.5); - top: 63%; + top: 0; + left: 0; border-radius: 3px; position: absolute; } @@ -242,13 +252,12 @@ img { #client_chat { font-size: 1em; display: none; - width: 98%; - width: calc(100% - 4px); + width: 100%; margin: auto; - height: 30%; + height: 90%; border: 2px solid rgba(255, 255, 255, 0.7); background-color: rgba(0, 0, 0, 0.5); - top: 70%; + top: 20%; border-radius: 4px; position: absolute; word-break: keep-all; -- cgit From 84043c98d7927e5a8c02c9819deed95e920244d3 Mon Sep 17 00:00:00 2001 From: sD Date: Wed, 12 Feb 2020 02:04:31 +0100 Subject: new chatbox looking good --- webAO/client.css | 22 ++++++++++------------ webAO/client.js | 4 ++-- webAO/images/chatbox.svg | 2 +- 3 files changed, 13 insertions(+), 15 deletions(-) diff --git a/webAO/client.css b/webAO/client.css index 4df9b15..dc3ddec 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 { @@ -231,20 +231,19 @@ img { #client_chatcontainer { position: absolute; - top: 70%; - height: 30%; - width: 98%; - width: calc(100% - 4px); + 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; + top: 5%; + padding: 0px 10px; height: 20%; - border: 1px solid rgba(255, 255, 255, 0.7); - background: rgba(73, 0, 254, 0.5); - top: 0; - left: 0; border-radius: 3px; position: absolute; } @@ -255,8 +254,6 @@ img { width: 100%; margin: auto; height: 90%; - border: 2px solid rgba(255, 255, 255, 0.7); - background-color: rgba(0, 0, 0, 0.5); top: 20%; border-radius: 4px; position: absolute; @@ -270,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..bce7916 100644 --- a/webAO/client.js +++ b/webAO/client.js @@ -1548,10 +1548,10 @@ class Viewport { } 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 index 38b80d7..90dbab7 100644 --- a/webAO/images/chatbox.svg +++ b/webAO/images/chatbox.svg @@ -1 +1 @@ - \ No newline at end of file + Created with Raphaël 2.0.1 \ No newline at end of file -- cgit From f07b7b6673fa654927c732a5d6ca5256e3d30cd3 Mon Sep 17 00:00:00 2001 From: sD Date: Wed, 12 Feb 2020 02:10:22 +0100 Subject: hide the box --- webAO/client.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/webAO/client.js b/webAO/client.js index bce7916..54d05b6 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"); @@ -1553,6 +1557,8 @@ class Viewport { chatBox.style.display = "block"; chatBox.style.fontSize = (chatBox.offsetHeight * 0.3) + "px"; + chatContainerBox.style.display = "block"; + if (this.chatmsg.color === 6) chatBoxInner.className = "rainbow-text"; else { -- cgit From b52afe4fbd3f64d75c1364314abf7813baa4dca0 Mon Sep 17 00:00:00 2001 From: sD Date: Wed, 12 Feb 2020 12:08:12 +0100 Subject: the order is important --- webAO/client.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/webAO/client.js b/webAO/client.js index 54d05b6..9e2b5b2 100644 --- a/webAO/client.js +++ b/webAO/client.js @@ -1551,13 +1551,13 @@ class Viewport { } } + chatContainerBox.style.display = "block"; + nameBox.style.display = "block"; nameBox.style.fontSize = (nameBox.offsetHeight * 0.75) + "px"; chatBox.style.display = "block"; - chatBox.style.fontSize = (chatBox.offsetHeight * 0.3) + "px"; - - chatContainerBox.style.display = "block"; + chatBox.style.fontSize = (chatBox.offsetHeight * 0.3) + "px"; if (this.chatmsg.color === 6) chatBoxInner.className = "rainbow-text"; -- cgit From a6db6bde5abb12efe146114f1d81ec3b4a60b134 Mon Sep 17 00:00:00 2001 From: sD Date: Wed, 12 Feb 2020 15:34:27 +0100 Subject: split the themes --- webAO/client.css | 43 ------------------------------------------- webAO/default.css | 35 +++++++++++++++++++++++++++++++++++ webAO/soj.css | 41 +++++++++++++++++++++++++++++++++++++++++ 3 files changed, 76 insertions(+), 43 deletions(-) create mode 100644 webAO/default.css create mode 100644 webAO/soj.css diff --git a/webAO/client.css b/webAO/client.css index 7458f47..43ed7ba 100644 --- a/webAO/client.css +++ b/webAO/client.css @@ -228,49 +228,6 @@ 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; - top: 5%; - padding: 0px 10px; - height: 20%; - border-radius: 3px; - position: absolute; -} - -#client_chat { - font-size: 1em; - display: none; - width: 100%; - margin: auto; - height: 90%; - top: 20%; - border-radius: 4px; - position: absolute; - word-break: keep-all; - word-wrap: break-word; - overflow-wrap: break-word; - text-align: left; - overflow: hidden; - scroll-behavior: smooth; -} - -#client_chat p { - margin: 4px; - padding: 5px 10px; - color: white; -} - .rainbow-text { background-color: rgb(255, 255, 255); background-image: repeating-linear-gradient(to right, diff --git a/webAO/default.css b/webAO/default.css new file mode 100644 index 0000000..ec40930 --- /dev/null +++ b/webAO/default.css @@ -0,0 +1,35 @@ +#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%; + border-radius: 3px; + position: absolute; +} + +#client_chat { + font-size: 1em; + display: none; + width: 98%; + width: calc(100% - 4px); + margin: auto; + height: 30%; + border: 2px solid rgba(255, 255, 255, 0.7); + background-color: rgba(0, 0, 0, 0.5); + top: 70%; + border-radius: 4px; + position: absolute; + word-break: keep-all; + word-wrap: break-word; + overflow-wrap: break-word; + text-align: left; + overflow: hidden; + scroll-behavior: smooth; +} + +#client_chat p { + margin: 4px; + color: white; +} \ No newline at end of file diff --git a/webAO/soj.css b/webAO/soj.css new file mode 100644 index 0000000..d453e8c --- /dev/null +++ b/webAO/soj.css @@ -0,0 +1,41 @@ +#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; + top: 5%; + padding: 0px 10px; + height: 20%; + border-radius: 3px; + position: absolute; +} + +#client_chat { + font-size: 1em; + display: none; + width: 100%; + margin: auto; + height: 90%; + top: 20%; + border-radius: 4px; + position: absolute; + word-break: keep-all; + word-wrap: break-word; + overflow-wrap: break-word; + text-align: left; + overflow: hidden; + scroll-behavior: smooth; +} + +#client_chat p { + margin: 4px; + padding: 5px 10px; + color: white; +} \ No newline at end of file -- cgit From f1f4c8fbbb104cc5452d14b533c8b65e6c5483bc Mon Sep 17 00:00:00 2001 From: sD Date: Wed, 12 Feb 2020 15:37:40 +0100 Subject: rename old theme to classic and change the font accordingly --- webAO/classic.css | 47 +++++++++++++++++++++++++++++++++++++++++++++++ webAO/client.css | 12 ------------ webAO/client.html | 2 +- webAO/default.css | 35 ----------------------------------- webAO/soj.css | 4 ++++ 5 files changed, 52 insertions(+), 48 deletions(-) create mode 100644 webAO/classic.css delete mode 100644 webAO/default.css diff --git a/webAO/classic.css b/webAO/classic.css new file mode 100644 index 0000000..5235f70 --- /dev/null +++ b/webAO/classic.css @@ -0,0 +1,47 @@ +body { + font-family: "Ace Attorney", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Osaka", "MS Gothic", "ＭＳ Ｐゴシック", "Tahoma", Sans; +} + +img { + image-rendering: -moz-crisp-edges; + image-rendering: -o-crisp-edges; + image-rendering: -webkit-optimize-contrast; + image-rendering: crisp-edges; + -ms-interpolation-mode: nearest-neighbor; +} + +#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%; + border-radius: 3px; + position: absolute; +} + +#client_chat { + font-size: 1em; + display: none; + width: 98%; + width: calc(100% - 4px); + margin: auto; + height: 30%; + border: 2px solid rgba(255, 255, 255, 0.7); + background-color: rgba(0, 0, 0, 0.5); + top: 70%; + border-radius: 4px; + position: absolute; + word-break: keep-all; + word-wrap: break-word; + overflow-wrap: break-word; + text-align: left; + overflow: hidden; + scroll-behavior: smooth; +} + +#client_chat p { + margin: 4px; + color: white; +} \ No newline at end of file diff --git a/webAO/client.css b/webAO/client.css index 43ed7ba..e736e16 100644 --- a/webAO/client.css +++ b/webAO/client.css @@ -1,15 +1,3 @@ -body { - font-family: sans-serif; -} - -img { - image-rendering: -moz-crisp-edges; - image-rendering: -o-crisp-edges; - image-rendering: -webkit-optimize-contrast; - image-rendering: crisp-edges; - -ms-interpolation-mode: nearest-neighbor; -} - #about-logo { padding-top: 5px; height: 30%; diff --git a/webAO/client.html b/webAO/client.html index 0204560..8efb1da 100644 --- a/webAO/client.html +++ b/webAO/client.html @@ -6,7 +6,7 @@ - + Date: Wed, 12 Feb 2020 15:57:24 +0100 Subject: add a theme selector, test was good --- webAO/client.html | 11 +++++++++-- webAO/client.js | 10 ++++++++++ 2 files changed, 19 insertions(+), 2 deletions(-) diff --git a/webAO/client.html b/webAO/client.html index 8efb1da..3c0845b 100644 --- a/webAO/client.html +++ b/webAO/client.html @@ -287,10 +287,17 @@ onclick="randomCharacterOOC()">Random Character

+ + +
+
Only touch these settings if you know what you are doing.

- +

- +