-
-
-
-
-
-
- Authcode
- {#if data?.hasWarning } -
- 
-
-Status: %sveltekit.status%
-Message: %sveltekit.error.message%
- - \ No newline at end of file diff --git a/ChatTwo/Http/Frontend/src/lib/chat.svelte.ts b/ChatTwo/Http/Frontend/src/lib/chat.svelte.ts deleted file mode 100644 index ab89039..0000000 --- a/ChatTwo/Http/Frontend/src/lib/chat.svelte.ts +++ /dev/null @@ -1,405 +0,0 @@ -import { channelOptions, isChannelLocked, selectedTab, knownTabs, chatInput, messagesList, scrollMessagesToBottom } from "$lib/shared.svelte"; -import { WebPayloadType } from "$lib/payload"; -import { source, type Source } from "sveltekit-sse"; - -interface ChatElements { - messagesContainer: Element | null, - messagesList: HTMLElement | null, - - timestampWidthProbe: HTMLElement | null, - - inputForm: Element | null, -} - -// ref `DataStructure.Messages` -interface Messages { - messages: MessageResponse[] -} - -// ref `DataStructure.MessageResponse` -interface MessageResponse { - id: string; - timestamp: string; - templates: Template[]; -} - -// ref `DataStructure.MessageTemplate` -interface Template { - payloadType: WebPayloadType; - content: string; - iconId: number; - color: number; -} - -// ref `DataStructure.SwitchChannel` -interface SwitchChannel { - channelName: Template[]; - channelValue: number; - channelLocked: boolean; -} - -// ref `DataStructure.ChannelList` -interface ChannelList { - channels: {[key: string]: number}; -} - -// ref `DataStructure.ChatTab` -export interface ChatTab { - name: string; - index: number; - unreadCount: number; -} - -// ref `DataStructure.ChatTabList` -interface ChatTabList { - tabs: ChatTab[]; -} - -// ref `DataStructure.ChatTabUnreadState` -interface ChatTabUnreadState { - index: number; - unreadCount: number; -} - -export class ChatTwoWeb { - elements!: ChatElements; - maxTimestampWidth: number = 0; - - sse!: EventSource; - connection!: Source; - - constructor() { - this.setupDOMElements(); - this.setupSSEConnection(); - } - - setupDOMElements() { - this.elements = { - messagesContainer: document.querySelector('#messages > .scroll-container')!, - messagesList: document.getElementById('messages-list'), - - timestampWidthProbe: document.getElementById('timestamp-width-probe'), - - inputForm: document.querySelector('#input > form'), - }; - messagesList.element = this.elements.messagesList; - - // 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 (messagesList.scrolledToBottom) { - scrollMessagesToBottom(); - } - }) - - // handle message sending - this.elements.inputForm?.addEventListener('submit', async (event) => { - event.preventDefault(); - if (chatInput.content.length > 500) { - return; - } - - const rawResponse = await fetch('/send', { - method: 'POST', - headers: { - 'Accept': 'application/json', - 'Content-Type': 'application/json' - }, - body: JSON.stringify({ message: chatInput.content }) - }); - // const content = await rawResponse.json(); - // TODO: use the response - - chatInput.content = ''; - }); - } - - messagesAreScrolledToBottom() { - if (this.elements.messagesContainer === null) { - return messagesList.scrolledToBottom; - } - - messagesList.scrolledToBottom = - ( - this.elements.messagesContainer.scrollHeight - - this.elements.messagesContainer.clientHeight - - this.elements.messagesContainer.scrollTop - ) < 1; - - return messagesList.scrolledToBottom; - } - - updateChannelHint(channel: SwitchChannel) { - // Set storage to the current lock state - isChannelLocked.locked = channel.channelLocked; - - const channelElement = this.processTemplate(channel.channelName); - if (!channelElement.firstChild) - return; - - let channelName = (channelElement.firstChild as HTMLSpanElement).innerText; - if (channel.channelLocked) - channelName = `(Locked) ${channelName}`; - - channelOptions[0] = {text: channelName, value: 0, preview: true } - } - - updateChannels(channelList: ChannelList) { - channelOptions.length = 1; - - for (const [ label, channel ] of Object.entries(channelList.channels)) { - channelOptions.push( { text: label, value: channel, preview: false } ) - } - } - - // 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'); - } - } - - 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) { - scrollMessagesToBottom(); - } - } - - processTemplate(templates: Template[]) { - const frag = document.createDocumentFragment(); - - for( const template of templates ) { - const spanElement = document.createElement('span'); - switch (template.payloadType) { - case WebPayloadType.RawText: - this.processTextTemplate(template, spanElement); - break; - case WebPayloadType.CustomUri: - this.processUrlTemplate(template, spanElement); - break; - case WebPayloadType.CustomEmote: - this.processEmote(template, spanElement); - break; - case WebPayloadType.Icon: - this.processIcon(template, spanElement); - break; - default: - 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'); - let url = template.content; - if (!url.startsWith('https://')) { - url = `https://${url}`; - } - - urlElement.innerText = template.content; - urlElement.href = encodeURI(url); - urlElement.target = '_blank' - - if (template.color !== 0) - { - this.processColor(template, spanElement); - } - - spanElement.appendChild(urlElement); - } - - // 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.iconId}`); - } - - 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(`close: ${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(`new-message: ${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(`bulk-messages: ${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(`channel-switched: ${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(`channel-list: ${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(`tab-switched: ${data}`) - if (data) { - try { - const chatTab: ChatTab = JSON.parse(data); - selectedTab.index = chatTab.index; - } catch (error) { - console.error(error); - } - } - }); - - // list of all tabs - this.connection.select('tab-list').subscribe((data: string) => { - console.log(`tab-list: ${data}`) - if (data) { - try { - const chatTabList: ChatTabList = JSON.parse(data); - knownTabs.length = 0; - for (const tab of chatTabList.tabs) { - knownTabs.push(tab); - } - } catch (error) { - console.error(error); - } - } - }); - - // the unread state of a specific tab has changed - this.connection.select('tab-unread-state').subscribe((data: string) => { - console.log(`tab-unread-state`, data) - if (data) { - try { - const chatTabUnreadState: ChatTabUnreadState = JSON.parse(data); - let tab = knownTabs.find((tab) => tab.index === chatTabUnreadState.index); - if (tab) { - tab.unreadCount = chatTabUnreadState.unreadCount; - } - else { - console.error("Unable to find tab!") - console.error(chatTabUnreadState) - } - } catch (error) { - console.error(error); - } - } - }); - } -} \ No newline at end of file diff --git a/ChatTwo/Http/Frontend/src/lib/gfd.ts b/ChatTwo/Http/Frontend/src/lib/gfd.ts deleted file mode 100644 index 6a9d83f..0000000 --- a/ChatTwo/Http/Frontend/src/lib/gfd.ts +++ /dev/null @@ -1,134 +0,0 @@ -// 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, - }; -} \ No newline at end of file diff --git a/ChatTwo/Http/Frontend/src/lib/index.ts b/ChatTwo/Http/Frontend/src/lib/index.ts deleted file mode 100644 index 856f2b6..0000000 --- a/ChatTwo/Http/Frontend/src/lib/index.ts +++ /dev/null @@ -1 +0,0 @@ -// place files you want to import through the `$lib` alias in this folder. diff --git a/ChatTwo/Http/Frontend/src/lib/payload.ts b/ChatTwo/Http/Frontend/src/lib/payload.ts deleted file mode 100644 index ec3ad97..0000000 --- a/ChatTwo/Http/Frontend/src/lib/payload.ts +++ /dev/null @@ -1,25 +0,0 @@ -export enum WebPayloadType { - // Dalamud - Unknown, - Player, - Item, - Status, - RawText, - UIForeground, - UIGlow, - MapLink, - AutoTranslateText, - EmphasisItalic, - Icon, - Quest, - DalamudLink, - NewLine, - SeHyphen, - PartyFinder, - - // Custom - CustomPartyFinder = 0x50, - CustomAchievement = 0x51, - CustomUri = 0x52, - CustomEmote = 0x53, -} \ No newline at end of file diff --git a/ChatTwo/Http/Frontend/src/lib/shared.svelte.ts b/ChatTwo/Http/Frontend/src/lib/shared.svelte.ts deleted file mode 100644 index 6baa1c6..0000000 --- a/ChatTwo/Http/Frontend/src/lib/shared.svelte.ts +++ /dev/null @@ -1,39 +0,0 @@ -import type { ChatTab } from "./chat.svelte"; - -export const isChannelLocked: { locked: boolean } = $state({ locked: false }); -export const channelOptions: ChannelOption[] = $state([ { text: 'Invalid', value: 0, preview: true } ]); - -export interface ChannelOption { - text: string; - value: number; - preview: boolean; -} - -export const selectedTab: { index: number } = $state({ index: 0 }); -export const knownTabs: ChatTab[] = $state([]); -export const tabPaneState: { visible: boolean } = $state({ visible: true }); -export const tabPaneAnimationState: { noAnimation: boolean } = $state({ noAnimation: true }); -export const persistentTabPabeStateKey = 'chat2_tab_pane_visible'; - -export function openTabPane() { - tabPaneState.visible = true; - window.localStorage.setItem(persistentTabPabeStateKey, 'true'); -} - -export function closeTabPane() { - tabPaneState.visible = false; - window.localStorage.setItem(persistentTabPabeStateKey, 'false'); -} - -export const chatInput: { content: string } = $state({ content: ''} ); -export const messagesList: { - element: HTMLElement | null, - scrolledToBottom: boolean -} = $state({ element: null, scrolledToBottom: true }); - -export function scrollMessagesToBottom() { - if (messagesList.element === null) - return; - - messagesList.element.lastElementChild?.scrollIntoView(); -} diff --git a/ChatTwo/Http/Frontend/src/lib/utils.svelte.ts b/ChatTwo/Http/Frontend/src/lib/utils.svelte.ts deleted file mode 100644 index 9e2c4ca..0000000 --- a/ChatTwo/Http/Frontend/src/lib/utils.svelte.ts +++ /dev/null @@ -1,11 +0,0 @@ -import {writable} from "svelte/store"; - -// https://stackoverflow.com/a/79696571 -export const subscribe =