diff options
Diffstat (limited to 'webAO')
| -rw-r--r-- | webAO/dom/resizeChatbox.ts | 11 | ||||
| -rw-r--r-- | webAO/dom/updateBackgroundPreview.ts | 17 | ||||
| -rw-r--r-- | webAO/styles/chatbox/acww.css | 3 | ||||
| -rw-r--r-- | webAO/styles/chatbox/chatboxes.js | 1 | ||||
| -rw-r--r-- | webAO/styles/chatbox/key.css | 4 | ||||
| -rw-r--r-- | webAO/styles/chatbox/sonic.css | 128 | ||||
| -rw-r--r-- | webAO/styles/chatbox/trilogy.css | 2 | ||||
| -rw-r--r-- | webAO/styles/chatbox/trilogy.svg | 28 | ||||
| -rw-r--r-- | webAO/utils/aoml.ts | 44 | ||||
| -rw-r--r-- | webAO/utils/setCookie.ts | 2 |
10 files changed, 201 insertions, 39 deletions
diff --git a/webAO/dom/resizeChatbox.ts b/webAO/dom/resizeChatbox.ts index 887877d..0fb737d 100644 --- a/webAO/dom/resizeChatbox.ts +++ b/webAO/dom/resizeChatbox.ts @@ -3,13 +3,18 @@ import { CHATBOX } from "../client"; * Set the font size for the chatbox */ export function resizeChatbox() { - const chatContainerBox = document.getElementById("client_chatcontainer")!; + const chatContainerBox = document.getElementById("client_chatcontainer"); + const clockBox = document.getElementById("client_clock"); + const trackstatusBox = document.getElementById("client_trackstatus"); + const gameHeight = document.getElementById("client_background")!.offsetHeight; chatContainerBox.style.fontSize = `${(gameHeight * 0.0521).toFixed(1)}px`; + clockBox.style.fontSize = `${(gameHeight * 0.0521).toFixed(1)}px`; + trackstatusBox.style.fontSize = `${(gameHeight * 0.0521).toFixed(1)}px`; const trackstatus = <HTMLMarqueeElement>(document.getElementById("client_trackstatustext")); - trackstatus.width = (trackstatus.offsetWidth - 1) + "px"; + trackstatus.style.width = (trackstatus.offsetWidth - 1) + "px"; //clock @@ -25,7 +30,7 @@ export function resizeChatbox() { } else if (CHATBOX == "key") { weekday = ["Sun.", "Mon.", "Tue.", "Wed.", "Thu.", "Fri.", "Sat."]; document.getElementById("client_clock_weekday")!.innerText = weekday[now.getDay()]; - document.getElementById("client_clock_date")!.innerText = String(now.getDay()); + document.getElementById("client_clock_date")!.innerText = String(now.getDate()); } } diff --git a/webAO/dom/updateBackgroundPreview.ts b/webAO/dom/updateBackgroundPreview.ts index b41ee8f..01b5c44 100644 --- a/webAO/dom/updateBackgroundPreview.ts +++ b/webAO/dom/updateBackgroundPreview.ts @@ -1,4 +1,6 @@ -import { AO_HOST } from '../client/aoHost' +import { AO_HOST } from '../client/aoHost'; +import tryUrls from "../utils/tryUrls"; + /** * Update background preview. */ @@ -15,14 +17,13 @@ export function updateBackgroundPreview() { if (background_select.selectedIndex === 0) { background_filename.style.display = "initial"; - background_preview.src = `${AO_HOST}background/${encodeURI( - background_filename.value.toLowerCase() - )}/defenseempty.png`; } else { background_filename.style.display = "none"; - background_preview.src = `${AO_HOST}background/${encodeURI( - background_select.value.toLowerCase() - )}/defenseempty.png`; } + tryUrls(`${AO_HOST}background/${encodeURI( + background_select.value.toLowerCase() + )}/defenseempty`).then((resp) => { + background_preview.src = resp; + }); } -window.updateBackgroundPreview = updateBackgroundPreview;
\ No newline at end of file +window.updateBackgroundPreview = updateBackgroundPreview; diff --git a/webAO/styles/chatbox/acww.css b/webAO/styles/chatbox/acww.css index dd899b9..b0114b6 100644 --- a/webAO/styles/chatbox/acww.css +++ b/webAO/styles/chatbox/acww.css @@ -175,6 +175,7 @@ font-weight: bold; padding-left: 1.5em; padding-top: 0.5em; + font-size: 0.5em; } #client_clock_month { @@ -192,6 +193,7 @@ background-size: 100% 40%; border: 0.1em solid #00b63c; border-radius: 100%; + font-size: 0.6em; } #client_clock_time { @@ -219,4 +221,5 @@ border-radius: 50%; border-top: none; padding-top: 0.5em; + font-size: 0.5em; }
\ No newline at end of file diff --git a/webAO/styles/chatbox/chatboxes.js b/webAO/styles/chatbox/chatboxes.js index bc73109..9e52d43 100644 --- a/webAO/styles/chatbox/chatboxes.js +++ b/webAO/styles/chatbox/chatboxes.js @@ -19,6 +19,7 @@ export default [ 'halla', 'homestuck', 'key', + 'sonic', 'yakuza', 'yttd', 'whentheycry', diff --git a/webAO/styles/chatbox/key.css b/webAO/styles/chatbox/key.css index 77f2e99..4debe72 100644 --- a/webAO/styles/chatbox/key.css +++ b/webAO/styles/chatbox/key.css @@ -167,6 +167,7 @@ text-shadow: -1px -1px 0 #d7e5d9, 1px -1px 0 #d7e5d9, -1px 1px 0 #d7e5d9, 1px 1px 0 #d7e5d9; font-size: small; line-height: 1; + font-size: 0.4em; } #client_clock_date { @@ -178,7 +179,7 @@ margin: 0; color: #ffe; text-shadow: -1px -1px 0 #78320b, 1px -1px 0 #78320b, -1px 1px 0 #78320b, 1px 1px 0 #78320b; - font-size: 3em; + font-size: 1.5em; background: rgba(255,255,255,0.7); border-radius: 100%; line-height: 1.8; @@ -200,6 +201,7 @@ border: #ffc89f 3px ridge; border-radius: 100%; line-height: 2; + font-size: 0.4em; } #client_clock_time { diff --git a/webAO/styles/chatbox/sonic.css b/webAO/styles/chatbox/sonic.css new file mode 100644 index 0000000..2da4aaf --- /dev/null +++ b/webAO/styles/chatbox/sonic.css @@ -0,0 +1,128 @@ +.text_white { + color: #2e2315; +} + +.text_blue { + color: #6bc6f7; +} + +.text_green { + color: #00f700; +} + +.text_red { + color: #f00; +} + +.text_orange { + color: #ee7600; +} + +.text_yellow { + color: #ff0; +} + +.text_pink { + color: #ffc0cb; +} + +.text_cyan { + color: #0ff; +} + +.text_grey { + color: #bbb; +} + +#client_chatcontainer { + display: block; + position: absolute; + bottom: 0; + left: 0; + height: 30%; + width: 100%; + filter: none; +} + +#client_name { + display: block; + position: absolute; + left: 6%; + top: 0; + height: 16%; + min-width: 5em; + font-size: 1em; + background: #5c4200; + margin: 0; + z-index: 1; + border-radius: 0.25em; + font-weight: bold; + text-transform: uppercase; +} + +#client_inner_name { + text-justify: distribute; + line-height: 100%; + margin: 0; + color: white; +} + +#client_chat { + display: block; + position: absolute; + bottom: 0; + left: 0; + width: 98%; + width: calc(100% - 0.27em); + height: 98%; + margin: auto; + border: solid #a99460 0.15em; + border-radius: 0.25em; + background-color: #e3dab6; + font-size: 1em; + font-weight: 600; + text-shadow: 0 1px #FFF; + word-break: keep-all; + overflow-wrap: break-word; + text-align: left; + overflow: hidden; + scroll-behavior: smooth; +} + +#client_inner_chat { + padding: 8% 6%; + margin: 1px; + line-height: 100%; +} + +#client_chatwaiting { + display: block; + position: absolute; + right: 2%; + bottom: 15%; + color: #5c4200; + transform: rotate(90deg); + animation: idling 0.4s linear infinite; +} + +@keyframes idling { + 0% { + right: 0; + } + + 50% { + right: 2%; + } + + 100% { + right: 0; + } +} + +#client_trackstatus { + display: none; +} + +#client_clock { + display: none; +}
\ No newline at end of file diff --git a/webAO/styles/chatbox/trilogy.css b/webAO/styles/chatbox/trilogy.css index 80a7467..db68133 100644 --- a/webAO/styles/chatbox/trilogy.css +++ b/webAO/styles/chatbox/trilogy.css @@ -47,7 +47,7 @@ top: 0; left: 5%; padding: 0 3em; - height: 20%; + height: 23%; min-width: 10%; border-image-source: url('trilogy.svg'); border-image-slice: 3 fill; diff --git a/webAO/styles/chatbox/trilogy.svg b/webAO/styles/chatbox/trilogy.svg index f3b3131..1657eca 100644 --- a/webAO/styles/chatbox/trilogy.svg +++ b/webAO/styles/chatbox/trilogy.svg @@ -1,4 +1,26 @@ -<?xml version="1.0" encoding="UTF-8"?> -<svg version="1.1" viewBox="0 0 90 90" xmlns="http://www.w3.org/2000/svg"> -<path transform="matrix(.99608 0 0 .99608 .090012 .090008)" d="m89.763 63.531-26.128 26.189-36.993 0.043265-26.189-26.128-0.043265-36.993 26.128-26.189 36.993-0.043265 26.189 26.128z" fill="#2989bc" stroke="#fff" stroke-width=".5"/> +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<svg + version="1.1" + viewBox="0 0 90 90" + id="svg4" + sodipodi:docname="trilogy.svg" + inkscape:version="1.2.2 (732a01da63, 2022-12-09)" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns="http://www.w3.org/2000/svg" + xmlns:svg="http://www.w3.org/2000/svg"> + <defs + id="defs8" /> + <sodipodi:namedview + id="namedview6" + pagecolor="#ffffff" + bordercolor="#000000" + borderopacity="0.25" /> + <path + d="M 90,65 65,90 H 25 L 0,65 V 25 L 25,0 h 40 l 25,25 z" + fill="#2989bc" + stroke="#ffffff" + stroke-width="0.500821" + id="path2" + sodipodi:nodetypes="ccccccccc" /> </svg> diff --git a/webAO/utils/aoml.ts b/webAO/utils/aoml.ts index fbdee21..5b5da5f 100644 --- a/webAO/utils/aoml.ts +++ b/webAO/utils/aoml.ts @@ -35,9 +35,9 @@ const aomlParser = (text: string) => { const mlConfig = (AO_HOST: string) => { const defaultUrl = `${AO_HOST}themes/default/chat_config.ini` - let aomlParsed: Promise<{[key: string]: Aoml}> = request(defaultUrl).then((data) => aomlParser(data)); + let aomlParsed: Promise<{ [key: string]: Aoml }> = request(defaultUrl).then((data) => aomlParser(data)); + - const createIdentifiers = async () => { const identifiers = new Map<string, Aoml>() @@ -45,7 +45,7 @@ const mlConfig = (AO_HOST: string) => { if (value.start && value.end) { identifiers.set(value.start, value) identifiers.set(value.end, value) - } + } } return identifiers } @@ -54,7 +54,7 @@ const mlConfig = (AO_HOST: string) => { for (const [ruleName, value] of Object.entries(await aomlParsed)) { if (value?.start && value?.end) { startingIdentifiers.add(value.start) - } + } } return startingIdentifiers } @@ -68,29 +68,29 @@ const mlConfig = (AO_HOST: string) => { for (const letter of text) { let currentSelector = document.createElement('span') let currentIdentifier = identifiers.get(letter) - const currentClosingLetter = closingStack[closingStack.length-1] + const currentClosingLetter = closingStack[closingStack.length - 1] const keepChar = Number(currentIdentifier?.remove) === 0 - - if (startIdentifiers.has(letter)) { - const color = identifiers.get(letter).color.split(',') - const r = color[0] - const g = color[1] - const b = color[2] - colorStack.push([r,g,b]) - closingStack.push(currentIdentifier.end) + if (currentClosingLetter === letter) { + const r = colorStack[colorStack.length - 1][0] + const g = colorStack[colorStack.length - 1][1] + const b = colorStack[colorStack.length - 1][2] const currentColor = `color: rgb(${r},${g},${b});` currentSelector.setAttribute('style', currentColor) + closingStack.pop() + colorStack.pop() if (keepChar) { currentSelector.innerHTML = letter } - } else if (currentClosingLetter === letter) { - const r = colorStack[colorStack.length-1][0] - const g = colorStack[colorStack.length-1][1] - const b = colorStack[colorStack.length-1][2] + } + else if (startIdentifiers.has(letter)) { + const color = identifiers.get(letter).color.split(',') + const r = color[0] + const g = color[1] + const b = color[2] + colorStack.push([r, g, b]) + closingStack.push(currentIdentifier.end) const currentColor = `color: rgb(${r},${g},${b});` currentSelector.setAttribute('style', currentColor) - closingStack.pop() - colorStack.pop() if (keepChar) { currentSelector.innerHTML = letter } @@ -99,9 +99,9 @@ const mlConfig = (AO_HOST: string) => { if (colorStack.length === 0) { currentSelector.className = `text_${defaultColor}` } else { - const r = colorStack[colorStack.length-1][0] - const g = colorStack[colorStack.length-1][1] - const b = colorStack[colorStack.length-1][2] + const r = colorStack[colorStack.length - 1][0] + const g = colorStack[colorStack.length - 1][1] + const b = colorStack[colorStack.length - 1][2] const currentColor = `color: rgb(${r},${g},${b});` currentSelector.setAttribute('style', currentColor) } diff --git a/webAO/utils/setCookie.ts b/webAO/utils/setCookie.ts index 084fa20..f9ac5d2 100644 --- a/webAO/utils/setCookie.ts +++ b/webAO/utils/setCookie.ts @@ -5,6 +5,6 @@ * @param {any} value The value of that cookie option */ const setCookie = (cname: String, value: any) => { - document.cookie = `${cname}=${value}`; + document.cookie = `${cname}=${value};SameSite=Strict`; }; export default setCookie; |
