First implementation of sveltekit for webinterface
This commit is contained in:
Infi
@@ -0,0 +1,23 @@
|
||||
node_modules
|
||||
|
||||
# Output
|
||||
.output
|
||||
.vercel
|
||||
.netlify
|
||||
.wrangler
|
||||
/.svelte-kit
|
||||
/build
|
||||
|
||||
# OS
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
|
||||
# Env
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
!.env.test
|
||||
|
||||
# Vite
|
||||
vite.config.js.timestamp-*
|
||||
vite.config.ts.timestamp-*
|
||||
@@ -0,0 +1 @@
|
||||
engine-strict=true
|
||||
@@ -0,0 +1,38 @@
|
||||
# sv
|
||||
|
||||
Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
|
||||
|
||||
## Creating a project
|
||||
|
||||
If you're seeing this, you've probably already done this step. Congrats!
|
||||
|
||||
```sh
|
||||
# create a new project in the current directory
|
||||
npx sv create
|
||||
|
||||
# create a new project in my-app
|
||||
npx sv create my-app
|
||||
```
|
||||
|
||||
## Developing
|
||||
|
||||
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
|
||||
|
||||
```sh
|
||||
npm run dev
|
||||
|
||||
# or start the server and open the app in a new browser tab
|
||||
npm run dev -- --open
|
||||
```
|
||||
|
||||
## Building
|
||||
|
||||
To create a production version of your app:
|
||||
|
||||
```sh
|
||||
npm run build
|
||||
```
|
||||
|
||||
You can preview the production build with `npm run preview`.
|
||||
|
||||
> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
|
||||
Generated
+1573
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"name": "frontend",
|
||||
"private": true,
|
||||
"version": "0.0.1",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite dev",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"prepare": "svelte-kit sync || echo ''",
|
||||
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
||||
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/adapter-static": "^3.0.8",
|
||||
"@sveltejs/kit": "^2.22.0",
|
||||
"@sveltejs/vite-plugin-svelte": "^6.0.0",
|
||||
"svelte": "^5.39.2",
|
||||
"svelte-check": "^4.0.0",
|
||||
"sveltekit-sse": "^0.14.3",
|
||||
"typescript": "^5.0.0",
|
||||
"vite": "^7.0.4"
|
||||
},
|
||||
"dependencies": {
|
||||
"@sveltestrap/sveltestrap": "^7.1.0"
|
||||
}
|
||||
}
|
||||
Vendored
+23
@@ -0,0 +1,23 @@
|
||||
// See https://svelte.dev/docs/kit/types#app.d.ts
|
||||
// for information about these interfaces
|
||||
declare global {
|
||||
namespace App {
|
||||
interface Error {
|
||||
code: string;
|
||||
id: string;
|
||||
}
|
||||
// interface Locals {}
|
||||
// interface PageData {}
|
||||
// interface PageState {}
|
||||
// interface Platform {}
|
||||
|
||||
interface Warning {
|
||||
hasWarning: boolean;
|
||||
content: string;
|
||||
}
|
||||
}
|
||||
|
||||
interface Element { scrollTopMax: number } // Firefox only property
|
||||
}
|
||||
|
||||
export {};
|
||||
@@ -0,0 +1,12 @@
|
||||
<!doctype html>
|
||||
<html lang="en" data-bs-theme="dark">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>%sveltekit.error.message%</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Status: %sveltekit.status%</p>
|
||||
<p>Message: %sveltekit.error.message%</p>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,426 @@
|
||||
import {type Source, source} from "sveltekit-sse";
|
||||
|
||||
interface ChatElements {
|
||||
channelHint: HTMLElement | null,
|
||||
channelSelect: HTMLElement | null,
|
||||
|
||||
messagesContainer: Element | null,
|
||||
messagesList: HTMLElement | null,
|
||||
|
||||
timestampWidthProbe: HTMLElement | null,
|
||||
|
||||
inputForm: Element | null,
|
||||
chatInput: HTMLElement | null,
|
||||
}
|
||||
|
||||
// ref `DataStructure.Messages`
|
||||
interface Messages {
|
||||
messages: MessageResponse[]
|
||||
}
|
||||
|
||||
// ref `DataStructure.MessageResponse`
|
||||
interface MessageResponse {
|
||||
timestamp: string;
|
||||
templates: Template[];
|
||||
}
|
||||
|
||||
// ref `DataStructure.MessageTemplate`
|
||||
interface Template {
|
||||
id: number;
|
||||
payload: string;
|
||||
content: string;
|
||||
color: number;
|
||||
}
|
||||
|
||||
// ref `DataStructure.SwitchChannel`
|
||||
interface SwitchChannel {
|
||||
channelName: Template[];
|
||||
channelLocked: boolean;
|
||||
}
|
||||
|
||||
// ref `DataStructure.ChannelList`
|
||||
interface ChannelList {
|
||||
channels: {[key: string]: number};
|
||||
}
|
||||
|
||||
// ref `DataStructure.ChatTab`
|
||||
interface ChatTab {
|
||||
name: string;
|
||||
index: number;
|
||||
}
|
||||
|
||||
// ref `DataStructure.ChatTabList`
|
||||
interface ChatTabList {
|
||||
tabs: ChatTab[];
|
||||
}
|
||||
|
||||
export class ChatTwoWeb {
|
||||
elements!: ChatElements;
|
||||
maxTimestampWidth: number = 0;
|
||||
scrolledToBottom: boolean = true;
|
||||
channelLocked: boolean = false;
|
||||
|
||||
sse!: EventSource;
|
||||
connection!: Source;
|
||||
|
||||
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')
|
||||
};
|
||||
|
||||
// channel selector
|
||||
this.elements.channelSelect?.addEventListener('change', async (event) => {
|
||||
if (event.currentTarget === null)
|
||||
return;
|
||||
|
||||
const rawResponse = await fetch('/channel', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Accept': 'application/json',
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({ channel: (event.currentTarget as HTMLSelectElement).value })
|
||||
});
|
||||
// const content = await rawResponse.json();
|
||||
// TODO: use the response
|
||||
});
|
||||
|
||||
// add indicator signaling more messages below
|
||||
this.elements.messagesContainer?.addEventListener('scroll', (event) => {
|
||||
if (event.currentTarget === null)
|
||||
return;
|
||||
|
||||
let parentElement = (event.currentTarget as HTMLDivElement).parentElement;
|
||||
if (!this.messagesAreScrolledToBottom()) {
|
||||
parentElement?.classList.add('more-messages');
|
||||
} else {
|
||||
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) => {
|
||||
if (this.elements.chatInput === null)
|
||||
return;
|
||||
|
||||
event.preventDefault();
|
||||
// @ts-ignore
|
||||
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
|
||||
|
||||
// @ts-ignore
|
||||
this.elements.chatInput.value = '';
|
||||
});
|
||||
}
|
||||
|
||||
messagesAreScrolledToBottom() {
|
||||
if (this.elements.messagesContainer === null) {
|
||||
return this.scrolledToBottom;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
updateChannelHint(channel: SwitchChannel) {
|
||||
if (this.elements.channelHint === null || this.elements.channelSelect === null)
|
||||
return;
|
||||
|
||||
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) {
|
||||
if (channelElement.firstChild === null)
|
||||
return;
|
||||
|
||||
// @ts-ignore
|
||||
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(channelList: ChannelList) {
|
||||
if (this.elements.channelSelect === null)
|
||||
return;
|
||||
|
||||
this.elements.channelSelect.innerHTML = '';
|
||||
for (const [ label, channel ] of Object.entries(channelList.channels)) {
|
||||
const option = document.createElement('option');
|
||||
option.value = channel.toString();
|
||||
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: string) {
|
||||
if (this.elements.timestampWidthProbe === null)
|
||||
return;
|
||||
|
||||
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');
|
||||
}
|
||||
}
|
||||
|
||||
scrollMessagesToBottom() {
|
||||
if (this.elements.messagesContainer === null || this.elements.messagesList === null)
|
||||
return;
|
||||
|
||||
if (this.elements.messagesContainer.scrollTopMax) {
|
||||
this.elements.messagesContainer.scrollTop = this.elements.messagesContainer.scrollTopMax;
|
||||
} else {
|
||||
if (this.elements.messagesList.lastElementChild === null)
|
||||
return;
|
||||
|
||||
this.elements.messagesList.lastElementChild.scrollIntoView();
|
||||
}
|
||||
}
|
||||
|
||||
addMessage(messageData: MessageResponse) {
|
||||
if (this.elements.messagesList === null)
|
||||
return;
|
||||
|
||||
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: Template[]) {
|
||||
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: Template, spanElement: HTMLSpanElement) {
|
||||
spanElement.innerText = template.content;
|
||||
if (template.color !== 0)
|
||||
{
|
||||
this.processColor(template, spanElement);
|
||||
}
|
||||
}
|
||||
|
||||
processUrlTemplate(template: Template, spanElement: HTMLSpanElement) {
|
||||
const urlElement = document.createElement('a');
|
||||
urlElement.innerText = template.content;
|
||||
urlElement.href = encodeURI(template.content);
|
||||
urlElement.target = '_blank'
|
||||
|
||||
if (template.color !== 0)
|
||||
{
|
||||
this.processColor(template, spanElement);
|
||||
}
|
||||
}
|
||||
|
||||
// converts a RGBA uint number to components
|
||||
processColor(template: Template, spanElement: HTMLSpanElement) {
|
||||
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;
|
||||
|
||||
spanElement.style.color = `rgba(${r}, ${g}, ${b}, ${a})`;
|
||||
}
|
||||
|
||||
processEmote(template: Template, spanElement: HTMLSpanElement) {
|
||||
const imgElement = document.createElement('img');
|
||||
imgElement.src = `/emote/${template.content}`;
|
||||
|
||||
spanElement.classList.add('emote-icon');
|
||||
spanElement.appendChild(imgElement);
|
||||
}
|
||||
|
||||
processIcon(template: Template, spanElement: HTMLSpanElement) {
|
||||
spanElement.classList.add('gfd-icon');
|
||||
spanElement.classList.add(`gfd-icon-hq-${template.id}`);
|
||||
}
|
||||
|
||||
clearAllMessages() {
|
||||
if (this.elements.messagesList === null)
|
||||
return;
|
||||
|
||||
this.elements.messagesList.innerHTML = '';
|
||||
}
|
||||
|
||||
setupSSEConnection() {
|
||||
this.connection = source('/sse')
|
||||
|
||||
this.connection.select('close').subscribe((data: string) => {
|
||||
console.log(`Data received: ${data}`)
|
||||
if (data) {
|
||||
console.log('Closing SSE connection.');
|
||||
this.connection.close();
|
||||
}
|
||||
});
|
||||
|
||||
// new messages to be appended to the message list
|
||||
this.connection.select('new-message').subscribe((data: string) => {
|
||||
console.log(`Data received: ${data}`)
|
||||
if (data) {
|
||||
try {
|
||||
let message: MessageResponse = JSON.parse(data);
|
||||
this.addMessage(message);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// a bulk of new messages, with a clear of the message list beforehand
|
||||
this.connection.select('bulk-messages').subscribe((data: string) => {
|
||||
console.log(`Data received: ${data}`)
|
||||
if (data) {
|
||||
this.clearAllMessages();
|
||||
try {
|
||||
let messages: Messages = JSON.parse(data);
|
||||
for (const message of messages.messages) {
|
||||
this.addMessage(message);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
this.connection.select('channel-switched').subscribe((data: string) => {
|
||||
console.log(`Data received: ${data}`)
|
||||
if (data) {
|
||||
try {
|
||||
let channel: SwitchChannel = JSON.parse(data);
|
||||
this.updateChannelHint(channel);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// list of all channels
|
||||
this.connection.select('channel-list').subscribe((data: string) => {
|
||||
console.log(`Data received: ${data}`)
|
||||
if (data) {
|
||||
try {
|
||||
let channelList: ChannelList = JSON.parse(data);
|
||||
this.updateChannels(channelList);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// tab switched
|
||||
this.connection.select('tab-switched').subscribe((data: string) => {
|
||||
console.log(`Data received: ${data}`)
|
||||
if (data) {
|
||||
try {
|
||||
let chatTab: ChatTab = JSON.parse(data);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// list of all tabs
|
||||
this.connection.select('tab-list').subscribe((data: string) => {
|
||||
console.log(`Data received: ${data}`)
|
||||
if (data) {
|
||||
try {
|
||||
let chatTabLit: ChatTabList = JSON.parse(data);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,134 @@
|
||||
// from kizer, gfd icons
|
||||
interface GdfEntry {
|
||||
id: number,
|
||||
left: number,
|
||||
top: number,
|
||||
width: number,
|
||||
height: number,
|
||||
unk0A: number,
|
||||
redirect: number,
|
||||
unk0E: number,
|
||||
}
|
||||
|
||||
interface StylesheetEntry {
|
||||
ids: number[],
|
||||
style1: string,
|
||||
style2: string,
|
||||
width: number,
|
||||
}
|
||||
|
||||
export async function addGfdStylesheet(gfdPath: string, texPath: string) {
|
||||
const texPromise = loadTexAsBlob(texPath);
|
||||
const gfdPromise = loadGfd(gfdPath);
|
||||
const texUrl = URL.createObjectURL(await texPromise);
|
||||
const gfd = await gfdPromise;
|
||||
|
||||
const stylesheets: {[id: number]: StylesheetEntry} = [];
|
||||
for (const entry of gfd) {
|
||||
if (entry.width * entry.height <= 0)
|
||||
continue;
|
||||
|
||||
if (entry.redirect !== 0) {
|
||||
stylesheets[entry.redirect].ids.push(entry.id);
|
||||
continue;
|
||||
}
|
||||
|
||||
stylesheets[entry.id] = {
|
||||
ids: [entry.id],
|
||||
style1: [
|
||||
`background-position: -${entry.left}px -${entry.top}px`,
|
||||
`background-image: url('${texUrl}')`,
|
||||
`width: ${entry.width}px`,
|
||||
`height: ${entry.height}px`
|
||||
].join(';'),
|
||||
style2: [
|
||||
`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(';'),
|
||||
width: entry.width
|
||||
};
|
||||
}
|
||||
|
||||
let stylesheet = '';
|
||||
for (const entry of Object.values(stylesheets)) {
|
||||
if (!entry)
|
||||
continue;
|
||||
|
||||
stylesheet += `\n${entry.ids.map(x => `.gfd-icon.gfd-icon-${x}::before`).join(', ')}{${entry.style1};}`;
|
||||
stylesheet += `\n${entry.ids.map(x => `.gfd-icon.gfd-icon-hq-${x}::before`).join(', ')}{${entry.style2};}`;
|
||||
stylesheet += `\n${entry.ids.map(x => `.gfd-icon.gfd-icon-${x}`).join(', ')}{width:${entry.width}px;}`;
|
||||
stylesheet += `\n${entry.ids.map(x => `.gfd-icon.gfd-icon-hq-${x}`).join(', ')}{width:${entry.width * 2}px;}`;
|
||||
}
|
||||
|
||||
const styleNode = document.createElement('style');
|
||||
styleNode.appendChild(document.createTextNode(stylesheet));
|
||||
document.head.appendChild(styleNode);
|
||||
}
|
||||
|
||||
async function loadTexAsBlob(path: string) {
|
||||
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: string) {
|
||||
const buffer = new DataView(await (await fetch(path)).arrayBuffer());
|
||||
const count = buffer.getInt32(8, true);
|
||||
const entries: GdfEntry[] = 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: 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);
|
||||
const arraySize = buffer.getInt8(15);
|
||||
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,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
// place files you want to import through the `$lib` alias in this folder.
|
||||
@@ -0,0 +1,11 @@
|
||||
<script lang="ts">
|
||||
let { children } = $props();
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<link rel="stylesheet" href="/static/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="/static/start.css">
|
||||
</svelte:head>
|
||||
|
||||
{@render children?.()}
|
||||
@@ -0,0 +1 @@
|
||||
export const prerender = true;
|
||||
@@ -0,0 +1,33 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/state'
|
||||
import { Alert } from '@sveltestrap/sveltestrap';
|
||||
|
||||
let data: App.Warning | null = null;
|
||||
$effect.pre(() => {
|
||||
if (page.url.searchParams.has('message')) {
|
||||
data = {
|
||||
hasWarning: true,
|
||||
content: page.url.searchParams.get('message') ?? '',
|
||||
};
|
||||
} else {
|
||||
data = {
|
||||
hasWarning: false,
|
||||
content: '',
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<main class="auth">
|
||||
<h1>Authcode</h1>
|
||||
{#if data?.hasWarning }
|
||||
<Alert content={data.content} color="warning" dismissible={true}/>
|
||||
{/if}
|
||||
<form action="/auth" method="POST">
|
||||
<label><input type="password" name="authcode"></label>
|
||||
<button type="submit" class="submitButton">Submit</button>
|
||||
</form>
|
||||
<div data-sveltekit-preload-data="false">
|
||||
<img src="/emote/Sure" alt=":Sure:" data-sveltekit-preload-data="off">
|
||||
</div>
|
||||
</main>
|
||||
@@ -0,0 +1,68 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/state'
|
||||
import {Alert} from "@sveltestrap/sveltestrap";
|
||||
import { onMount } from 'svelte';
|
||||
import { ChatTwoWeb } from '$lib/chat'
|
||||
import {addGfdStylesheet} from "$lib/gfd";
|
||||
|
||||
let data: App.Warning | null = null;
|
||||
$effect.pre(() => {
|
||||
if (page.url.searchParams.has('message')) {
|
||||
data = {
|
||||
hasWarning: true,
|
||||
content: page.url.searchParams.get('message') ?? '',
|
||||
};
|
||||
} else {
|
||||
data = {
|
||||
hasWarning: false,
|
||||
content: '',
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
onMount(() => {
|
||||
console.log('the component has mounted');
|
||||
|
||||
// Populate the stylesheet with gfd data
|
||||
addGfdStylesheet('/files/gfdata.gfd', '/files/fonticon_ps5.tex');
|
||||
|
||||
// Load all web functions in the background
|
||||
const _ = new ChatTwoWeb();
|
||||
});
|
||||
</script>
|
||||
|
||||
<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>
|
||||
|
||||
{#if data?.hasWarning }
|
||||
<section id="warnings">
|
||||
<Alert content={data.content} color="warning" dismissible={true}/>
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
<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>
|
||||
Binary file not shown.
File diff suppressed because one or more lines are too long
@@ -0,0 +1,3 @@
|
||||
# allow crawling everything by default
|
||||
User-agent: *
|
||||
Disallow:
|
||||
@@ -0,0 +1,377 @@
|
||||
/* fonts */
|
||||
@font-face {
|
||||
font-family: Lodestone;
|
||||
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('/static/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 > div > 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 > div > 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;
|
||||
}
|
||||
|
||||
/* alerts */
|
||||
section#warnings {
|
||||
flex-grow: 0;
|
||||
padding: 20px 20px 0 20px;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import adapter from '@sveltejs/adapter-static';
|
||||
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
|
||||
|
||||
/** @type {import('@sveltejs/kit').Config} */
|
||||
const config = {
|
||||
// Consult https://svelte.dev/docs/kit/integrations
|
||||
// for more information about preprocessors
|
||||
preprocess: vitePreprocess(),
|
||||
kit: {
|
||||
prerender: {
|
||||
handleHttpError: 'warn'
|
||||
},
|
||||
adapter: adapter({
|
||||
// default options are shown. On some platforms
|
||||
// these options are set automatically — see below
|
||||
pages: 'build',
|
||||
assets: 'build',
|
||||
fallback: undefined,
|
||||
precompress: false,
|
||||
strict: true,
|
||||
})
|
||||
},
|
||||
};
|
||||
|
||||
export default config;
|
||||
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"extends": "./.svelte-kit/tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"allowJs": true,
|
||||
"checkJs": true,
|
||||
"esModuleInterop": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"resolveJsonModule": true,
|
||||
"skipLibCheck": true,
|
||||
"sourceMap": true,
|
||||
"strict": true,
|
||||
"moduleResolution": "bundler"
|
||||
}
|
||||
// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
|
||||
// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
|
||||
//
|
||||
// To make changes to top-level options such as include and exclude, we recommend extending
|
||||
// the generated config; see https://svelte.dev/docs/kit/configuration#typescript
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
import { sveltekit } from '@sveltejs/kit/vite';
|
||||
import { defineConfig } from 'vite';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [sveltekit()]
|
||||
});
|
||||
@@ -17,7 +17,7 @@ public class HostContext
|
||||
internal readonly List<SSEConnection> EventConnections = [];
|
||||
|
||||
internal readonly CancellationTokenSource TokenSource = new();
|
||||
internal readonly string StaticDir = Path.Combine(Plugin.Interface.AssemblyLocation.DirectoryName!, "Http");
|
||||
internal readonly string StaticDir = Path.Combine(Plugin.Interface.AssemblyLocation.DirectoryName!, "Http/Frontend/build");
|
||||
|
||||
public HostContext(Plugin plugin)
|
||||
{
|
||||
@@ -120,14 +120,14 @@ public class HostContext
|
||||
|
||||
private async Task CheckAuthenticationCookie(HttpContextBase ctx)
|
||||
{
|
||||
if (Plugin.Config.SessionTokens.IsEmpty)
|
||||
if (Plugin.Config.AuthStore.Count == 0)
|
||||
{
|
||||
await RouteController.Redirect(ctx, "/", ("message", "Invalid session token."));
|
||||
return;
|
||||
}
|
||||
|
||||
var cookies = WebserverUtil.GetCookieData(ctx.Request.Headers.Get("Cookie") ?? "");
|
||||
if (!cookies.TryGetValue("ChatTwo-token", out var token) || !Plugin.Config.SessionTokens.ContainsKey(token))
|
||||
if (!cookies.TryGetValue("ChatTwo-token", out var token) || !Plugin.Config.AuthStore.Contains(token))
|
||||
await RouteController.Redirect(ctx, "/", ("message", "Invalid session token."));
|
||||
|
||||
// Do nothing to let auth pass
|
||||
|
||||
@@ -1,8 +1,26 @@
|
||||
using Newtonsoft.Json;
|
||||
using ChatTwo.Code;
|
||||
using Newtonsoft.Json;
|
||||
|
||||
namespace ChatTwo.Http.MessageProtocol;
|
||||
|
||||
#region Outgoing SSE
|
||||
/// <summary>
|
||||
/// Contains a valid tab with its assigned index
|
||||
/// </summary>
|
||||
public struct ChatTab(string name, int index)
|
||||
{
|
||||
[JsonProperty("name")] public string Name = name;
|
||||
[JsonProperty("index")] public int Index = index;
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// Contains a number of tabs that are valid for the user to pick from
|
||||
/// </summary>
|
||||
public struct ChatTabList(ChatTab[] tabs)
|
||||
{
|
||||
[JsonProperty("tabs")] public ChatTab[] Tabs = tabs;
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// Contains the current channel name
|
||||
/// </summary>
|
||||
@@ -13,7 +31,7 @@ public struct SwitchChannel((MessageTemplate[] ChannelName, bool Locked) channel
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// Contains one or multiple channels that are valid for the user to pick from
|
||||
/// Contains a number of channels that are valid for the user to pick from
|
||||
/// </summary>
|
||||
public struct ChannelList(Dictionary<string, uint> channels)
|
||||
{
|
||||
@@ -50,7 +68,8 @@ public struct MessageTemplate()
|
||||
/// url = Simple url that should be clickable
|
||||
/// text = Simple text content of the message
|
||||
///
|
||||
/// empty = Ignore
|
||||
/// Note:
|
||||
/// Empty is used for invalid payloads
|
||||
/// </summary>
|
||||
[JsonProperty("payload")] public required string Payload;
|
||||
|
||||
@@ -60,14 +79,15 @@ public struct MessageTemplate()
|
||||
[JsonProperty("content")] public string Content = "";
|
||||
|
||||
/// <summary>
|
||||
/// Used for icon.
|
||||
/// Used for an icon.
|
||||
/// </summary>
|
||||
[JsonProperty("id")] public uint Id;
|
||||
|
||||
/// <summary>
|
||||
/// Used for text and url
|
||||
///
|
||||
/// Ignore if 0!
|
||||
/// Note:
|
||||
/// 0 is used for invalid colors
|
||||
/// </summary>
|
||||
[JsonProperty("color")] public uint Color;
|
||||
|
||||
@@ -99,10 +119,18 @@ public struct IncomingMessage()
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// Channel must be a valid uint number
|
||||
/// The channel type must be a valid <see cref="InputChannel"/>
|
||||
/// </summary>
|
||||
public struct IncomingChannel()
|
||||
{
|
||||
[JsonProperty("channel")] public uint Channel = uint.MaxValue;
|
||||
[JsonProperty("channel")] public InputChannel Channel = InputChannel.Invalid;
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// The tabs index must be a valid int
|
||||
/// </summary>
|
||||
public struct IncomingTab()
|
||||
{
|
||||
[JsonProperty("index")] public int Index = -1;
|
||||
}
|
||||
#endregion
|
||||
@@ -3,15 +3,20 @@ using Newtonsoft.Json;
|
||||
|
||||
namespace ChatTwo.Http.MessageProtocol;
|
||||
|
||||
// General
|
||||
public class CloseEvent() : BaseEvent("close");
|
||||
|
||||
// Tab related
|
||||
public class ChatTabListEvent(ChatTabList list) : BaseEvent("tab-list", JsonConvert.SerializeObject(list));
|
||||
public class ChatTabSwitchedEvent(ChatTab chatTab) : BaseEvent("tab-switched", JsonConvert.SerializeObject(chatTab));
|
||||
|
||||
// Input channel related
|
||||
public class ChannelListEvent(ChannelList channelList) : BaseEvent("channel-list", JsonConvert.SerializeObject(channelList));
|
||||
public class SwitchChannelEvent(SwitchChannel switchChannel) : BaseEvent("channel-switched", JsonConvert.SerializeObject(switchChannel));
|
||||
|
||||
public class SwitchChannelEvent(SwitchChannel switchChannel) : BaseEvent("switch-channel", JsonConvert.SerializeObject(switchChannel));
|
||||
|
||||
// Chat message related
|
||||
public class BulkMessagesEvent(Messages messages) : BaseEvent("bulk-messages", JsonConvert.SerializeObject(messages));
|
||||
|
||||
public class NewMessageEvent(Messages messages) : BaseEvent("new-message", JsonConvert.SerializeObject(messages));
|
||||
public class NewMessageEvent(MessageResponse message) : BaseEvent("new-message", JsonConvert.SerializeObject(message));
|
||||
|
||||
public class BaseEvent(string eventType, string? data = null)
|
||||
{
|
||||
|
||||
@@ -43,14 +43,20 @@ public class Processing
|
||||
|
||||
internal async Task PrepareNewClient(SSEConnection sse)
|
||||
{
|
||||
var messages = await WebserverUtil.FrameworkWrapper(ReadMessageList);
|
||||
var channels = await Plugin.Framework.RunOnTick(Plugin.ChatLogWindow.GetAvailableChannels);
|
||||
var channel = await Plugin.Framework.RunOnTick(() => ReadChannelName(Plugin.ChatLogWindow.PreviousChannel));
|
||||
// This takes long, so keep it outside the next frame
|
||||
var messages = await GetAllMessages();
|
||||
|
||||
// Using the bulk message event to clear everything on the client side that may still exist
|
||||
sse.OutboundQueue.Enqueue(new BulkMessagesEvent(new Messages(messages)));
|
||||
sse.OutboundQueue.Enqueue(new SwitchChannelEvent(new SwitchChannel(channel)));
|
||||
sse.OutboundQueue.Enqueue(new ChannelListEvent(new ChannelList(channels.ToDictionary(pair => pair.Key, pair => (uint)pair.Value))));
|
||||
await Plugin.Framework.RunOnTick(() =>
|
||||
{
|
||||
sse.OutboundQueue.Enqueue(new BulkMessagesEvent(messages));
|
||||
|
||||
sse.OutboundQueue.Enqueue(new SwitchChannelEvent(GetCurrentChannel()));
|
||||
sse.OutboundQueue.Enqueue(new ChannelListEvent(GetValidChannels()));
|
||||
|
||||
sse.OutboundQueue.Enqueue(new ChatTabSwitchedEvent(GetCurrentTab()));
|
||||
sse.OutboundQueue.Enqueue(new ChatTabListEvent(GetAllTabs()));
|
||||
});
|
||||
}
|
||||
|
||||
private MessageTemplate ProcessChunk(Chunk chunk)
|
||||
@@ -95,4 +101,33 @@ public class Processing
|
||||
|
||||
return MessageTemplate.Empty;
|
||||
}
|
||||
|
||||
private async Task<Messages> GetAllMessages()
|
||||
{
|
||||
var messages = await WebserverUtil.FrameworkWrapper(ReadMessageList);
|
||||
return new Messages(messages);
|
||||
}
|
||||
|
||||
private SwitchChannel GetCurrentChannel()
|
||||
{
|
||||
var channel = ReadChannelName(Plugin.ChatLogWindow.PreviousChannel);
|
||||
return new SwitchChannel(channel);
|
||||
}
|
||||
|
||||
private ChannelList GetValidChannels()
|
||||
{
|
||||
var channels = Plugin.ChatLogWindow.GetValidChannels();
|
||||
return new ChannelList(channels.ToDictionary(pair => pair.Key, pair => (uint)pair.Value));
|
||||
}
|
||||
|
||||
private ChatTab GetCurrentTab()
|
||||
{
|
||||
return new ChatTab(Plugin.CurrentTab.Name, Plugin.LastTab);
|
||||
}
|
||||
|
||||
private ChatTabList GetAllTabs()
|
||||
{
|
||||
var tabs = Plugin.Config.Tabs.Select((tab, idx) => new ChatTab(tab.Name, idx)).ToArray();
|
||||
return new ChatTabList(tabs);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
using System.Collections.Concurrent;
|
||||
using System.Net;
|
||||
using System.Web;
|
||||
using ChatTwo.Code;
|
||||
using ChatTwo.Http.MessageProtocol;
|
||||
@@ -31,8 +32,8 @@ public class RouteController
|
||||
Plugin = plugin;
|
||||
Core = core;
|
||||
|
||||
AuthTemplate = File.ReadAllText(Path.Combine(Core.StaticDir, "templates", "auth.html"));
|
||||
ChatBoxTemplate = File.ReadAllText(Path.Combine(Core.StaticDir, "templates", "chat.html"));
|
||||
AuthTemplate = File.ReadAllText(Path.Combine(Core.StaticDir, "index.html"));
|
||||
ChatBoxTemplate = File.ReadAllText(Path.Combine(Core.StaticDir, "chat.html"));
|
||||
|
||||
// Pre Auth
|
||||
Core.Host.Routes.PreAuthentication.Static.Add(HttpMethod.GET, "/", AuthRoute, ExceptionRoute);
|
||||
@@ -42,15 +43,19 @@ public class RouteController
|
||||
Core.Host.Routes.PreAuthentication.Static.Add(HttpMethod.GET, "/files/FFXIV_Lodestone_SSF.ttf", GetLodestoneFont, ExceptionRoute);
|
||||
Core.Host.Routes.PreAuthentication.Static.Add(HttpMethod.GET, "/favicon.ico", GetFavicon, ExceptionRoute);
|
||||
Core.Host.Routes.PreAuthentication.Parameter.Add(HttpMethod.GET, "/emote/{name}", GetEmote, ExceptionRoute);
|
||||
Core.Host.Routes.PreAuthentication.Content.Add("/static", true, ExceptionRoute);
|
||||
|
||||
// Post Auth
|
||||
Core.Host.Routes.PostAuthentication.Static.Add(HttpMethod.GET, "/chat", ChatBoxRoute, ExceptionRoute);
|
||||
Core.Host.Routes.PostAuthentication.Static.Add(HttpMethod.POST, "/send", ReceiveMessage, ExceptionRoute);
|
||||
Core.Host.Routes.PostAuthentication.Static.Add(HttpMethod.POST, "/channel", ReceiveChannelSwitch, ExceptionRoute);
|
||||
Core.Host.Routes.PostAuthentication.Static.Add(HttpMethod.POST, "/tab", ReceiveTabSwitch, ExceptionRoute);
|
||||
|
||||
// Ship all other static files dynamically
|
||||
Core.Host.Routes.PreAuthentication.Content.Add("/_app/", true, ExceptionRoute);
|
||||
Core.Host.Routes.PreAuthentication.Content.Add("/static/", true, ExceptionRoute);
|
||||
|
||||
// Server-Sent Events Route
|
||||
Core.Host.Routes.PostAuthentication.Static.Add(HttpMethod.GET, "/sse", NewSSEConnection, ExceptionRoute);
|
||||
Core.Host.Routes.PostAuthentication.Static.Add(HttpMethod.POST, "/sse", NewSSEConnection, ExceptionRoute);
|
||||
}
|
||||
|
||||
private async Task ExceptionRoute(HttpContextBase ctx, Exception _)
|
||||
@@ -61,6 +66,16 @@ public class RouteController
|
||||
|
||||
private async Task AuthRoute(HttpContextBase ctx)
|
||||
{
|
||||
if (Plugin.Config.AuthStore.Count > 0)
|
||||
{
|
||||
var cookies = WebserverUtil.GetCookieData(ctx.Request.Headers.Get("Cookie") ?? "");
|
||||
if (cookies.TryGetValue("ChatTwo-token", out var value) && Plugin.Config.AuthStore.Contains(value))
|
||||
{
|
||||
await Redirect(ctx, "/chat");
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
await ctx.Response.Send(AuthTemplate);
|
||||
}
|
||||
|
||||
@@ -133,7 +148,7 @@ public class RouteController
|
||||
if (RateLimit.TryGetValue(ctx.Request.Source.IpAddress, out var timestamp) && timestamp > currentTick)
|
||||
{
|
||||
_ = ctx.Request.DataAsString; // Temp fix for Watson.Lite bug #155
|
||||
return await Redirect(ctx, "/", ("message", "Rate limit active."));
|
||||
return await Redirect(ctx, "/", ("message", "Rate limit active (10s)"));
|
||||
}
|
||||
|
||||
// The next request will be rate limited for 10s
|
||||
@@ -141,10 +156,10 @@ public class RouteController
|
||||
|
||||
var authcode = HttpUtility.ParseQueryString(ctx.Request.DataAsString ?? "").Get("authcode");
|
||||
if (authcode == null || authcode != Plugin.Config.WebinterfacePassword)
|
||||
return await Redirect(ctx, "/", ("message", "Authentication failed."));
|
||||
return await Redirect(ctx, "/", ("message", "Authentication failed"));
|
||||
|
||||
var token = WebinterfaceUtil.GenerateSimpleToken();
|
||||
Plugin.Config.SessionTokens.TryAdd(token, true);
|
||||
Plugin.Config.AuthStore.Add(token);
|
||||
|
||||
ctx.Response.Headers.Add("Set-Cookie", $"ChatTwo-token={token}");
|
||||
return await Redirect(ctx, "/chat");
|
||||
@@ -159,12 +174,8 @@ public class RouteController
|
||||
|
||||
private async Task ReceiveMessage(HttpContextBase ctx)
|
||||
{
|
||||
if (ctx.Request.ContentType != "application/json")
|
||||
{
|
||||
ctx.Response.StatusCode = 415;
|
||||
await ctx.Response.Send(JsonConvert.SerializeObject(new ErrorResponse("Request contains wrong media type.")));
|
||||
if (!await EnforceMediaType(ctx, "application/json"))
|
||||
return;
|
||||
}
|
||||
|
||||
var content = JsonConvert.DeserializeObject<IncomingMessage>(ctx.Request.DataAsString, JsonSettings);
|
||||
if (content.Message.Length is < 2 or > 500)
|
||||
@@ -186,28 +197,40 @@ public class RouteController
|
||||
|
||||
private async Task ReceiveChannelSwitch(HttpContextBase ctx)
|
||||
{
|
||||
if (ctx.Request.ContentType != "application/json")
|
||||
{
|
||||
ctx.Response.StatusCode = 415;
|
||||
await ctx.Response.Send(JsonConvert.SerializeObject(new ErrorResponse("Request contains wrong media type.")));
|
||||
if (!await EnforceMediaType(ctx, "application/json"))
|
||||
return;
|
||||
}
|
||||
|
||||
var channel = JsonConvert.DeserializeObject<IncomingChannel>(ctx.Request.DataAsString, JsonSettings);
|
||||
if (!Enum.IsDefined(typeof(InputChannel), channel.Channel))
|
||||
if (!Enum.IsDefined((InputChannel)channel.Channel))
|
||||
{
|
||||
ctx.Response.StatusCode = 400;
|
||||
await ctx.Response.Send(JsonConvert.SerializeObject(new ErrorResponse("Invalid channel received.")));
|
||||
return;
|
||||
}
|
||||
|
||||
await Plugin.Framework.RunOnFrameworkThread(() =>
|
||||
{
|
||||
Plugin.ChatLogWindow.SetChannel((InputChannel)channel.Channel);
|
||||
});
|
||||
await Plugin.Framework.RunOnFrameworkThread(() => { Plugin.ChatLogWindow.SetChannel((InputChannel)channel.Channel); });
|
||||
|
||||
ctx.Response.StatusCode = 201;
|
||||
await ctx.Response.Send(JsonConvert.SerializeObject(new OkResponse("Channel switch got initiated.")));
|
||||
await ctx.Response.Send(JsonConvert.SerializeObject(new OkResponse("Channel switch was initiated.")));
|
||||
}
|
||||
|
||||
private async Task ReceiveTabSwitch(HttpContextBase ctx)
|
||||
{
|
||||
if (!await EnforceMediaType(ctx, "application/json"))
|
||||
return;
|
||||
|
||||
var tab = JsonConvert.DeserializeObject<IncomingTab>(ctx.Request.DataAsString, JsonSettings);
|
||||
if (tab.Index < 0 || tab.Index >= Plugin.Config.Tabs.Count)
|
||||
{
|
||||
ctx.Response.StatusCode = 400;
|
||||
await ctx.Response.Send(JsonConvert.SerializeObject(new ErrorResponse("Invalid tab received.")));
|
||||
return;
|
||||
}
|
||||
|
||||
await Plugin.Framework.RunOnFrameworkThread(() => { Plugin.WantedTab = tab.Index; });
|
||||
|
||||
ctx.Response.StatusCode = 201;
|
||||
await ctx.Response.Send(JsonConvert.SerializeObject(new OkResponse("Tab switch was initiated.")));
|
||||
}
|
||||
|
||||
private async Task NewSSEConnection(HttpContextBase ctx)
|
||||
@@ -245,4 +268,24 @@ public class RouteController
|
||||
return await ctx.Response.Send();
|
||||
}
|
||||
#endregion
|
||||
|
||||
#region PreChecks
|
||||
|
||||
/// <summary>
|
||||
/// Check that the request has the correct media type that the functions expects.
|
||||
/// </summary>
|
||||
/// <param name="ctx"></param>
|
||||
/// <param name="requiredMediaType"></param>
|
||||
/// <returns>True if media type is correct, otherwise handled and false</returns>
|
||||
private async Task<bool> EnforceMediaType(HttpContextBase ctx, string requiredMediaType)
|
||||
{
|
||||
if (ctx.Request.ContentType == requiredMediaType)
|
||||
return true;
|
||||
|
||||
ctx.Response.StatusCode = 415;
|
||||
await ctx.Response.Send(JsonConvert.SerializeObject(new ErrorResponse("Request contains wrong media type.")));
|
||||
return false;
|
||||
}
|
||||
|
||||
#endregion
|
||||
}
|
||||
@@ -34,7 +34,7 @@ public class SSEConnection
|
||||
if (!OutboundQueue.TryDequeue(out var outgoingEvent))
|
||||
continue;
|
||||
|
||||
if (!await ctx.Response.SendChunk(outgoingEvent.Build(), Token))
|
||||
if (!await ctx.Response.SendChunk(outgoingEvent.Build(), false, Token))
|
||||
{
|
||||
Plugin.Log.Information("SSE connection was unable to send new data");
|
||||
Plugin.Log.Information($"Client disconnected: {ctx.Guid}");
|
||||
@@ -53,7 +53,7 @@ public class SSEConnection
|
||||
finally
|
||||
{
|
||||
// "No Content" (204) didn't work for Firefox, so manually closing the connection on client side
|
||||
await ctx.Response.SendFinalChunk(new CloseEvent().Build());
|
||||
await ctx.Response.SendChunk(new CloseEvent().Build(), true, Token);
|
||||
|
||||
// Manually confirm that we have finished our connection, even if the final response failed
|
||||
// This can happen if the client disconnects before the server does
|
||||
|
||||
@@ -23,7 +23,7 @@ public class ServerCore : IAsyncDisposable
|
||||
{
|
||||
Plugin.Framework.RunOnTick(() =>
|
||||
{
|
||||
var bundledResponse = new NewMessageEvent(new Messages([HostContext.Processing.ReadMessageContent(message)]));
|
||||
var bundledResponse = new NewMessageEvent(HostContext.Processing.ReadMessageContent(message));
|
||||
foreach (var eventServer in HostContext.EventConnections)
|
||||
eventServer.OutboundQueue.Enqueue(bundledResponse);
|
||||
});
|
||||
@@ -82,7 +82,7 @@ public class ServerCore : IAsyncDisposable
|
||||
{
|
||||
Plugin.Framework.RunOnTick(() =>
|
||||
{
|
||||
var channels = Plugin.ChatLogWindow.GetAvailableChannels();
|
||||
var channels = Plugin.ChatLogWindow.GetValidChannels();
|
||||
var bundledResponse = new ChannelListEvent(new ChannelList(channels.ToDictionary(pair => pair.Key, pair => (uint)pair.Value)));
|
||||
foreach (var eventServer in HostContext.EventConnections)
|
||||
eventServer.OutboundQueue.Enqueue(bundledResponse);
|
||||
@@ -119,7 +119,7 @@ public class ServerCore : IAsyncDisposable
|
||||
if (!HostContext.IsActive)
|
||||
return;
|
||||
|
||||
Plugin.Config.SessionTokens.Clear();
|
||||
Plugin.Config.AuthStore.Clear();
|
||||
Plugin.SaveConfig();
|
||||
}
|
||||
|
||||
|
||||
+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,6 +1,7 @@
|
||||
/* fonts */
|
||||
@font-face {
|
||||
font-family: Lodestone;
|
||||
/*noinspection CssUnknownTarget*/
|
||||
src: url('/files/FFXIV_Lodestone_SSF.ttf') format('truetype');
|
||||
unicode-range: U+E020-E0DB;
|
||||
}
|
||||
@@ -82,7 +83,7 @@ body > main.auth {
|
||||
|
||||
input { width: 150px; }
|
||||
|
||||
input, button {
|
||||
input, .submitButton {
|
||||
padding: 5px 20px;
|
||||
font-size: 1rem;
|
||||
border: 3px solid transparent;
|
||||
@@ -94,7 +95,7 @@ body > main.auth {
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
.submitButton {
|
||||
padding: 5px 15px;
|
||||
border: 3px solid var(--bg-input);
|
||||
background-image: var(--gradient-clickable);
|
||||
|
||||
@@ -1,20 +1,51 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<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">Submit</button>
|
||||
<button type="submit" class="submitButton">Submit</button>
|
||||
</form>
|
||||
<img src="/emote/Sure">
|
||||
</main>
|
||||
|
||||
Reference in New Issue
Block a user