From 7517de059724c15032b98e5cd461e7ca0a158778 Mon Sep 17 00:00:00 2001 From: sD Date: Wed, 1 Apr 2020 22:08:31 +0200 Subject: prepare html for chatbox themes --- webAO/client.html | 1 + 1 file changed, 1 insertion(+) diff --git a/webAO/client.html b/webAO/client.html index ad42946..98c2f7d 100644 --- a/webAO/client.html +++ b/webAO/client.html @@ -30,6 +30,7 @@ + Date: Wed, 1 Apr 2020 22:08:46 +0200 Subject: move the css for the boxes into seperate css files --- webAO/styles/chatbox/aa.css | 139 ++++++++++++++++++++++++++++++++++++ webAO/styles/chatbox/chatboxes.js | 6 ++ webAO/styles/chatbox/chatdd.css | 48 +++++++++++++ webAO/styles/chatbox/cyber.css | 62 +++++++++++++++++ webAO/styles/chatbox/default.css | 38 ++++++++++ webAO/styles/classic.css | 143 -------------------------------------- webAO/styles/cyber.css | 58 ---------------- webAO/styles/default.css | 39 ----------- webAO/styles/soj.css | 48 ------------- 9 files changed, 293 insertions(+), 288 deletions(-) create mode 100644 webAO/styles/chatbox/aa.css create mode 100644 webAO/styles/chatbox/chatboxes.js create mode 100644 webAO/styles/chatbox/chatdd.css create mode 100644 webAO/styles/chatbox/cyber.css create mode 100644 webAO/styles/chatbox/default.css diff --git a/webAO/styles/chatbox/aa.css b/webAO/styles/chatbox/aa.css new file mode 100644 index 0000000..9a1b304 --- /dev/null +++ b/webAO/styles/chatbox/aa.css @@ -0,0 +1,139 @@ +@font-face { + font-family: 'ace_attorneyregular'; + src: url('ace-attorney.woff2') format('woff2'), + url('ace-attorney.woff') format('woff'); + font-weight: normal; + font-style: normal; +} + +.text_white { + color: #fff; +} + +.text_blue { + color: #6bc6f7; +} + +.text_green { + color: #00f700; +} + +.text_red { + color: #f00; +} + +.text_orange { + color: #f77339; +} + +.text_yellow { + color: #ff0; +} + +.text_pink { + color: #ffc0cb; +} + +.text_cyan { + color: #0ff; +} + +.text_rainbow { + background-color: #fff; + background-image: repeating-linear-gradient(to right, + red 0% 8%, orange 8% 16%, yellow 16% 24%, green 24% 32%, blue 32% 40%, + red 40% 48%, orange 48% 56%, yellow 56% 64%, green 64% 72%, blue 72% 80%, + red 80% 88%, orange 88% 96%, yellow 96% 100%); + background-size: 40% 40%; + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + animation: rainbow 4s linear infinite; +} + +@keyframes rainbow { + 0% { + background-position: 0 0; + } + + 100% { + background-position: 400% 0; + } +} + +#client_chatcontainer { + filter: none; + font-family: "Ace Attorney", "ace_attorneyregular", "MS PGothic", "MS UI Gothic", "MS Sans Serif", "Hiragino Maru Gothic Pro", "Mitra Mono", "Mukti Narrow", "Meera", "Khmer OS", "FreeSans", "Gargi" , sans-serif; +} + +#client_name { + display: none; + padding: 0 0.45em; + height: 5.2%; + min-width: 3.25em; + text-justify: distribute; + letter-spacing: 0.075em; + font-weight: bold; + background: rgba(56, 56, 163, 0.5); + box-shadow: 0.075em 0.075em rgba(0, 56, 163, 0.5) inset; + left: 0; + top: 60.4%; + border-color: rgba(255, 255, 255, 0.5); + border-style: ridge groove groove ridge; + border-width: 0.2em; + border-radius: 0.2em; + position: absolute; + z-index: 1; +} + +#client_chat { + font-size: 1em; + display: none; + width: 98.4375%; + width: calc(100% - 0.275em); + margin: auto; + height: 31.25%; + border-color: rgba(255, 255, 255, 0.5); + border-style: ridge groove groove ridge; + border-width: 0.15em; + border-radius: 0.3em; + background-color: rgba(0, 0, 16, 0.5); + top: 66.5%; + position: absolute; + word-break: keep-all; + overflow-wrap: break-word; + text-align: left; + overflow: hidden; + scroll-behavior: smooth; +} + +#client_chat p { + padding: 1% 3.13%; + margin: 1px; + line-height: 97%; + letter-spacing: 0.05em; + word-spacing: 0.3em; +} + +#client_chatwaiting { + display: block; + right: -6px; + bottom: 0.2em; + width: 1em; + position: absolute; + animation: idling 0.4s linear infinite; +} + +@keyframes idling { + 0% { + right: -4px; + } + + 50% { + right: -8px; + } + + 100% { + right: -4px; + } +} \ No newline at end of file diff --git a/webAO/styles/chatbox/chatboxes.js b/webAO/styles/chatbox/chatboxes.js new file mode 100644 index 0000000..a146953 --- /dev/null +++ b/webAO/styles/chatbox/chatboxes.js @@ -0,0 +1,6 @@ +export default [ + "aa", + "chatdd", + "cyber", + "default" +]; \ No newline at end of file diff --git a/webAO/styles/chatbox/chatdd.css b/webAO/styles/chatbox/chatdd.css new file mode 100644 index 0000000..ef63980 --- /dev/null +++ b/webAO/styles/chatbox/chatdd.css @@ -0,0 +1,48 @@ +#client_chatcontainer { + position: absolute; + top: 73%; + height: 27%; + width: 100%; + font-family: sans-serif; + background-image: url("../images/chatbox.svg"); + background-size: cover; + background-repeat: no-repeat; +} + +#client_name { + display: none; + top: 4%; + padding: 0 10px; + height: 22%; + position: absolute; +} + +#client_chat { + font-size: 1em; + display: none; + width: 100%; + margin: auto; + height: 90%; + top: 20%; + 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 3%; +} + +#client_chatwaiting { + display: block; + right: 1em; + bottom: 0.6em; + width: 1em; + position: absolute; + animation: idling 1s linear infinite; +} \ No newline at end of file diff --git a/webAO/styles/chatbox/cyber.css b/webAO/styles/chatbox/cyber.css new file mode 100644 index 0000000..75821f7 --- /dev/null +++ b/webAO/styles/chatbox/cyber.css @@ -0,0 +1,62 @@ +@keyframes bg-scrolling { + 0% { background-position: 0 0; } + 100% { background-position: 5px 5px; } +} + +#client_chatcontainer { + filter: none; +} + +#client_name { + display: none; + padding: 0 0.45em; + height: 5.2%; + min-width: 3.25em; + text-justify: distribute; + letter-spacing: 0.075em; + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAFElEQVQImWNgYGDYjAVTV/A/w2YAfxQSe53wkNkAAAAASUVORK5CYII=) repeat; + animation: bg-scrolling 0.2s infinite linear; + left: 0; + top: 60.4%; + border-color: green; + border-width: 0.2em; + border-style: solid; + position: absolute; + z-index: 1; +} + +#client_chat { + font-size: 1em; + display: none; + width: 98.4375%; + width: calc(100% - 0.275em); + margin: auto; + height: 31.25%; + border-color: green; + border-style: solid; + border-width: 0.15em; + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAFElEQVQImWNgYGDYjAVTV/A/w2YAfxQSe53wkNkAAAAASUVORK5CYII=) repeat; + animation: bg-scrolling 0.2s infinite linear; + top: 66.5%; + position: absolute; + word-break: keep-all; + overflow-wrap: break-word; + text-align: left; + overflow: hidden; + scroll-behavior: smooth; +} + +#client_chat p { + padding: 1% 3.13%; + margin: 1px; + line-height: 97%; +} + +#client_chatwaiting { + display: block; + right: -6px; + bottom: 0.24em; + width: 1em; + position: absolute; + animation: idling 0.4s linear infinite; +} \ No newline at end of file diff --git a/webAO/styles/chatbox/default.css b/webAO/styles/chatbox/default.css new file mode 100644 index 0000000..4e86f2a --- /dev/null +++ b/webAO/styles/chatbox/default.css @@ -0,0 +1,38 @@ +#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; +} + +#client_chatwaiting { + display: none; +} \ No newline at end of file diff --git a/webAO/styles/classic.css b/webAO/styles/classic.css index c87d76d..ffd7b28 100644 --- a/webAO/styles/classic.css +++ b/webAO/styles/classic.css @@ -15,149 +15,6 @@ img { image-rendering: pixelated; } -.text_white { - color: #fff; -} - -.text_blue { - color: #6bc6f7; -} - -.text_green { - color: #00f700; -} - -.text_red { - color: #f00; -} - -.text_orange { - color: #f77339; -} - -.text_yellow { - color: #ff0; -} - -.text_pink { - color: #ffc0cb; -} - -.text_cyan { - color: #0ff; -} - -.text_rainbow { - background-color: #fff; - background-image: repeating-linear-gradient(to right, - red 0% 8%, orange 8% 16%, yellow 16% 24%, green 24% 32%, blue 32% 40%, - red 40% 48%, orange 48% 56%, yellow 56% 64%, green 64% 72%, blue 72% 80%, - red 80% 88%, orange 88% 96%, yellow 96% 100%); - background-size: 40% 40%; - background-clip: text; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - animation: rainbow 4s linear infinite; -} - -@keyframes rainbow_alt { - - 0%, - 100% { - background-position: 0 0; - } - - 50% { - background-position: 400% 0; - } -} - -@keyframes rainbow { - 0% { - background-position: 0 0; - } - - 100% { - background-position: 400% 0; - } -} - -#client_chatcontainer { - filter: none; -} - -#client_name { - display: none; - padding: 0 0.45em; - height: 5.2%; - min-width: 3.25em; - text-justify: distribute; - letter-spacing: 0.075em; - font-weight: bold; - background: rgba(56, 56, 163, 0.5); - box-shadow: 0.075em 0.075em rgba(0, 56, 163, 0.5) inset; - left: 0; - top: 60.4%; - border-color: rgba(255, 255, 255, 0.5); - border-style: ridge groove groove ridge; - border-width: 0.2em; - border-radius: 0.2em; - position: absolute; - z-index: 1; -} - -#client_chat { - font-size: 1em; - display: none; - width: 98.4375%; - width: calc(100% - 0.275em); - margin: auto; - height: 31.25%; - border-color: rgba(255, 255, 255, 0.5); - border-style: ridge groove groove ridge; - border-width: 0.15em; - border-radius: 0.3em; - background-color: rgba(0, 0, 16, 0.5); - top: 66.5%; - position: absolute; - word-break: keep-all; - overflow-wrap: break-word; - text-align: left; - overflow: hidden; - scroll-behavior: smooth; -} - -#client_chat p { - padding: 1% 3.13%; - margin: 1px; - line-height: 97%; - letter-spacing: 0.05em; - word-spacing: 0.3em; -} - -#client_chatwaiting { - display: block; - right: -6px; - bottom: 0.2em; - width: 1em; - position: absolute; - animation: idling 0.4s linear infinite; -} - -@keyframes idling { - 0% { - right: -4px; - } - - 50% { - right: -8px; - } - - 100% { - right: -4px; - } -} - #evi_name { background-color: #393939; color: #ffad18; diff --git a/webAO/styles/cyber.css b/webAO/styles/cyber.css index 644e143..9d239e2 100644 --- a/webAO/styles/cyber.css +++ b/webAO/styles/cyber.css @@ -74,67 +74,9 @@ img { } } -#client_chatcontainer { - filter: none; -} - @keyframes bg-scrolling { 0% { background-position: 0 0; } 100% { background-position: 5px 5px; } - } - -#client_name { - display: none; - padding: 0 0.45em; - height: 5.2%; - min-width: 3.25em; - text-justify: distribute; - letter-spacing: 0.075em; - background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAFElEQVQImWNgYGDYjAVTV/A/w2YAfxQSe53wkNkAAAAASUVORK5CYII=) repeat; - animation: bg-scrolling 0.2s infinite linear; - left: 0; - top: 60.4%; - border-color: green; - border-width: 0.2em; - border-style: solid; - position: absolute; - z-index: 1; -} - -#client_chat { - font-size: 1em; - display: none; - width: 98.4375%; - width: calc(100% - 0.275em); - margin: auto; - height: 31.25%; - border-color: green; - border-style: solid; - border-width: 0.15em; - background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAFElEQVQImWNgYGDYjAVTV/A/w2YAfxQSe53wkNkAAAAASUVORK5CYII=) repeat; - animation: bg-scrolling 0.2s infinite linear; - top: 66.5%; - position: absolute; - word-break: keep-all; - overflow-wrap: break-word; - text-align: left; - overflow: hidden; - scroll-behavior: smooth; -} - -#client_chat p { - padding: 1% 3.13%; - margin: 1px; - line-height: 97%; -} - -#client_chatwaiting { - display: block; - right: -6px; - bottom: 0.24em; - width: 1em; - position: absolute; - animation: idling 0.4s linear infinite; } @keyframes idling { diff --git a/webAO/styles/default.css b/webAO/styles/default.css index 94e8677..9db682a 100644 --- a/webAO/styles/default.css +++ b/webAO/styles/default.css @@ -77,45 +77,6 @@ img { } } -#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; -} - -#client_chatwaiting { - display: none; -} - .client_button { margin: 1px; padding: 2px 15px; diff --git a/webAO/styles/soj.css b/webAO/styles/soj.css index b81508a..186d1f4 100644 --- a/webAO/styles/soj.css +++ b/webAO/styles/soj.css @@ -69,54 +69,6 @@ body { } } -#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: 4%; - padding: 0 10px; - height: 22%; - position: absolute; -} - -#client_chat { - font-size: 1em; - display: none; - width: 100%; - margin: auto; - height: 90%; - top: 20%; - 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 3%; -} - -#client_chatwaiting { - display: block; - right: 1em; - bottom: 0.6em; - width: 1em; - position: absolute; - animation: idling 1s linear infinite; -} - @keyframes idling { 0% { right: 0.4em; -- cgit From 36e85b5fb991e69254636804fd0ab8c9ff83690e Mon Sep 17 00:00:00 2001 From: sD Date: Wed, 1 Apr 2020 22:09:02 +0200 Subject: add logic to load them --- webAO/client.js | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/webAO/client.js b/webAO/client.js index fd92e90..6a3b192 100644 --- a/webAO/client.js +++ b/webAO/client.js @@ -14,6 +14,8 @@ import background_arr from "./backgrounds.js"; import evidence_arr from "./evidence.js"; import sfx_arr from "./sounds.js"; +import chatbox_arr from "./styles/chatbox/chatboxes.js"; + import { EventEmitter } from "events"; import { version } from '../package.json'; @@ -515,9 +517,11 @@ class Client extends EventEmitter { let msg_nameplate = args[3]; let msg_blips = "male"; + let char_chatbox = "default"; try { msg_nameplate = this.chars[args[9]].showname; msg_blips = this.chars[args[9]].gender; + char_chatbox = this.chars[args[9]].chat; } catch (e) { //we already set defaults } @@ -526,6 +530,7 @@ class Client extends EventEmitter { deskmod: safe_tags(args[1]).toLowerCase(), preanim: safe_tags(args[2]).toLowerCase(), // get preanim nameplate: msg_nameplate, // TODO: there's a new feature that let's people choose the name that's displayed + chatbox: char_chatbox, name: safe_tags(args[3]), sprite: safe_tags(args[4]).toLowerCase(), content: this.prepChat(args[5]), // Escape HTML tags @@ -652,7 +657,8 @@ class Client extends EventEmitter { name: chargs[0], showname: chargs[0], side: "def", - gender: "male" + gender: "male", + chat: "default" }; cini.options = Object.assign(default_options, cini.options); @@ -667,6 +673,8 @@ class Client extends EventEmitter { showname: safe_tags(cini.options.showname), desc: safe_tags(chargs[1]), gender: safe_tags(cini.options.gender).toLowerCase(), + side: safe_tags(cini.options.side).toLowerCase(), + chat: safe_tags(cini.options.chat).toLowerCase(), evidence: chargs[3], icon: icon, inifile: cini, @@ -1508,6 +1516,7 @@ async changeBackground(position) { const pairSprite = document.getElementById("client_pair_char"); const nameBox = document.getElementById("client_name"); const chatBox = document.getElementById("client_chat"); + const chatbox_theme = document.getElementById("chatbox_theme"); const chatContainerBox = document.getElementById("client_chatcontainer"); const waitingBox = document.getElementById("client_chatwaiting"); const eviBox = document.getElementById("client_evi"); @@ -1622,6 +1631,12 @@ async changeBackground(position) { this.changeBackground(chatmsg.side); + if (chatbox_arr.includes(chatmsg.chatbox)) { + chatbox_theme.href = "styles/chatbox/" + chatmsg.chatbox + ".css"; + } else { + chatbox_theme.href = "styles/chatbox/default.css"; + } + // Flip the character if (this.chatmsg.flip === 1) { charSprite.style.transform = "scaleX(-1)"; -- cgit From 1df31063b975f94afece3fca8fe4810452cfa927 Mon Sep 17 00:00:00 2001 From: sD Date: Wed, 1 Apr 2020 23:07:44 +0200 Subject: add unfinished dgs box --- webAO/styles/chatbox/dgs.css | 41 +++++++++++++++++++++++++++++++++++ webAO/styles/chatbox/dgs_chat_bg.png | Bin 0 -> 1763 bytes 2 files changed, 41 insertions(+) create mode 100644 webAO/styles/chatbox/dgs.css create mode 100644 webAO/styles/chatbox/dgs_chat_bg.png diff --git a/webAO/styles/chatbox/dgs.css b/webAO/styles/chatbox/dgs.css new file mode 100644 index 0000000..e5ea3db --- /dev/null +++ b/webAO/styles/chatbox/dgs.css @@ -0,0 +1,41 @@ +#client_name { + display: none; + padding: 0px 6px; + height: 5.2%; + border: 1px solid #a59252; + background-image: linear-gradient(#635529, #8c7d42); + left: 1.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-image-source: url("dgs_chat_bg.png"); + border-image-slice: 12; + border-image-width: 12px; + border-width: 12px; + background-color: rgba(8, 22, 33, 0.75); + top: 70%; + 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; +} + +#client_chatwaiting { + display: none; +} \ No newline at end of file diff --git a/webAO/styles/chatbox/dgs_chat_bg.png b/webAO/styles/chatbox/dgs_chat_bg.png new file mode 100644 index 0000000..90e408a Binary files /dev/null and b/webAO/styles/chatbox/dgs_chat_bg.png differ -- cgit From 7d8880f37c60c911fd0c6e11d923d0205d2a8766 Mon Sep 17 00:00:00 2001 From: sD Date: Wed, 1 Apr 2020 23:07:56 +0200 Subject: add yttd box --- webAO/styles/chatbox/yttd.css | 54 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 54 insertions(+) create mode 100644 webAO/styles/chatbox/yttd.css diff --git a/webAO/styles/chatbox/yttd.css b/webAO/styles/chatbox/yttd.css new file mode 100644 index 0000000..c5fa50a --- /dev/null +++ b/webAO/styles/chatbox/yttd.css @@ -0,0 +1,54 @@ + +#client_name { + display: none; + padding: 0 0.45em; + height: 5.2%; + min-width: 3.25em; + text-justify: distribute; + letter-spacing: 0.075em; + font-weight: bold; + background-color: black; + box-shadow: 0.075em 0.075em rgba(0, 56, 163, 0.5) inset; + left: 0; + top: 60.4%; + border-style: double; + border-color: #ffa500; + position: absolute; + z-index: 1; +} + +#client_chat { + font-size: 1em; + display: none; + width: 98.4375%; + width: calc(100% - 0.275em); + margin: auto; + height: 31.25%; + border-style: double; + border-color: #ffa500; + background-color: black; + top: 66.5%; + position: absolute; + word-break: keep-all; + overflow-wrap: break-word; + text-align: left; + overflow: hidden; + scroll-behavior: smooth; +} + +#client_chat p { + padding: 1% 3.13%; + margin: 1px; + line-height: 97%; + letter-spacing: 0.05em; + word-spacing: 0.3em; +} + +#client_chatwaiting { + display: block; + right: -6px; + bottom: 0.2em; + width: 1em; + position: absolute; + animation: idling 0.4s linear infinite; +} \ No newline at end of file -- cgit From b706b1bd9e2a783970cb9979b53f969ceb28442d Mon Sep 17 00:00:00 2001 From: sD Date: Wed, 1 Apr 2020 23:53:59 +0200 Subject: rough drae theme --- webAO/styles/chatbox/drae.css | 48 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 48 insertions(+) create mode 100644 webAO/styles/chatbox/drae.css diff --git a/webAO/styles/chatbox/drae.css b/webAO/styles/chatbox/drae.css new file mode 100644 index 0000000..397dcfd --- /dev/null +++ b/webAO/styles/chatbox/drae.css @@ -0,0 +1,48 @@ +#client_chatcontainer { + font-family: sans-serif; +} + +#client_name { + display: none; + padding: 0 0.45em; + height: 5.2%; + width: 40%; + text-align: left; + letter-spacing: 0.075em; + font-weight: bold; + background: rgba(255, 0, 187, 0.9); + left: 0; + bottom: 31.25%; + position: absolute; + z-index: 1; +} + +#client_chat { + font-size: 1em; + display: none; + width: 100%; + margin: auto; + height: 31.25%; + border-top: 2px solid #ff00ab; + border-bottom: 2px solid #e9019e; + background-image: linear-gradient(rgba(33,18,28,0.75),rgba(45,18,36,0.75)); + bottom: 0; + position: absolute; + word-break: keep-all; + overflow-wrap: break-word; + text-align: left; + overflow: hidden; + scroll-behavior: smooth; +} + +#client_chat p { + padding: 1% 3.13%; + margin: 1px; + line-height: 97%; + letter-spacing: 0.05em; + word-spacing: 0.3em; +} + +#client_chatwaiting { + display: none; +} \ No newline at end of file -- cgit From f9e3c4da182d9d8b751178a6ece798c7a8062e31 Mon Sep 17 00:00:00 2001 From: sD Date: Wed, 1 Apr 2020 23:55:15 +0200 Subject: add them to the list --- webAO/styles/chatbox/chatboxes.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/webAO/styles/chatbox/chatboxes.js b/webAO/styles/chatbox/chatboxes.js index a146953..a815424 100644 --- a/webAO/styles/chatbox/chatboxes.js +++ b/webAO/styles/chatbox/chatboxes.js @@ -2,5 +2,8 @@ export default [ "aa", "chatdd", "cyber", - "default" + "default", + "dgs", + "drae", + "yttd" ]; \ No newline at end of file -- cgit From 1bb03e1fe25ccf2de5c74729e757bd06cffcc492 Mon Sep 17 00:00:00 2001 From: sD Date: Thu, 2 Apr 2020 14:27:17 +0200 Subject: dgs font --- webAO/styles/chatbox/dgs.css | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/webAO/styles/chatbox/dgs.css b/webAO/styles/chatbox/dgs.css index e5ea3db..5df55d2 100644 --- a/webAO/styles/chatbox/dgs.css +++ b/webAO/styles/chatbox/dgs.css @@ -1,3 +1,15 @@ +@font-face { + font-family: 'Cabin Condensed'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Cabin Condensed'), local('CabinCondensed-Regular'), url(https://fonts.gstatic.com/s/cabincondensed/v13/nwpMtK6mNhBK2err_hqkYhHRqmwqZ-LY.woff2) format('woff2'); +} + +#chatcontainer { + font-family: 'Cabin Condensed', sans-serif; +} + #client_name { display: none; padding: 0px 6px; -- cgit From 1cf3f105bb62ff7a18a828fb57b2bce92c8812e5 Mon Sep 17 00:00:00 2001 From: sD Date: Thu, 2 Apr 2020 16:41:55 +0200 Subject: change sizes --- webAO/styles/chatbox/dgs.css | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/webAO/styles/chatbox/dgs.css b/webAO/styles/chatbox/dgs.css index 5df55d2..8e72484 100644 --- a/webAO/styles/chatbox/dgs.css +++ b/webAO/styles/chatbox/dgs.css @@ -6,34 +6,34 @@ src: local('Cabin Condensed'), local('CabinCondensed-Regular'), url(https://fonts.gstatic.com/s/cabincondensed/v13/nwpMtK6mNhBK2err_hqkYhHRqmwqZ-LY.woff2) format('woff2'); } -#chatcontainer { +#client_chatcontainer { font-family: 'Cabin Condensed', sans-serif; } #client_name { display: none; padding: 0px 6px; - height: 5.2%; + height: 5%; border: 1px solid #a59252; background-image: linear-gradient(#635529, #8c7d42); - left: 1.5%; - top: 63%; + left: 2%; + top: 65%; border-radius: 3px; position: absolute; + z-index: 1; } #client_chat { font-size: 1em; display: none; - width: 98%; - width: calc(100% - 4px); + width: 100%; margin: auto; height: 30%; border-image-source: url("dgs_chat_bg.png"); border-image-slice: 12; border-image-width: 12px; border-width: 12px; - background-color: rgba(8, 22, 33, 0.75); + background-color: #101821; top: 70%; position: absolute; word-break: keep-all; @@ -45,7 +45,8 @@ } #client_chat p { - margin: 4px; + margin: 6px; + padding: 6px 20px; } #client_chatwaiting { -- cgit From e314857be9058f811489cff5d6976bf15ee5238a Mon Sep 17 00:00:00 2001 From: sD Date: Tue, 7 Apr 2020 14:28:06 +0200 Subject: add triology chatbox here --- webAO/styles/chatbox/chatwaiting_triology.svg | 1 + webAO/styles/chatbox/triology.css | 139 ++++++++++++++++++++++++++ 2 files changed, 140 insertions(+) create mode 100644 webAO/styles/chatbox/chatwaiting_triology.svg create mode 100644 webAO/styles/chatbox/triology.css diff --git a/webAO/styles/chatbox/chatwaiting_triology.svg b/webAO/styles/chatbox/chatwaiting_triology.svg new file mode 100644 index 0000000..6ce23eb --- /dev/null +++ b/webAO/styles/chatbox/chatwaiting_triology.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/webAO/styles/chatbox/triology.css b/webAO/styles/chatbox/triology.css new file mode 100644 index 0000000..739156f --- /dev/null +++ b/webAO/styles/chatbox/triology.css @@ -0,0 +1,139 @@ +.text_white { + color: #fff; +} + +.text_green { + color: #00c900; +} + +.text_red { + color: #ff1700; +} + +.text_orange { + color: #ffa500; +} + +.text_blue { + color: #67b7ed; +} + +.text_yellow { + color: #ff0; +} + +.text_pink { + color: #ffc0cb; +} + +.text_cyan { + color: #0ff; +} + +.text_rainbow { + background-color: #fff; + background-image: repeating-linear-gradient(to right, + red 0% 8%, orange 8% 16%, yellow 16% 24%, green 24% 32%, blue 32% 40%, + red 40% 48%, orange 48% 56%, yellow 56% 64%, green 64% 72%, blue 72% 80%, + red 80% 88%, orange 88% 96%, yellow 96% 100%); + background-size: 40% 40%; + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + animation: rainbow 4s linear infinite; +} + +@keyframes rainbow_alt { + + 0%, + 100% { + background-position: 0 0; + } + + 50% { + background-position: 400% 0; + } +} + +@keyframes rainbow { + 0% { + background-position: 0 0; + } + + 100% { + background-position: 400% 0; + } +} + +#client_chatcontainer { + position: absolute; + top: 65%; + height: 30%; + width: 100%; + font-family: serif; +} + +#client_name { + display: none; + background-color: #2989bd; + top: 0; + left: 10%; + padding: 0 10px; + height: 20%; + min-width: 15%; + border: 1px white; + border-style: solid none solid none; + position: absolute; + z-index: 1; +} + +#client_chat { + font-size: 1em; + display: none; + width: 100%; + margin: auto; + height: 90%; + top: 10%; + position: absolute; + word-break: keep-all; + word-wrap: break-word; + overflow-wrap: break-word; + text-align: left; + overflow: hidden; + scroll-behavior: smooth; + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAL0lEQVQImWOQ98nYzGsVupnXKnSzvE8GCmaASWBTgF8S3VhkNgOySnRTiJdENxYAYC1Ff2vnYrkAAAAASUVORK5CYII=) repeat; + border: 1px white; + border-style: solid none solid none; +} + +#client_chat p { + margin: 4px; + padding: 2% 5%; +} + +#client_chatwaiting { + display: block; + color: transparent; + right: 0.6em; + bottom: 0.6em; + width: 1em; + height: 1em; + background-image: url("chatwaiting_triology.svg"); + background-size: contain; + position: absolute; + animation: idling 0.5s ease infinite; +} + +@keyframes idling { + 0% { + right: 0.6em; + } + + 25% { + right: 0.7em; + } + + 100% { + right: 0.6em; + } +} \ No newline at end of file -- cgit From c76b2a871a385cb4ae398e2fe067a26a6b356bb9 Mon Sep 17 00:00:00 2001 From: sD Date: Tue, 7 Apr 2020 14:29:18 +0200 Subject: triology font name --- webAO/styles/chatbox/triology.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webAO/styles/chatbox/triology.css b/webAO/styles/chatbox/triology.css index 739156f..08a7e3f 100644 --- a/webAO/styles/chatbox/triology.css +++ b/webAO/styles/chatbox/triology.css @@ -70,7 +70,7 @@ top: 65%; height: 30%; width: 100%; - font-family: serif; + font-family: "FOTK-Yoon Mincho 740", serif; } #client_name { -- cgit From 5c92dc9b4b3d1b35fe9e7fb929751b7d66933c30 Mon Sep 17 00:00:00 2001 From: sD Date: Tue, 7 Apr 2020 19:02:37 +0200 Subject: put the name and chatbox in the chatcontainer --- webAO/styles/chatbox/aa.css | 40 +++++++++++++++++++++++----------------- 1 file changed, 23 insertions(+), 17 deletions(-) diff --git a/webAO/styles/chatbox/aa.css b/webAO/styles/chatbox/aa.css index 9a1b304..8bff8eb 100644 --- a/webAO/styles/chatbox/aa.css +++ b/webAO/styles/chatbox/aa.css @@ -1,9 +1,9 @@ @font-face { - font-family: 'ace_attorneyregular'; - src: url('ace-attorney.woff2') format('woff2'), - url('ace-attorney.woff') format('woff'); - font-weight: normal; - font-style: normal; + font-family: 'ace_attorneyregular'; + src: url('ace-attorney.woff2') format('woff2'), + url('ace-attorney.woff') format('woff'); + font-weight: normal; + font-style: normal; } .text_white { @@ -62,44 +62,50 @@ } #client_chatcontainer { - filter: none; - font-family: "Ace Attorney", "ace_attorneyregular", "MS PGothic", "MS UI Gothic", "MS Sans Serif", "Hiragino Maru Gothic Pro", "Mitra Mono", "Mukti Narrow", "Meera", "Khmer OS", "FreeSans", "Gargi" , sans-serif; + position: absolute; + top: 60%; + left: 0; + height: 40%; + width: 100%; + filter: none; + font-family: "Ace Attorney", "ace_attorneyregular", "MS PGothic", "MS UI Gothic", "MS Sans Serif", "Hiragino Maru Gothic Pro", "Mitra Mono", "Mukti Narrow", "Meera", "Khmer OS", "FreeSans", "Gargi", sans-serif; } #client_name { display: none; - padding: 0 0.45em; - height: 5.2%; + position: absolute; + left: 0; + top: 0; + height: 13%; min-width: 3.25em; text-justify: distribute; letter-spacing: 0.075em; font-weight: bold; background: rgba(56, 56, 163, 0.5); box-shadow: 0.075em 0.075em rgba(0, 56, 163, 0.5) inset; - left: 0; - top: 60.4%; + padding: 0 0.45em; border-color: rgba(255, 255, 255, 0.5); border-style: ridge groove groove ridge; border-width: 0.2em; - border-radius: 0.2em; - position: absolute; + border-radius: 0.2em; z-index: 1; } #client_chat { font-size: 1em; display: none; - width: 98.4375%; + position: absolute; + bottom: 0; + left: 0; + width: 98%; width: calc(100% - 0.275em); + height: 78%; margin: auto; - height: 31.25%; border-color: rgba(255, 255, 255, 0.5); border-style: ridge groove groove ridge; border-width: 0.15em; border-radius: 0.3em; background-color: rgba(0, 0, 16, 0.5); - top: 66.5%; - position: absolute; word-break: keep-all; overflow-wrap: break-word; text-align: left; -- cgit From 3d7ccc2356a04ab98ce259df16b3324e5e96904a Mon Sep 17 00:00:00 2001 From: sD Date: Tue, 7 Apr 2020 19:08:18 +0200 Subject: remove cyber --- webAO/styles/chatbox/chatboxes.js | 2 +- webAO/styles/chatbox/cyber.css | 62 --------------------------------------- 2 files changed, 1 insertion(+), 63 deletions(-) delete mode 100644 webAO/styles/chatbox/cyber.css diff --git a/webAO/styles/chatbox/chatboxes.js b/webAO/styles/chatbox/chatboxes.js index a815424..8010b7f 100644 --- a/webAO/styles/chatbox/chatboxes.js +++ b/webAO/styles/chatbox/chatboxes.js @@ -1,9 +1,9 @@ export default [ "aa", "chatdd", - "cyber", "default", "dgs", "drae", + "triology", "yttd" ]; \ No newline at end of file diff --git a/webAO/styles/chatbox/cyber.css b/webAO/styles/chatbox/cyber.css deleted file mode 100644 index 75821f7..0000000 --- a/webAO/styles/chatbox/cyber.css +++ /dev/null @@ -1,62 +0,0 @@ -@keyframes bg-scrolling { - 0% { background-position: 0 0; } - 100% { background-position: 5px 5px; } -} - -#client_chatcontainer { - filter: none; -} - -#client_name { - display: none; - padding: 0 0.45em; - height: 5.2%; - min-width: 3.25em; - text-justify: distribute; - letter-spacing: 0.075em; - background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAFElEQVQImWNgYGDYjAVTV/A/w2YAfxQSe53wkNkAAAAASUVORK5CYII=) repeat; - animation: bg-scrolling 0.2s infinite linear; - left: 0; - top: 60.4%; - border-color: green; - border-width: 0.2em; - border-style: solid; - position: absolute; - z-index: 1; -} - -#client_chat { - font-size: 1em; - display: none; - width: 98.4375%; - width: calc(100% - 0.275em); - margin: auto; - height: 31.25%; - border-color: green; - border-style: solid; - border-width: 0.15em; - background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAFElEQVQImWNgYGDYjAVTV/A/w2YAfxQSe53wkNkAAAAASUVORK5CYII=) repeat; - animation: bg-scrolling 0.2s infinite linear; - top: 66.5%; - position: absolute; - word-break: keep-all; - overflow-wrap: break-word; - text-align: left; - overflow: hidden; - scroll-behavior: smooth; -} - -#client_chat p { - padding: 1% 3.13%; - margin: 1px; - line-height: 97%; -} - -#client_chatwaiting { - display: block; - right: -6px; - bottom: 0.24em; - width: 1em; - position: absolute; - animation: idling 0.4s linear infinite; -} \ No newline at end of file -- cgit From 57a349de5df8b6f7c35759401fc9e2f95c8befb7 Mon Sep 17 00:00:00 2001 From: sD Date: Tue, 7 Apr 2020 19:08:34 +0200 Subject: move default theme to chatcontainer, needs testing --- webAO/styles/chatbox/default.css | 34 ++++++++++++++++++++++------------ 1 file changed, 22 insertions(+), 12 deletions(-) diff --git a/webAO/styles/chatbox/default.css b/webAO/styles/chatbox/default.css index 4e86f2a..4c99ebb 100644 --- a/webAO/styles/chatbox/default.css +++ b/webAO/styles/chatbox/default.css @@ -1,26 +1,36 @@ +#client_chatcontainer { + position: absolute; + top: 60%; + left: 0; + height: 40%; + width: 100%; +} + #client_name { display: none; - padding: 0px 6px; - height: 7%; + position: absolute; + top: 0; + left: 0; + height: 15%; border: 1px solid rgba(255, 255, 255, 0.7); - background: rgba(73, 0, 254, 0.5); - top: 63%; border-radius: 3px; - position: absolute; + background: rgba(73, 0, 254, 0.5); + padding: 0px 6px; } #client_chat { - font-size: 1em; + position: absolute; display: none; + bottom: 0; + left: 0; width: 98%; - width: calc(100% - 4px); - margin: auto; - height: 30%; + width: calc(100% - 4px); + height: 82%; border: 2px solid rgba(255, 255, 255, 0.7); - background-color: rgba(0, 0, 0, 0.5); - top: 70%; border-radius: 4px; - position: absolute; + background-color: rgba(0, 0, 0, 0.5); + margin: auto; + font-size: 1em; word-break: keep-all; word-wrap: break-word; overflow-wrap: break-word; -- cgit From 34908dcaef5940ae40c95865e4bf7f875d1d0a6f Mon Sep 17 00:00:00 2001 From: sD Date: Tue, 7 Apr 2020 19:12:32 +0200 Subject: make AA the default chatbox --- webAO/client.js | 4 ++-- webAO/styles/chatbox/chatboxes.js | 2 +- webAO/styles/chatbox/default.css | 48 -------------------------------------- webAO/styles/chatbox/legacy.css | 49 +++++++++++++++++++++++++++++++++++++++ 4 files changed, 52 insertions(+), 51 deletions(-) delete mode 100644 webAO/styles/chatbox/default.css create mode 100644 webAO/styles/chatbox/legacy.css diff --git a/webAO/client.js b/webAO/client.js index c97c136..120936d 100644 --- a/webAO/client.js +++ b/webAO/client.js @@ -672,7 +672,7 @@ class Client extends EventEmitter { showname: chargs[0], side: "def", gender: "male", - chat: "default" + chat: "aa" }; cini.options = Object.assign(default_options, cini.options); @@ -1654,7 +1654,7 @@ async changeBackground(position) { if (chatbox_arr.includes(chatmsg.chatbox)) { chatbox_theme.href = "styles/chatbox/" + chatmsg.chatbox + ".css"; } else { - chatbox_theme.href = "styles/chatbox/default.css"; + chatbox_theme.href = "styles/chatbox/aa.css"; } // Flip the character diff --git a/webAO/styles/chatbox/chatboxes.js b/webAO/styles/chatbox/chatboxes.js index 8010b7f..01deaa1 100644 --- a/webAO/styles/chatbox/chatboxes.js +++ b/webAO/styles/chatbox/chatboxes.js @@ -1,9 +1,9 @@ export default [ "aa", "chatdd", - "default", "dgs", "drae", + "legacy", "triology", "yttd" ]; \ No newline at end of file diff --git a/webAO/styles/chatbox/default.css b/webAO/styles/chatbox/default.css deleted file mode 100644 index 4c99ebb..0000000 --- a/webAO/styles/chatbox/default.css +++ /dev/null @@ -1,48 +0,0 @@ -#client_chatcontainer { - position: absolute; - top: 60%; - left: 0; - height: 40%; - width: 100%; -} - -#client_name { - display: none; - position: absolute; - top: 0; - left: 0; - height: 15%; - border: 1px solid rgba(255, 255, 255, 0.7); - border-radius: 3px; - background: rgba(73, 0, 254, 0.5); - padding: 0px 6px; -} - -#client_chat { - position: absolute; - display: none; - bottom: 0; - left: 0; - width: 98%; - width: calc(100% - 4px); - height: 82%; - border: 2px solid rgba(255, 255, 255, 0.7); - border-radius: 4px; - background-color: rgba(0, 0, 0, 0.5); - margin: auto; - font-size: 1em; - 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; -} - -#client_chatwaiting { - display: none; -} \ No newline at end of file diff --git a/webAO/styles/chatbox/legacy.css b/webAO/styles/chatbox/legacy.css new file mode 100644 index 0000000..111bcf6 --- /dev/null +++ b/webAO/styles/chatbox/legacy.css @@ -0,0 +1,49 @@ +#client_chatcontainer { + position: absolute; + top: 60%; + left: 0; + height: 40%; + width: 100%; +} + +#client_name { + display: none; + position: absolute; + top: 0; + left: 0; + height: 16%; + border: 1px solid rgba(255, 255, 255, 0.7); + border-radius: 3px; + background: rgba(73, 0, 254, 0.5); + padding: 0px 6px; + z-index: 1; +} + +#client_chat { + position: absolute; + display: none; + bottom: 0; + left: 0; + width: 98%; + width: calc(100% - 4px); + height: 80%; + border: 2px solid rgba(255, 255, 255, 0.7); + border-radius: 4px; + background-color: rgba(0, 0, 0, 0.5); + margin: auto; + font-size: 1em; + 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; +} + +#client_chatwaiting { + display: none; +} \ No newline at end of file -- cgit From 2a731f4c0a1325a64c525992c0f78c95a97c6092 Mon Sep 17 00:00:00 2001 From: sD Date: Tue, 7 Apr 2020 19:18:09 +0200 Subject: negative works really bad on small screens --- webAO/styles/chatbox/aa.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/webAO/styles/chatbox/aa.css b/webAO/styles/chatbox/aa.css index 8bff8eb..2158956 100644 --- a/webAO/styles/chatbox/aa.css +++ b/webAO/styles/chatbox/aa.css @@ -123,7 +123,7 @@ #client_chatwaiting { display: block; - right: -6px; + right: 4px; bottom: 0.2em; width: 1em; position: absolute; @@ -132,14 +132,14 @@ @keyframes idling { 0% { - right: -4px; + right: 0px; } 50% { - right: -8px; + right: 4px; } 100% { - right: -4px; + right: 0px; } } \ No newline at end of file -- cgit From e172029a5e978da699e0c9152f3b1682b5c7095b Mon Sep 17 00:00:00 2001 From: sD Date: Tue, 7 Apr 2020 19:54:10 +0200 Subject: fix yttd theme --- webAO/styles/chatbox/yttd.css | 31 ++++++++++++++++++++----------- 1 file changed, 20 insertions(+), 11 deletions(-) diff --git a/webAO/styles/chatbox/yttd.css b/webAO/styles/chatbox/yttd.css index c5fa50a..b3a7ba0 100644 --- a/webAO/styles/chatbox/yttd.css +++ b/webAO/styles/chatbox/yttd.css @@ -1,16 +1,25 @@ +#client_chatcontainer { + position: absolute; + top: 50%; + left: 0; + height: 50%; + width: 100%; + filter: none; + font-family: "MS PGothic", sans-serif; +} + #client_name { display: none; - padding: 0 0.45em; - height: 5.2%; + top: 0; + left: 0; + height: 25%; min-width: 3.25em; text-justify: distribute; letter-spacing: 0.075em; font-weight: bold; - background-color: black; - box-shadow: 0.075em 0.075em rgba(0, 56, 163, 0.5) inset; - left: 0; - top: 60.4%; + background-color: rgba(0, 0, 0, 0.5); + padding: 0.5 0.5em; border-style: double; border-color: #ffa500; position: absolute; @@ -20,14 +29,14 @@ #client_chat { font-size: 1em; display: none; - width: 98.4375%; - width: calc(100% - 0.275em); + bottom: 0; + width: 99%; + width: calc(100% - 6px); margin: auto; - height: 31.25%; + height: 70%; border-style: double; border-color: #ffa500; - background-color: black; - top: 66.5%; + background-color: rgba(0, 0, 0, 0.5); position: absolute; word-break: keep-all; overflow-wrap: break-word; -- cgit From 2257d5d4b1a94d6d4eae3af127fd2b20f33b180f Mon Sep 17 00:00:00 2001 From: sD Date: Tue, 7 Apr 2020 22:51:33 +0200 Subject: don't worry about top anymore --- webAO/styles/chatbox/aa.css | 2 +- webAO/styles/chatbox/chatdd.css | 2 +- webAO/styles/chatbox/legacy.css | 2 +- webAO/styles/chatbox/triology.css | 2 +- webAO/styles/chatbox/yttd.css | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/webAO/styles/chatbox/aa.css b/webAO/styles/chatbox/aa.css index 2158956..80373e5 100644 --- a/webAO/styles/chatbox/aa.css +++ b/webAO/styles/chatbox/aa.css @@ -63,7 +63,7 @@ #client_chatcontainer { position: absolute; - top: 60%; + bottom: 0; left: 0; height: 40%; width: 100%; diff --git a/webAO/styles/chatbox/chatdd.css b/webAO/styles/chatbox/chatdd.css index ef63980..31dfe07 100644 --- a/webAO/styles/chatbox/chatdd.css +++ b/webAO/styles/chatbox/chatdd.css @@ -1,6 +1,6 @@ #client_chatcontainer { position: absolute; - top: 73%; + bottom: 0; height: 27%; width: 100%; font-family: sans-serif; diff --git a/webAO/styles/chatbox/legacy.css b/webAO/styles/chatbox/legacy.css index 111bcf6..4e22b5b 100644 --- a/webAO/styles/chatbox/legacy.css +++ b/webAO/styles/chatbox/legacy.css @@ -1,6 +1,6 @@ #client_chatcontainer { position: absolute; - top: 60%; + bottom: 0; left: 0; height: 40%; width: 100%; diff --git a/webAO/styles/chatbox/triology.css b/webAO/styles/chatbox/triology.css index 08a7e3f..a17062d 100644 --- a/webAO/styles/chatbox/triology.css +++ b/webAO/styles/chatbox/triology.css @@ -67,7 +67,7 @@ #client_chatcontainer { position: absolute; - top: 65%; + bottom: 0; height: 30%; width: 100%; font-family: "FOTK-Yoon Mincho 740", serif; diff --git a/webAO/styles/chatbox/yttd.css b/webAO/styles/chatbox/yttd.css index b3a7ba0..a0e0c1c 100644 --- a/webAO/styles/chatbox/yttd.css +++ b/webAO/styles/chatbox/yttd.css @@ -1,7 +1,7 @@ #client_chatcontainer { position: absolute; - top: 50%; + bottom: 0; left: 0; height: 50%; width: 100%; -- cgit From caa5596464c7a34a32fa3e020896f49012d77a5b Mon Sep 17 00:00:00 2001 From: sD Date: Tue, 7 Apr 2020 23:09:19 +0200 Subject: add text colors and idle animation --- webAO/styles/chatbox/yttd.css | 57 ++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 53 insertions(+), 4 deletions(-) diff --git a/webAO/styles/chatbox/yttd.css b/webAO/styles/chatbox/yttd.css index a0e0c1c..b9d5d70 100644 --- a/webAO/styles/chatbox/yttd.css +++ b/webAO/styles/chatbox/yttd.css @@ -9,6 +9,40 @@ font-family: "MS PGothic", sans-serif; } +.text_white { + color: #fff; +} + +.text_blue { + color: #93bbe6; +} + +.text_green { + color: #6ab057; +} + +.text_red { + color: #e1522a; +} + +.text_orange { + color: #cf714c; +} + +.text_yellow { + color: #fef9ad; +} + +.text_pink { + color: #ffc0cb; +} + +.text_cyan { + color: #0ff; +} + + + #client_name { display: none; top: 0; @@ -19,6 +53,7 @@ letter-spacing: 0.075em; font-weight: bold; background-color: rgba(0, 0, 0, 0.5); + color: #fef9ad; padding: 0.5 0.5em; border-style: double; border-color: #ffa500; @@ -55,9 +90,23 @@ #client_chatwaiting { display: block; - right: -6px; - bottom: 0.2em; - width: 1em; + transform: rotate(90deg); + left: 50%; + bottom: 0px; position: absolute; - animation: idling 0.4s linear infinite; + animation: idling 1s linear infinite; +} + +@keyframes idling { + 0% { + bottom: 2px; + } + + 50% { + bottom: 0px; + } + + 100% { + bottom: 2px; + } } \ No newline at end of file -- cgit From 56a21a7956cdda8e2bb296928a11be3358ab04e5 Mon Sep 17 00:00:00 2001 From: sD Date: Tue, 7 Apr 2020 23:10:38 +0200 Subject: set min width to a not text related value --- webAO/styles/chatbox/yttd.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webAO/styles/chatbox/yttd.css b/webAO/styles/chatbox/yttd.css index b9d5d70..6f3b122 100644 --- a/webAO/styles/chatbox/yttd.css +++ b/webAO/styles/chatbox/yttd.css @@ -48,7 +48,7 @@ top: 0; left: 0; height: 25%; - min-width: 3.25em; + min-width: 10%; text-justify: distribute; letter-spacing: 0.075em; font-weight: bold; -- cgit From 3546e8c3adc700a6998103373bdc733ee33ae5e5 Mon Sep 17 00:00:00 2001 From: sD Date: Tue, 7 Apr 2020 23:25:20 +0200 Subject: change padding to percent --- webAO/styles/chatbox/aa.css | 2 +- webAO/styles/chatbox/yttd.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/webAO/styles/chatbox/aa.css b/webAO/styles/chatbox/aa.css index 80373e5..deeafb2 100644 --- a/webAO/styles/chatbox/aa.css +++ b/webAO/styles/chatbox/aa.css @@ -83,7 +83,7 @@ font-weight: bold; background: rgba(56, 56, 163, 0.5); box-shadow: 0.075em 0.075em rgba(0, 56, 163, 0.5) inset; - padding: 0 0.45em; + padding: 0 2%; border-color: rgba(255, 255, 255, 0.5); border-style: ridge groove groove ridge; border-width: 0.2em; diff --git a/webAO/styles/chatbox/yttd.css b/webAO/styles/chatbox/yttd.css index 6f3b122..977c9f1 100644 --- a/webAO/styles/chatbox/yttd.css +++ b/webAO/styles/chatbox/yttd.css @@ -54,7 +54,7 @@ font-weight: bold; background-color: rgba(0, 0, 0, 0.5); color: #fef9ad; - padding: 0.5 0.5em; + padding: 0 3%; border-style: double; border-color: #ffa500; position: absolute; -- cgit From 97dd2619dbf3e5d9ab72815ebe0ea59c155bb60c Mon Sep 17 00:00:00 2001 From: sD Date: Tue, 7 Apr 2020 23:27:58 +0200 Subject: change default chatbox in html --- webAO/client.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webAO/client.html b/webAO/client.html index d5885ce..c1ebdca 100644 --- a/webAO/client.html +++ b/webAO/client.html @@ -30,7 +30,7 @@ - + Date: Tue, 7 Apr 2020 23:30:06 +0200 Subject: add text border for yttd --- webAO/styles/chatbox/yttd.css | 1 + 1 file changed, 1 insertion(+) diff --git a/webAO/styles/chatbox/yttd.css b/webAO/styles/chatbox/yttd.css index 977c9f1..471ba79 100644 --- a/webAO/styles/chatbox/yttd.css +++ b/webAO/styles/chatbox/yttd.css @@ -7,6 +7,7 @@ width: 100%; filter: none; font-family: "MS PGothic", sans-serif; + text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; } .text_white { -- cgit From 0bad799d9ba615c8a1c1d53cb779fa4ea2ab3da2 Mon Sep 17 00:00:00 2001 From: sD Date: Tue, 7 Apr 2020 23:44:34 +0200 Subject: fix up chatwaiting --- webAO/styles/chatbox/aa.css | 12 ++++++------ webAO/styles/chatbox/yttd.css | 5 +++-- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/webAO/styles/chatbox/aa.css b/webAO/styles/chatbox/aa.css index deeafb2..ab0514b 100644 --- a/webAO/styles/chatbox/aa.css +++ b/webAO/styles/chatbox/aa.css @@ -123,23 +123,23 @@ #client_chatwaiting { display: block; - right: 4px; - bottom: 0.2em; - width: 1em; position: absolute; + right: 2%; + bottom: 15%; + line-height: 0.5; animation: idling 0.4s linear infinite; } @keyframes idling { 0% { - right: 0px; + right: 0; } 50% { - right: 4px; + right: 2%; } 100% { - right: 0px; + right: 0; } } \ No newline at end of file diff --git a/webAO/styles/chatbox/yttd.css b/webAO/styles/chatbox/yttd.css index 471ba79..f588ae4 100644 --- a/webAO/styles/chatbox/yttd.css +++ b/webAO/styles/chatbox/yttd.css @@ -91,10 +91,11 @@ #client_chatwaiting { display: block; + position: absolute; transform: rotate(90deg); left: 50%; - bottom: 0px; - position: absolute; + bottom: 0px; + line-height: 0.5; animation: idling 1s linear infinite; } -- cgit From b7d73a2148794628e60386a68b8c74a76e4c5ed5 Mon Sep 17 00:00:00 2001 From: sD Date: Wed, 8 Apr 2020 00:01:51 +0200 Subject: fix yttd font --- webAO/styles/chatbox/yttd.css | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/webAO/styles/chatbox/yttd.css b/webAO/styles/chatbox/yttd.css index f588ae4..06644dc 100644 --- a/webAO/styles/chatbox/yttd.css +++ b/webAO/styles/chatbox/yttd.css @@ -6,7 +6,7 @@ height: 50%; width: 100%; filter: none; - font-family: "MS PGothic", sans-serif; + font-family: "DejaVu Sans Mono", "BIZ UDGothic", "Consolas", sans-serif; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; } @@ -50,8 +50,6 @@ left: 0; height: 25%; min-width: 10%; - text-justify: distribute; - letter-spacing: 0.075em; font-weight: bold; background-color: rgba(0, 0, 0, 0.5); color: #fef9ad; @@ -63,8 +61,8 @@ } #client_chat { - font-size: 1em; display: none; + position: absolute; bottom: 0; width: 99%; width: calc(100% - 6px); @@ -73,8 +71,6 @@ border-style: double; border-color: #ffa500; background-color: rgba(0, 0, 0, 0.5); - position: absolute; - word-break: keep-all; overflow-wrap: break-word; text-align: left; overflow: hidden; @@ -84,9 +80,6 @@ #client_chat p { padding: 1% 3.13%; margin: 1px; - line-height: 97%; - letter-spacing: 0.05em; - word-spacing: 0.3em; } #client_chatwaiting { -- cgit From 650ac895d430b118d278e0b77e9ede0803664bde Mon Sep 17 00:00:00 2001 From: sD Date: Wed, 8 Apr 2020 13:48:39 +0200 Subject: display: block --- webAO/styles/chatbox/aa.css | 7 ++++--- webAO/styles/chatbox/chatdd.css | 4 ++-- webAO/styles/chatbox/dgs.css | 4 ++-- webAO/styles/chatbox/drae.css | 4 ++-- webAO/styles/chatbox/legacy.css | 4 ++-- webAO/styles/chatbox/triology.css | 4 ++-- webAO/styles/chatbox/yttd.css | 9 ++++----- 7 files changed, 18 insertions(+), 18 deletions(-) diff --git a/webAO/styles/chatbox/aa.css b/webAO/styles/chatbox/aa.css index ab0514b..3efde89 100644 --- a/webAO/styles/chatbox/aa.css +++ b/webAO/styles/chatbox/aa.css @@ -62,6 +62,7 @@ } #client_chatcontainer { + display: block; position: absolute; bottom: 0; left: 0; @@ -72,7 +73,7 @@ } #client_name { - display: none; + display: block; position: absolute; left: 0; top: 0; @@ -92,8 +93,7 @@ } #client_chat { - font-size: 1em; - display: none; + display: block; position: absolute; bottom: 0; left: 0; @@ -106,6 +106,7 @@ border-width: 0.15em; border-radius: 0.3em; background-color: rgba(0, 0, 16, 0.5); + font-size: 2em; word-break: keep-all; overflow-wrap: break-word; text-align: left; diff --git a/webAO/styles/chatbox/chatdd.css b/webAO/styles/chatbox/chatdd.css index 31dfe07..233cdc3 100644 --- a/webAO/styles/chatbox/chatdd.css +++ b/webAO/styles/chatbox/chatdd.css @@ -10,7 +10,7 @@ } #client_name { - display: none; + display: block; top: 4%; padding: 0 10px; height: 22%; @@ -19,7 +19,7 @@ #client_chat { font-size: 1em; - display: none; + display: block; width: 100%; margin: auto; height: 90%; diff --git a/webAO/styles/chatbox/dgs.css b/webAO/styles/chatbox/dgs.css index 8e72484..4adba28 100644 --- a/webAO/styles/chatbox/dgs.css +++ b/webAO/styles/chatbox/dgs.css @@ -11,7 +11,7 @@ } #client_name { - display: none; + display: block; padding: 0px 6px; height: 5%; border: 1px solid #a59252; @@ -25,7 +25,7 @@ #client_chat { font-size: 1em; - display: none; + display: block; width: 100%; margin: auto; height: 30%; diff --git a/webAO/styles/chatbox/drae.css b/webAO/styles/chatbox/drae.css index 397dcfd..c8e2293 100644 --- a/webAO/styles/chatbox/drae.css +++ b/webAO/styles/chatbox/drae.css @@ -3,7 +3,7 @@ } #client_name { - display: none; + display: block; padding: 0 0.45em; height: 5.2%; width: 40%; @@ -19,7 +19,7 @@ #client_chat { font-size: 1em; - display: none; + display: block; width: 100%; margin: auto; height: 31.25%; diff --git a/webAO/styles/chatbox/legacy.css b/webAO/styles/chatbox/legacy.css index 4e22b5b..3a23ca0 100644 --- a/webAO/styles/chatbox/legacy.css +++ b/webAO/styles/chatbox/legacy.css @@ -7,7 +7,7 @@ } #client_name { - display: none; + display: block; position: absolute; top: 0; left: 0; @@ -21,7 +21,7 @@ #client_chat { position: absolute; - display: none; + display: block; bottom: 0; left: 0; width: 98%; diff --git a/webAO/styles/chatbox/triology.css b/webAO/styles/chatbox/triology.css index a17062d..5139481 100644 --- a/webAO/styles/chatbox/triology.css +++ b/webAO/styles/chatbox/triology.css @@ -74,7 +74,7 @@ } #client_name { - display: none; + display: block; background-color: #2989bd; top: 0; left: 10%; @@ -89,7 +89,7 @@ #client_chat { font-size: 1em; - display: none; + display: block; width: 100%; margin: auto; height: 90%; diff --git a/webAO/styles/chatbox/yttd.css b/webAO/styles/chatbox/yttd.css index 06644dc..28261af 100644 --- a/webAO/styles/chatbox/yttd.css +++ b/webAO/styles/chatbox/yttd.css @@ -45,15 +45,13 @@ #client_name { - display: none; + display: block; top: 0; left: 0; - height: 25%; min-width: 10%; - font-weight: bold; background-color: rgba(0, 0, 0, 0.5); color: #fef9ad; - padding: 0 3%; + padding: 2% 3%; border-style: double; border-color: #ffa500; position: absolute; @@ -61,7 +59,7 @@ } #client_chat { - display: none; + display: block; position: absolute; bottom: 0; width: 99%; @@ -80,6 +78,7 @@ #client_chat p { padding: 1% 3.13%; margin: 1px; + font-size: 1.3em; } #client_chatwaiting { -- cgit From 40b05d6a8d49aa31379d4f9ad1426d54ce0d8062 Mon Sep 17 00:00:00 2001 From: sD Date: Wed, 8 Apr 2020 13:49:20 +0200 Subject: hide chatcontainer instead of chatbox and namebox + base the font size on the background, not itself --- webAO/client.js | 20 ++++++-------------- 1 file changed, 6 insertions(+), 14 deletions(-) diff --git a/webAO/client.js b/webAO/client.js index 120936d..121b5fc 100644 --- a/webAO/client.js +++ b/webAO/client.js @@ -1555,7 +1555,6 @@ async changeBackground(position) { const chatContainerBox = document.getElementById("client_chatcontainer"); const nameBox = document.getElementById("client_name"); - const chatBox = document.getElementById("client_chat"); const chatBoxInner = document.getElementById("client_inner_chat"); //Clear out the last message @@ -1598,8 +1597,6 @@ async changeBackground(position) { const shout = this.shouts[this.chatmsg.objection]; if (shout) { // 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"; @@ -1631,8 +1628,6 @@ async changeBackground(position) { case 1: // play preanim // Hide message box - nameBox.style.display = "none"; - chatBox.style.display = "none"; chatContainerBox.style.display = "none"; // If preanim existed then determine the length gifLength = await this.getAnimLength(`${AO_HOST}characters/${encodeURI(this.chatmsg.name.toLowerCase())}/${encodeURI(this.chatmsg.preanim)}.gif`); @@ -1720,8 +1715,7 @@ async changeBackground(position) { this.updater = setTimeout(() => this.tick(), UPDATE_INTERVAL); } - const nameBox = document.getElementById("client_name"); - const chatBox = document.getElementById("client_chat"); + const gamewindow = document.getElementById("client_gamewindow"); const waitingBox = document.getElementById("client_chatwaiting"); const charSprite = document.getElementById("client_char"); const pairSprite = document.getElementById("client_pair_char"); @@ -1735,7 +1729,7 @@ async changeBackground(position) { if (this.chatmsg.flash === 2) { // Shake screen this.playSFX(AO_HOST + "sounds/general/sfx-stab.wav"); - document.getElementById("client_gamewindow").style.animation = "shake 0.2s 1"; + gamewindow.style.animation = "shake 0.2s 1"; } else if (this.chatmsg.flash === 1) { // Flash screen this.playSFX(AO_HOST + "sounds/general/sfx-realization.wav"); @@ -1788,16 +1782,14 @@ async changeBackground(position) { } } - document.getElementById("client_chatcontainer").style.display = "block"; + const chatContainerBox = document.getElementById("client_chatcontainer"); + const gameHeight = document.getElementById("client_background").offsetHeight; + chatContainerBox.style.display = "block"; - nameBox.style.display = "block"; - nameBox.style.fontSize = (nameBox.offsetHeight * 0.7) + "px"; + chatContainerBox.style.fontSize = (gameHeight * 0.05) + "px"; chatBoxInner.className = "text_" + this.colors[this.chatmsg.color]; - chatBox.style.display = "block"; - chatBox.style.fontSize = (chatBox.offsetHeight * 0.25) + "px"; - this.chatmsg.startspeaking = false; if (this.chatmsg.preanimdelay === 0) { -- cgit From 5b114b21f805b3e1246f70402924a98b90181685 Mon Sep 17 00:00:00 2001 From: sD Date: Sat, 11 Apr 2020 16:15:55 +0200 Subject: give the name tag an inner p --- webAO/client.html | 4 +++- webAO/client.js | 21 ++++++++++++++++----- webAO/styles/chatbox/aa.css | 12 ++++++++---- webAO/styles/chatbox/yttd.css | 13 ++++++++++--- 4 files changed, 37 insertions(+), 13 deletions(-) diff --git a/webAO/client.html b/webAO/client.html index c1ebdca..c56a1d2 100644 --- a/webAO/client.html +++ b/webAO/client.html @@ -77,7 +77,9 @@ Character Evidence Shout overlay
-
+
+

+

▶
diff --git a/webAO/client.js b/webAO/client.js index 121b5fc..0e86aaf 100644 --- a/webAO/client.js +++ b/webAO/client.js @@ -1554,12 +1554,12 @@ async changeBackground(position) { const pairSprite = document.getElementById("client_pair_char"); const chatContainerBox = document.getElementById("client_chatcontainer"); - const nameBox = document.getElementById("client_name"); + const nameBoxInner = document.getElementById("client_inner_name"); const chatBoxInner = document.getElementById("client_inner_chat"); //Clear out the last message chatBoxInner.innerText = this.textnow; - nameBox.innerText = this.chatmsg.nameplate; + nameBoxInner.innerText = this.chatmsg.nameplate; if (this.lastChar !== this.chatmsg.name) { charSprite.style.display = "none"; @@ -1651,6 +1651,7 @@ async changeBackground(position) { } else { chatbox_theme.href = "styles/chatbox/aa.css"; } + resizeChatbox(); // Flip the character if (this.chatmsg.flip === 1) { @@ -1782,12 +1783,11 @@ async changeBackground(position) { } } + resizeChatbox(); + const chatContainerBox = document.getElementById("client_chatcontainer"); - const gameHeight = document.getElementById("client_background").offsetHeight; chatContainerBox.style.display = "block"; - chatContainerBox.style.fontSize = (gameHeight * 0.05) + "px"; - chatBoxInner.className = "text_" + this.colors[this.chatmsg.color]; this.chatmsg.startspeaking = false; @@ -2422,6 +2422,17 @@ export function getIndexFromSelect(select_box, value) { } window.getIndexFromSelect = getIndexFromSelect; +/** + * Set the font size for the chatbox + */ +export function resizeChatbox() { + const chatContainerBox = document.getElementById("client_chatcontainer"); + const gameHeight = document.getElementById("client_background").offsetHeight; + + chatContainerBox.style.fontSize = (gameHeight * 0.05) + "px"; +} +window.resizeChatbox = resizeChatbox; + /** * Update evidence icon. */ diff --git a/webAO/styles/chatbox/aa.css b/webAO/styles/chatbox/aa.css index 3efde89..2d1f530 100644 --- a/webAO/styles/chatbox/aa.css +++ b/webAO/styles/chatbox/aa.css @@ -78,10 +78,7 @@ left: 0; top: 0; height: 13%; - min-width: 3.25em; - text-justify: distribute; - letter-spacing: 0.075em; - font-weight: bold; + min-width: 3.25em; background: rgba(56, 56, 163, 0.5); box-shadow: 0.075em 0.075em rgba(0, 56, 163, 0.5) inset; padding: 0 2%; @@ -92,6 +89,13 @@ z-index: 1; } +#client_name p { + text-justify: distribute; + letter-spacing: 0.075em; + margin: 1px; + font-weight: bold; +} + #client_chat { display: block; position: absolute; diff --git a/webAO/styles/chatbox/yttd.css b/webAO/styles/chatbox/yttd.css index 28261af..8eddeb0 100644 --- a/webAO/styles/chatbox/yttd.css +++ b/webAO/styles/chatbox/yttd.css @@ -48,16 +48,22 @@ display: block; top: 0; left: 0; + height: 27%; + height: calc(30% - 6px); min-width: 10%; - background-color: rgba(0, 0, 0, 0.5); - color: #fef9ad; - padding: 2% 3%; + background-color: rgba(0, 0, 0, 0.5); border-style: double; border-color: #ffa500; position: absolute; z-index: 1; } +#client_name p{ + margin: 0; + padding: 2% 3%; + color: #fef9ad; +} + #client_chat { display: block; position: absolute; @@ -66,6 +72,7 @@ width: calc(100% - 6px); margin: auto; height: 70%; + height: calc(70% - 6px); border-style: double; border-color: #ffa500; background-color: rgba(0, 0, 0, 0.5); -- cgit From f9715cc1a7869c8ade47052659dd31b8b4d6cc27 Mon Sep 17 00:00:00 2001 From: sD Date: Mon, 13 Apr 2020 18:50:51 +0200 Subject: finally center yttd nametag --- webAO/styles/chatbox/yttd.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/webAO/styles/chatbox/yttd.css b/webAO/styles/chatbox/yttd.css index 8eddeb0..936c5ac 100644 --- a/webAO/styles/chatbox/yttd.css +++ b/webAO/styles/chatbox/yttd.css @@ -46,6 +46,7 @@ #client_name { display: block; + position: absolute; top: 0; left: 0; height: 27%; @@ -53,14 +54,13 @@ min-width: 10%; background-color: rgba(0, 0, 0, 0.5); border-style: double; - border-color: #ffa500; - position: absolute; + border-color: #ffa500; + padding: 0 2%; z-index: 1; } #client_name p{ - margin: 0; - padding: 2% 3%; + line-height: 1em; color: #fef9ad; } -- cgit From cc95e7d8393e6862b571e6c83c713a3284a6f895 Mon Sep 17 00:00:00 2001 From: sD Date: Sat, 18 Apr 2020 15:32:07 +0200 Subject: let the users pin the box to 1 style if they want --- webAO/client.html | 14 +++++++++++++- webAO/client.js | 21 +++++++++++++++------ 2 files changed, 28 insertions(+), 7 deletions(-) diff --git a/webAO/client.html b/webAO/client.html index 15495e6..19a6344 100644 --- a/webAO/client.html +++ b/webAO/client.html @@ -331,13 +331,25 @@ onchange="changeBlipVolume()">

- + +
+
+ +