- Delete old template file structure
This commit is contained in:
Infi
Binary file not shown.
-7
File diff suppressed because one or more lines are too long
-6
File diff suppressed because one or more lines are too long
@@ -1,120 +0,0 @@
|
|||||||
// from kizer, gfd icons
|
|
||||||
async function AddGfdStylesheet(gfdPath, texPath) {
|
|
||||||
const texPromise = LoadTexAsBlob(texPath);
|
|
||||||
const gfdPromise = LoadGfd(gfdPath);
|
|
||||||
const texUrl = URL.createObjectURL(await texPromise);
|
|
||||||
const gfd = await gfdPromise;
|
|
||||||
|
|
||||||
const stylesheets = [];
|
|
||||||
for (const entry of gfd) {
|
|
||||||
if (entry.width * entry.height <= 0)
|
|
||||||
continue;
|
|
||||||
|
|
||||||
width = entry.width;
|
|
||||||
height = entry.height;
|
|
||||||
|
|
||||||
if (entry.redirect !== 0) {
|
|
||||||
stylesheets[entry.redirect][0].push(entry.id);
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
stylesheets[entry.id] = [
|
|
||||||
[entry.id],
|
|
||||||
[
|
|
||||||
`background-position: -${entry.left}px -${entry.top}px`,
|
|
||||||
`background-image: url('${texUrl}')`,
|
|
||||||
`width: ${entry.width}px`,
|
|
||||||
`height: ${entry.height}px`
|
|
||||||
].join(';'),
|
|
||||||
[
|
|
||||||
`background-position: -${entry.left * 2}px -${entry.top * 2 + 341}px`,
|
|
||||||
`background-image: url('${texUrl}')`,
|
|
||||||
`width: ${entry.width * 2}px`,
|
|
||||||
`height: ${entry.height * 2}px`
|
|
||||||
].join(';'),
|
|
||||||
entry.width
|
|
||||||
];
|
|
||||||
}
|
|
||||||
|
|
||||||
let stylesheet = '';
|
|
||||||
for (const entry of stylesheets) {
|
|
||||||
if (!entry)
|
|
||||||
continue;
|
|
||||||
|
|
||||||
stylesheet += `\n${entry[0].map(x => `.gfd-icon.gfd-icon-${x}::before`).join(', ')}{${entry[1]};}`;
|
|
||||||
stylesheet += `\n${entry[0].map(x => `.gfd-icon.gfd-icon-hq-${x}::before`).join(', ')}{${entry[2]};}`;
|
|
||||||
stylesheet += `\n${entry[0].map(x => `.gfd-icon.gfd-icon-${x}`).join(', ')}{width:${entry[3]}px;}`;
|
|
||||||
stylesheet += `\n${entry[0].map(x => `.gfd-icon.gfd-icon-hq-${x}`).join(', ')}{width:${entry[3] * 2}px;}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
const styleNode = document.createElement('style');
|
|
||||||
styleNode.appendChild(document.createTextNode(stylesheet));
|
|
||||||
document.head.appendChild(styleNode);
|
|
||||||
}
|
|
||||||
|
|
||||||
async function LoadTexAsBlob(path) {
|
|
||||||
const tex = ParseTex(await (await fetch(path)).arrayBuffer());
|
|
||||||
if (tex.format !== 0x1450) // B8G8R8A8
|
|
||||||
throw 'Not supported';
|
|
||||||
|
|
||||||
const dataArray = new Uint8ClampedArray(tex.buffer, tex.offsetToSurface[0], tex.width * tex.height * 4);
|
|
||||||
for (let i = 0; i < dataArray.length; i += 4) {
|
|
||||||
const t = dataArray[i];
|
|
||||||
dataArray[i] = dataArray[i + 2];
|
|
||||||
dataArray[i + 2] = t;
|
|
||||||
}
|
|
||||||
const imageData = new ImageData(dataArray, tex.width, tex.height);
|
|
||||||
const bitmap = await createImageBitmap(imageData);
|
|
||||||
|
|
||||||
const canvas = new OffscreenCanvas(tex.width, tex.height);
|
|
||||||
canvas.getContext('bitmaprenderer').transferFromImageBitmap(bitmap);
|
|
||||||
return await canvas.convertToBlob();
|
|
||||||
}
|
|
||||||
|
|
||||||
async function LoadGfd(path) {
|
|
||||||
const buffer = new DataView(await (await fetch(path)).arrayBuffer());
|
|
||||||
const count = buffer.getInt32(8, true);
|
|
||||||
const entries = new Array(count);
|
|
||||||
for (let i = 0; i < count; i++) {
|
|
||||||
const offset = 0x10 + (i * 0x10);
|
|
||||||
entries[i] = {
|
|
||||||
id: buffer.getInt16(offset, true),
|
|
||||||
left: buffer.getInt16(offset + 2, true),
|
|
||||||
top: buffer.getInt16(offset + 4, true),
|
|
||||||
width: buffer.getInt16(offset + 6, true),
|
|
||||||
height: buffer.getInt16(offset + 8, true),
|
|
||||||
unk0A: buffer.getInt16(offset + 10, true),
|
|
||||||
redirect: buffer.getInt16(offset + 12, true),
|
|
||||||
unk0E: buffer.getInt16(offset + 14, true),
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
return entries;
|
|
||||||
}
|
|
||||||
|
|
||||||
function ParseTex(arrayBuffer) {
|
|
||||||
const buffer = new DataView(arrayBuffer);
|
|
||||||
const type = buffer.getInt32(0, true);
|
|
||||||
const format = buffer.getInt32(4, true);
|
|
||||||
const width = buffer.getInt16(8, true);
|
|
||||||
const height = buffer.getInt16(10, true);
|
|
||||||
const depth = buffer.getInt16(12, true);
|
|
||||||
const mipsAndFlag = buffer.getInt8(14, true);
|
|
||||||
const arraySize = buffer.getInt8(15, true);
|
|
||||||
const lodOffsets = [buffer.getInt32(16, true), buffer.getInt32(20, true), buffer.getInt32(24, true)];
|
|
||||||
const offsetToSurface = [buffer.getInt32(28, true), buffer.getInt32(32, true), buffer.getInt32(36, true), buffer.getInt32(40, true), buffer.getInt32(44, true), buffer.getInt32(48, true), buffer.getInt32(52, true), buffer.getInt32(56, true), buffer.getInt32(60, true), buffer.getInt32(64, true), buffer.getInt32(68, true), buffer.getInt32(72, true), buffer.getInt32(76, true)];
|
|
||||||
return {
|
|
||||||
buffer: arrayBuffer,
|
|
||||||
type,
|
|
||||||
format,
|
|
||||||
width,
|
|
||||||
height,
|
|
||||||
depth,
|
|
||||||
mipsAndFlag,
|
|
||||||
arraySize,
|
|
||||||
lodOffsets,
|
|
||||||
offsetToSurface,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
AddGfdStylesheet('/files/gfdata.gfd', '/files/fonticon_ps5.tex');
|
|
||||||
@@ -1,372 +0,0 @@
|
|||||||
/* fonts */
|
|
||||||
@font-face {
|
|
||||||
font-family: Lodestone;
|
|
||||||
/*noinspection CssUnknownTarget*/
|
|
||||||
src: url('/files/FFXIV_Lodestone_SSF.ttf') format('truetype');
|
|
||||||
unicode-range: U+E020-E0DB;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Inter var';
|
|
||||||
font-weight: 100 900;
|
|
||||||
font-style: oblique 0deg 10deg;
|
|
||||||
src: url('Inter.var.woff2') format('woff2');
|
|
||||||
}
|
|
||||||
|
|
||||||
/* variables */
|
|
||||||
:root {
|
|
||||||
--fg: white;
|
|
||||||
--fg-faint: #a0a0a0;
|
|
||||||
--fg-scrollbar: #404040;
|
|
||||||
--bg: #101010;
|
|
||||||
--bg-input: #202020;
|
|
||||||
--bg-input-hover: #282828;
|
|
||||||
--focus-color: #4060a0;
|
|
||||||
|
|
||||||
--gradient-clickable: linear-gradient(to bottom, #404040, var(--bg-input) 65%, var(--bg-input));
|
|
||||||
--gradient-clickable-hover: linear-gradient(to bottom, #505050, var(--bg-input-hover) 65%, var(--bg-input-hover));
|
|
||||||
|
|
||||||
--timestamp-width: 70px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* reset */
|
|
||||||
*, *::before, *::after {
|
|
||||||
box-sizing: border-box;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
|
||||||
color: var(--fg);
|
|
||||||
font-family: Lodestone, 'Inter var', sans-serif;
|
|
||||||
font-feature-settings: 'tnum', 'calt' 0; /* calt appears to be on by default */
|
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
span > a {
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* layout and global styles */
|
|
||||||
body {
|
|
||||||
padding: 50px;
|
|
||||||
height: 100dvh;
|
|
||||||
background-color: var(--bg-input-hover);
|
|
||||||
}
|
|
||||||
|
|
||||||
body > main.chat {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: var(--bg);
|
|
||||||
border-radius: 20px;
|
|
||||||
box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
body > main.auth {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 20px;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
|
|
||||||
input { width: 150px; }
|
|
||||||
|
|
||||||
input, .submitButton {
|
|
||||||
padding: 5px 20px;
|
|
||||||
font-size: 1rem;
|
|
||||||
border: 3px solid transparent;
|
|
||||||
border-radius: 20px;
|
|
||||||
background-color: var(--bg-input);
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
outline: 2px solid var(--focus-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.submitButton {
|
|
||||||
padding: 5px 15px;
|
|
||||||
border: 3px solid var(--bg-input);
|
|
||||||
background-image: var(--gradient-clickable);
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border-color: var(--bg-input-hover);
|
|
||||||
background-color: var(--bg-input-hover);
|
|
||||||
background-image: var(--gradient-clickable-hover);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* message list */
|
|
||||||
section#messages {
|
|
||||||
position: relative;
|
|
||||||
flex: 1;
|
|
||||||
min-height: 0;
|
|
||||||
padding: 20px;
|
|
||||||
line-height: 1.5;
|
|
||||||
|
|
||||||
.scroll-container {
|
|
||||||
height: 100%;
|
|
||||||
overflow-y: scroll;
|
|
||||||
scrollbar-color: var(--fg-scrollbar) var(--bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
ol {
|
|
||||||
list-style-type: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 10px;
|
|
||||||
|
|
||||||
.timestamp {
|
|
||||||
flex: 0 0 var(--timestamp-width);
|
|
||||||
color: var(--fg-faint);
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.message {
|
|
||||||
white-space: pre-wrap;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#more-messages-indicator {
|
|
||||||
position: absolute;
|
|
||||||
display: none;
|
|
||||||
right: 30px;
|
|
||||||
bottom: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
filter: drop-shadow(0 0 5px #60a0ff) drop-shadow(0 0 15px #60a0ff);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.more-messages #more-messages-indicator {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#timestamp-width-probe {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* input bar, channel selector, ... */
|
|
||||||
section#input {
|
|
||||||
flex-grow: 0;
|
|
||||||
padding: 20px;
|
|
||||||
|
|
||||||
form {
|
|
||||||
display: flex;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
input, button, select {
|
|
||||||
font-size: 1rem;
|
|
||||||
border: 3px solid transparent;
|
|
||||||
border-radius: 20px;
|
|
||||||
background-color: var(--bg-input);
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
outline: 2px solid var(--focus-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
button, select {
|
|
||||||
padding: 5px 15px;
|
|
||||||
border: 3px solid var(--bg-input);
|
|
||||||
background-image: var(--gradient-clickable);
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border-color: var(--bg-input-hover);
|
|
||||||
background-color: var(--bg-input-hover);
|
|
||||||
background-image: var(--gradient-clickable-hover);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.select-container, button {
|
|
||||||
position: relative;
|
|
||||||
flex-grow: 0;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.select-container {
|
|
||||||
flex-basis: 0;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
/* "message-circle" icon from https://github.com/feathericons/feather, under MIT license */
|
|
||||||
mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>');
|
|
||||||
}
|
|
||||||
|
|
||||||
select {
|
|
||||||
width: 100%;
|
|
||||||
padding-left: 1.5rem;
|
|
||||||
padding-right: 1.5rem;
|
|
||||||
appearance: none;
|
|
||||||
color: transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
padding-left: calc(20px + 1.5rem);
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
/* "send" icon from https://github.com/feathericons/feather, under MIT license */
|
|
||||||
mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.select-container::before, button::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
left: 15px;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
width: 1.3rem;
|
|
||||||
height: 1.3rem;
|
|
||||||
background-color: var(--fg);
|
|
||||||
mask-size: 100%;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.select-container::before {
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%) translateY(-50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-container {
|
|
||||||
flex: 1;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
#chat-input {
|
|
||||||
width: 100%;
|
|
||||||
padding: 5px 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#channel-hint {
|
|
||||||
position: absolute;
|
|
||||||
top: -1.2em;
|
|
||||||
left: 23px;
|
|
||||||
max-width: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
font-weight: 550;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
pointer-events: none;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* icons, emotes */
|
|
||||||
.gfd-icon {
|
|
||||||
display: inline-block;
|
|
||||||
position: relative;
|
|
||||||
vertical-align: middle;
|
|
||||||
zoom: 0.75;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
content: '';
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.emote-icon {
|
|
||||||
display: inline-block;
|
|
||||||
position: relative;
|
|
||||||
width: 2rem;
|
|
||||||
height: 1px;
|
|
||||||
vertical-align: middle;
|
|
||||||
overflow: visible;
|
|
||||||
|
|
||||||
img {
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 2rem;
|
|
||||||
height: 2rem;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*** mobile ***/
|
|
||||||
@media ((max-width: 600px) and (orientation: portrait)) or (max-width: 400px) {
|
|
||||||
body {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
body > main.chat {
|
|
||||||
border-radius: 0;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
section#messages {
|
|
||||||
font-size: 0.9rem;
|
|
||||||
|
|
||||||
li {
|
|
||||||
align-items: baseline;
|
|
||||||
|
|
||||||
.timestamp {
|
|
||||||
font-size: 0.8rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#timestamp-width-probe {
|
|
||||||
font-size: 0.8rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
section#input {
|
|
||||||
button {
|
|
||||||
max-width: 0;
|
|
||||||
padding-left: 1.5rem;
|
|
||||||
padding-right: 1.5rem;
|
|
||||||
color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
button::before {
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%) translateY(-50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-container #channel-hint {
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.gfd-icon { zoom: 0.65; }
|
|
||||||
.emote-icon {
|
|
||||||
width: 1.5rem;
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 1.5rem;
|
|
||||||
height: 1.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,288 +0,0 @@
|
|||||||
class ChatTwoWeb {
|
|
||||||
constructor() {
|
|
||||||
this.setupDOMElements();
|
|
||||||
this.setupSSEConnection();
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
setupDOMElements() {
|
|
||||||
this.elements = {
|
|
||||||
channelHint: document.getElementById('channel-hint'),
|
|
||||||
channelSelect: document.getElementById('channel-select'),
|
|
||||||
|
|
||||||
messagesContainer: document.querySelector('#messages > .scroll-container'),
|
|
||||||
messagesList: document.getElementById('messages-list'),
|
|
||||||
|
|
||||||
timestampWidthProbe: document.getElementById('timestamp-width-probe'),
|
|
||||||
|
|
||||||
inputForm: document.querySelector('#input > form'),
|
|
||||||
chatInput: document.getElementById('chat-input')
|
|
||||||
};
|
|
||||||
this.maxTimestampWidth = 0;
|
|
||||||
this.scrolledToBottom = true;
|
|
||||||
this.channelLocked = false;
|
|
||||||
|
|
||||||
|
|
||||||
// channel selector
|
|
||||||
this.elements.channelSelect.addEventListener('change', async (event) => {
|
|
||||||
const rawResponse = await fetch('/channel', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'Accept': 'application/json',
|
|
||||||
'Content-Type': 'application/json'
|
|
||||||
},
|
|
||||||
body: JSON.stringify({ channel: event.target.value })
|
|
||||||
});
|
|
||||||
// const content = await rawResponse.json();
|
|
||||||
// TODO: use the response
|
|
||||||
});
|
|
||||||
|
|
||||||
// add indicator signaling more messages below
|
|
||||||
this.elements.messagesContainer.addEventListener('scroll', (event) => {
|
|
||||||
if (!this.messagesAreScrolledToBottom()) {
|
|
||||||
event.target.parentElement?.classList.add('more-messages');
|
|
||||||
} else {
|
|
||||||
event.target.parentElement?.classList.remove('more-messages');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// adjust scroll when the window size changes; mostly for mobile (opening/closing the keyboard)
|
|
||||||
window.addEventListener('resize', () => {
|
|
||||||
if (this.scrolledToBottom) {
|
|
||||||
this.scrollMessagesToBottom();
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
// handle message sending
|
|
||||||
this.elements.inputForm.addEventListener('submit', async (event) => {
|
|
||||||
event.preventDefault();
|
|
||||||
const message = this.elements.chatInput.value;
|
|
||||||
if (message.length > 500) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const rawResponse = await fetch('/send', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'Accept': 'application/json',
|
|
||||||
'Content-Type': 'application/json'
|
|
||||||
},
|
|
||||||
body: JSON.stringify({ message: message })
|
|
||||||
});
|
|
||||||
// const content = await rawResponse.json();
|
|
||||||
// TODO: use the response
|
|
||||||
|
|
||||||
this.elements.chatInput.value = '';
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
updateChannelHint(channel) {
|
|
||||||
this.elements.channelHint.innerHTML = '';
|
|
||||||
|
|
||||||
const channelElement = this.processTemplate(channel.channelName);
|
|
||||||
|
|
||||||
// Makes the channel selector unclickable if the channel is fixed
|
|
||||||
this.channelLocked = channel.channelLocked;
|
|
||||||
if (this.channelLocked) {
|
|
||||||
channelElement.firstChild.innerText = `(Locked) ${channelElement.firstChild.innerText}`;
|
|
||||||
this.elements.channelSelect.style.pointerEvents = 'none';
|
|
||||||
} else {
|
|
||||||
this.elements.channelSelect.style.removeProperty('pointer-events');
|
|
||||||
}
|
|
||||||
|
|
||||||
this.elements.channelHint.appendChild(channelElement);
|
|
||||||
}
|
|
||||||
|
|
||||||
updateChannels(channels) {
|
|
||||||
this.elements.channelSelect.innerHTML = '';
|
|
||||||
for (const [ label, channel ] of Object.entries(channels)) {
|
|
||||||
const option = document.createElement('option');
|
|
||||||
option.value = channel;
|
|
||||||
option.innerText = label;
|
|
||||||
this.elements.channelSelect.appendChild(option);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// calculate timestamp width
|
|
||||||
// to ensure that all timestamps have the same width. some typefaces have the same width across
|
|
||||||
// all number glyphs, others do not. then there's AM/PM vs 24 hour, and so on
|
|
||||||
calculateTimestampWidth(timestamp) {
|
|
||||||
this.elements.timestampWidthProbe.innerText = timestamp;
|
|
||||||
if (this.elements.timestampWidthProbe.clientWidth > this.maxTimestampWidth) {
|
|
||||||
this.maxTimestampWidth = this.elements.timestampWidthProbe.clientWidth;
|
|
||||||
document.body.style.setProperty('--timestamp-width', (Math.ceil(this.maxTimestampWidth) + 1) + 'px');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
messagesAreScrolledToBottom() {
|
|
||||||
if (this.elements.messagesContainer.scrollTopMax) {
|
|
||||||
this.scrolledToBottom = this.elements.messagesContainer.scrollTop === this.elements.messagesContainer.scrollTopMax;
|
|
||||||
} else {
|
|
||||||
this.scrolledToBottom =
|
|
||||||
(
|
|
||||||
this.elements.messagesContainer.scrollHeight -
|
|
||||||
this.elements.messagesContainer.clientHeight -
|
|
||||||
this.elements.messagesContainer.scrollTop
|
|
||||||
) < 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
return this.scrolledToBottom;
|
|
||||||
}
|
|
||||||
|
|
||||||
scrollMessagesToBottom() {
|
|
||||||
if (this.elements.messagesContainer.scrollTopMax) {
|
|
||||||
this.elements.messagesContainer.scrollTop = this.elements.messagesContainer.scrollTopMax;
|
|
||||||
} else {
|
|
||||||
this.elements.messagesList.lastChild.scrollIntoView();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
addMessage(messageData) {
|
|
||||||
const scrolledToBottom = this.messagesAreScrolledToBottom();
|
|
||||||
this.calculateTimestampWidth(messageData.timestamp);
|
|
||||||
|
|
||||||
const liMessage = document.createElement('li');
|
|
||||||
const spanTimestamp = document.createElement('span');
|
|
||||||
spanTimestamp.classList.add('timestamp');
|
|
||||||
spanTimestamp.innerText = messageData.timestamp;
|
|
||||||
|
|
||||||
const spanMessage = document.createElement('span');
|
|
||||||
spanMessage.classList.add('message');
|
|
||||||
spanMessage.appendChild(this.processTemplate(messageData.templates))
|
|
||||||
|
|
||||||
liMessage.appendChild(spanTimestamp);
|
|
||||||
liMessage.appendChild(spanMessage);
|
|
||||||
this.elements.messagesList.appendChild(liMessage);
|
|
||||||
|
|
||||||
if (scrolledToBottom) {
|
|
||||||
this.scrollMessagesToBottom();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
processTemplate(templates) {
|
|
||||||
const frag = document.createDocumentFragment();
|
|
||||||
|
|
||||||
for( const template of templates ) {
|
|
||||||
const spanElement = document.createElement('span');
|
|
||||||
switch (template.payload) {
|
|
||||||
case 'text':
|
|
||||||
this.processTextTemplate(template, spanElement);
|
|
||||||
break;
|
|
||||||
case 'url':
|
|
||||||
this.processUrlTemplate(template, spanElement);
|
|
||||||
break;
|
|
||||||
case 'emote':
|
|
||||||
this.processEmote(template, spanElement);
|
|
||||||
break;
|
|
||||||
case 'icon':
|
|
||||||
this.processIcon(template, spanElement);
|
|
||||||
break;
|
|
||||||
case 'empty':
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
frag.appendChild(spanElement);
|
|
||||||
}
|
|
||||||
|
|
||||||
return frag;
|
|
||||||
}
|
|
||||||
|
|
||||||
processTextTemplate(template, spanContent) {
|
|
||||||
spanContent.innerText = template.content;
|
|
||||||
if (template.color !== 0)
|
|
||||||
{
|
|
||||||
this.processColor(template, spanContent);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
processUrlTemplate(template, spanContent) {
|
|
||||||
const urlElement = document.createElement('a');
|
|
||||||
urlElement.innerText = template.content;
|
|
||||||
urlElement.href = encodeURI(template.content);
|
|
||||||
urlElement.target = '_blank'
|
|
||||||
|
|
||||||
if (template.color !== 0)
|
|
||||||
{
|
|
||||||
this.processColor(template, spanContent);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// converts a RGBA uint number to components
|
|
||||||
processColor(template, spanContent) {
|
|
||||||
const r = (template.color & 0xFF000000) >>> 24;
|
|
||||||
const g = (template.color & 0xFF0000) >>> 16;
|
|
||||||
const b = (template.color & 0xFF00) >>> 8;
|
|
||||||
const a = (template.color & 0xFF) / 255.0;
|
|
||||||
|
|
||||||
spanContent.style.color = `rgba(${r}, ${g}, ${b}, ${a})`;
|
|
||||||
}
|
|
||||||
|
|
||||||
processEmote(template, spanContent) {
|
|
||||||
const imgElement = document.createElement('img');
|
|
||||||
imgElement.src = `/emote/${template.content}`;
|
|
||||||
|
|
||||||
spanContent.classList.add('emote-icon');
|
|
||||||
spanContent.appendChild(imgElement);
|
|
||||||
}
|
|
||||||
|
|
||||||
processIcon(template, spanContent) {
|
|
||||||
spanContent.classList.add('gfd-icon');
|
|
||||||
spanContent.classList.add(`gfd-icon-hq-${template.id}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
clearAllMessages() {
|
|
||||||
this.elements.messagesList.innerHTML = '';
|
|
||||||
}
|
|
||||||
|
|
||||||
setupSSEConnection() {
|
|
||||||
this.sse = new EventSource('/sse');
|
|
||||||
|
|
||||||
this.sse.addEventListener('close', () => {
|
|
||||||
console.log('Closing SSE connection.');
|
|
||||||
this.sse.close();
|
|
||||||
});
|
|
||||||
|
|
||||||
this.sse.addEventListener('switch-channel', (event) => {
|
|
||||||
try {
|
|
||||||
this.updateChannelHint(JSON.parse(event.data));
|
|
||||||
} catch (error) {
|
|
||||||
console.error(error);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// new messages to be appended to the message list
|
|
||||||
this.sse.addEventListener('new-message', (event) => {
|
|
||||||
try {
|
|
||||||
for (const message of JSON.parse(event.data).messages) {
|
|
||||||
this.addMessage(message);
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error(error);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// a bulk of new messages, with a clear of the message list beforehand
|
|
||||||
this.sse.addEventListener('bulk-messages', (event) => {
|
|
||||||
this.clearAllMessages();
|
|
||||||
try {
|
|
||||||
for (const message of JSON.parse(event.data).messages) {
|
|
||||||
this.addMessage(message);
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error(error);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
this.sse.addEventListener('channel-list', (event) => {
|
|
||||||
try {
|
|
||||||
this.updateChannels(JSON.parse(event.data).channels);
|
|
||||||
} catch (error) {
|
|
||||||
console.error(error);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('load', function() {
|
|
||||||
this._app = new ChatTwoWeb();
|
|
||||||
});
|
|
||||||
@@ -1,53 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en" data-bs-theme="dark">
|
|
||||||
<head>
|
|
||||||
<title>Authentication</title>
|
|
||||||
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
|
|
||||||
<link href="static/bootstrap.min.css" rel="stylesheet">
|
|
||||||
<script src="static//bootstrap.bundle.min.js"></script>
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="static/start.css">
|
|
||||||
|
|
||||||
<script>
|
|
||||||
function appendAlert(message, type) {
|
|
||||||
const alertPlaceholder = document.getElementById('alert-placeholder')
|
|
||||||
|
|
||||||
const wrapper = document.createElement('div')
|
|
||||||
wrapper.innerHTML = [
|
|
||||||
`<div class="alert alert-${type} alert-dismissible" role="alert">`,
|
|
||||||
` <div>${message}</div>`,
|
|
||||||
' <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
|
|
||||||
'</div>'
|
|
||||||
].join('')
|
|
||||||
|
|
||||||
alertPlaceholder.append(wrapper)
|
|
||||||
}
|
|
||||||
|
|
||||||
document.addEventListener("DOMContentLoaded", () => {
|
|
||||||
const params = new Proxy(new URLSearchParams(window.location.search), {
|
|
||||||
get: (searchParams, prop) => searchParams.get(prop),
|
|
||||||
});
|
|
||||||
|
|
||||||
let value = params.message;
|
|
||||||
if (value) {
|
|
||||||
appendAlert(value, "warning")
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<main class="auth">
|
|
||||||
<h1>Authcode</h1>
|
|
||||||
<div id="alert-placeholder"></div>
|
|
||||||
<form action="/auth" method="POST">
|
|
||||||
<label><input type="password" name="authcode"></label>
|
|
||||||
<button type="submit" class="submitButton">Submit</button>
|
|
||||||
</form>
|
|
||||||
<img src="/emote/Sure">
|
|
||||||
</main>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,45 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<title>Chat2</title>
|
|
||||||
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="static/start.css">
|
|
||||||
<script src="static/gfd.js"></script>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<main class="chat">
|
|
||||||
<section id="messages">
|
|
||||||
<div class="scroll-container">
|
|
||||||
<ol id="messages-list"></ol>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="more-messages-indicator">
|
|
||||||
<!-- "arrow-down" icon from https://github.com/feathericons/feather, under MIT license -->
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section id="input">
|
|
||||||
<form>
|
|
||||||
<div class="select-container">
|
|
||||||
<select id="channel-select"></select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="input-container">
|
|
||||||
<input type="text" id="chat-input" autocomplete="off" placeholder="Message" enterkeyhint="send" maxlength="500">
|
|
||||||
<div id="channel-hint"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button type="submit">Send</button>
|
|
||||||
</form>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<div id="timestamp-width-probe"></div>
|
|
||||||
<script src="static/start.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Reference in New Issue
Block a user