diff --git a/404.html b/404.html
index 941bcd7fa..f896bd13c 100644
--- a/404.html
+++ b/404.html
@@ -6,9 +6,19 @@
 		<link rel="apple-touch-icon" href="favicon.png">
 		<link rel="icon" type="image/x-icon" href="favicon.png">
 		<link rel="stylesheet" href="shared.css?v=1">
-		<script type="application/javascript" src="shared.js?v=2"></script>
+		<script type="application/javascript" src="shared.js?v=8"></script>
 		<title>custom canvas</title>
 		<script>
+			const REDIRECTS = {
+				"/discord": "https://discord.com/invite/xbRrVSXJdZ",
+				"/twitter": "https://x.com/rplacetk",
+				"/x": "https://x.com/rplacetk",
+				"/reddit": "https://www.reddit.com/r/placetk",
+				"/github": "https://github.com/rplacetk",
+				"/telegram": "https://t.me/rplacelive",
+				"/admin": "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
+			};
+
 			async function getVanityInstance(name) {
 				try {
 					const response = await fetch(`${localStorage.auth || DEFAULT_AUTH}/instances/vanity/${name}`)
@@ -23,7 +33,11 @@
 
 			let vanityRequestFinished = false
 			;(async function() {
-				const urlName = window.location.pathname.replaceAll("/", "")
+				const urlName = window.location.pathname.replaceAll("/", "");
+				if (REDIRECTS[window.location.pathname]) {
+					window.location.replace(REDIRECTS[window.location.pathname]);
+					return;
+				}
 				const info = await getVanityInstance(urlName)
 				if (info !== null) {
 					const protocol = info.usesHttps ? "https://" : "http://"
diff --git a/MANUAL.md b/MANUAL.md
index d428d16c5..193b98428 100644
--- a/MANUAL.md
+++ b/MANUAL.md
@@ -44,4 +44,4 @@ Setting up a custom server that users can connect to via the posts menu is very
 
 10. If you encountered no errors, Bon Voilà, you have set up an rplace custom server acessable from in the game.
 
-11. If you did encounter errors, no worries, visit the rplace discord, acessable through out site `https://rplace.tk` and ask one of the admins (our usernames are usually `@BlobKat`/`@zekiahepic`), and we will try our best to assist you!
+11. If you did encounter errors, no worries, visit the rplace discord, acessable through out site `https://rplace.live` and ask one of the admins (our usernames are usually `@BlobKat`/`@zekiahepic`), and we will try our best to assist you!
diff --git a/README.md b/README.md
index 8d15775e0..5183f235f 100644
--- a/README.md
+++ b/README.md
@@ -11,7 +11,7 @@ This site aims to be as similar to the april fools r/place event, where users we
 *Feel free to contribute!*
 
 # Setting up my own custom canvas!
-To set up your own custom canvas to be played on rplace.tk, we have made a guide at our [Manual](MANUAL.md)!
+To set up your own custom canvas to be played on rplace.live, we have made a guide at our [Manual](MANUAL.md)!
 
 
 # Development
diff --git a/ads.txt b/ads.txt
new file mode 100644
index 000000000..84bd4d0d4
--- /dev/null
+++ b/ads.txt
@@ -0,0 +1 @@
+google.com, pub-2508999262953411, DIRECT, f08c47fec0942fa0
diff --git a/august21-event.js b/august21-event.js
index 3574017cf..2f018f56f 100644
--- a/august21-event.js
+++ b/august21-event.js
@@ -4,12 +4,12 @@ const eventDate = 1724238000000
 //popup.showModal()
 
 setInterval(() => {
-    august21PopupTimer.textContent = ` (${toCountdownString(eventDate)})`
+	august21PopupTimer.textContent = ` (${toCountdownString(eventDate)})`
 }, 1000)
 
 startCountDown(eventDate, false).then((async) => {
-    august21PopupTimer.style.display = "none"
-    // TODO: Reimplement on game release
-    august21PopupLabel.style.display = "none"
-    august21PopupButton.style.display = "flex"
+	august21PopupTimer.style.display = "none"
+	// TODO: Reimplement on game release
+	august21PopupLabel.style.display = "none"
+	august21PopupButton.style.display = "flex"
 })
diff --git a/bun.lockb b/bun.lockb
index 9e678e575..03f989160 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/captcha-canvas.js b/captcha-canvas.js
index 7265723ab..69f89f88d 100644
--- a/captcha-canvas.js
+++ b/captcha-canvas.js
@@ -2,151 +2,151 @@
 let captchaCanvasHandle = null
 
 function updateImgCaptchaCanvas(imageData) {
-    const ctx = setTargetCanvas(captchaCanvas)
-    const patternImg = Texture().fromSrc("./images/pattern.png", _, REPEAT | MIPMAPS | UPSCALE_PIXELATED)
-    const img = Texture()
-    img.from(imageData, _, MIPMAPS)
+	const ctx = setTargetCanvas(captchaCanvas)
+	const patternImg = Texture().fromSrc("./images/pattern.png", _, REPEAT | MIPMAPS | UPSCALE_PIXELATED)
+	const img = Texture()
+	img.from(imageData, _, MIPMAPS)
 
-    const cornerShader = Shader(`
-        void main()
-        {
-            float u_radius = 0.02;
-            vec3 u_colour = u.rgb;
-            float u_edgeFeather = 0.002;
-            vec2 rectSize = vec2(0.9, 0.9);
+	const cornerShader = Shader(`
+		void main()
+		{
+			float u_radius = 0.02;
+			vec3 u_colour = u.rgb;
+			float u_edgeFeather = 0.002;
+			vec2 rectSize = vec2(0.9, 0.9);
 
-            vec2 fragCoordNorm = abs(uv.xy - 0.5);
-            float distance = length(max(fragCoordNorm - rectSize * 0.5 + u_radius, 0.0)) - u_radius;
-            float alpha = 1.0 - smoothstep(u_radius - u_edgeFeather, u_radius + u_edgeFeather, distance) *
-                smoothstep(0.0 - u_edgeFeather, 0.0 + u_edgeFeather, length(fragCoordNorm - 0.5 * rectSize));
+			vec2 fragCoordNorm = abs(uv.xy - 0.5);
+			float distance = length(max(fragCoordNorm - rectSize * 0.5 + u_radius, 0.0)) - u_radius;
+			float alpha = 1.0 - smoothstep(u_radius - u_edgeFeather, u_radius + u_edgeFeather, distance) *
+				smoothstep(0.0 - u_edgeFeather, 0.0 + u_edgeFeather, length(fragCoordNorm - 0.5 * rectSize));
 
-            color = vec4(u_colour * alpha, alpha);
-        }
-    `)
-    const cornerTextureShader = Shader(`
-        void main()
-        {
-            float u_radius = 0.02;
-            vec3 u_colour = texture(tex0, uv.xy).rgb;
-            float u_edgeFeather = 0.002;
-            vec2 rectSize = vec2(0.9, 0.9);
+			color = vec4(u_colour * alpha, alpha);
+		}
+	`)
+	const cornerTextureShader = Shader(`
+		void main()
+		{
+			float u_radius = 0.02;
+			vec3 u_colour = texture(tex0, uv.xy).rgb;
+			float u_edgeFeather = 0.002;
+			vec2 rectSize = vec2(0.9, 0.9);
 
-            vec2 fragCoordNorm = abs(uv.xy - 0.5);
-            float distance = length(max(fragCoordNorm - rectSize * 0.5 + u_radius, 0.0)) - u_radius;
-            float alpha = 1.0 - smoothstep(u_radius - u_edgeFeather, u_radius + u_edgeFeather, distance) *
-                smoothstep(0.0 - u_edgeFeather, 0.0 + u_edgeFeather, length(fragCoordNorm - 0.5 * rectSize));
+			vec2 fragCoordNorm = abs(uv.xy - 0.5);
+			float distance = length(max(fragCoordNorm - rectSize * 0.5 + u_radius, 0.0)) - u_radius;
+			float alpha = 1.0 - smoothstep(u_radius - u_edgeFeather, u_radius + u_edgeFeather, distance) *
+				smoothstep(0.0 - u_edgeFeather, 0.0 + u_edgeFeather, length(fragCoordNorm - 0.5 * rectSize));
 
-            color = vec4(u_colour * alpha, alpha);
-        }
-    `)
-    function cubicBezier(t, initial, p1, p2, final) {
-        return ((1 - t) * (1 - t) * (1 - t) * initial
-                + 3 * (1 - t) * (1 - t) * t * p1
-                + 3 * (1 - t) * t * t * p2
-                + t * t * t * final)
-    }
-    function ease(start, end, weight) {
-        return start + (end - start) * cubicBezier(weight, 0, 1.1, 0.2, 1);
-    }
-    function drawCaptcha() {
-        if (captchaCanvasHandle === null) {
-            return
-        }
-        captchaCanvas.width = captchaPopup.offsetWidth
-        captchaCanvas.height = captchaPopup.offsetHeight
-        const now = performance.now()
-        const hRatio = captchaCanvas.width / captchaCanvas.height
+			color = vec4(u_colour * alpha, alpha);
+		}
+	`)
+	function cubicBezier(t, initial, p1, p2, final) {
+		return ((1 - t) * (1 - t) * (1 - t) * initial
+				+ 3 * (1 - t) * (1 - t) * t * p1
+				+ 3 * (1 - t) * t * t * p2
+				+ t * t * t * final)
+	}
+	function ease(start, end, weight) {
+		return start + (end - start) * cubicBezier(weight, 0, 1.1, 0.2, 1);
+	}
+	function drawCaptcha() {
+		if (captchaCanvasHandle === null) {
+			return
+		}
+		captchaCanvas.width = captchaPopup.offsetWidth
+		captchaCanvas.height = captchaPopup.offsetHeight
+		const now = performance.now()
+		const hRatio = captchaCanvas.width / captchaCanvas.height
 
-        const patternTexSize = 64
-        const scaleX = patternTexSize / captchaCanvas.width
-        const scaleY = patternTexSize / captchaCanvas.height
-        const patternRepeatsX = 12
-        const patternRepeatsY = 16
+		const patternTexSize = 64
+		const scaleX = patternTexSize / captchaCanvas.width
+		const scaleY = patternTexSize / captchaCanvas.height
+		const patternRepeatsX = 12
+		const patternRepeatsY = 16
 
-        const weight = (now / 2200) % 1
-        const shift = ease(0, patternTexSize, weight)
-        const patternMesh = Mesh()
-        patternMesh.translate(shift / captchaCanvas.width - scaleX, -shift / captchaCanvas.height)
-        patternMesh.addRect(0, 0, scaleX * patternRepeatsX, scaleY * patternRepeatsY,
-            uv(0, 0, patternRepeatsX, patternRepeatsY), _, 1, 1, 1, 0.96)
-        ctx.draw(patternMesh, patternImg)
+		const weight = (now / 2200) % 1
+		const shift = ease(0, patternTexSize, weight)
+		const patternMesh = Mesh()
+		patternMesh.translate(shift / captchaCanvas.width - scaleX, -shift / captchaCanvas.height)
+		patternMesh.addRect(0, 0, scaleX * patternRepeatsX, scaleY * patternRepeatsY,
+			uv(0, 0, patternRepeatsX, patternRepeatsY), _, 1, 1, 1, 0.96)
+		ctx.draw(patternMesh, patternImg)
 
-        const imgSize = 210
-        const imgWidth = imgSize / captchaCanvas.width
-        const imgHeight = imgWidth * hRatio
-        const imageX = 0.5 - imgWidth * 0.5
-        const imgBotttom = captchaImagePositon.offsetTop + captchaImagePositon.offsetHeight
-        const imageY = (captchaCanvas.height - imgBotttom) / captchaCanvas.height
+		const imgSize = 210
+		const imgWidth = imgSize / captchaCanvas.width
+		const imgHeight = imgWidth * hRatio
+		const imageX = 0.5 - imgWidth * 0.5
+		const imgBotttom = captchaImagePositon.offsetTop + captchaImagePositon.offsetHeight
+		const imageY = (captchaCanvas.height - imgBotttom) / captchaCanvas.height
 
-        let prevShader = ctx.useShader(cornerShader)
-        ctx.setU(0.6, 0.6, 0.6, 1.0)
-        const borderSize = 1
-        const borderWidth = borderSize / captchaCanvas.width
-        const bx = imageX - borderWidth
-        const by = imageY - (borderWidth * hRatio)
-        const bw = imgWidth + (borderWidth * 2)
-        const bh = imgHeight + (borderWidth * hRatio * 2)
-        const borderMesh = Mesh.singleRect(bx, by, bw, bh)
-        ctx.draw(borderMesh)
-        ctx.useShader(prevShader)
+		let prevShader = ctx.useShader(cornerShader)
+		ctx.setU(0.6, 0.6, 0.6, 1.0)
+		const borderSize = 1
+		const borderWidth = borderSize / captchaCanvas.width
+		const bx = imageX - borderWidth
+		const by = imageY - (borderWidth * hRatio)
+		const bw = imgWidth + (borderWidth * 2)
+		const bh = imgHeight + (borderWidth * hRatio * 2)
+		const borderMesh = Mesh.singleRect(bx, by, bw, bh)
+		ctx.draw(borderMesh)
+		ctx.useShader(prevShader)
 
-        prevShader = ctx.useShader(cornerTextureShader)
-        const imgMesh = Mesh.singleRect(imageX, imageY, imgWidth, imgHeight)
-        ctx.draw(imgMesh, img)
-        ctx.useShader(prevShader)
+		prevShader = ctx.useShader(cornerTextureShader)
+		const imgMesh = Mesh.singleRect(imageX, imageY, imgWidth, imgHeight)
+		ctx.draw(imgMesh, img)
+		ctx.useShader(prevShader)
 
-        captchaCanvasHandle = requestAnimationFrame(drawCaptcha)
-    }
-    captchaCanvasHandle = requestAnimationFrame(drawCaptcha)
+		captchaCanvasHandle = requestAnimationFrame(drawCaptcha)
+	}
+	captchaCanvasHandle = requestAnimationFrame(drawCaptcha)
 }
 
 function updateImgCaptchaCanvasFallback(imageData) {
-    const ctx = captchaCanvas.getContext("2d")
-    captchaCanvas.width = captchaPopup.offsetWidth
-    captchaCanvas.height = captchaPopup.offsetHeight
-    const captchaImg = new Image()
-    const url = URL.createObjectURL(imageData)
-    captchaImg.src = url
-    const captchaImgRadius = 8
+	const ctx = captchaCanvas.getContext("2d")
+	captchaCanvas.width = captchaPopup.offsetWidth
+	captchaCanvas.height = captchaPopup.offsetHeight
+	const captchaImg = new Image()
+	const url = URL.createObjectURL(imageData)
+	captchaImg.src = url
+	const captchaImgRadius = 8
 
-    captchaImg.onload = function() {
-        function drawCaptcha() {
-            if (captchaCanvasHandle === null) {
-                return
-            }
-            captchaCanvas.width = captchaPopup.offsetWidth
-            captchaCanvas.height = captchaPopup.offsetHeight
-            const canvasImageSize = 196
-            const x = captchaImagePositon.offsetLeft
-            const y = captchaImagePositon.offsetTop
-            ctx.clearRect(0, 0, captchaCanvas.width, captchaCanvas.height)
-            ctx.save()
-            ctx.beginPath()
-            ctx.moveTo(x + captchaImgRadius, y)
-            ctx.arcTo(x + canvasImageSize, y, x + canvasImageSize, y + canvasImageSize, captchaImgRadius)
-            ctx.arcTo(x + canvasImageSize, y + canvasImageSize, x, y + canvasImageSize, captchaImgRadius)
-            ctx.arcTo(x, y + canvasImageSize, x, y, captchaImgRadius)
-            ctx.arcTo(x, y, x + canvasImageSize, y, captchaImgRadius)
-            ctx.closePath()
-            ctx.clip()
-            ctx.drawImage(captchaImg, x, y, canvasImageSize, canvasImageSize)
-            ctx.restore()
-            const captchaImageBottom = captchaImagePositon.offsetTop + canvasImageSize
-            const captchaImageCentreX = captchaCanvas.width / 2
-            ctx.fillStyle = "#ff0000a3"
-            ctx.font = "16px reddit"
-            ctx.textAlign = "center"
-            ctx.fillText("Warning: Your browser doesn't support WebGL 2,",
-                captchaImageCentreX, captchaImageBottom + 16)
-            ctx.fillText("this can cause some site features to break!",
-                captchaImageCentreX, captchaImageBottom + 52)
-            captchaCanvasHandle = requestAnimationFrame(drawCaptcha)
-        }
-        captchaCanvasHandle = requestAnimationFrame(drawCaptcha)
-    }
+	captchaImg.onload = function() {
+		function drawCaptcha() {
+			if (captchaCanvasHandle === null) {
+				return
+			}
+			captchaCanvas.width = captchaPopup.offsetWidth
+			captchaCanvas.height = captchaPopup.offsetHeight
+			const canvasImageSize = 196
+			const x = captchaImagePositon.offsetLeft
+			const y = captchaImagePositon.offsetTop
+			ctx.clearRect(0, 0, captchaCanvas.width, captchaCanvas.height)
+			ctx.save()
+			ctx.beginPath()
+			ctx.moveTo(x + captchaImgRadius, y)
+			ctx.arcTo(x + canvasImageSize, y, x + canvasImageSize, y + canvasImageSize, captchaImgRadius)
+			ctx.arcTo(x + canvasImageSize, y + canvasImageSize, x, y + canvasImageSize, captchaImgRadius)
+			ctx.arcTo(x, y + canvasImageSize, x, y, captchaImgRadius)
+			ctx.arcTo(x, y, x + canvasImageSize, y, captchaImgRadius)
+			ctx.closePath()
+			ctx.clip()
+			ctx.drawImage(captchaImg, x, y, canvasImageSize, canvasImageSize)
+			ctx.restore()
+			const captchaImageBottom = captchaImagePositon.offsetTop + canvasImageSize
+			const captchaImageCentreX = captchaCanvas.width / 2
+			ctx.fillStyle = "#ff0000a3"
+			ctx.font = "16px reddit"
+			ctx.textAlign = "center"
+			ctx.fillText("Warning: Your browser doesn't support WebGL 2,",
+				captchaImageCentreX, captchaImageBottom + 16)
+			ctx.fillText("this can cause some site features to break!",
+				captchaImageCentreX, captchaImageBottom + 52)
+			captchaCanvasHandle = requestAnimationFrame(drawCaptcha)
+		}
+		captchaCanvasHandle = requestAnimationFrame(drawCaptcha)
+	}
 }
 
 function clearCaptchaCanvas() {
-    window.cancelAnimationFrame(captchaCanvasHandle)
-    captchaCanvasHandle = null
+	window.cancelAnimationFrame(captchaCanvasHandle)
+	captchaCanvasHandle = null
 }
diff --git a/censors.txt b/censors.txt
index c3e9d4c3d..24117675a 100644
--- a/censors.txt
+++ b/censors.txt
@@ -4,7 +4,7 @@
 # game imaginable, but should help to catch the majority of cases where a user is not intentionally
 # attempting to circumvent the system.
 
-# General symbols / nuisances / controversial topics
+# General symbols / nuisances / websites / controversial topics
 卐
 卍
 𓂸
@@ -22,7 +22,6 @@ kiwifarms
 soyjak\.?party
 4chan
 
-
 # English
 [a4]n[a4]l
 [a4]rse
@@ -103,4 +102,4 @@ vittu
 
 # Chinese
 滚
-傻逼
\ No newline at end of file
+傻逼
diff --git a/daemonise.sh b/daemonise.sh
index 93cf1f6fa..4d96c4f63 100644
--- a/daemonise.sh
+++ b/daemonise.sh
@@ -1,13 +1,12 @@
 #!/bin/bash
-# This script will alow rplacetk to always run in the background, and auto load on reboot using a systemD unit (only works on linux)
-
+# This script will alow the server software to always run in the background, and auto load on reboot using a systemd unit (only works on linux)
 if [ -z "$1" ]
 then
-    echo -e "\x1b[31mPlease input the path to the rplace server directory as an arguument e.g home/pi/rslashplace2.github.io"
+    echo -e "\x1b[31mPlease input the path to the rplace server directory as an argument e.g home/pi/rslashplace2.github.io"
     exit 0
 fi
 
-node_dir=$(which node)
+bun_dir=$(which bun)
 dotnet_dir=$(which dotnet)
 
 echo -e "
@@ -23,7 +22,7 @@ TTYPath=/dev/tty20
 TTYReset=yes
 WorkingDirectory=$1
 ExecStart=
-ExecStart=$node_dir server.js
+ExecStart=$bun_dir server.js
 Restart=always
 RestartSec=2
 
@@ -32,30 +31,7 @@ WantedBy=multi-user.target
 " | sudo tee -a /etc/systemd/system/place.service
 sudo systemctl daemon-reload
 
-echo -e "
-[Unit]
-Description=place-http for the static http server, see place for main websocket server.
-After=network.target
-
-[Service]
-Type=simple
-StandardInput=tty-force
-TTYVHangup=yes
-TTYPath=/dev/tty21
-TTYReset=yes
-Environment=DOTNET_CLI_HOME=/temp
-WorkingDirectory=$1/PlaceHttpsServer/
-ExecStart=
-ExecStart=$dotnet_dir run
-Restart=always
-RestartSec=2
-
-[Install]
-WantedBy=multi-user.target
-" | sudo tee -a /etc/systemd/system/http-place.service
-sudo systemctl daemon-reload
-
-sudo systemctl enable place.service http-place.service
-sudo systemctl start place.service http-place.service
+sudo systemctl enable place.service
+sudo systemctl start place.service
 
 echo "Task completed."
diff --git a/db-worker.ts b/db-worker.ts
index fb8505796..8b52785b3 100644
--- a/db-worker.ts
+++ b/db-worker.ts
@@ -2,9 +2,9 @@
 /* eslint-disable jsdoc/require-returns */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable no-inner-declarations */
-import { parentPort } from 'worker_threads'
-import { Database } from 'bun:sqlite'
-import { Queue } from '@datastructures-js/queue'
+import { parentPort } from "worker_threads"
+import { Database } from "bun:sqlite"
+import { Queue } from "@datastructures-js/queue"
 
 const defaultDbOptions = { strict: true }
 let db = new Database("server.db", defaultDbOptions)
@@ -117,7 +117,8 @@ export type DbInternals = {
     updateUserVip: (data: { intId: number, codeHash: string}) => void,
     insertLiveChatReport: (data: { reporterId: number, messageId: number, reason: string }) => void,
     getLiveChatMessage: (intId: number) => LiveChatMessage|null,
-    exec: (data: { stmt: string, params: any }) => any[]|null
+    exec: (data: { stmt: string, params: any }) => any[]|null,
+    reInitialise: () => void
 }
 
 const createLiveChatMessages = `
@@ -249,6 +250,16 @@ const createLinkages = `
 `
 db.exec(createLinkages)
 
+export type LiveChatHistoryMessage = LiveChatMessage & {
+    chatName: string,
+    reactions: Map<string, number[]>
+}
+export type LiveChatHistoryParams = {
+    channel: string|null,
+    count: number|null,
+    messageId: number|null,
+}
+
 const insertLiveChat = db.query<void, LiveChatMessage>(`
     INSERT INTO LiveChatMessages (messageId, message, sendDate, channel, senderIntId, repliesTo, deletionId)
     VALUES ($messageId, $message, $sendDate, $channel, $senderIntId, $repliesTo, $deletionId)`)
@@ -259,10 +270,13 @@ const updatePixelPlaces = db.query<void, [number, number]>(`
     UPDATE Users SET pixelsPlaced = pixelsPlaced + ?1 WHERE intId = ?2`)
 
 interface PublicQueue<T> extends Queue<T> {
-    _elements: T[]
+    _elements: T[],
+    isEmpty(): boolean,
+    dequeue(): T|undefined,
+    push(item:T): any
 }
 const pixelPlaces = new Map<number, number>() // intId, count
-// @ts-expect-error Some chicanery to bypass them hiding _elements from the definition
+// Some chicanery to bypass them hiding _elements from the definition
 const liveChatInserts:PublicQueue<LiveChatMessage> = new Queue<LiveChatMessage>()
 const placeChatInserts = new Queue<PlaceChatMessage>()
 /**
@@ -281,11 +295,15 @@ function performBulkInsertions() {
     db.transaction(() => {
         while (!liveChatInserts.isEmpty()) {
             const data = liveChatInserts.dequeue()
-            insertLiveChat.run(data)
+            if (data) {
+                insertLiveChat.run(data)
+            }
         }
         while (!placeChatInserts.isEmpty()) {
             const data = placeChatInserts.dequeue()
-            insertPlaceChat.run(data)
+            if (data) {
+                insertPlaceChat.run(data)
+            }
         }
     })()
 }
@@ -318,64 +336,72 @@ const internal: DbInternals = {
         }
 
         // Add known IP if not already there
-        const getIpsQuery = db.query<KnownIp, [number, string]>("SELECT * FROM KnownIps WHERE userIntId = ?1 AND ip = ?2 AND userAgent = ?3")
+        const getIpsQuery = db.query<KnownIp, [number, string, string]>("SELECT * FROM KnownIps WHERE userIntId = ?1 AND ip = ?2 AND userAgent = ?3")
         const ipExists = getIpsQuery.get(user.intId, ip, userAgent)
         if (ipExists) { // Update last used
-            const updateIp = db.query<void, [number, number, string]>("UPDATE KnownIps SET lastUsed = ?1 WHERE userIntId = ?2 AND ip = ?3 AND userAgent = ?4")
+            const updateIp = db.query<void, [number, number, string, string]>("UPDATE KnownIps SET lastUsed = ?1 WHERE userIntId = ?2 AND ip = ?3 AND userAgent = ?4")
             updateIp.run(epochMs, user.intId, ip, userAgent)
         }
         else { // Create new
-            const createIp = db.query<void, [number, string, number]>("INSERT INTO KnownIps (userIntId, ip, userAgent, lastUsed) VALUES (?1, ?2, ?3, ?4)")
+            const createIp = db.query<void, [number, string, string, number]>("INSERT INTO KnownIps (userIntId, ip, userAgent, lastUsed) VALUES (?1, ?2, ?3, ?4)")
             createIp.run(user.intId, ip, userAgent, epochMs)
         }
         
         return user.intId
     },
-    getLiveChatHistory: function({ channel, includeDeleted, before, messageId, count}) {
+    getLiveChatHistory: function({ channel, includeDeleted, before, messageId, count }) {
         const liveChatMessageId = internal.getMaxLiveChatId()
-        let params:any[] = []
+        const params:LiveChatHistoryParams = { channel: null, count: null, messageId: null }
         let query = `
             SELECT LiveChatMessages.*, Users.chatName AS chatName
             FROM LiveChatMessages
-            INNER JOIN Users ON LiveChatMessages.senderIntId = Users.intId\n`
-        let preceeding = false
-
+            INNER JOIN Users ON LiveChatMessages.senderIntId = Users.intId
+        `
+        const conditions = []
+    
         if (channel) {
-            query += "WHERE channel = ?1\n"
-            params.push(channel)
-            preceeding = true
+            conditions.push("channel = $channel")
+            params.channel = channel
         }
         if (!includeDeleted) {
-            query += "AND deletionId IS NULL\n"
-            preceeding = true
+            conditions.push("deletionId IS NULL")
         }
-
-        // If messageId is 0 and we are getting before, it will return [count] most recent messages
-        // Will give messageIDs ascending if AFTER and messageIDs descending if before to make it easier on client
+    
         if (before) {
             messageId = Math.min(liveChatMessageId, messageId)
             count = Math.min(liveChatMessageId, count)
-            if (messageId == 0) {
-                query += "ORDER BY messageId DESC LIMIT ?2"
-                params.push(count)
-            }
-            else {
-                query += preceeding ? "AND " : ""
-                query += "messageId < ?2 ORDER BY messageId DESC LIMIT ?3"
-                params.push(messageId)
-                params.push(count)
+            if (messageId === 0) {
+                query += conditions.length ? "WHERE " + conditions.join(" AND ") + " " : ""
+                query += "ORDER BY messageId DESC LIMIT $count"
+                params.count = count
+            } else {
+                conditions.push("messageId < $messageId")
+                query += "WHERE " + conditions.join(" AND ") + " ORDER BY messageId DESC LIMIT $count"
+                params.messageId = messageId
+                params.count = count
             }
-        }
-        else { // Ater
+        } else {
             count = Math.min(liveChatMessageId - messageId, count)
-            query += preceeding ? "AND " : ""
-            query += "messageId > ?2 ORDER BY messageId ASC LIMIT ?3"
-            params.push(messageId)
-            params.push(count)
+            conditions.push("messageId > $messageId")
+            query += "WHERE " + conditions.join(" AND ") + " ORDER BY messageId ASC LIMIT $count"
+            params.messageId = messageId
+            params.count = count
         }
-
-        const stmt = db.query(query)
-        return stmt.all(params)
+    
+        const history = []
+        const messagesStmt = db.query<LiveChatHistoryMessage, LiveChatHistoryParams>(query)
+        for (const message of messagesStmt.iterate(params)) {
+            message.reactions = new Map<string, number[]>()
+            const reactionsQuery = db.query<LiveChatReaction, [number]>("SELECT * FROM LiveChatReactions WHERE messageId = ?1")
+            for (const reaction of reactionsQuery.iterate(message.messageId)) {
+                if (!message.reactions.has(reaction.reaction)) {
+                    message.reactions.set(reaction.reaction, [])
+                }
+                message.reactions.get(reaction.reaction)?.push(reaction.senderIntId)
+            }
+            history.push(message)
+        }
+        return history
     },
     updatePixelPlace: function(intId) {
         pixelPlaces.set(intId, (pixelPlaces.get(intId)||0) + 1)
@@ -448,7 +474,9 @@ const internal: DbInternals = {
         insertReportQuery.run(reporterId, messageId, reason, Date.now())
     },
     addLiveChatReaction: function({ messageId, reaction, senderIntId }) {
-        // TODO: Implement this
+        // Message does not directly reference reaction so it is OK if message has not been inserted into DB yet (due to message bulk transactions)
+        const insertReactionQuery = db.query("INSERT INTO LiveChatReactions (messageId, reaction, senderIntId) VALUES (?1, ?2, ?3)")
+        insertReactionQuery.run(messageId, reaction, senderIntId)
     },
     getLiveChatMessage: function(intId) {
         // Message may not be in the DB yet if recently sent so getting a message requires some logic
diff --git a/disclaimer.html b/disclaimer.html
index b6642898c..2c171c93c 100644
--- a/disclaimer.html
+++ b/disclaimer.html
@@ -1,66 +1,21 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <title>disclaimer</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <style>
-        body {
-            background-color: #dae0e6;
-            margin: 0;
-            font-family: 'IBM Plex Sans', sans-serif;
-            box-sizing: border-box;
-        }
-        header {
-            background-color: white;
-            margin: 0;
-            padding: 8px;
-            border-bottom: 1px solid #EDEFF1;
-            display: flex;
-            column-gap: 8px;
-            height: 64px;
-        }
-        header h1 {
-            margin: 0;
-            align-self: center;
-        }
-        .reddit-cards-container {
-            display: flex;flex-direction: column;align-items: center;
-            margin: 8px;
-        }
-        .reddit-cards-container > div {
-            background-color: white;
-            border-radius: 4px;
-            border: 1px solid #EDEFF1;
-            display: flex;column-gap: 16px;
-            width: min(100%, 1000px);
-            margin-bottom: 8px;
-        }
-        .reddit-cards-container > div:hover {
-            border: 1px solid #afb2b4;
-        }
-        .reddit-cards-container > div > div:nth-child(1) {
-            background-color: #F7F9FA;
-            width: 32px;
-            padding: 8px;
-        }
-        .reddit-cards-container > div > div:nth-child(2) {
-            flex-direction: column;
-            display: flex;
-            padding: 4px;
-        }
-    </style>
+	<meta charset="UTF-8">
+	<title>place: disclaimer</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	<link rel="stylesheet" href="misc-page.css">
 </head>
 <body>
-    <header>
-        <img src="./images/rplace.png" alt="Rplace logo">
-        <h1>rplace.live disclaimer</h1>
-    </header>
-    <div class="reddit-cards-container">
-        <div>
-            <div></div>
-            <div>
-                <h2 style="margin: 0;">Heads up!</h2>
+	<header>
+		<img src="./images/rplace.png" alt="Rplace logo">
+		<h1>rplace.live disclaimer</h1>
+	</header>
+	<section class="reddit-cards-container">
+		<article>
+			<div></div>
+			<div>
+				<h2 style="margin: 0;">Heads up!</h2>
 <pre>
 +-------+-------------------+
 |       |                   |
@@ -83,26 +38,26 @@ <h2 style="margin: 0;">Heads up!</h2>
 |       |       |           |       |
 +-------+       +-----------+-------+
 </pre>
-                This website, rplace.live, is not officially endorsed or produced by Reddit, the Reddit "r/place" event,
-                or any entities associated with Reddit. It is a parody-inspired game created solely for entertainment purposes.
-            </div>
-        </div>
-        <div>
-            <div></div>
-            <div>
-                Please note that any references, logos, or content related to Reddit or the "r/place" event used on this website are purely
-                for parody and homage purposes. They are not intended to claim any official affiliation or endorsement by Reddit.
-            </div>
-        </div>
-        <div>
-            <div></div>
-            <div>
-                We hope you enjoy the experience offered by rplace.live, which pays tribute to the creativity and collaborative spirit
-                showcased during the original Reddit "r/place" event. However, please understand that this website is an independent project
-                and should not be misconstrued as an official extension of Reddit or its properties.
-                <p>Thanks for playing! (Zekiah-A, BlobKat & All open source contributors - rplace.live ❤️)</p>
-            </div>
-        </div>
-    </div>
+				This website, rplace.live, is not officially endorsed or produced by Reddit, the Reddit "r/place" event,
+				or any entities associated with Reddit. It is a parody-inspired game created solely for entertainment purposes.
+			</div>
+		</article>
+		<article>
+			<div></div>
+			<div>
+				Please note that any references, logos, or content related to Reddit or the "r/place" event used on this website are purely
+				for parody and homage purposes. They are not intended to claim any official affiliation or endorsement by Reddit.
+			</div>
+		</article>
+		<article>
+			<div></div>
+			<div>
+				We hope you enjoy the experience offered by rplace.live, which pays tribute to the creativity and collaborative spirit
+				showcased during the original Reddit "r/place" event. However, please understand that this website is an independent project
+				and should not be misconstrued as an official extension of Reddit or its properties.
+				<p>Thanks for playing! (Zekiah-A, BlobKat & All open source contributors - rplace.live ❤️)</p>
+			</div>
+		</article>
+	</section>
 </body>
 </html>
diff --git a/elements.js b/elements.js
deleted file mode 100644
index 557c4c965..000000000
--- a/elements.js
+++ /dev/null
@@ -1,923 +0,0 @@
-/* eslint-disable jsdoc/require-jsdoc */
-/* eslint-disable @typescript-eslint/no-this-alias */
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-// @ts-nocheck
-function html(strings, ...values) {
-    return strings.reduce((result, string, i) => {
-        const value = values[i] !== undefined ? values[i] : ""
-        return result + string + value
-    }, "")
-}
-
-class RplaceSpoiler extends HTMLElement {
-    constructor() {
-        super()
-        this.addEventListener("click", () => {
-            this.show()
-        })
-    }
-    show() {
-        this.removeAttribute("hidden")
-    }
-    static get observedAttributes() {
-        return ["hidden"]
-    }
-}
-customElements.define("r-spoiler", RplaceSpoiler)
-
-class RplacePostCopy extends HTMLElement {
-    constructor() {
-        super()
-    }
-    static get observedAttributes() {
-        return ["src"]
-    }
-    connectedCallback() {
-        const clipbardSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
-        clipbardSvg.setAttribute("viewBox", "0 0 48 48")
-        clipbardSvg.setAttribute("width", "30")
-        clipbardSvg.setAttribute("height", "30")
-        clipbardSvg.setAttribute("opacity", "0.6")
-        clipbardSvg.innerHTML = "<path d=\"M9 43.95q-1.2 0-2.1-.9-.9-.9-.9-2.1V10.8h3v30.15h23.7v3Zm6-6q-1.2 0-2.1-.9-.9-.9-.9-2.1v-28q0-1.2.9-2.1.9-.9 2.1-.9h22q1.2 0 2.1.9.9.9.9 2.1v28q0 1.2-.9 2.1-.9.9-2.1.9Zm0-3h22v-28H15v28Zm0 0v-28 28Z\"/>"
-        this.appendChild(clipbardSvg)
-        const copyStatusSpan = document.createElement("span")
-        copyStatusSpan.className = "copy-status"
-        // TODO: Use CSS
-        copyStatusSpan.style.opacity = 0
-        copyStatusSpan.style.position = "absolute"
-        copyStatusSpan.textContent = translate("copiedToClipboard")
-        this.appendChild(copyStatusSpan)
-
-        this.addEventListener("click", (event) => {
-            const source = this.getAttribute("src")
-            event.stopPropagation()
-            navigator.clipboard.writeText(source)
-            copyStatusSpan.animate([
-                { opacity: 1 },
-                { scale: 1.1 }
-            ], { duration: 1000, iterations: 1, })
-        })
-    }
-}
-customElements.define("r-clipboard-copy", RplacePostCopy)
-
-class RplaceVotes extends HTMLElement {
-    static votedPath = "<path clip-rule=\"evenodd\" d=\"M8.44857 0.401443C8.3347 0.273284 8.17146 0.199951 8.00002 0.199951C7.82859 0.199951 7.66534 0.273284 7.55148 0.401443L0.351479 8.50544C0.194568 8.68206 0.155902 8.93431 0.252709 9.14981C0.349516 9.36532 0.563774 9.50395 0.800023 9.50395H4.20002V15C4.20002 15.3313 4.46865 15.6 4.80002 15.6H11.2C11.5314 15.6 11.8 15.3313 11.8 15V9.50395H15.2C15.4363 9.50395 15.6505 9.36532 15.7473 9.14981C15.8441 8.93431 15.8055 8.68206 15.6486 8.50544L8.44857 0.401443Z\" fill-rule=\"evenodd\"></path>"
-    static unvotedPath = "<path clip-rule=\"evenodd\" d=\"m8 .200001c.17143 0 .33468.073332.44854.201491l7.19996 8.103998c.157.17662.1956.42887.0988.64437-.0968.21551-.3111.35414-.5473.35414h-3.4v5.496c0 .3314-.2686.6-.6.6h-6.4c-.33137 0-.6-.2686-.6-.6v-5.496h-3.4c-.236249 0-.450507-.13863-.547314-.35414-.096807-.2155-.058141-.46775.09877-.64437l7.200004-8.103998c.11386-.128159.27711-.201491.44854-.201491zm-5.86433 8.103999h2.66433c.33137 0 .6.26863.6.6v5.496h5.2v-5.496c0-.33137.2686-.6.6-.6h2.6643l-5.8643-6.60063\" fill-rule=\"evenodd\"></path>"
-    #upSvg
-    #voteCountEl
-    #downSvg
-    #voted = "none"
-    #upvotes = null
-    #downvotes = null
-
-    constructor() {
-        super()
-        this.#upSvg = this.#createArrowSvg()
-        this.#voteCountEl = document.createElement("div")
-        this.#voteCountEl.textContent = this.votes
-        this.#downSvg = this.#createArrowSvg()
-        this.#downSvg.style.transform = "rotate(180deg)"
-
-        // TODO: Implement
-        this.#upSvg.onclick = function() {
-            alert("You must be logged in to upvote a post!")
-        }
-        this.#downSvg.onclick = function() {
-            alert("You must be logged in to downvote a post!")
-        }
-    }
-
-    get votes() {
-        return (this.#upvotes !== null && this.#downvotes !== null) ? this.#upvotes - this.#downvotes : "..."
-    }
-    set voted(value) {
-        this.#voted = value
-        this.#refresh()
-    }
-    get voted() {
-        return this.#voted
-    }
-    set upvotes(value) {
-        this.#upvotes = value
-        this.#refresh()
-    }
-    get upvotes() {
-        return this.#upvotes
-    }
-    set downvotes(value) {
-        this.#downvotes = value
-        this.#refresh()
-    }
-    get downvotes() {
-        return this.#downvotes
-    }
-    static get observedAttributes() {
-        return [ "upvotes", "downvotes", "voted" ]
-    }
-
-    #createArrowSvg() {
-        const arrowSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
-        arrowSvg.innerHTML = RplaceVotes.unvotedPath
-        arrowSvg.setAttribute("height", "24")
-        arrowSvg.setAttribute("width", "24")
-        arrowSvg.setAttribute("viewBox", "0 0 16 16")
-        return arrowSvg
-    }
-
-    #refresh() {
-        const upSelected = this.#voted === "up"
-        const downSelected = this.#voted === "down"
-
-        this.#upSvg.innerHTML = upSelected ? RplaceVotes.votedPath : RplaceVotes.unvotedPath
-        this.#downSvg.innerHTML = downSelected ? RplaceVotes.votedPath : RplaceVotes.unvotedPath
-
-        this.#upSvg.classList.toggle("voted", upSelected)
-        this.#downSvg.classList.toggle("voted", downSelected)
-
-        this.#voteCountEl.textContent = this.votes
-    }
-
-    connectedCallback() {
-        this.appendChild(this.#upSvg)
-        this.appendChild(this.#voteCountEl)
-        this.appendChild(this.#downSvg)
-        this.#refresh()
-    }
-}
-customElements.define("r-votes", RplaceVotes)
-
-const fuzzyNumberFormat = new Intl.NumberFormat(navigator.language, { notation: "compact" })
-// TODO: Implement this in complex components like RplacePost to this to avoid getter/setter hell
-function reactify(object) {
-    const listeners = new Map()
-
-    function notifyListeners(property, newValue, oldValue) {
-        if (listeners.has(property)) {
-            listeners.get(property).forEach(listener => listener(newValue, oldValue))
-        }
-    }
-
-    const proxy = new Proxy(object, {
-        set(target, property, value) {
-            const oldValue = target[property]
-            target[property] = value
-            notifyListeners(property, value, oldValue)
-            return true
-        }
-    })
-    proxy.subscribe = function(property, listener) {
-        if (!listeners.has(property)) {
-            listeners.set(property, new Set())
-        }
-        listeners.get(property).add(listener)
-    }
-    proxy.unsubscribe = function(property, listener) {
-        if (listeners.has(property)) {
-            listeners.get(property).delete(listener)
-        }
-    }
-    return proxy
-}
-
-// Utility functions for Auth DB IndexedDB caches
-const currentAuthUrl = new URL(localStorage.auth || DEFAULT_AUTH) // i.e server.rplace.live/auth
-const currentAuthDb = `${currentAuthUrl.host}${currentAuthUrl.pathname}`
-
-function openCurrentAuthDB() {
-    return new Promise((resolve, reject) => {
-        const request = indexedDB.open(currentAuthDb, 2)
-        request.onupgradeneeded = event => {
-            const db = event.target.result
-            db.createObjectStore("profiles", { keyPath: "id" })
-            db.createObjectStore("users", { keyPath: "id" })
-        }
-        request.onsuccess = event => resolve(event.target.result)
-        request.onerror = event => reject(event.target.error)
-    })
-}
-
-function getCachedData(storeName, key) {
-    return new Promise(async (resolve, reject) => {
-        const db = await openCurrentAuthDB()
-        const transaction = db.transaction(storeName, "readonly")
-        const store = transaction.objectStore(storeName)
-        const request = store.get(key)
-        request.onsuccess = event => resolve(event.target.result)
-        request.onerror = event => reject(event.target.error)
-    })
-}
-
-function setCachedData(storeName, data) {
-    return new Promise(async (resolve, reject) => {
-        const db = await openCurrentAuthDB()
-        const transaction = db.transaction(storeName, "readwrite")
-        const store = transaction.objectStore(storeName)
-        const request = store.put(data)
-        request.onsuccess = () => resolve()
-        request.onerror = event => reject(event.target.error)
-    })
-}
-
-// Responsible for setting and retrieving form DB, will attempt to grab the object from the DB, if it can't
-// it will grab the object from the URL and then cache it in the database
-async function cachedFetch(keystore, id, url, expiry) {
-    const now = Date.now()
-    let cachedObject = await getCachedData(keystore, id)
-    if (!cachedObject || (now - cachedObject.timestamp) > expiry) {
-        const res = await fetch(url)
-        if (!res.ok) {
-            console.error(`Could not fetch object ${id} belonging to ${keystore}: ${res.status} ${res.statusText}:`, await res.json())
-            return null
-        }
-
-        cachedObject = await res.json()
-        await setCachedData(keystore, { id, data: cachedObject, timestamp: now })
-    }
-    else {
-        cachedObject = cachedObject.data
-    }
-
-    return cachedObject
-}
-
-class RplaceUserTooltip extends HTMLElement {
-    #connectionSource
-    #connected
-
-    constructor() {
-        super()
-        this.#connected = false
-        this.#connectionSource = new PublicPromise()
-    }
-
-    connectedCallback() {
-        if (this.#connected) {
-            return
-        }
-        this.innerHTML = html`
-            <div class="user-tooltip-header">
-                <img src="images/rplace.png" width="32">
-                <h2 id="userName">...</h2>
-            </div>
-            <span id="userDate">...</span>
-            <hr>
-            <div class="user-tooltip-grid">
-                <h1 id="userInfo1">?</h1>
-                <h1 id="userInfo2">?</h1>
-                <span id="userInfo1Description">...</span>
-                <span id="userInfo2Description">...</span>
-            </div>`
-        this.#connectionSource.resolve()
-        this.#connected = true
-    }
-
-    async fromAccount(profile) {
-        await this.#connectionSource.promise
-        this.querySelector("#userName").textContent = profile.chatName
-        this.querySelector("#userDate").textContent = "Joined on " + new Date(profile.creationDate).toLocaleString()
-        this.querySelector("#userInfo1").textContent = fuzzyNumberFormat.format(profile.pixelsPlaced)
-        this.querySelector("#userInfo1Description").textContent = "Pixels placed"
-        this.querySelector("#userInfo2").textContent = profile.badges.length
-        this.querySelector("#userInfo2Description").textContent = "User badges"
-    }
-
-    async fromCanvasUser(canvasUser) {
-        await this.#connectionSource.promise
-        this.querySelector("#userName").textContent = canvasUser.chatName || "#" + canvasUser.userIntId
-        this.querySelector("#userDate").textContent = "Last joined " + new Date(canvasUser.lastJoined).toLocaleString()
-        this.querySelector("#userInfo1").textContent = fuzzyNumberFormat.format(canvasUser.pixelsPlaced)
-        this.querySelector("#userInfo1Description").textContent = "Pixels placed"
-        let playTime = canvasUser.playTimeSeconds
-        let playTimeUnit = "Seconds played"
-        if (playTime > 3600) {
-            playTime = Math.floor(playTime / 3600)
-            playTimeUnit = "Hours played"
-        }
-        else if (playTime > 60) {
-            playTime = Math.floor(playTime / 60)
-            playTimeUnit = "Minutes played"
-        }
-        this.querySelector("#userInfo2").textContent = fuzzyNumberFormat.format(playTime)
-        this.querySelector("#userInfo2Description").textContent = playTimeUnit
-    }
-}
-customElements.define("r-user-tooltip", RplaceUserTooltip)
-
-class RplaceCloseIcon extends HTMLElement {
-    constructor() {
-        super()
-    }
-
-    connectedCallback() {
-        this.innerHTML = html`
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="active">
-                <path d="M18.442 2.442l-.884-.884L10 9.116 2.442 1.558l-.884.884L9.116 10l-7.558 7.558.884.884L10 10.884l7.558 7.558.884-.884L10.884 10l7.558-7.558z" class=""></path>
-            </svg>`
-        this.tabIndex = 0
-        this.addEventListener("keydown", function(event) {
-            if (event.key == "Enter" || event.key == " ") {
-                this.click()
-                console.log(this)
-            }
-        })
-    }
-}
-customElements.define("r-close-icon", RplaceCloseIcon)
-
-
-class RplacePostContents extends HTMLElement {
-    #contentUrls
-    #connectionSource
-    #dialogEl
-    #dialogImgEl
-    #dialogReferenceEl
-    #contentsAlbumEl
-
-    constructor() {
-        super()
-        this.#connectionSource = new PublicPromise()
-        this.#contentUrls = []
-        const dialogEl = document.createElement("dialog")
-        dialogEl.className = "reddit-modal"
-        const dialogHeaderEl = document.createElement("div")
-        dialogHeaderEl.className = "dialog-header"
-        dialogEl.appendChild(dialogHeaderEl)
-        const dialogTitleEl = document.createElement("h4")
-        dialogTitleEl.textContent = "Viewing image "
-        dialogHeaderEl.appendChild(dialogTitleEl)
-        this.#dialogReferenceEl = document.createElement("a")
-        dialogHeaderEl.appendChild(this.#dialogReferenceEl)
-        const dialogCloseEl = document.createElement("r-close-icon")
-        dialogCloseEl.onclick = function() {
-            dialogEl.close()
-        }
-        dialogHeaderEl.appendChild(dialogCloseEl)
-        dialogEl.appendChild(dialogHeaderEl)
-        this.#dialogImgEl = document.createElement("img")
-        dialogEl.appendChild(this.#dialogImgEl)
-        this.#dialogEl = dialogEl
-
-        this.#contentsAlbumEl = document.createElement("div")
-    }
-
-    static get observedAttributes() {
-        return [ "contenturls" ]
-    }
-
-    attributeChangedCallback(name, oldValue, newValue) {
-        if (name === "images" && oldValue !== newValue) {
-            this.contentUrls = JSON.parse(newValue)
-            this.#refresh()
-        }
-    }
-
-    set contentUrls(value) {
-        this.#contentUrls = value
-        this.#refresh()
-    }
-    get contentUrls() {
-        return this.#contentUrls
-    }
-
-    connectedCallback() {
-        this.appendChild(this.#dialogEl)
-        this.appendChild(this.#contentsAlbumEl)
-        this.#connectionSource.resolve()
-        this.#refresh()
-    }
-
-    async #refresh() {
-        await this.#connectionSource.promise
-        const album = this.#contentsAlbumEl
-        while (album.firstChild) {
-            album.removeChild(album.lastChild)
-        }
-        album.className = "contents-album"
-
-        switch (this.#contentUrls.length) {
-            case 1:
-                album.style.gridTemplateColumns = "1fr"
-                album.style.gridTemplateRows = "1fr"
-                break
-            case 2:
-                album.style.gridTemplateColumns = "1fr 1fr"
-                album.style.gridTemplateRows = "1fr"
-                break
-            case 3:
-                album.style.gridTemplateColumns = "1fr 1fr"
-                album.style.gridTemplateRows = "1fr 1fr"
-                break
-            case 4:
-                album.style.gridTemplateColumns = "1fr 1fr"
-                album.style.gridTemplateRows = "1fr 1fr"
-                break
-        }
-
-        this.#contentUrls.forEach((contentUrl, index) => {
-            const imageEl = document.createElement("img")
-            imageEl.loading = "lazy"
-            imageEl.src = contentUrl
-            if (this.#contentUrls.length === 3 && index === 2) {
-                imageEl.style.gridColumn = "1 / span 2"
-            }
-            album.appendChild(imageEl)
-            // TODO: Do with getter/setter
-            const dialogReferenceEl = this.#dialogReferenceEl
-            const dialogImgEl = this.#dialogImgEl
-            const dialogEl = this.#dialogEl
-            imageEl.onclick = function() {
-                dialogReferenceEl.textContent = "(Download original)"
-                dialogReferenceEl.href = contentUrl
-                dialogImgEl.src = contentUrl
-                dialogEl.showModal()
-            }
-        })
-    }
-}
-customElements.define("r-post-contents", RplacePostContents)
-
-class RplacePost extends HTMLElement {
-    account
-    canvasUser
-    post
-    #coverImageUrl
-    #title
-    #description
-    #connectionSource
-    #hidden
-    #showAuthor
-    #authorName
-    #authorImageUrl
-    #creationDate
-    #showAuthorTooltip
-
-    #authorImageEl
-    #votesEl
-    #coverImageEl
-    #hiddenEl
-    #showVotes
-    #authorNameEl
-    #authorNameSpanEl
-    #authorTooltipEl
-    #creationDateEl
-    #authorContainerEl
-    #contentsEl
-    #showContents
-
-    constructor() {
-        super()
-        this.#votesEl = document.createElement("r-votes")
-        this.#coverImageEl = document.createElement("img")
-        this.#coverImageEl.className = "cover-image"
-        this.#hiddenEl = document.createElement("button")
-        this.#hiddenEl.className = "hider"
-        this.#hiddenEl.textContent = "Post contains sensitive content. Click to show"
-        const _this = this
-        this.#hiddenEl.onclick = function() {
-            _this.hidden = false
-        }
-
-        this.#authorContainerEl = document.createElement("div")
-        this.#authorContainerEl.className = "author-container"
-
-        this.#authorImageEl = document.createElement("img")
-        this.#authorImageEl.src = "images/rplace.png"
-        this.#authorImageEl.className = "author-image"
-        this.#authorImageEl.width = "28"
-        this.#authorImageEl.height = "28"
-        this.#authorContainerEl.appendChild(this.#authorImageEl)
-
-        this.#authorNameEl = document.createElement("a")
-        this.#authorNameEl.className = "author-name"
-        this.#authorNameEl.href = ""
-        this.#authorNameEl.onclick = function(e) {
-            e.stopPropagation()
-            e.preventDefault()
-        }
-        this.#authorNameEl.onmouseenter = function() {
-            _this.showAuthorTooltip = true
-        }
-        this.#authorContainerEl.appendChild(this.#authorNameEl)
-
-        this.#authorNameSpanEl = document.createElement("span")
-        this.#authorNameEl.appendChild(this.#authorNameSpanEl)
-
-        const authorTooltipEl = document.createElement("r-user-tooltip")
-        authorTooltipEl.onmouseleave = function() {
-            _this.showAuthorTooltip = false
-        }
-        this.#authorNameEl.onmouseleave = function() {
-            setTimeout(() => {
-                if (!authorTooltipEl.matches(":hover")) {
-                    _this.showAuthorTooltip = false
-                }
-            }, 200)
-        }
-        this.#authorTooltipEl = authorTooltipEl
-
-        const authorSeparator = document.createElement("span")
-        authorSeparator.textContent = "·"
-        this.#authorContainerEl.appendChild(authorSeparator)
-
-        this.#creationDateEl = document.createElement("span")
-        this.#creationDateEl.className = "creation-date"
-        this.#authorContainerEl.appendChild(this.#creationDateEl)
-
-        this.#contentsEl = document.createElement("r-post-contents")
-        this.#showContents = false
-        this.#connectionSource = new PublicPromise()
-    }
-
-    set showAuthorTooltip(value) {
-        this.#showAuthorTooltip = value
-        this.#onShowAuthorTooltipChanged()
-    }
-    get showAuthorTooltip() {
-        return this.#showAuthorTooltip
-    }
-    async #onShowAuthorTooltipChanged() {
-        if (this.#showAuthorTooltip) {
-            if (!this.#authorNameEl.contains(this.#authorTooltipEl)) {
-                this.#authorNameEl.appendChild(this.#authorTooltipEl)
-            }
-        }
-        else if (this.#authorNameEl.contains(this.#authorTooltipEl)) {
-            this.#authorNameEl.removeChild(this.#authorTooltipEl)
-        }
-    }
-
-    set creationDate(value) {
-        this.#creationDate = value
-        this.#onCreationDateChanged()
-    }
-    get creationDate() {
-        return this.#creationDate
-    }
-    async #onCreationDateChanged() {
-        await this.#connectionSource.promise
-        this.#creationDateEl.textContent = this.#creationDate.toLocaleString()
-    }
-
-    set authorName(value) {
-        this.#authorName = value
-        this.#onAuthorNameChanged()
-    }
-    get authorName() {
-        return this.#authorName
-    }
-    async #onAuthorNameChanged() {
-        await this.#connectionSource.promise
-        this.#authorNameSpanEl.textContent = "Posted by " + this.#authorName
-    }
-
-    set authorImageUrl(value) {
-        this.#authorImageUrl = value
-        this.#onAuthorImageUrlChanged()
-    }
-    get authorImageUrl() {
-        return this.#authorImageUrl
-    }
-    async #onAuthorImageUrlChanged() {
-        await this.#connectionSource.promise
-        this.#authorImageEl.src = this.#authorImageUrl || "images/rplace.png"
-    }
-
-    set showAuthor(value) {
-        this.#showAuthor = value
-        this.#onShowAuthorChanged()
-    }
-    get showAuthor() {
-        return this.#showAuthor
-    }
-    async #onShowAuthorChanged() {
-        await this.#connectionSource.promise
-        const header = this.querySelector("#header")
-        const main = this.querySelector("#main")
-        if (this.#showAuthor) {
-            if (!header.contains(this.#authorContainerEl)) {
-                header.prepend(this.#authorContainerEl)
-                main.classList.add("authored")
-            }
-        }
-        else if (header.contains(this.#authorContainerEl)) {
-            header.removeChild(this.#authorContainerEl)
-            main.classList.remove("authored")
-        }
-    }
-
-    set hidden(value) {
-        this.#hidden = value
-        this.#onHiddenChanged()
-    }
-    get hidden() {
-        return this.#hidden
-    }
-    async #onHiddenChanged() {
-        await this.#connectionSource.promise
-        if (this.#hidden) {
-            if (!this.contains(this.#hiddenEl)) {
-                this.appendChild(this.#hiddenEl)
-            }
-        }
-        else if (this.contains(this.#hiddenEl)) {
-            this.removeChild(this.#hiddenEl)
-        }
-    }
-
-    set coverImageUrl(value) {
-        this.#coverImageUrl = value
-        this.#onCoverImageUrlChanged()
-    }
-    get coverImageUrl() {
-        return this.#coverImageUrl
-    }
-    async #onCoverImageUrlChanged() {
-        await this.#connectionSource.promise
-        if (this.#coverImageUrl) {
-            if (!this.contains(this.#coverImageEl)) {
-                this.insertBefore(this.#coverImageEl, this.querySelector("#body"))
-            }
-            this.#coverImageEl.src = this.#coverImageUrl
-        }
-        else if (this.contains(this.#coverImageEl)) {
-            this.removeChild(this.#coverImageEl)
-        }
-    }
-
-    set showVotes(value) {
-        this.#showVotes = value
-        this.#onShowVotesChanged()
-    }
-    get showVotes() {
-        return this.#showVotes
-    }
-    async #onShowVotesChanged() {
-        await this.#connectionSource.promise
-        if (this.#showVotes) {
-            if (!this.contains(this.#votesEl)) {
-                this.prepend(this.#votesEl)
-            }
-        }
-        else if (this.contains(this.#votesEl)) {
-            this.removeChild(this.#votesEl)
-        }
-    }
-
-    set title(value) {
-        this.#title = value
-        this.#onTitleChanged()
-    }
-    get title() {
-        return this.#title
-    }
-    async #onTitleChanged() {
-        await this.#connectionSource.promise
-        this.querySelector("#title").textContent = this.#title
-    }
-
-    set description(value) {
-        this.#description = value
-        this.#onDescriptionChanged()
-    }
-    get description() {
-        return this.#description
-    }
-    async #onDescriptionChanged() {
-        await this.#connectionSource.promise
-        let descriptionText = this.#description
-        descriptionText = sanitise(descriptionText)
-        descriptionText = markdownParse(descriptionText)
-        this.querySelector("#description").innerHTML = descriptionText
-    }
-
-    set showContents(value) {
-        this.#showContents = value
-        this.#onShowContentsChanged()
-    }
-    get showContents() {
-        return this.#showContents
-    }
-    async #onShowContentsChanged() {
-        await this.#connectionSource.promise
-        const main = this.querySelector("#main")
-        if (this.#showContents) {
-            if (!main.contains(this.#contentsEl)) {
-                main.append(this.#contentsEl)
-            }
-        }
-        else if (main.contains(this.#contentsEl)) {
-            main.removeChild(this.#contentsEl)
-        }
-    }
-
-    static get observedAttributes() {
-        return [ "title", "description", "novotes", "coverimageurl", "hidden" ]
-    }
-
-    async attributeChangedCallback(name, oldValue, newValue) {
-        await this.#connectionSource.promise
-        if (newValue == oldValue) {
-            return
-        }
-        if (name == "title") {
-            this.title = newValue
-        }
-        else if (name == "description") {
-            this.description = newValue
-        }
-        else if (name == "novotes") {
-            this.showVotes = newValue === "false"
-        }
-        else if (name == "coverimageurl") {
-            this.coverImageUrl = newValue
-        }
-        else if (name == "hidden") {
-            this.hidden = true
-        }
-    }
-
-    connectedCallback() {
-        this.innerHTML = html`
-            <div id="body" class="body">
-                <div id="header" class="header">
-                </div>
-                <div id="main" class="main">
-                    <div id="title" class="title"></div>
-                    <p id="description" class="description"></p>
-                </div>
-            </div>`
-        this.#connectionSource.resolve()
-        this.showVotes = true
-        this.coverImageUrl = null
-    }
-
-    async fromPost(fromPost) {
-        this.post = fromPost
-        this.title = fromPost.title
-        this.description = fromPost.description
-        this.#votesEl.upvotes = fromPost.upvotes
-        this.#votesEl.downvotes = fromPost.downvotes
-
-        const AUTHOR_CACHE_EXPIRY = 2.592e8 // 3 days
-
-        if (fromPost.accountId) {
-            // First pull from indexedDb `profiles`, otherwise fetch account profile
-            const profileObject = await cachedFetch("profiles", fromPost.accountId,
-                `${localStorage.auth || DEFAULT_AUTH}/profiles/${fromPost.accountId}`, AUTHOR_CACHE_EXPIRY)
-            if (profileObject === null) {
-                console.error(`Could not load account profile ${fromPost.accountId}: Not found in caches and could not be fetched`)
-                return
-            }
-
-            this.account = profileObject
-            this.authorName = profileObject.username
-            this.authorImageUrl = "images/rplace.png"
-            this.#authorTooltipEl.fromAccount(profileObject)
-            this.showAuthor = true
-        }
-        else if (fromPost.canvasUserId) {
-            // First pull from indexedDb `users`, otherwise fetch canvas user
-            const canvasUserObject = await cachedFetch("users", fromPost.canvasUserId,
-                `${localStorage.auth || DEFAULT_AUTH}/instances/users/${fromPost.canvasUserId}`, AUTHOR_CACHE_EXPIRY)
-            if (canvasUserObject === null) {
-                console.error(`Could not load canvas user ${fromPost.canvasUserId}: Not found in caches and could not be fetched`)
-                return
-            }
-
-            this.canvasUser = canvasUserObject
-            this.authorName = canvasUserObject.chatName || "#" + canvasUserObject.userIntId
-            this.authorImageUrl = "images/rplace.png"
-            this.#authorTooltipEl.fromCanvasUser(canvasUserObject)
-            this.showAuthor = true
-        }
-        this.creationDate = new Date(fromPost.creationDate)
-        const contentUrls = []
-        for (const content of fromPost.contents) {
-            contentUrls.push(`${localStorage.auth || DEFAULT_AUTH}/posts/contents/${content.id}`)
-        }
-        if (contentUrls.length > 0) {
-            this.#contentsEl.contentUrls = contentUrls
-            this.showContents = true
-        }
-    }
-}
-customElements.define("r-post", RplacePost)
-
-class CreatePostContent extends HTMLElement {
-    #fileThumbnail
-    #deleteButton
-    #deleteEvent
-    #ondelete
-
-    constructor() {
-        super()
-        this.file = null
-        this.#deleteEvent = new Event("delete")
-        this.ondelete = null
-        const _this = this
-        this.#fileThumbnail = document.createElement("img")
-        this.#deleteButton = document.createElement("button")
-        this.#deleteButton.onclick = function() {
-            _this.dispatchEvent(_this.#deleteEvent)
-        }
-        this.#deleteButton.innerHTML = html`
-            <svg viewBox="0 0 20 20" style="fill: white;" xmlns="http://www.w3.org/2000/svg" height="16">
-                <path d="M18.442 2.442l-.884-.884L10 9.116 2.442 1.558l-.884.884L9.116 10l-7.558 7.558.884.884L10 10.884l7.558 7.558.884-.884L10.884 10l7.558-7.558z" class=""></path>
-            </svg>`
-    }
-
-    get ondelete() {
-        return this.#ondelete
-    }
-
-    set ondelete(value) {
-        if (this.#ondelete) {
-            this.removeEventListener("delete", this.#ondelete)
-        }
-        this.addEventListener("delete", value)
-        this.#ondelete = value
-    }
-
-    connectedCallback() {
-        this.appendChild(this.#fileThumbnail)
-        this.appendChild(this.#deleteButton)
-    }
-
-    setFile(fileObject) {
-        this.file = fileObject
-        this.#fileThumbnail.src = window.URL.createObjectURL(this.file)
-    }
-}
-customElements.define("r-create-post-content", CreatePostContent)
-
-class CreatePostContentsPreview extends HTMLElement {
-    contents
-    maxContents
-    #uploadLabel
-    #elementItems
-    #contentsContainer
-
-    constructor() {
-        super()
-        this.maxContents = 4
-        this.#elementItems = new Map()
-        this.contents = new Set()
-        this.#uploadLabel = document.createElement("span")
-        this.#uploadLabel.textContent = "Content upload:"
-        this.#contentsContainer = document.createElement("div")
-    }
-
-    addContent(file) {
-        if (this.contents.size >= this.maxContents) {
-            alert("Error: Can't attach more than 4 files")
-            return
-        }
-        if (file.size > 5e6) {
-            alert("Error: Attachment size can't be more than 5mb")
-            return
-        }
-        this.contents.add(file)
-        if (this.#elementItems.size == 0) {
-            this.insertBefore(this.#uploadLabel, this.#contentsContainer)
-            this.style.height = "72px"
-        }
-        const itemEl = document.createElement("r-create-post-content")
-        this.#contentsContainer.appendChild(itemEl)
-        itemEl.setFile(file)
-        const _this = this
-        itemEl.ondelete = function(e) {
-            _this.deleteContent(e.target.file)
-        }
-        this.#elementItems.set(file, itemEl)
-    }
-
-    deleteContent(file) {
-        if (!this.contents.delete(file)) {
-            return
-        }
-
-        if (this.#elementItems.size == 1) {
-            this.style.height = "36px"
-            this.removeChild(this.#uploadLabel)
-        }
-        const itemEl = this.#elementItems.get(file)
-        if (itemEl) {
-            this.#contentsContainer.removeChild(itemEl)
-            this.#elementItems.delete(file)
-        }
-    }
-
-    clearContents() {
-        this.contents.clear()
-        this.#elementItems.clear()
-        for (const item of this.#contentsContainer.children) {
-            this.#contentsContainer.removeChild(item)
-        }
-    }
-
-    connectedCallback() {
-        this.appendChild(this.#contentsContainer)
-    }
-}
-customElements.define("r-post-contents-preview", CreatePostContentsPreview)
diff --git a/event-timer.js b/event-timer.js
index a685c5fae..bdc5f6c8f 100644
--- a/event-timer.js
+++ b/event-timer.js
@@ -4,47 +4,47 @@ const body = document.body
 
 let cdInterval = -1
 async function startCountDown(finDate, coverOnComplete = true) {
-    let tick = 0
-    const initialRemaining = finDate - Date.now()
-    body.setAttribute("eventphase", "0")
-    clearInterval(cdInterval)
+	let tick = 0
+	const initialRemaining = finDate - Date.now()
+	body.setAttribute("eventphase", "0")
+	clearInterval(cdInterval)
 
-    await new Promise((resolve) => {
-        cdInterval = setInterval(() => {
-            if (tick == 1) body.setAttribute("eventphase", "1")
-            if (tick == 12) { body.setAttribute("eventphase", "2") }
-            const remaining = finDate - Date.now()
-            const percentLeft = remaining / initialRemaining * 100
+	await new Promise((resolve) => {
+		cdInterval = setInterval(() => {
+			if (tick == 1) body.setAttribute("eventphase", "1")
+			if (tick == 12) { body.setAttribute("eventphase", "2") }
+			const remaining = finDate - Date.now()
+			const percentLeft = remaining / initialRemaining * 100
 
-            // At less than 10% time left we go back to p1
-            if (percentLeft < 10) {
-                body.setAttribute("eventphase", "1")
-            }
-            if (remaining <= 0) {
-                clearInterval(cdInterval)
-                resolve()
-            }
+			// At less than 10% time left we go back to p1
+			if (percentLeft < 10) {
+				body.setAttribute("eventphase", "1")
+			}
+			if (remaining <= 0) {
+				clearInterval(cdInterval)
+				resolve()
+			}
 
-            eventCountdown.children[1].innerHTML = `Event in ${toCountdownString(finDate)}`
-            eventCountdown.children[3].style.width = percentLeft + "%"
+			eventCountdown.children[1].innerHTML = `Event in ${toCountdownString(finDate)}`
+			eventCountdown.children[3].style.width = percentLeft + "%"
 
-            tick++
-        }, 500)//ms
-    })
+			tick++
+		}, 500)//ms
+	})
 
-    // Start event
-    if (coverOnComplete) {
-        body.setAttribute("eventphase", "3")
-    }
+	// Start event
+	if (coverOnComplete) {
+		body.setAttribute("eventphase", "3")
+	}
 }
 
 function toCountdownString(finishDate) {
-    const remaining = finishDate - Date.now()
-    const days = Math.floor(remaining / (1000 * 60 * 60 * 24))
-    const hours = Math.floor((remaining / (1000 * 60 * 60)) % 24)
-    const minutes = Math.floor((remaining / (1000 * 60)) % 60)
-    const seconds = Math.floor((remaining / 1000) % 60)
-    return days > 0
-        ? `${days}:${hours}:${minutes}:${seconds}`
-        : `${hours}:${minutes}:${seconds}`
+	const remaining = finishDate - Date.now()
+	const days = Math.floor(remaining / (1000 * 60 * 60 * 24))
+	const hours = Math.floor((remaining / (1000 * 60 * 60)) % 24)
+	const minutes = Math.floor((remaining / (1000 * 60)) % 60)
+	const seconds = Math.floor((remaining / 1000) % 60)
+	return days > 0
+		? `${days}:${hours}:${minutes}:${seconds}`
+		: `${hours}:${minutes}:${seconds}`
 }
diff --git a/fakeapp.html b/fakeapp.html
index 82033fd2a..99ddc9cd4 100644
--- a/fakeapp.html
+++ b/fakeapp.html
@@ -1,22 +1,68 @@
 <!DOCTYPE html>
 <html lang="en">
-	<head>
-		<meta charset="UTF-8">
-		<meta name="viewport" content="width=device-width, initial-scale=1.0">
-		<link href="style.css" rel="stylesheet"> <!-- Increment the CSS query, such as ?v=1.x every time CSS is changed in order to force clients to refresh their stylesheets. Otherwise broken CSS may occur-->
-		<title>place</title>
-		<link rel="icon" type="image/x-icon" href="favicon.png">
-		<meta name="theme-color" content="#ff4500">
-	</head>
-	<body style="background-color: white; padding: 30px; font-size: 16px;font-family: Arial, Helvetica, sans-serif;">
-		<img src="favicon.png">
-		<h1>rplace.live</h1>
-		<h3>Hello user,</h3>
-		<p>This message is from the official rplace.live team. You are seeing this screen because <u>you have installed a fake rplace.live clone app</u> which does not belong to the original owners.</p>
-		<button onclick="explaination.style.display = 'inline-block';">Click here for a detailed explaination of what has happened ↓</button>
-		<p id="explaination" style="color: grey; display: none;">The r/place game, rplace.live can only be found on the website <a href="." onclick="navigator.share('https:/\/\rplace.live')">https://rplace.live</a>. It is highly likely that this app has copied the code, or has made a frame (a.k.a webview, which is a browser window embedded inside an app) into the official rplace.live site, in order to either claim that they were the original creators, compromise your personal data, or put ads over the our (the original creator's) site so that they can unfairly profit off of our work. To protect players, we created this page that will show when the rplace.live site detects it is being accessed by a fake app.</p>
-		<p>We highly recommend you to uninstall this application, as we can not guarentee this client won't leak important information about your device, serve you with unwanted ads, or collect your personal data.</p>
-		<p>To help us fight against fake apps leeching off of others' work, and support the rplace.live original owners, <u>the <b>real</b> rplace.live game can be found at</u> <a href="https://rplace.live" onclick="navigator.share('https:/\/\rplace.live')">https://rplace.live</a>, online on any browser, including chrome, firefox and safari.</p>
-		<p style="color: pink;">~ Thanks - The official rplace.live team  ❤️</p>
-	</body>
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>place: fake app</title>
+	<link rel="icon" type="image/x-icon" href="favicon.png">
+	<link rel="stylesheet" href="misc-page.css">
+</head>
+<body>
+	<header>
+		<a href="https://rplace.live" target="_blank" rel="noopener noreferrer">
+			<img src="./images/rplace.png" style="height: 100%;" alt="place logo">
+		</a>
+		<h1>rplace.live fake app warning</h1>
+	</header>
+	<section class="reddit-cards-container">
+		<article>
+			<div>
+				<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#f5941e"><path d="M330-120 120-330v-300l210-210h300l210 210v300L630-120H330Zm36-190 114-114 114 114 56-56-114-114 114-114-56-56-114 114-114-114-56 56 114 114-114 114 56 56Zm-2 110h232l164-164v-232L596-760H364L200-596v232l164 164Zm116-280Z"/></svg>
+			</div>
+			<div>
+				<h1 style="font-size: 32px; margin: 24px 0px 24px 0px;">Sorry about this.. 😥</h1>
+				<p>You are seeing this page because you are accessing rplace.live game through an unofficial or unauthorised site or app.</p>
+				<a href="https://rplace.live" target="_blank" rel="noopener noreferrer" style="position: relative;">
+					<img src="site_demo.png" style=" width: calc(100% - 16px); border-radius: 4px; opacity: 0.25;">
+					<span style="position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);font-size: 24px;">
+						Play the game at https://rplace.live
+					</span>
+				</a>
+			</div>
+		</article>
+		<article>
+			<div><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#74da74"><path d="M440-280h80v-240h-80v240Zm40-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg></div>
+			<div>
+				<p>
+					These unofficial versions might claim to be the original creators, expose you to unwanted ads,
+					or collect your personal information.
+					To protect your privacy and ensure a safe experience, we recommend only visiting the official site.
+				</p>
+				<details>
+					<summary>Click to see more details</summary>
+					<p>
+						The rplace.live game is only available at 
+						<a href="https://rplace.live" target="_blank" rel="noopener noreferrer">https://rplace.live</a>. 
+						Any other websites or applications claiming to host or be rplace.live may be using unauthorised methods, 
+						such as embedding the site in an iframe or webview, which could compromise your experience or security.
+					</p>
+				</details>
+			</div>
+		</article>
+		<article>
+			<div><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#ff5371"><path d="m480-120-58-52q-101-91-167-157T150-447.5Q111-500 95.5-544T80-634q0-94 63-157t157-63q52 0 99 22t81 62q34-40 81-62t99-22q94 0 157 63t63 157q0 46-15.5 90T810-447.5Q771-395 705-329T538-172l-58 52Zm0-108q96-86 158-147.5t98-107q36-45.5 50-81t14-70.5q0-60-40-100t-100-40q-47 0-87 26.5T518-680h-76q-15-41-55-67.5T300-774q-60 0-100 40t-40 100q0 35 14 70.5t50 81q36 45.5 98 107T480-228Zm0-273Z"/></svg></div>
+			<div>
+				<p>
+					To support the game and avoid these potential risks, always visit our official website at 
+					<a href="https://rplace.live" target="_blank" rel="noopener noreferrer">https://rplace.live</a>,
+					accessible on any modern browser such as Chrome, Firefox, and Safari.
+				</p>
+			</div>
+		</article>
+		<a href="https://rplace.live" target="_blank" rel="noopener noreferrer">
+			<img src="./images/rplace.png" style="height: 100%;" alt="place logo">
+		</a>
+		<p style="color: #ff5371;">~ Thank you for your understanding, The rplace.live team ❤️</p>
+	</section>
+</body>
 </html>
diff --git a/images/twitter.png b/images/twitter.png
deleted file mode 100644
index 7e5e4a57e..000000000
Binary files a/images/twitter.png and /dev/null differ
diff --git a/images/x.png b/images/x.png
new file mode 100644
index 000000000..321dc5c53
Binary files /dev/null and b/images/x.png differ
diff --git a/index.html b/index.html
index dfe601d84..7a6a88669 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" ontouchstart="if (maincontent.contains(event.target)) event.preventDefault()" ontouchend="event.preventDefault()">
+<html lang="en">
 <head>
 	<meta charset="UTF-8">
 	<script>
@@ -21,85 +21,92 @@
 			celebration: new Audio("./sounds/celebration.mp3")
 		}
 
-		const EMOJIS = {
-			rofl: "🤣",
-			joy: "😂",
-			cool: "😎",
-			sunglasses: "😎",
-			heart: "❤️",
-			moyai: "🗿",
-			bruh: "🗿",
-			turkey: "🇹🇷",
-			skull: "💀",
-			sus: "ඞ",
-			iran: "🇮🇷",
-			uk: "🇬🇧",
-			usa: "🇺🇸",
-			america: "🇺🇸",
-			eyes: "👀",
-			fire: "🔥",
-			thumbsup: "👍",
-			thumbsdown: "👎",
-			clown: "🤡",
-			facepalm: "🤦‍♂️",
-			ok: "👌",
-			poop: "💩",
-			rocket: "🚀",
-			tada: "🎉",
-			celebration: "🎉",
-			moneybag: "💰",
-			crown: "👑",
-			muscle: "💪",
-			beer: "🍺",
-			pizza: "🍕",
-			cookie: "🍪",
-			balloon: "🎈",
-			gift: "🎁",
-			star: "⭐️",
-			love: "😍",
-			crying: "😢",
-			angry: "😠",
-			sleepy: "😴",
-			nerd: "🤓",
-			laughing: "😆",
-			vomiting: "🤮",
-			unicorn: "🦄",
-			alien: "👽",
-			ghost: "👻",
-			skullcrossbones: "☠️",
-			explosion: "💥",
-			shush: "🤫",
-			deaf: "🧏",
-			mew:"🤫🧏",
-			pray: "🙏",
-			thinking: "🤔"
-		}
-
-		const EMOJIS_CUSTOM = {
-			amogus: '<img src="custom_emojis/amogus.png" height="24">',
-			biaoqing: '<img src="custom_emojis/biaoqing.png" height="24">',
-			deepfriedh: '<img src="custom_emojis/deepfriedh.png" height="24">',
-			edp445: '<img src="custom_emojis/edp445.png" height="24">',
-			fan: '<img src="custom_emojis/fan.png" height="24">',
-			heavy: '<img src="custom_emojis/heavy.png" height="24">',
-			herkul: '<img src="custom_emojis/herkul.png" height="24">',
-			kaanozdil: '<img src="custom_emojis/kaanozdil.png" height="24">',
-			lowtiergod: '<img src="custom_emojis/lowtiergod.png" height="24">',
-			manly: '<img src="custom_emojis/manly.png" height="24">',
-			plsaddred: '<img src="custom_emojis/plsaddred.png" height="24">',
-			rplace: '<img src="custom_emojis/rplace.png" height="24">',
-			rplacediscord: '<img src="custom_emojis/rplacediscord.png" height="24">',
-			sonic: '<img src="custom_emojis/sonic.png" height="24">',
-			transparent: '<img src="custom_emojis/transparent.png" height="24">',
-			trollface: '<img src="custom_emojis/trollface.png" height="24">',
-			// Special 'commands'
-			help: "<kbd>Chat commands: :vip, :name, :getid</kbd>",
-			name: "<kbd>Change your username</kbd>",
-			vip: "<kbd>Apply a VIP cooldown code</kbd>",
-			lookup: "<kbd>Get the IDs of all players with the given name</kbd>",
-			getid: "<kbd>View your own User Id, or provide a name to view a list of online player User Ids</kbd>",
-			whoplaced: "<kbd>View details of who placed the current pixel being hoveredd</kbd>"
-		}
+		const EMOJIS = new Map([
+			[ "rofl", "🤣" ],
+			[ "joy", "😂" ],
+			[ "cool", "😎" ],
+			[ "sunglasses", "😎" ],
+			[ "heart", "❤️" ],
+			[ "moyai", "🗿" ],
+			[ "bruh", "🗿" ],
+			[ "skull", "💀" ],
+			[ "sus", "ඞ" ],
+			[ "tr", "🇹🇷" ],
+			[ "turkey", "🇹🇷" ],
+			[ "ir", "🇮🇷" ],
+			[ "iran", "🇮🇷" ],
+			[ "uk", "🇬🇧" ],
+			[ "britain", "🇬🇧" ],
+			[ "usa", "🇺🇸" ],
+			[ "america", "🇺🇸" ],
+			[ "ru", "🇷🇺" ],
+			[ "russia", "🇷🇺" ],
+			[ "eyes", "👀" ],
+			[ "fire", "🔥" ],
+			[ "thumbsup", "👍" ],
+			[ "thumbsdown", "👎" ],
+			[ "clown", "🤡" ],
+			[ "facepalm", "🤦‍♂️" ],
+			[ "ok", "👌" ],
+			[ "poop", "💩" ],
+			[ "rocket", "🚀" ],
+			[ "tada", "🎉" ],
+			[ "celebration", "🎉" ],
+			[ "moneybag", "💰" ],
+			[ "crown", "👑" ],
+			[ "muscle", "💪" ],
+			[ "beer", "🍺" ],
+			[ "pizza", "🍕" ],
+			[ "cookie", "🍪" ],
+			[ "balloon", "🎈" ],
+			[ "gift", "🎁"],
+			[ "star", "⭐️" ],
+			[ "love", "😍" ],
+			[ "crying", "😢" ],
+			[ "angry", "😠" ],
+			[ "sleepy", "😴" ],
+			[ "nerd", "🤓" ],
+			[ "laughing", "😆" ],
+			[ "vomiting", "🤮" ],
+			[ "unicorn", "🦄" ],
+			[ "alien", "👽" ],
+			[ "ghost", "👻" ],
+			[ "skullcrossbones", "☠️" ],
+			[ "explosion", "💥" ],
+			[ "shush", "🤫" ],
+			[ "deaf", "🧏" ],
+			[ "mew", "🤫🧏" ],
+			[ "pray", "🙏" ],
+			[ "thinking", "🤔" ],
+			[ "sweat", "😅" ],
+			[ "wave", "👋"]
+		])
+		const CUSTOM_EMOJIS = new Map([
+			[ "amogus", '<img src="custom_emojis/amogus.png" height="24">' ],
+			[ "biaoqing", '<img src="custom_emojis/biaoqing.png" height="24">' ],
+			[ "deepfriedh", '<img src="custom_emojis/deepfriedh.png" height="24">' ],
+			[ "edp445", '<img src="custom_emojis/edp445.png" height="24">' ],
+			[ "fan", '<img src="custom_emojis/fan.png" height="24">' ],
+			[ "heavy", '<img src="custom_emojis/heavy.png" height="24">' ],
+			[ "herkul", '<img src="custom_emojis/herkul.png" height="24">' ],
+			[ "kaanozdil", '<img src="custom_emojis/kaanozdil.png" height="24">' ],
+			[ "lowtiergod", '<img src="custom_emojis/lowtiergod.png" height="24">' ],
+			[ "manly", '<img src="custom_emojis/manly.png" height="24">' ],
+			[ "plsaddred", '<img src="custom_emojis/plsaddred.png" height="24">' ],
+			[ "rplace", '<img src="custom_emojis/rplace.png" height="24">' ],
+			[ "rplacediscord", '<img src="custom_emojis/rplacediscord.png" height="24">' ],
+			[ "sonic", '<img src="custom_emojis/sonic.png" height="24">' ],
+			[ "transparent", '<img src="custom_emojis/transparent.png" height="24">' ],
+			[ "trollface", '<img src="custom_emojis/trollface.png" height="24">' ]
+		])
+		const COMMANDS = new Map([
+			[ "help", "<kbd>Help information for live chat</kbd>" ],
+			[ "name", "<kbd>Change your username</kbd>" ],
+			[ "vip", "<kbd>Apply a VIP code</kbd>" ],
+			[ "lookup", "<kbd>Get the IDs of all players with the given name</kbd>" ],
+			[ "getid", "<kbd>View your own User Id, or provide a name to view a list of online player User Ids</kbd>" ],
+			[ "whoplaced", "<kbd>View details of who placed the current pixel being hoveredd</kbd>" ]
+		])
 
 		// Flag emojis all sourced from openmoji.org, https://www.langoly.com/most-spoken-languages/
 		const LANG_INFOS = new Map([
@@ -125,8 +132,8 @@
 		])
 
 		const DEFAULT_THEMES = new Map([
-			[ "r/place 2022", { id: "r/place 2022", css: "rplace-2022.css", cssVersion: "11", pixelselect: "svg/pixel-select-2022.svg" }],
-			[ "r/place 2023", { id: "r/place 2023", css: "rplace-2023.css", cssVersion: "11", pixelselect: "svg/pixel-select-2023.svg" }],
+			[ "r/place 2022", { id: "r/place 2022", css: "rplace-2022.css", cssVersion: "14", pixelselect: "svg/pixel-select-2022.svg" }],
+			[ "r/place 2023", { id: "r/place 2023", css: "rplace-2023.css", cssVersion: "14", pixelselect: "svg/pixel-select-2023.svg" }],
 		])
 
 		const ADS = [
@@ -176,6 +183,8 @@
 		let setName = null // function injected by wscapsule
 		let requestPixelPlacers = null // function injected by wscapsule
 		let requestLoadChannelPrevious = null // function injected by wscapsule
+		let chatReport = null // function injected by wscapsule
+		let chatReact = null // function injected by wscapsule
 		let canvasLocked = false // Server will tell us this
 		let includesPlacer = false // Server will tell us this
 
@@ -184,12 +193,6 @@
 			call(addEventListener, window, "blur", () => focused = false)
 			call(addEventListener, window, "focus", () => focused = true)
 
-			let authSocket = {} //new WebSocket("wss://server.poemanthology.org/auth")
-			// HACK: Until enough clients are using the new server
-			if (localStorage.server?.startsWith("wss://server.rplace.tk")) {
-				delete localStorage.server
-			}
-
 			let svUri = localStorage.server || DEFAULT_SERVER
 			if (localStorage.vip) {
 				if (!svUri.endsWith("/")) svUri += "/"
@@ -198,7 +201,7 @@
 			let ws = new WebSocket(svUri)
 			delete WebSocket
 
-			function chatReport(messageId, senderId) {
+			function _chatReport(messageId, senderId) {
 				const reason = prompt("Enter the reason for why you are reporting this message (max 280 chars)\n\n" +
 					`Additional info:\nMessage ID: ${messageId}\nSender ID: ${senderId}\n`)
 				if (!reason || !reason.trim()) {
@@ -213,208 +216,31 @@
 				call(send, ws, reportBuffer)
 				alert("Report sent!\nIn the meantime you can block this user by 'right clicking / press hold on the message' > 'block'")
 			}
+			chatReport = _chatReport
 
-			function createLiveChatMessage(messageId, txt, senderId, name, sendDate, repliesTo = null) {
-				let newMessage = document.createElement("div")
-				newMessage.messageId = messageId
-				newMessage.name = name
-				newMessage.originalContent = txt
-
-				// Sanitise regex
-				txt = sanitise(txt)
-				// Simple markdown parse regexes
-				txt = markdownParse(txt)
-				// Custom emoji regex
-				txt = txt.replaceAll(/:([a-z-_]{0,16}):/g, (full, source) => {
-					// If this emoji is the only thing in the message we can make it big!
-					if (txt.match(source).length == 1 && !txt.replace(full, "").trim()) {
-						return `<img src="custom_emojis/${source}.png" alt=":${source}:" title=":${source}:" width="48" height="48">`
-					}
-
-					// Else smaller and inline with the rest of the message
-					return `<img src="custom_emojis/${source}.png" alt=":${source}:" title=":${source}:" width="16" height="16">`
-				})
-				// Coordinate to clickable link regex
-				txt = txt.replaceAll(/([0-9]+),\s*([0-9]+)/g, (element) => {
-					let px = parseInt(element.split(",")[0].trim())
-					let py = parseInt(element.split(",")[1].trim())
-					if (px != NaN && py != NaN) {
-						return `<a href="#" onclick="event.preventDefault();x=${px};y=${py};pos();">${px},${py}</a>`
-					}
-				})
-
-				let namePart = document.createElement("span")
-				if (messageId === 0) {
-					namePart.classList.add("rainbow-glow")
-				}
-				else {
-					namePart.style.color = CHAT_COLOURS[hash("" + senderId) & 7]
-				}
-				namePart.title = (new Date(sendDate * 1000)).toLocaleString()
-				namePart.textContent = `[${name || ("#" + senderId)}] `
-				let txtPart = document.createElement("span")
-				txtPart.innerHTML = txt
-
-				if (repliesTo != null) {
-					let replyingMessage = null
-					for (let message of cMessages[currentChannel]) {
-						if (message.messageId == repliesTo) {
-							replyingMessage = message
-							break
-						}
-					}
-					if (replyingMessage == null) {
-						replyingMessage = {
-							name: "[?????]",
-							originalContent: translate("messageCouldntBeLoaded"),
-							fake: true
-						}
-					}
-
-					let repliesPart = document.createElement("p")
-					if (!replyingMessage.fake) {
-						repliesPart.onclick = function() {
-							let height = 0
-							for (let message of cMessages[currentChannel]) {
-								if (message == replyingMessage) break
-								height += message.offsetHeight
-							}
-
-							replyingMessage.setAttribute("highlight", "true")
-							setTimeout(() => {
-								replyingMessage.removeAttribute("highlight")
-							}, 500)
-
-							chatMessages.scroll({ top: height, left: 0, behavior: "smooth" })
-						}
-					}
-					repliesPart.innerText = `↪️ ${replyingMessage.name} ${replyingMessage.originalContent}`
-					newMessage.appendChild(repliesPart)
-				}
-
-				newMessage.appendChild(namePart)
-				newMessage.appendChild(txtPart)
-				if (messageId > 0) { // Disable interactivity for system messages
-					namePart.onclick = (e) => chatMentionUser(senderId)
-					newMessage.oncontextmenu = (e) => onChatContext(e, senderId, messageId)
-
-					let actionsPart = document.createElement("div")
-					let replyBtn = document.createElement("img")
-					replyBtn.onclick = function(e) { chatReply(messageId, senderId) }
-					replyBtn.title = translate("replyTo")
-					replyBtn.tabIndex = "0"
-					replyBtn.src = "svg/reply-action.svg"
-					actionsPart.appendChild(replyBtn)
-
-					let reportBtn = document.createElement("img")
-					reportBtn.onclick = function(e) { chatReport(messageId, senderId) }
-					reportBtn.title = translate("report")
-					replyBtn.tabIndex = "0"
-					reportBtn.src = "svg/report-action.svg"
-					actionsPart.appendChild(reportBtn)
-
-					if (localStorage.vip?.startsWith("!")) {
-						let moderateBtn = document.createElement("img")
-						moderateBtn.onclick = function(e) { chatModerate("delete", senderId, messageId, newMessage) }
-						replyBtn.title = "Moderation options"
-						replyBtn.tabIndex = "0"
-						moderateBtn.src = "svg/moderate-action.svg"
-						actionsPart.appendChild(moderateBtn)
-					}
-					newMessage.appendChild(actionsPart)
-				}
-
-				return newMessage
+			function _chatReact(messageId, reactKey) {
+				const reactBuffer = encoder.encode("XXXXX" + reactKey)
+				reactBuffer[0] = 18
+				reactBuffer[1] = messageId >> 24
+				reactBuffer[2] = messageId >> 16
+				reactBuffer[3] = messageId >> 8
+				reactBuffer[4] = messageId & 255
+				call(send, ws, reactBuffer)
 			}
+			chatReact = _chatReact
 
-			authSocket.binaryType = "arraybuffer"
-			authSocket.onopen = function() {
-				// Then we know we have been redirected from a reddit oauth, and will now authenticate with auth server
-				if (redditOauthCode) {
-					let cb = encoder.encode("X" + redditOauthCode)
-					cb[0] = 9 // ClientPackets.RedditCreateAccount
-					call(send, authSocket, cb)
-				}
-				else if (localStorage.refreshToken) {
-					let ab = encoder.encode("X" + localStorage.refreshToken)
-					ab[0] = 10 // ClientPackets.RedditAuthenticate
-					call(send, authSocket, ab)
-				}
-				else if (localStorage.accountToken) {
-					let ab = encoder.encode("X" + localStorage.accountToken)
-					ab[0] = 5 // ClientPackets.Authenticate
-					call(send, authSocket, ab)
-				}
+			function createLiveChatMessage(messageId, txt, senderId, name, sendDate, repliesTo = null, reactions = null) {
+				const message = document.createElement("r-live-chat-message")
+				message.messageId = messageId
+				message.content = txt
+				message.senderId = senderId
+				message.name = name
+				message.sendDate = sendDate
+				message.repliesTo = repliesTo
+				message.reactions = reactions
+				return message
 			}
-			authSocket.onmessage = async function({data}) {
-				data = new DataView(data)
 
-				switch (data.getUint8(0)) {
-				case 0: { // ServerPackets.Fail
-					console.error(decoder.decode(data.buffer.slice(1)))
-					break
-				}
-				case 1: {
-					loginPanel.style.display = "flex"
-
-					account = JSON.parse(decoder.decode(data.buffer.slice(1)))
-					profileName2.textContent = profileName.textContent = account.Username
-					// We use discord ID so that we can directly link their discord profile. Thanks https://discord.name/ for the api :).
-					if (account.DiscordSnowflake) {
-						let discordUser = await (await fetch("https://discord-lookup-api.herokuapp.com/user/" + account.DiscordSnowflake)).json()
-						if (discordUser && discordUser.success) {
-							profileDiscordIcon.src = discordUser.data.avatar || "images/discord.png"
-							profileDiscord.textContent = discordUser.data.username
-							profileDiscord.href = "https://discord.com/users/" + account.DiscordSnowflake
-						}
-					}
-					if (account.TwitterHandle) {
-						profileTwitter.textContent = account.TwitterHandle
-						profileTwitter.href = "https://twitter.com/" + account.TwitterHandle
-					}
-					// We can also scrape their snoo/user icon using reddit. Thanks reddit!
-					if (account.RedditHandle) {
-						profileReddit.textContent = account.RedditHandle
-						profileReddit.href = "https://www.reddit.com/user/" + account.RedditHandle.replaceAll("/u/", "")
-						let redditUser = await (await fetch("https://www.reddit.com/user/"+ account.RedditHandle +"/about.json")).json()
-						if (redditUser && !redditUser.error) {
-							profileRedditIcon.src = redditUser.data.snoovatar_img || redditUser.data.icon_img || "images/reddit.png"
-						}
-					}
-					profilePixels.textContent = account.PixelsPlaced
-					profileJoin.textContent = new Date(account.JoinDate).toLocaleString()
-					for (let i of account.Badges) {
-						let badgeImg = document.createElement("img")
-						badgeImg.src = BADGES[i]
-						badgeImg.style.width = "16px"
-						badgeImg.title = BADGES[i][7].toUpperCase() + BADGES[i].replace("_", "").slice(8, BADGES[i].length - 4)
-						profileBadges.appendChild(badgeImg)
-					}
-					accountTier.textContent = account.AccountTier
-					accountName.textContent = account.Username
-					let censoredSection = account.Email.slice(4, account.Email.indexOf("@"))
-					accountEmail.textContent = account.Email.replace(censoredSection, "*".repeat(censoredSection.length))
-					break
-				}
-				case 5: { // ServerPackets.AccountToken
-					localStorage.accountToken = decoder.decode(data.buffer.slice(1))
-					console.log("Account authentication success")
-					call(send, authSocket, new Uint8Array([4])) // ClientPackets.AccountInfo
-					break
-				}
-				case 7: { // ServerPackets.RedditRefreshToken
-					localStorage.refreshToken = decoder.decode(data.buffer.slice(1))
-					console.log("Reddit OAuth success")
-					call(send, authSocket, new Uint8Array([4])) // ClientPackets.AccountInfo
-					// Clean up our params to avoid reauthenticating on reload
-					let params = new URLSearchParams(location.search)
-					params.delete("code")
-					history.pushState(null, "", location.origin + "/" + params.toString())
-					break
-				}
-			}
-			}
-			authSocket.onclose = console.error
 			ws.onopen = function(e) {
 				initialConnect = true
 				if (automated) {
@@ -500,7 +326,7 @@
 					canvasLocked = !!data.getUint8(1)
 					canvasLock.style.display = canvasLocked ? "flex" : "none"
 					const reason = decoder.decode(data.buffer.slice(2))
-					if (reason) { // TODO: Maybe find a more pretty elegant solution
+					if (reason) { // TODO: Find a more elegant solution
 						alert(reason)
 					}
 					break
@@ -551,7 +377,12 @@
 					let channelLen = data.getUint8(i++)
 					let channel = decoder.decode(data.buffer.slice(i, (i += channelLen)))
 
-					if (channel !== currentChannel) return
+					let newChatScroll = chatMessages.scrollTop
+					const messageRenderPromises = []
+
+					if (channel !== currentChannel) {
+						return
+					}
 					while (i < data.byteLength) {
 						let offset = i
 						const messageLength = data.getUint16(offset); offset += 2
@@ -561,31 +392,49 @@
 						const intId = data.getUint32(offset); offset += 4 // sender int ID
 						const name = intIdNames.get(intId)
 
-						let sendDate = data.getUint32(offset); offset += 4
-						let reactionsL = data.getUint8(offset); offset++ // TODO: Reactions
-						// let reactions = .. TODO: we worry about this later
-						let channelL = data.getUint8(offset); offset++
-						let channel = decoder.decode(data.buffer.slice(offset, (offset += channelL)))
+						const sendDate = data.getUint32(offset); offset += 4
+						const reactions = new Map()
+						const reactionsL = data.getUint8(offset); offset++
+						for (let j = 0; j < reactionsL; j++) {
+							const reactionKeyL = data.getUint8(offset); offset++
+							const reactionKey = decoder.decode(data.buffer.slice(i, (i += reactionKeyL)))
+							const reactors = new Set()
+							const reactorsL = data.getUint32(offset); offset += 4
+							for (let k = 0; k < reactorsL; k++) {
+								const reactor = data.getUint32BE(offset); offset += 4
+								reactors.add(reactor)
+							}
+							reactions.set(reactionKey, reactors)
+						}
+						const channelL = data.getUint8(offset); offset++
+						const channel = decoder.decode(data.buffer.slice(offset, (offset += channelL)))
 						let repliesTo = null
 						if (messageLength - (offset - i) == 4) {
 							repliesTo = data.getUint32(offset); offset += 4
 						}
 
 						// TODO: We will worry about after when we get dynamic message loading
-						const newMessage = createLiveChatMessage(messageId, txt, intId, name, sendDate, repliesTo)
+						const newMessage = createLiveChatMessage(messageId, txt, intId, name, sendDate, repliesTo, reactions)
 						if (before) {
-							let scrollBefore = chatMessages.scrollTop
 							chatMessages.prepend(newMessage)
-							chatMessages.scrollTop = scrollBefore + newMessage.offsetHeight
+							const channelMessages = cMessages.get(currentChannel)
+							channelMessages.unshift(newMessage)
 						}
+						messageRenderPromises.push(
+							newMessage.updateComplete.then(() => {
+								newChatScroll += newMessage.offsetHeight
+							})
+						)
 						i = offset
 					}
-					// chatPrevious button height (looks more seamless if the last of the
-					// loaded previous messages can be seen in place of the previous button
-					chatMessages.scrollTop -= 18
-					// Prevent site from spam loading chat messages when already at scroll top until it
-					// received the last lot
-					chatPreviousLoadDebounce = false
+					Promise.all(messageRenderPromises).then(() => {
+						// Looks more seamless if the last of the loaded previous messages can be seen
+						// in place of the previous button
+						chatMessages.scrollTop = newChatScroll - chatPreviousButton.offsetHeight
+						// Prevent site from spam loading chat messages when already at scroll top until it
+						// received the last lot
+						chatPreviousLoadDebounce = false
+					})
 					break
 				}
 				case 14: { // Moderation
@@ -628,17 +477,30 @@
 					const name = intIdNames.get(senderIntId)
 
 					if (msgType == 0) { // live
-						let sendDate = data.getUint32(offset); offset += 4
-						let reactionsL = data.getUint8(offset); offset++ // TODO: Reactions
-						// let reactions = .. TODO: we worry about this later
-						let channelL = data.getUint8(offset); offset++
-						let channel = decoder.decode(data.buffer.slice(offset, (offset += channelL)))
+						const sendDate = data.getUint32(offset); offset += 4
+						const reactions = new Map()
+						const reactionsL = data.getUint8(offset); offset++
+						for (let j = 0; j < reactionsL; j++) {
+							const reactionKeyL = data.getUint8(offset); offset++
+							const reactionKey = decoder.decode(data.buffer.slice(i, (i += reactionKeyL)))
+							const reactors = new Set()
+							const reactorsL = data.getUint32(offset); offset += 4
+							for (let k = 0; k < reactorsL; k++) {
+								const reactor = data.getUint32BE(offset); offset += 4
+								reactors.add(reactor)
+							}
+							reactions.set(reactionKey, reactors)
+						}
+						const channelL = data.getUint8(offset); offset++
+						const channel = decoder.decode(data.buffer.slice(offset, (offset += channelL)))
 						if (data.byteLength - offset >= 4) {
 							repliesTo = data.getUint32(offset)
 						}
-						if (!(channel in cMessages)) return
+						if (!cMessages.has(channel)) {
+							break
+						}
 
-						const newMessage = createLiveChatMessage(messageId, txt, senderIntId, name, sendDate, repliesTo)
+						const newMessage = createLiveChatMessage(messageId, txt, senderIntId, name, sendDate, repliesTo, reactions)
 						if (senderIntId !== 0 && blockedUsers.includes(senderIntId)) {
 							newMessage.style.color = "transparent"
 							newMessage.style.textShadow = "0px 0px 6px black"
@@ -647,21 +509,25 @@
 							newMessage.setAttribute("mention", "true")
 							if (currentChannel == channel) AUDIOS.closePalette.run()
 						}
-						const atScrollBottom = chatMessages.scrollTop + chatMessages.offsetHeight + 16 >= chatMessages.scrollHeight
+						const atScrollBottom = chatMessages.scrollTop + chatMessages.offsetHeight + 64 >= chatMessages.scrollHeight
 
 						// Insert the message into the channel
-						cMessages[channel].push(newMessage)
-						if (cMessages[channel].length > MAX_CHANNEL_MESSAGES) {
-							cMessages[channel].shift()
+						const channelMessages = cMessages.get(channel)
+						channelMessages.push(newMessage)
+						if (channelMessages.length > MAX_CHANNEL_MESSAGES) {
+							channelMessages.shift()
 						}
 						if (channel == currentChannel) {
-							if (chatMessages.children.length > MAX_CHANNEL_MESSAGES) chatMessages.children[0].remove()
+							if (chatMessages.children.length > MAX_CHANNEL_MESSAGES) {
+								chatMessages.children[0].remove()
+							}
 							chatMessages.insertAdjacentElement("beforeEnd", newMessage)
-						}
-
-						// If at scroll bottom (we scroll down when new chat messages come)
-						if (atScrollBottom) {
-							chatMessages.scrollTo(0, chatMessages.scrollHeight)
+							newMessage.updateComplete.then(() => {
+								// If at scroll bottom (we scroll down when new chat messages come)
+								if (atScrollBottom) {
+									chatMessages.scrollTo(0, chatMessages.scrollHeight)
+								}
+							})
 						}
 					}
 					else { // place
@@ -688,8 +554,8 @@
 				}
 				case 17: {// Live chat delete
 					const messageId = data.getUint32(1)
-					for (let channel of Object.values(cMessages)) {
-						for (let messageEl of channel) {
+					for (const channel of cMessages.values()) {
+						for (const messageEl of channel) {
 							if (messageEl.messageId !== messageId) continue
 							channel.splice(channel.indexOf(messageEl), 1)
 							messageEl.remove()
@@ -697,7 +563,29 @@
 					}
 					break
 				}
-				case 18: { // Text capcha
+				case 18: { // Live chat reaction
+					const messageId = data.getUint32(1)
+					const reactorId = data.getUint32(5)
+					const reactionKey = decoder.decode(data.buffer.slice(9))
+					for (const channel of cMessages.values()) {
+						for (const messageEl of channel) {
+							if (messageEl.messageId !== messageId) {
+								continue
+							}
+
+							const currentReactions = messageEl.reactions
+							const reactors = currentReactions?.get(reactionKey) || new Set()
+							if (!reactors.has(reactorId)) {
+								const newReactions = currentReactions ? new Map(currentReactions) : new Map()
+								reactors.add(reactorId)
+								newReactions.set(reactionKey, reactors)
+								messageEl.reactions = newReactions
+							}
+						}
+					}
+					break
+				}
+				case 20: { // Text capcha
 					let textsSize = data.getUint8(1)
 					let texts = decoder.decode(new Uint8Array(data.buffer).slice(2, textsSize + 2)).split("\n")
 					let imageData = new Uint8Array(data.buffer).slice(2 + textsSize)
@@ -724,11 +612,11 @@
 					}
 					break
 				}
-				case 19: { // Math captcha
+				case 21: { // Math captcha
 					console.error("Math captcha not yet supported. Ignoring.")
 					break
 				}
-				case 20: { // Emoji captcha
+				case 22: { // Emoji captcha
 					let emojisSize = data.getUint8(1)
 					let emojis = decoder.decode(new Uint8Array(data.buffer).slice(2, emojisSize + 2)).split("\n")
 					let imageData = new Uint8Array(data.buffer).slice(2 + emojisSize)
@@ -776,13 +664,13 @@
 					}
 					break
 				}
-				case 21: {
+				case 23: {
 					let a=data.getUint32(1),b=5+a,c=data.buffer.slice(5,5+a),f=new Uint8Array(9),u=new DataView(f.buffer)
 					;window.challengeData=new Uint8Array(data.buffer.slice(b));let d=await Object.getPrototypeOf(async function(){}).constructor(atob(decoder.decode(c)))()
-					;delete window.challengeData;u.setUint8(0,21);u.setBigInt64(1,d);call(send,ws,u.buffer);
+					;delete window.challengeData;u.setUint8(0,23);u.setBigInt64(1,d);call(send,ws,u.buffer);
 					break
 				}
-				case 23: { // Turnstile
+				case 24: { // Turnstile
 					const siteKey = decoder.decode(data.buffer.slice(1))
 					const siteVariant = document.documentElement.dataset.variant
 					const turnstileTheme = siteVariant === "dark" ? "dark" : "light"
@@ -794,13 +682,13 @@
 							theme: turnstileTheme,
 							language: lang,
 							callback: function(token) {
-								call(send, ws, encoder.encode("\x17" + token))
+								call(send, ws, encoder.encode("\x18" + token))
 							},
 						})
 					})
 					break
 				}
-				case 24: { // Turnstile success
+				case 25: { // Turnstile success
 					turnstileMenu.removeAttribute("opened")
 					break
 				}
@@ -817,17 +705,17 @@
 				}
 				}
 			}
-			ws.onclose = function(e) {
-				//Something went wrong...
-				CD = null
+			ws.onclose = async function(e) {
 				console.error(e)
+				CD = null
 				if (e.code == 1006 && !sessionStorage.err) {
 					sessionStorage.err = "1"
 					window.location.reload(true)
 				}
-
 				loadingScreen.children[0].src = "images/rplace-offline.png"
 				showLoadingScreen()
+				loadingMessage.hidden = false
+				loadingMessage.textContent = `${await translate("disconnectedFromServer")}: ${e.reason}`
 			}
 
 			let linkKeyRequests = []
@@ -948,6 +836,30 @@
 					return
 				}
 				else if (message.startsWith(":help")) {
+					const newMessage = createLiveChatMessage(0, `
+# Chat styling:
+---
+Text in rplace live chat can be styled using a simplified version of markdown, currently:
+**bold**, *italic*, ||hidden||, __underline__, and ~strikethrough~ text are supported.
+
+### Headers:
+Use # for a large header, ## for medium, and ### for small. Don’t forget to add a space between the leading heading character and your text!
+
+### Separators:
+To create a separator, create a blank line (Shift + Enter on keyboard) and insert a triple dash ---.
+
+
+# Chat commands:
+---
+:vip, :name, :lookup, :getid, :whoplaced
+
+## Usage:
+:command arg1 arg2 arg3
+
+## Example:
+:name zekiah
+(^ Will set your username to 'zekiah')`, 0, ":HELP@RPLACE.LIVE", Date.now())
+					chatMessages.insertAdjacentElement("beforeEnd", newMessage)
 					return
 				}
 
@@ -1019,59 +931,61 @@
 			call(addEventListener, document.body, "keydown", function(e) {
 				if (!e.isTrusted) return
 
-				//"Shift+O" to open overlay menu
-				if (e.key === "O" && e.shiftKey && !("value" in document.activeElement)) {
-					e.preventDefault()
-					overlayMenu.toggleAttribute("opened")
-				}
-				else if (e.key === "/" && !("value" in document.activeElement)) {
-					e.preventDefault()
-					openChatPanel()
-					messageInput.focus()
-				}
-				else if (e.key === "Escape") {
-					// TODO: Not optimal, but it works for now
-					e.preventDefault()
-					modal.style.display = "flex"
-					bg.style.display = "block"
-				}
-				else if (e.key === "=" || e.key == "+") {
-					e.preventDefault()
-					z += 0.02
-					pos()
-				}
-				else if (e.key === "-") {
-					e.preventDefault()
-					z -= 0.02
-					pos()
-				}
-
-				// Move around with arrow keys
-				let moveEaseI = 10
-				let repeatFunc = setInterval(function() {
-					// We use 55 because: 10/55+9/55+8/55+7/55+6/55+5/55+4/55+3/55+2/55+1/55 == 1
-					switch (e.keyCode) {
-					case 37:
-						x -= moveEaseI / 55
-						arrowkeyDown.right = true
-						break //right
-					case 38:
-						y -= moveEaseI / 55
-						arrowkeyDown.up = true
-						break //up
-					case 39:
-						x += moveEaseI / 55
-						arrowkeyDown.left = true
-						break //left
-					case 40:
-						y += moveEaseI / 55
-						arrowkeyDown.down = true
-						break //down
+				// Handle keybindings
+				if (!("value" in document.activeElement)) {
+					//"Shift+O" to open overlay menu
+					if (e.key === "O" && e.shiftKey) {
+						e.preventDefault()
+						overlayMenu.toggleAttribute("opened")
+					}
+					else if (e.key === "/") {
+						e.preventDefault()
+						openChatPanel()
+						messageInput.focus()
+					}
+					else if (e.key === "Escape") {
+						// TODO: Not optimal, but it works for now
+						e.preventDefault()
+						modal.showModal()
+					}
+					else if ((e.key === "=" || e.key == "+")) {
+						e.preventDefault()
+						z += 0.02
+						pos()
+					}
+					else if (e.key === "-") {
+						e.preventDefault()
+						z -= 0.02
+						pos()
 					}
-					pos()
-					moveEaseI--
-					if (moveEaseI <= 0) clearInterval(repeatFunc)
-				}, 16)
+
+					// Move around with arrow keys
+					let moveEaseI = 10
+					let repeatFunc = setInterval(function() {
+						// We use 55 because: 10/55+9/55+8/55+7/55+6/55+5/55+4/55+3/55+2/55+1/55 = 1
+						switch (e.keyCode) {
+						case 37:
+							x -= moveEaseI / 55
+							arrowkeyDown.right = true
+							break //right
+						case 38:
+							y -= moveEaseI / 55
+							arrowkeyDown.up = true
+							break //up
+						case 39:
+							x += moveEaseI / 55
+							arrowkeyDown.left = true
+							break //left
+						case 40:
+							y += moveEaseI / 55
+							arrowkeyDown.down = true
+							break //down
+						}
+						pos()
+						moveEaseI--
+						if (moveEaseI <= 0) clearInterval(repeatFunc)
+					}, 16)
+				}
 
 				//Begin palette commands
 				if (onCooldown || canvasLocked) return
@@ -1104,7 +1018,7 @@
 				canvselect.style.boxShadow= "0px 2px 4px 0px rgb(0 0 0 / 50%)"
 			})
 
-			call(addEventListener, document.body, "touchend", function(e) {
+			call(addEventListener, maincontent, "touchend", function(e) {
 				if (!e.isTrusted) return
 
 				for (let t of e.changedTouches) {
@@ -1222,10 +1136,10 @@
 		}).bind(undefined, WebSocket.prototype.send, addEventListener, btoa.call.bind(btoa.call));
 		WebSocket.prototype.send = function(){this.close()}; document.execCommand = (_) => {window.location.reload(true)};
 	</script>
+	<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2508999262953411" crossorigin="anonymous"></script>
 	<script src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit"></script>
-	<script type="application/javascript" src="virtual-select.min.js"></script>
 	<script type="application/javascript" src="uv.min.js"></script>
-	<script type="application/javascript" src="elements.js?v=6" defer></script>
+	<script type="application/javascript" src="shared.js?v=8"></script>
 	<script type="application/javascript" src="event-timer.js" defer></script>
 	<script type="application/javascript" src="august21-event.js" defer></script>
 	<script type="application/javascript" src="quests.js" defer></script>
@@ -1233,32 +1147,34 @@
 	<script type="application/javascript" src="darkplace.js"></script>
 	<script type="application/javascript" src="canvas-snow.min.js"></script>
 	<script type="application/javascript" src="snowplace.js"></script>
-	<script type="application/javascript" src="shared.js?v=3"></script>
 	<script type="application/javascript" src="tsparticles.confetti.bundle.min.js"></script>
-	<link rel="stylesheet" type="text/css" href="virtual-select.min.css">
+	<script type="module" src="shared-elements.js?v=10" defer></script>
+	<script type="module" src="live-chat-elements.js?v=2" defer></script>
 	<link rel="manifest" href="manifest.json">
 	<meta name="apple-mobile-web-app-capable" content="yes">
 	<link rel="apple-touch-icon" href="favicon.png">
 	<meta name="apple-mobile-web-app-title" content="place">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<link href="style.css?v=351" rel="stylesheet"> <!-- Increment the CSS query, such as ?v=1.x every time CSS is changed in order to force clients to refresh their stylesheets. Otherwise broken CSS may occur-->
+	<meta name="google-adsense-account" content="ca-pub-2508999262953411">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+	<link href="style.css?v=359" rel="stylesheet"> <!-- Increment the CSS query, such as ?v=1.x every time CSS is changed in order to force clients to refresh their stylesheets. Otherwise broken CSS may occur-->
 	<title>place</title>
 	<link rel="icon" type="image/x-icon" href="favicon.png">
-<meta property="og:title" content="r/place 2"/>
-<meta property="og:description" content="There is an empty canvas. You may place a tile upon it, but you must wait to place another. Individually you can create something. Together you can create something more." />
-<meta property="og:image" content="https://preview.redd.it/rreqw9qpy8r81.png?auto=webp&s=f58d371c5505d66439c82de9040dfd99a3685015" />
-<meta name="theme-color" content="#ff4500">
+	<meta property="og:title" content="r/place 2"/>
+	<meta property="og:description" content="There is an empty canvas. You may place a tile upon it, but you must wait to place another. Individually you can create something. Together you can create something more." />
+	<meta property="og:image" content="https://preview.redd.it/rreqw9qpy8r81.png?auto=webp&s=f58d371c5505d66439c82de9040dfd99a3685015" />
+	<meta name="theme-color" content="#ff4500">
 </head>
 	<body>
 		<div id="loadingScreen">
-			<img src="images/rplace-loader.gif" style="position: absolute; width: 128px; height: 128px; z-index: 22;"/>
-			<canvas id="waitingGameCanvas" style="width: 100%; height: 100%; z-index: 21;"></canvas>
+			<canvas id="waitingGameCanvas"></canvas>
+			<img src="images/rplace-loader.gif" alt="rplace.live" class="loading-logo"/>
+			<span id="loadingMessage" class="loading-message" hidden></span>
 			<div id="connproblems">
 				<span translate="connectionProblems">Connection problems?</span>
 				<a onclick="localStorage.clear(); history.pushState(null, '', location.origin)" href translate="tryClickingHere">try clicking here</a>
 				<br>
-				or tweet us
+				<span translate="tweetUs">or tweet us</span>
 				<a href="https://twitter.com/rplacetk">@rplacetk</a>
 			</div>
 		</div>
@@ -1354,9 +1270,11 @@ <h4>Manage:</h4>
 				<div id="modMessageIdForm" class="mod-form">
 					<input type="number" id="modMessageId" title="Message ID" placeholder="Message ID" oninput="
 						let found = null
-						for (let message of cMessages[currentChannel]) { if (message.messageId == this.value) {
-							found = message
-						}}
+						for (let message of cMessages.get(currentChannel)) {
+							if (message.messageId == this.value) {
+								found = message
+							}
+						}
 						modMessagePreview.innerHTML = found?.innerHTML ?? 'Message not found'">
 					<div id="modMessagePreview">Message not found</div>
 				</div>
@@ -1404,24 +1322,12 @@ <h4>Action:</h4>
 					<button style="flex-grow: 1;" onclick="closeChatModerate()">Cancel</button>
 				</div>
 			</div>
-			<div noselect id="place" tabindex="0" onclick="
-				if (initialConnect && CD < Date.now()) {
-					zoomIn()
-					showPalette()
-
-					// Persistent colours on mobile platforms
-					if (PEN != -1) {
-						pok.classList.add('enabled')
-						canvselect.style.background = colours.children[PEN].style.background
-						canvselect.children[0].style.display = 'none'
-						canvselect.style.outline = '8px white solid'
-						canvselect.style.boxShadow = '0px 2px 4px 0px rgb(0 0 0 / 50%)'
-					}
-				}
-				else {
-					AUDIOS.invalid.run()
-				}
-			" translate="connecting">Connecting...</div>
+			<button noselect id="closebtn" class="layout" onclick="
+				modal.close()
+				closeChatPanel()
+				document.body.id = 'out'
+				window.onresize()
+			">...</button>
 			<canvas id="canvas" width="0" height="0" noselect></canvas>
 			<div id="canvparent1" noselect>
 				<img id="edge" height="226" width="290" src="images/snoo-edge.png" />
@@ -1446,9 +1352,27 @@ <h2 id="captchaLabel">Please click the button containing the emoji you see below
 				<a style="text-align: center;" href=".">(generate new captcha)</a>
 				<div id="captchaOptions"><!--clickable captcha answers--></div>
 			</div>
-			<div id="chatbtn" tabindex="0" class="layout" noselect onclick="openChatPanel()">
-				<img class="icon-image" src="svg/chat.svg" style="width:16px; height:21px">
-			</div>
+			<button noselect id="place" onclick="
+				if (initialConnect && CD < Date.now()) {
+					zoomIn()
+					showPalette()
+
+					// Persistent colours on mobile platforms
+					if (PEN != -1) {
+						pok.classList.add('enabled')
+						canvselect.style.background = colours.children[PEN].style.background
+						canvselect.children[0].style.display = 'none'
+						canvselect.style.outline = '8px white solid'
+						canvselect.style.boxShadow = '0px 2px 4px 0px rgb(0 0 0 / 50%)'
+					}
+				}
+				else {
+					AUDIOS.invalid.run()
+				}
+			" translate="connecting">Connecting...</button>
+			<button id="chatbtn" class="layout" noselect onclick="openChatPanel()">
+				<img alt="Chat" class="icon-image" src="svg/chat.svg" style="width:16px; height:21px">
+			</button>
 			<dialog id="popup">
 				<div>
 					<r-close-icon onclick="localStorage.nopopup = Date.now(); popup.close()"></r-close-icon>
@@ -1529,33 +1453,20 @@ <h2>So what now?</h2>
 					</div>
 				</div>
 			</dialog>
-			<div noselect id="helpbtn" tabindex="0" class="layout" onclick="
-				if (modal.style.display == 'flex') {
-					modal.style.display = 'none'
-					bg.style.display = 'none'
+			<button noselect id="helpbtn" class="layout" onclick="
+				if (modal.open) {
+					modal.close()
 				}
 				else {
-					modal.style.display = 'flex'
-					bg.style.display = 'block'
+					modal.showModal()
 				}
 			">
 				<img class="icon-image" src="svg/help.svg">
-			</div>
-			<div noselect id="closebtn" tabindex="0" class="layout" onclick="
-				bg.style.opacity = '0.5'
-				bg.style.display = 'block'
-				closeChatPanel()
-
-				document.body.id = 'out'
-				window.onresize()
-			">...</div>
-			<div id="bg" style="display:none;position:absolute;top:0;left:0;bottom:0;right:0;background:rgba(0,0,0,.4);z-index:6"></div>
-			<div id="modal" style="display:none">
+			</button>
+			<dialog id="modal">
 				<div class="modal-header">
 					<h2>Place</h2>
-					<r-close-icon onclick="
-						modal.style.display='none'
-						bg.style.display='none'"></r-close-icon>
+					<r-close-icon onclick="modal.close()"></r-close-icon>
 				</div>
 				<div class="modal-content" translate="modalAboutContent">
 					There is an empty canvas.<br><br>
@@ -1614,7 +1525,8 @@ <h2>Place</h2>
 								<hr style="opacity: 0.2">
 								<li theme="r/place 2022" variant="dark" effects="darkplace"><span>darkplace.live (April fools)</span></li>
 								<li theme="r/place 2022" variant="" effects="winter"><span>snowplace.live (December 2023)</span></li>
-								<!--<li theme="goldplace" variant=""><span>goldplace.live (August 21st 2024)</span></li>-->
+								<li theme="r/place 2022" variant="merry" effects="winter"><span>merryplace.live (December 2024)</span></li>
+								<!--<li theme="goldplace" variant=""><span>goldplace.live (August 21st 2025)</span></li>-->
 							</ul>
 						</div>
 					</div>
@@ -1626,7 +1538,7 @@ <h2>Place</h2>
 						<img src="svg/place-chat.svg" width="60">
 					</place-chat-button>
 				</div>
-			</div>
+			</dialog>
 			<div id="palette" style="transform: translateY(100%)" noselect>
 				<div style="position: relative;">
 					<div id="canvasLock" style="display: none;">
@@ -1663,16 +1575,15 @@ <h2>Place</h2>
 		</div>
 		<div id="more" ontouchstart="event.stopPropagation()" ontouchend="event.stopPropagation()">
 			<button type="button" id="spaceFiller" onclick="
-				if (document.body.id != 'out')
+				if (document.body.id != 'out') {
 					return
-				bg.style.opacity = '1'
-				bg.style.display = 'none'
+				}
 				document.body.id = ''
 				window.onresize()
 			"></button>
 			<iframe id="postsFrame" src="posts.html" title="posts" onload="resizePostsFrame()" frameborder="0" scrolling="no"></iframe>
 		</div>
-		<div id="chatPanel" ontouchstart="messageInput.blur(); chatContext.style.display = 'none'; channelDropParent.removeAttribute('open')"
+		<div id="chatPanel" ontouchstart="chatContext.style.display = 'none'; channelDropParent.removeAttribute('open')"
 				onclick="chatContext.style.display = 'none'; channelDropParent.removeAttribute('open')">
 			<div id="namePanel">
 				<h2 id="namePanelHeader" translate="nicknameToContinue">Enter a nickname to continue:</h2>
@@ -1688,13 +1599,15 @@ <h4 id="nicknameSubheading" style="color: lightgrey;" translate="pleaseBeRespect
 				</div>
 			</div>
 			<div class="chat-header" noselect>
-				<p style="white-space:nowrap" translate="liveChat" style="display: none;" style="display: none;" class="live-chat-header2">Live Chat:</p>
+				<p style="white-space:nowrap" translate="liveChat" class="live-chat-header2">Live Chat:</p>
 				<h2 style="white-space:nowrap" translate="liveChat" class="live-chat-header1">Live Chat:</h2>
 				<div class="channels-options">
 					<span id="channelDropParent" style="opacity: 1;">
-						<svg class="icon-image" onclick="event.stopPropagation(); channelDropParent.toggleAttribute('open')" title="Change channel" style="vertical-align: bottom;" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
-							<path d="M480-345 240-585l43-43 197 198 197-197 43 43-240 239Z"/>
-						</svg>
+						<button title="Change channel" class="channel-button" onclick="event.stopPropagation(); channelDropParent.toggleAttribute('open')">
+							<svg class="icon-image" style="vertical-align: bottom;" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+								<path d="M480-345 240-585l43-43 197 198 197-197 43 43-240 239Z"/>
+							</svg>	
+						</button>
 						<div id="channelDrop" class="context-menu" ontouchstart="event.stopPropagation()">
 							<ul onclick="
 								let target = event.target
@@ -1713,20 +1626,26 @@ <h2 style="white-space:nowrap" translate="liveChat" class="live-chat-header1">Li
 							"><!--Language channel options--></ul>
 						</div>
 					</span>
-					<span id="channelMine" style="opacity: 0.5;" onclick="switchLanguageChannel(extraLanguage)">
-						<img id="channelMineImg" style="height: 20px; vertical-align:sub"><span id="channelMineName"></span>
-					</span>
-					<span id="channelEn" style="opacity: 0.5;" onclick="switchLanguageChannel('en')">
-						<img src="svg/flag-gb.svg" style="height: 20px; vertical-align:sub">EN
-					</span>
+					<button class="channel-button" onclick="switchLanguageChannel(extraLanguage)">
+						<span id="channelMine" style="opacity: 0.5;">
+							<img id="channelMineImg" style="height: 20px; vertical-align:sub"><span id="channelMineName"></span>
+						</span>	
+					</button>
+					<button class="channel-button" onclick="switchLanguageChannel('en')">
+						<span id="channelEn" style="opacity: 0.5;">
+							<img src="svg/flag-gb.svg" style="height: 20px; vertical-align:sub">EN
+						</span>	
+					</button>
 				</div>
-				<div id="onlinepanel" noselect>
-					<p id="onlineCounter">...</p>
-					<svg id="playerIcon" stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" style="display: inline;">
-						<path d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"></path>
-					</svg>
+				<div class="chat-header-right">
+					<div id="onlinepanel" noselect>
+						<p id="onlineCounter">...</p>
+						<svg id="playerIcon" stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" style="display: inline;">
+							<path d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"></path>
+						</svg>
+					</div>
+					<r-close-icon onclick="closeChatPanel()" class="active"></r-close-icon>
 				</div>
-				<r-close-icon onclick="closeChatPanel()" class="active"></r-close-icon>
 			</div>
 			<div id="chatContext" class="context-menu" style="display:none">
 				<ul>
@@ -1762,10 +1681,11 @@ <h2 style="white-space:nowrap" translate="liveChat" class="live-chat-header1">Li
 					</li>
 				</ul>
 			</div>
-			<a id="ad" target="_blank">
-				<button class="ad-close" onclick="
-					event.preventDefault()
-					ad.style.display = 'none'
+			<r-emoji-panel id="chatReactionsPanel" onclose="this.removeAttribute('open')"></r-emoji-panel>
+			<!-- If google ad hidden by extension, fall back to standard chat ad -->
+			<a id="chatAd" target="_blank">
+				<button class="chat-ad-close" onclick="
+					chatAd.style.display = 'none'
 					localStorage.noad = Date.now()
 					adLabel.style.display = 'block'
 					adLabel.animate([
@@ -1774,9 +1694,15 @@ <h2 style="white-space:nowrap" translate="liveChat" class="live-chat-header1">Li
 					], { duration: 1000, iterations: 1, })
 					setTimeout(() => adLabel.style.display = 'none', 1000)
 				">x</button>
+				<!-- Google ad -->
+				<ins class="adsbygoogle chat-ad-ins"
+					data-ad-client="ca-pub-2508999262953411"
+					data-ad-slot="3701460951"
+					data-ad-format="auto"
+					data-full-width-responsive="true"></ins>
 			</a>
 			<span id="adLabel" style="display: none; opacity: 0; align-self: center;" translate="adHidden">Ad hidden for 14 days!</span>
-			<div id="chatPreviousButton" class="horizontal-labeled-separator" noselect><hr><span>See previous messages</span><hr></div>
+			<button id="chatPreviousButton" type="button" class="horizontal-labeled-separator" noselect><hr><span>See previous messages</span><hr></button>
 			<div id="chatMessages"><!--Live chat messages--></div>
 			<div id="messageTypePanel" class="chat-input-panel" closed>
 				<input type="button" class="messageTypeBtn" title="Use the shortcut 'ctrl+enter' to send quickly" style="left: 5px;" translate="putOnCanvas" value="🫧 Put on canvas">
@@ -1793,7 +1719,7 @@ <h2 style="white-space:nowrap" translate="liveChat" class="live-chat-header1">Li
 			</div>
 			<div style="display: flex; column-gap: 8px; z-index: 1;">
 				<textarea id="messageInput" onclick="openChatPanel()" type="text" placeholder="Enter message..." translate="enterMessage" enterkeyhint="send" maxlength="200"></textarea>
-				<button class="message-options" onclick="messageTypePanel.toggleAttribute('closed')">...</button>
+				<button class="message-options" onclick="updateMessageInputHeight(); messageTypePanel.toggleAttribute('closed')">...</button>
 			</div>
 		</div>
 		<div id="timelapsePanel" noselect style="display: none;">
@@ -1804,9 +1730,8 @@ <h2>Timelapse Tool</h2>
 					<div id="tlSelect" style="position: absolute; left: 0; top: 0; background-color: rgba(0, 200, 250, 0.7); resize: both; overflow: auto;" onmousedown="this.setAttribute('dragging',  true);" onmouseup="this.setAttribute('dragging', false);" onmousemove="tlMouseMove(event)" ondragstart="return false"></div>
 				</img>
 			</div>
-			<div id="tlStartSel" class="virtselect"></div>
-			<div id="tlEndSel" class="virtselect"></div>
-			<!--<select id="tlStartSel" style="width: 100%; margin-bottom: 5px; border-radius: 4px;"> <option value="">Select timelapse start backup</option> </select> <select id="tlEndSel" style="width: 100%; margin-bottom: 5px; border-radius: 4px;"> <option value="">Select timelapse end backup</option> </select>-->
+			<select id="tlStartSel" style="width: 100%; margin-bottom: 5px; border-radius: 4px;"><option value="">Select timelapse start backup</option></select>
+			<select id="tlEndSel" style="width: 100%; margin-bottom: 5px; border-radius: 4px;"><option value="">Select timelapse end backup</option></select>
 			<input id="tlFps" type="number" style="width: 100%; margin-bottom: 10px; border-radius: 0px; box-shadow: none; font-size: 14px; font-family: sans-serif; color: rgba(0,0,0,0.8); border: 1px solid #ddd;" min="1" max="30" placeholder="Desired timelapse framerate" />
 			<div id="tlPlayDir" style="text-align: center;" reverse="true">
 				<span style="font-size: 18px; cursor: pointer; opacity: 0.5;" onclick="this.parentElement.setAttribute('reverse', false); this.style.opacity='1'; this.nextElementSibling.style.opacity='0.5';">Play normally</span> / <span style="font-size: 18px; cursor: pointer;" onclick="this.parentElement.setAttribute('reverse', true); this.style.opacity='1'; this.previousElementSibling.style.opacity='0.5';">Play in reverse</span>
@@ -1837,16 +1762,7 @@ <h2>Timelapse Tool</h2>
 			</div>
 			<div class="progressbar"><!--progress bar--></div>
 		</div>
-
-		<dialog id="questsDialog" class="reddit-modal">
-			<r-close-icon onclick="postRulesDialog.close()" style="position: absolute; top: 10px; right: 10px; z-index: 1;"></r-close-icon>
-			<div style="display: flex; flex-direction: column; padding: 16px; overflow-y: scroll; row-gap: 8px;">
-				<h4>Quest complete! 🥳</h4>
-				<p id="questsDescription"><!--TODO: Flesh this out--></p>
-				<img src="images/trophy.png" style="flex-grow: 1; object-fit: contain;">
-				<button class="reddit-modal-button" onclick="questsDialog.close()">Close</button>
-			</div>
-		</dialog>
+		<iframe id="questsFrame" src="quests-dialog.html" title="Quests" frameborder="0" style="display: none;"></iframe>
 	</body>
 	<script>
 		let PALETTE_USABLE_REGION = { start: 0, end: 32 }
@@ -1921,20 +1837,25 @@ <h4>Quest complete! 🥳</h4>
 			sendPostsFrameMessage("updateDialogTop", dialogTopHeight)
 		}, { passive: true })
 
-		document.body.ontouchstart = function(e) {
+		maincontent.addEventListener("touchstart", function(e) {
+			event.preventDefault()
 			for (let t of e.changedTouches) {
 				if (!touch1) touch1 = t, touchmoved = 15
 				else if (!touch2) touch2 = t
 				else [touch1, touch2] = [touch2, t]
 			}
-		}
+		})
+
+		maincontent.addEventListener("touchend", function(e) {
+			event.preventDefault()
+		})
 
-		document.body.onmousedown = function(e) {
+		maincontent.addEventListener("mousedown", function(e) {
 			moved = 3
 			mouseDown = e.button + 1
-		}
+		})
 
-		document.onmouseup = function(e) {
+		maincontent.addEventListener("mouseup", function(e) {
 			if (e.target != maincontent && !canvparent2.contains(e.target)) {
 				return (moved = 3, mouseDown = 0)
 			}
@@ -1945,7 +1866,7 @@ <h4>Quest complete! 🥳</h4>
 
 			moved = 3
 			mouseDown = 0
-		}
+		})
 
 		let arrowkeyDown = {
 			left: false,
@@ -1974,7 +1895,7 @@ <h4>Quest complete! 🥳</h4>
 		}
 
 		// Essential game variable definitions
-		let x, y, z, board, minZoom;
+		let x=0, y=0, z=0, board=null, minZoom;
 
 		function showLoadingScreen() {
 			loadingScreen.style.opacity = 1
@@ -2109,6 +2030,7 @@ <h4>Quest complete! 🥳</h4>
 						templateImage.style.opacity = +overlayInfo.opacity || 0.8
 						x = overlayInfo.x
 						y = overlayInfo.y
+						z = Math.min(Math.max(z, minZoom), 1)
 						pos()
 						overlayMenu.setAttribute('opened', 'true')
 						break
@@ -2129,7 +2051,7 @@ <h4>Quest complete! 🥳</h4>
 		let mx = 0
 		let my = 0
 
-		document.body.onmousemove = function(e) {
+		maincontent.addEventListener("mousemove", function(e) {
 			lastMouseMove = Date.now()
 			if (e.target != maincontent && !canvparent2.contains(e.target)) {
 				return
@@ -2146,8 +2068,9 @@ <h4>Quest complete! 🥳</h4>
 				pos()
 				clearInterval(anim)
 			}
-		}
-		document.body.onwheel = function(e) {
+		})
+
+		maincontent.addEventListener("wheel", function(e) {
 			if (e.target != maincontent && !canvparent2.contains(e.target)) {
 				return
 			}
@@ -2156,34 +2079,36 @@ <h4>Quest complete! 🥳</h4>
 			x += mx * (d - 1) / z / 50
 			y += my * (d - 1) / z / 50
 			pos()
-		}
+		})
 
 		let idPositionDebounce = false
 		let idPositionTimeout = -1
 		let lastIntX = Math.floor(x)
 		let lastIntY = Math.floor(y)
 
-		function pos() {
-			z = Math.min(Math.max(z, minZoom), 1)
-
-			const right = x - canvas.width + 0.01
-			const left = x
-			const up = y - canvas.height + 0.01
-			const down = y
-
-			if (right >= left) x = 0
-			else if (right > 0) x -= right
-			else if (left < 0) x -= left
-			if (up >= down) y = 0
-			else if (up > 0) y -= up
-			else if (down < 0) y -= down
-			posel.textContent = `(${Math.floor(x)},${Math.floor(y)}) ${z > 0.02 ? Math.round(z*50)/10 : Math.ceil(z*500)/100}x`
-			localStorage.x = Math.floor(x) + 0.5
-			localStorage.y = Math.floor(y) + 0.5
-			localStorage.z = z
+		function pos(newX=x, newY=y, newZ=z) {
+			newX = x = Math.max(Math.min(newX, WIDTH - 1), 0)
+			newY = y = Math.max(Math.min(newY, HEIGHT - 1), 0)
+			newZ = z = Math.min(Math.max(newZ, minZoom), 1)
+
+			const right = newX - canvas.width + 0.01
+			const left = newX
+			const up = newY - canvas.height + 0.01
+			const down = newY
+
+			if (right >= left) newX = 0
+			else if (right > 0) newX -= right
+			else if (left < 0) newX -= left
+			if (up >= down) newY = 0
+			else if (up > 0) newY -= up
+			else if (down < 0) newY -= down
+			posel.textContent = `(${Math.floor(newX)},${Math.floor(newY)}) ${newZ > 0.02 ? Math.round(newZ*50)/10 : Math.ceil(newZ*500)/100}x`
+			localStorage.x = Math.floor(newX) + 0.5
+			localStorage.y = Math.floor(newY) + 0.5
+			localStorage.z = newZ
 			transform()
 
-			const intX = Math.floor(x), intY = Math.floor(y)
+			const intX = Math.floor(newX), intY = Math.floor(newY)
 			if (intX != lastIntX || intY != lastIntY) {
 				clearTimeout(idPositionTimeout)
 				idPosition.style.display = "none"
@@ -2239,37 +2164,40 @@ <h4>Quest complete! 🥳</h4>
 			canvasCtx.fillRect(x, y, 1, 1)
 		}
 
-		document.body.ontouchmove = e => {
-			for (let t of e.changedTouches) {
+		maincontent.addEventListener("touchmove", function(e) {
+			for (let touch of e.changedTouches) {
 				clearInterval(anim)
-				a: if (!touch2 && touch1 && touch1.identifier == t.identifier) {
-					touchmoved -= Math.abs(t.clientY - touch1.clientY) + Math.abs(t.clientX - touch1.clientX)
-					if (e.target != maincontent && !canvparent2.contains(e.target)) break a
-					x -= (t.clientX - touch1.clientX) / (z * 50)
-					y -= (t.clientY - touch1.clientY) / (z * 50)
+				// Single touch move
+				if (!touch2 && touch1 && touch1.identifier == touch.identifier) {
+					touchmoved -= Math.abs(touch.clientY - touch1.clientY) + Math.abs(touch.clientX - touch1.clientX)
+					if (e.target != maincontent && !canvparent2.contains(e.target)) break
+					x -= (touch.clientX - touch1.clientX) / (z * 50)
+					y -= (touch.clientY - touch1.clientY) / (z * 50)
 					pos()
 				}
+				// Multi-touch move
 				else if (touch1 && touch2) {
-					if (e.target != maincontent && !canvparent2.contains(e.target)) break a
-					let touch = touch1.identifier == t.identifier ? touch1 : (touch2.identifier == t.identifier ? touch2 : null)
-					if (!touch) break a
-					let other = touch == touch1 ? touch2 : touch1
-					x -= (t.clientX - touch.clientX) / (z * 50)
-					y -= (t.clientY - touch.clientY) / (z * 50)
-					touchmoved -= Math.abs(t.clientY - touch.clientY) + Math.abs(t.clientX - touch.clientX)
-					let dx = touch.clientX - other.clientX
-					let dy = touch.clientY - other.clientY
-					let a = dx * dx + dy * dy
-					dx = t.clientX - other.clientX
-					dy = t.clientY - other.clientY
-					a = Math.sqrt((dx * dx + dy * dy) / a)
-					z *= a
+					if (e.target != maincontent && !canvparent2.contains(e.target)) break
+					let currentTouch = touch1.identifier == touch.identifier ? touch1 : (touch2.identifier == touch.identifier ? touch2 : null)
+					if (!currentTouch) break
+					let otherTouch = currentTouch == touch1 ? touch2 : touch1
+					x -= (touch.clientX - currentTouch.clientX) / (z * 50)
+					y -= (touch.clientY - currentTouch.clientY) / (z * 50)
+					touchmoved -= Math.abs(touch.clientY - currentTouch.clientY) + Math.abs(touch.clientX - currentTouch.clientX)
+					let dx = currentTouch.clientX - otherTouch.clientX
+					let dy = currentTouch.clientY - otherTouch.clientY
+					let initialDistance = dx * dx + dy * dy
+					dx = touch.clientX - otherTouch.clientX
+					dy = touch.clientY - otherTouch.clientY
+					let scale = Math.sqrt((dx * dx + dy * dy) / initialDistance)
+					z *= scale
 					pos()
 				}
-				if (touch1 && touch1.identifier == t.identifier) touch1 = t
-				else if (touch2 && touch2.identifier == t.identifier) touch2 = t
+				// Update touch points
+				if (touch1 && touch1.identifier == touch.identifier) touch1 = touch
+				else if (touch2 && touch2.identifier == touch.identifier) touch2 = touch
 			}
-		}
+		})
 
 		// Blank default render and canvas size init before we have loaded board
 		setSize(WIDTH, HEIGHT)
@@ -2335,16 +2263,16 @@ <h4>Quest complete! 🥳</h4>
 		mutesvg.innerHTML = muted ? MUTED_SVG : UNMUTED_SVG
 		placeChatButton.children[0].style.opacity = placeChat ? '1' : '0.6'
 
-		setInterval(() => {
+		setInterval(async () => {
 			let left = Math.floor((CD - Date.now()) / 1000)
 			place.innerHTML = initialConnect
 				? CD === null // They have made initial connect
-					? `<span style="color:#f50; white-space: nowrap;">${translate("connectingFail")}</span>` // They connected but now have disconnected
+					? `<span style="color:#f50; white-space: nowrap;">${await translate("connectingFail")}</span>` // They connected but now have disconnected
 					: left > 0
 						? `<svg xmlns="http://www.w3.org/2000/svg" data-name="icons final" viewBox="0 0 20 20" style="height: 1.1rem;vertical-align:top"><path d="M13.558 14.442l-4.183-4.183V4h1.25v5.741l3.817 3.817-.884.884z"></path><path d="M10 19.625A9.625 9.625 0 1119.625 10 9.636 9.636 0 0110 19.625zm0-18A8.375 8.375 0 1018.375 10 8.384 8.384 0 0010 1.625z"></path></svg> ${
 								("" + Math.floor(left/3600)).padStart(2, "0")}:${("" + Math.floor((left / 60)) % 60).padStart(2, "0")}:${("" + left % 60).padStart(2, "0")}` // They are connected + still connected but in cooldown
-						: translate("placeTile") // They are connected + still connected + after cooldown
-				: translate("connecting") // They are yet to connect
+						: await translate("placeTile") // They are connected + still connected + after cooldown
+				: await translate("connecting") // They are yet to connect
 
 			if (CD > Date.now() && !onCooldown) {
 				onCooldown = true
@@ -2463,7 +2391,10 @@ <h4>Quest complete! 🥳</h4>
 		const hash = (text) => text.split("").reduce((hash, char) => (hash * 31 + char.charCodeAt()) >>> 0, 0)
 		let online = 1
 		let extraLanguage = (lang == "en" ? "tr" : lang)
-		let cMessages = { [extraLanguage]: [], en: [] }
+		/** @type {Map<string, LiveChatMessage[]>} */ const cMessages = new Map([
+			[extraLanguage, []],
+			["en", []]
+		])
 		let chatPreviousLoadDebounce = false
 		let chatPreviousAutoLoad = false
 		let currentChannel = lang
@@ -2554,36 +2485,43 @@ <h4>Quest complete! 🥳</h4>
 		}
 
 		function extraChannel(code) {
-			// TODO: Implement if persisting all channels becomes too heavy
-			// delete cMessages[extraLanguage]
 			let info = LANG_INFOS.get(code)
 			channelMineName.innerText = code.toUpperCase()
 			channelMineImg.src = info?.flag
 			channelMineImg.style.display = ((info?.flag) ? "inline" : "none")
 			extraLanguage = code
-			cMessages[code] ||= []
+			cMessages.set(code, cMessages.get(code) || [])
 		}
 
 		function switchLanguageChannel(selected) {
 			channelMine.style.opacity = "0.5"
 			channelEn.style.opacity = "0.5"
-			if (currentChannel != selected) chatCancelReplies()
+			if (currentChannel != selected) {
+				chatCancelReplies()
+			}
 			currentChannel = selected
 			chatMessages.style.direction = (LANG_INFOS.get(selected)?.rtl) ? "rtl" : "ltr"
 
-			if (selected == "en")
+			if (selected == "en") {
 				channelEn.style.opacity = "1"
-			else if (selected == extraLanguage)
+			}
+			else if (selected == extraLanguage) {
 				channelMine.style.opacity = "1"
-
+			}
 			chatMessages.innerHTML = ""
 			// User must ask to load previous at least once for each channel before site
 			// will start auto loading previous chat messages
 			chatPreviousAutoLoad = false
-			if (cMessages[selected]?.length) {
-				for (const el of cMessages[selected]) {
-					chatMessages.appendChild(el)
+			const messageRenderPromises = []
+
+			if (cMessages.get(selected)?.length) {
+				for (const messageEl of cMessages.get(selected)) {
+					messageRenderPromises.push(messageEl.updateComplete)
+					chatMessages.appendChild(messageEl)
 				}
+				Promise.all(messageRenderPromises).then(() => {
+					chatMessages.scrollTo(0, chatMessages.scrollHeight)
+				})
 			}
 			else if (typeof requestLoadChannelPrevious === "function") {
 				// If we don't have any cached messages for this channel, try pre-populate with a few
@@ -2600,7 +2538,7 @@ <h4>Quest complete! 🥳</h4>
 		}
 
 		function chatMentionUser(senderId) {
-			let [start, end] = [messageInput.selectionStart, messageInput.selectionEnd]
+			const [ start, end ] = [ messageInput.selectionStart, messageInput.selectionEnd ]
 			let mentionText = "@"
 			const identifier = intIdNames.get(senderId) || ("#" + senderId)
 			if (typeof identifier === "string") {
@@ -2613,8 +2551,8 @@ <h4>Quest complete! 🥳</h4>
 			messageInput.focus()
 		}
 
-		function chatReply(messageId, senderId) {
-			for (let m of cMessages[currentChannel]) {
+		async function chatReply(messageId, senderId) {
+			for (let m of cMessages.get(currentChannel)) {
 				m.removeAttribute("reply")
 			}
 			currentReply = messageId
@@ -2623,8 +2561,8 @@ <h4>Quest complete! 🥳</h4>
 			messageTypePanel.style.height = "calc(var(--message-input-height) + 92px)"
 			messageInput.focus()
 			messageReplyPanel.removeAttribute("closed")
-			messageReplyLabel.innerText = translate("replyTo") + ": " + (intIdNames.get(senderId) || ("#" + senderId))
-			for (let m of cMessages[currentChannel]) {
+			messageReplyLabel.innerText = await translate("replyTo") + ": " + (intIdNames.get(senderId) || ("#" + senderId))
+			for (let m of cMessages.get(currentChannel)) {
 				if (m["messageId"] == messageId) {
 					m.setAttribute("reply", "true")
 					break
@@ -2633,7 +2571,7 @@ <h4>Quest complete! 🥳</h4>
 		}
 
 		function chatCancelReplies() {
-			for (let m of cMessages[currentChannel]) {
+			for (let m of cMessages.get(currentChannel)) {
 				m.removeAttribute("reply")
 			}
 			currentReply = null
@@ -2745,7 +2683,7 @@ <h4>Quest complete! 🥳</h4>
 			}
 
 			let handled = false
-			for (const [emojiCode, value] of Object.entries(EMOJIS)) {
+			for (const [emojiCode, value] of EMOJIS) {
 				if (comp && emojiCode.startsWith(comp)) {
 					const entryElement = createEmojiEntry(emojiCode)
 					const entryValueText = document.createTextNode(value)
@@ -2769,7 +2707,7 @@ <h4>Quest complete! 🥳</h4>
 					handled = true
 				}
 			}
-			if (!handled) for (const [emojiCode, value] of Object.entries(EMOJIS_CUSTOM)) {
+			if (!handled) for (const [emojiCode, value] of CUSTOM_EMOJIS) {
 				if (comp && emojiCode.startsWith(comp)) {
 					const entryElement = createEmojiEntry(emojiCode)
 					entryElement.appendChild(stringToHtml(value))
@@ -2791,6 +2729,28 @@ <h4>Quest complete! 🥳</h4>
 					handled = true
 				}
 			}
+			if (!handled) for (const [commandCode, value] of COMMANDS) {
+				if (comp && commandCode.startsWith(comp)) {
+					const entryElement = document.createElement("button")
+					entryElement.classList.add("message-emojis-suggestion")
+					entryElement.title = `Use this command in chat :${commandCode} [ARGUMENTS]`
+					const entryLabel = document.createElement("span")
+					entryLabel.textContent = `:${commandCode}`
+					entryElement.appendChild(entryLabel)
+					entryElement.addEventListener("click", function() {
+						messageInput.value = ":" + commandCode
+						closeMessageEmojisPanel()
+					})
+					entryElement.appendChild(stringToHtml(value))
+					messageEmojisPanel.appendChild(entryElement)
+					messageEmojisPanel.removeAttribute("closed")
+				}
+
+				if (messageInput.value.includes(":" + commandCode)) {
+					messageInput.setAttribute("state", "default")
+					handled = true
+				}
+			}
 		}
 
 		function switchGameServer(serverAddress) {
@@ -2892,7 +2852,9 @@ <h4>Quest complete! 🥳</h4>
 			document.documentElement.dataset.variant = variant
 		}
 		const startupThemeSet = DEFAULT_THEMES.get(localStorage.theme || "r/place 2022")
-		theme(startupThemeSet, localStorage.variant, localStorage.effects)
+		// TEMP: Christmas / new years 2024
+		theme(DEFAULT_THEMES.get("r/place 2022"), "merry", "winter")
+		//theme(startupThemeSet, localStorage.variant, localStorage.effects)
 		themeDropName.textContent = "🖌️ " + (localStorage.theme || "r/place 2022")
 
 		// Apply all translations from shared.js
@@ -2923,20 +2885,6 @@ <h4>Quest complete! 🥳</h4>
 				.then((data) => {
 					for (let b of data.split("\n")) backups.push(b)
 				})
-				.then(() => {
-					VirtualSelect.init({
-						ele: '#tlStartSel',
-						placeholder: "Select timelapse start backup",
-						search: true,
-						options: backups,
-					})
-					VirtualSelect.init({
-						ele: '#tlEndSel',
-						placeholder: "Select timelapse end backup",
-						search: true,
-						options: backups,
-					})
-				})
 		}
 
 		let tlTimerStart
@@ -2975,7 +2923,7 @@ <h4>Quest complete! 🥳</h4>
 					tlTimer.innerText = "0.0s"
 				})
 				.catch((e) => {
-					console.log("Timelapse failed, " + e)
+					console.error("Timelapse failed, " + e)
 					tlConfirm.value = "Create"
 					tlConfirm.style.pointerEvents = "auto"
 					clearInterval(tlTimerInterval)
@@ -3004,9 +2952,14 @@ <h4>Quest complete! 🥳</h4>
 		let targetedIntId = null
 		let targetedMsgId = null
 		let currentReply = null
+		let openedChat = false
 
 		function openChatPanel() {
 			chatPanel.setAttribute("open", "true")
+			if (!openedChat) {
+				;(adsbygoogle = window.adsbygoogle || []).push({});
+				openedChat = true
+			}
 			chatPanel.inert = false
 		}
 
@@ -3017,8 +2970,8 @@ <h4>Quest complete! 🥳</h4>
 		}
 		closeChatPanel()
 
-		function onChatContext(ev, senderId, msgId) {
-			ev.preventDefault()
+		async function onChatContext(e, senderId, msgId) {
+			e.preventDefault()
 
 			if (chatContext.style.display == "block") {
 				chatContext.style.display = "none"
@@ -3045,10 +2998,10 @@ <h4>Quest complete! 🥳</h4>
 				targetedMsgId = msgId
 				targetedIntId = senderId
 				chatContext.style.display = "block"
-				mentionUser.children[0].textContent = `${translate("mention")} ${identifier}`
-				replyUser.children[0].textContent = `${translate("replyTo")} ${identifier}`
+				mentionUser.children[0].textContent = `${await translate("mention")} ${identifier}`
+				replyUser.children[0].textContent = `${await translate("replyTo")} ${identifier}`
 				blockUser.children[0].textContent =
-					`${translate(blockedUsers.includes(senderId) ? "unblock" : "block")} ${identifier}`
+					`${await translate(blockedUsers.includes(senderId) ? "unblock" : "block")} ${identifier}`
 
 				if (senderId == intId) {
 					blockUser.style.pointerEvents = "none"
@@ -3061,32 +3014,47 @@ <h4>Quest complete! 🥳</h4>
 					changeMyName.style.display = "none"
 				}
 
-				chatContext.style.left = ev.pageX - chatPanel.offsetLeft + "px"
-				chatContext.style.top = ev.pageY - chatPanel.offsetTop + "px"
+				chatContext.style.left = e.pageX - chatPanel.offsetLeft + "px"
+				chatContext.style.top = e.pageY - chatPanel.offsetTop + "px"
 			}
 		}
 
-		function redirectQueryLocation() {
-			let redirectLocation = ({
-				"?discord": "https://discord.com/invite/xbRrVSXJdZ",
-				"?twitter": "https://twitter.com/rplacetk",
-				"?reddit": "https://www.reddit.com/r/placetk",
-				"?github": "https://github.com/rplacetk",
-				"?telegram": "https://t.me/rplacelive",
-				"?admin": "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
-			})[location.search]
-			if (redirectLocation) {
-				location.replace(redirectLocation)
+		const verifiedAppHash = "f255e4c294a5413cce887407b91062ac162faec4cb1e6e21cdd6e4492fb270f8"
+		async function checkVerifiedAppStatus() {
+			const urlParams = new URLSearchParams(window.location.search);
+			const verifyAppValue = urlParams.get("verify-app")
+			if (!verifyAppValue) {
+				return "none"
 			}
+			const hashedValue = await sha256(verifyAppValue)
+			return hashedValue === verifiedAppHash ?  "valid" : "invalid"
 		}
-		redirectQueryLocation()
-
-		async function blockWebviewLoad() {
-			if (window.location !== window.parent.location || typeof window.Android !== "undefined" || typeof window.Kodular !== "undefined") {
-				window.location.replace("fakeapp.html")
-			}
+		function sha256(str) {
+			const encoder = new TextEncoder()
+			const data = encoder.encode(str)
+			return crypto.subtle.digest("SHA-256", data).then(hashBuffer => {
+				const hashArray = Array.from(new Uint8Array(hashBuffer))
+				return hashArray.map(byte => byte.toString(16).padStart(2, "0")).join("")
+			})
 		}
-		blockWebviewLoad()
+		checkVerifiedAppStatus().then(status => {
+			if (status === "valid") {
+				console.log("Successfully verified rplace.live app");
+			}
+			else {
+				if (window.location !== window.parent.location
+						|| typeof window.Android !== "undefined"
+						|| typeof window.Kodular !== "undefined"
+						|| status == "invalid") {
+					window.location.replace("fakeapp.html")
+					// Block interaction if page redirect was overidden
+					document.body.style.opacity = "0.6"
+					document.body.style.pointerEvents = "none"
+					alert("Error: App failed verification - game is being accessed via an unofficial or unauthorised site or app\n" +
+						"Please report to developers or visit the game online at https://rplace.live")
+				}
+			}
+		})
 
 		// Prompt user if they want to install site as PWA if they press the modal button
 		let pwaPrompter = null
@@ -3102,11 +3070,15 @@ <h4>Quest complete! 🥳</h4>
 		if (!mobile) {
 			function cancelZoomGesture(e) {
 				e.preventDefault()
-				document.body.style.zoom = 1
 			}
-			document.addEventListener("gesturestart", cancelZoomGesture)
-			document.addEventListener("gesturechange", cancelZoomGesture)
-			document.addEventListener("gestureend", cancelZoomGesture)
+			window.addEventListener("wheel", function(e) {
+				if (e.target == maincontent || canvparent2.contains(e.target)) {
+					e.preventDefault()
+				}
+			}, { passive: false })
+			window.addEventListener("gesturestart", cancelZoomGesture)
+			window.addEventListener("gesturechange", cancelZoomGesture)
+			window.addEventListener("gestureend", cancelZoomGesture)
 		}
 
 		setTimeout(() => {
@@ -3115,19 +3087,84 @@ <h4>Quest complete! 🥳</h4>
 			}
 		}, 5000)
 
+		// Ads
 		if (localStorage.noad && Date.now() - localStorage.noad < 1.21e9) { // 14 days
-			ad.style.display = "none"
+			chatAd.style.display = "none"
 		}
 		else {
 			let adI = Math.floor(Math.random() * ADS.length)
 			function cycleAd() {
 				const currentAd = ADS[adI % ADS.length]
-				ad.style.setProperty("--adurl", `url(${currentAd.banners[lang] || currentAd.banners["en"]})`)
-				ad.href = currentAd.url
+				chatAd.style.setProperty("--adurl", `url(${currentAd.banners[lang] || currentAd.banners["en"]})`)
+				chatAd.href = currentAd.url
 				adI++
 			}
 			setInterval(cycleAd, 12e4) // 2 mins
 			cycleAd()
 		}
+
+		window.moduleExports = {
+			...window.moduleExports,
+			get x() {
+				return x
+			},
+			set x(value) {
+				x = value
+			},
+			get y() {
+				return y
+			},
+			set y(value) {
+				y = value
+			},
+			get pos() {
+				return pos
+			},
+			get chatMentionUser() {
+				return chatMentionUser	
+			},
+			get onChatContext() {
+				return onChatContext
+			},
+			get chatReact() {
+				return chatReact
+			},
+			get chatReply() {
+				return chatReply
+			},
+			get chatReport() {
+				return chatReport
+			},
+			get chatModerate() {
+				return chatModerate
+			},
+			get CHAT_COLOURS() {
+				return CHAT_COLOURS
+			},
+			get hash() {
+				return hash
+			},
+			get cMessages() {
+				return cMessages
+			},
+			get chatMessages() { // element
+				return chatMessages
+			},
+			get currentChannel() {
+				return currentChannel
+			},
+			get EMOJIS() {
+				return EMOJIS
+			},
+			get CUSTOM_EMOJIS() {
+				return CUSTOM_EMOJIS
+			},
+			get intIdNames() {
+				return intIdNames
+			},
+			get chatReactionsPanel() {
+				return chatReactionsPanel
+			}
+		}
 	</script>
 </html>
diff --git a/instance.html b/instance.html
index c4d05da9e..21518e99f 100644
--- a/instance.html
+++ b/instance.html
@@ -7,7 +7,7 @@
 	<link rel="stylesheet" href="shared.css?v=1">
 	<link rel="apple-touch-icon" href="favicon.png">
 	<link rel="icon" type="image/x-icon" href="favicon.png">
-	<script type="application/javascript" src="./elements.js"></script>
+	<script type="application/javascript" src="./elements.js?v=7"></script>
 	<script type="application/javascript" src="https://unpkg.com/dataproto@1.0.0/index.js"></script>
 	<style>
 		@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&display=swap');
diff --git a/lit.all.min.js b/lit.all.min.js
new file mode 100644
index 000000000..ff51f2d3c
--- /dev/null
+++ b/lit.all.min.js
@@ -0,0 +1,120 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t=globalThis,s=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,i=Symbol(),e=new WeakMap;class n{constructor(t,s,e){if(this._$cssResult$=!0,e!==i)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=s}get styleSheet(){let t=this.i;const i=this.t;if(s&&void 0===t){const s=void 0!==i&&1===i.length;s&&(t=e.get(i)),void 0===t&&((this.i=t=new CSSStyleSheet).replaceSync(this.cssText),s&&e.set(i,t))}return t}toString(){return this.cssText}}const r=t=>new n("string"==typeof t?t:t+"",void 0,i),o=(t,...s)=>{const e=1===t.length?t[0]:s.reduce(((s,i,e)=>s+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(i)+t[e+1]),t[0]);return new n(e,t,i)},h=(i,e)=>{if(s)i.adoptedStyleSheets=e.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const s of e){const e=document.createElement("style"),n=t.litNonce;void 0!==n&&e.setAttribute("nonce",n),e.textContent=s.cssText,i.appendChild(e)}},c=s?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let s="";for(const i of t.cssRules)s+=i.cssText;return r(s)})(t):t
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */,{is:l,defineProperty:a,getOwnPropertyDescriptor:u,getOwnPropertyNames:d,getOwnPropertySymbols:f,getPrototypeOf:p}=Object,v=globalThis,y=v.trustedTypes,m=y?y.emptyScript:"",b=v.reactiveElementPolyfillSupport,g=(t,s)=>t,w={toAttribute(t,s){switch(s){case Boolean:t=t?m:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t)}catch(t){i=null}}return i}},_=(t,s)=>!l(t,s),S={attribute:!0,type:String,converter:w,reflect:!1,hasChanged:_};Symbol.metadata??=Symbol("metadata"),v.litPropertyMetadata??=new WeakMap;class $ extends HTMLElement{static addInitializer(t){this.o(),(this.l??=[]).push(t)}static get observedAttributes(){return this.finalize(),this.u&&[...this.u.keys()]}static createProperty(t,s=S){if(s.state&&(s.attribute=!1),this.o(),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),e=this.getPropertyDescriptor(t,i,s);void 0!==e&&a(this.prototype,t,e)}}static getPropertyDescriptor(t,s,i){const{get:e,set:n}=u(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t}};return{get(){return e?.call(this)},set(s){const r=e?.call(this);n.call(this,s),this.requestUpdate(t,r,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??S}static o(){if(this.hasOwnProperty(g("elementProperties")))return;const t=p(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(g("finalized")))return;if(this.finalized=!0,this.o(),this.hasOwnProperty(g("properties"))){const t=this.properties,s=[...d(t),...f(t)];for(const i of s)this.createProperty(i,t[i])}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(void 0!==s)for(const[t,i]of s)this.elementProperties.set(t,i)}this.u=new Map;for(const[t,s]of this.elementProperties){const i=this.p(t,s);void 0!==i&&this.u.set(i,t)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){const s=[];if(Array.isArray(t)){const i=new Set(t.flat(1/0).reverse());for(const t of i)s.unshift(c(t))}else void 0!==t&&s.push(c(t));return s}static p(t,s){const i=s.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this.v=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this.m=null,this._()}_(){this.S=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this.$(),this.requestUpdate(),this.constructor.l?.forEach((t=>t(this)))}addController(t){(this.P??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.()}removeController(t){this.P?.delete(t)}$(){const t=new Map,s=this.constructor.elementProperties;for(const i of s.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this.v=t)}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return h(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this.P?.forEach((t=>t.hostConnected?.()))}enableUpdating(t){}disconnectedCallback(){this.P?.forEach((t=>t.hostDisconnected?.()))}attributeChangedCallback(t,s,i){this._$AK(t,i)}C(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor.p(t,i);if(void 0!==e&&!0===i.reflect){const n=(void 0!==i.converter?.toAttribute?i.converter:w).toAttribute(s,i.type);this.m=t,null==n?this.removeAttribute(e):this.setAttribute(e,n),this.m=null}}_$AK(t,s){const i=this.constructor,e=i.u.get(t);if(void 0!==e&&this.m!==e){const t=i.getPropertyOptions(e),n="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:w;this.m=e,this[e]=n.fromAttribute(s,t.type),this.m=null}}requestUpdate(t,s,i){if(void 0!==t){if(i??=this.constructor.getPropertyOptions(t),!(i.hasChanged??_)(this[t],s))return;this.T(t,s,i)}!1===this.isUpdatePending&&(this.S=this.M())}T(t,s,i){this._$AL.has(t)||this._$AL.set(t,s),!0===i.reflect&&this.m!==t&&(this.k??=new Set).add(t)}async M(){this.isUpdatePending=!0;try{await this.S}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this.v){for(const[t,s]of this.v)this[t]=s;this.v=void 0}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t)!0!==i.wrapped||this._$AL.has(s)||void 0===this[s]||this.T(s,this[s],i)}let t=!1;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this.P?.forEach((t=>t.hostUpdate?.())),this.update(s)):this.A()}catch(s){throw t=!1,this.A(),s}t&&this._$AE(s)}willUpdate(t){}_$AE(t){this.P?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}A(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this.S}shouldUpdate(t){return!0}update(t){this.k&&=this.k.forEach((t=>this.C(t,this[t]))),this.A()}updated(t){}firstUpdated(t){}}$.elementStyles=[],$.shadowRootOptions={mode:"open"},$[g("elementProperties")]=new Map,$[g("finalized")]=new Map,b?.({ReactiveElement:$}),(v.reactiveElementVersions??=[]).push("2.0.4");
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const T=globalThis,x=T.trustedTypes,E=x?x.createPolicy("lit-html",{createHTML:t=>t}):void 0,C="$lit$",P=`lit$${Math.random().toFixed(9).slice(2)}$`,A="?"+P,M=`<${A}>`,k=document,U=()=>k.createComment(""),V=t=>null===t||"object"!=typeof t&&"function"!=typeof t,O=Array.isArray,R=t=>O(t)||"function"==typeof t?.[Symbol.iterator],N="[ \t\n\f\r]",L=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,z=/-->/g,j=/>/g,H=RegExp(`>|${N}(?:([^\\s"'>=/]+)(${N}*=${N}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),I=/'/g,D=/"/g,B=/^(?:script|style|textarea|title)$/i,W=t=>(s,...i)=>({_$litType$:t,strings:s,values:i}),Z=W(1),q=W(2),F=W(3),G=Symbol.for("lit-noChange"),J=Symbol.for("lit-nothing"),K=new WeakMap,Y=k.createTreeWalker(k,129);function Q(t,s){if(!O(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==E?E.createHTML(s):s}const X=(t,s)=>{const i=t.length-1,e=[];let n,r=2===s?"<svg>":3===s?"<math>":"",o=L;for(let s=0;s<i;s++){const i=t[s];let h,c,l=-1,a=0;for(;a<i.length&&(o.lastIndex=a,c=o.exec(i),null!==c);)a=o.lastIndex,o===L?"!--"===c[1]?o=z:void 0!==c[1]?o=j:void 0!==c[2]?(B.test(c[2])&&(n=RegExp("</"+c[2],"g")),o=H):void 0!==c[3]&&(o=H):o===H?">"===c[0]?(o=n??L,l=-1):void 0===c[1]?l=-2:(l=o.lastIndex-c[2].length,h=c[1],o=void 0===c[3]?H:'"'===c[3]?D:I):o===D||o===I?o=H:o===z||o===j?o=L:(o=H,n=void 0);const u=o===H&&t[s+1].startsWith("/>")?" ":"";r+=o===L?i+M:l>=0?(e.push(h),i.slice(0,l)+C+i.slice(l)+P+u):i+P+(-2===l?s:u)}return[Q(t,r+(t[i]||"<?>")+(2===s?"</svg>":3===s?"</math>":"")),e]};class tt{constructor({strings:t,_$litType$:s},i){let e;this.parts=[];let n=0,r=0;const o=t.length-1,h=this.parts,[c,l]=X(t,s);if(this.el=tt.createElement(c,i),Y.currentNode=this.el.content,2===s||3===s){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes)}for(;null!==(e=Y.nextNode())&&h.length<o;){if(1===e.nodeType){if(e.hasAttributes())for(const t of e.getAttributeNames())if(t.endsWith(C)){const s=l[r++],i=e.getAttribute(t).split(P),o=/([.?@])?(.*)/.exec(s);h.push({type:1,index:n,name:o[2],strings:i,ctor:"."===o[1]?rt:"?"===o[1]?ot:"@"===o[1]?ht:nt}),e.removeAttribute(t)}else t.startsWith(P)&&(h.push({type:6,index:n}),e.removeAttribute(t));if(B.test(e.tagName)){const t=e.textContent.split(P),s=t.length-1;if(s>0){e.textContent=x?x.emptyScript:"";for(let i=0;i<s;i++)e.append(t[i],U()),Y.nextNode(),h.push({type:2,index:++n});e.append(t[s],U())}}}else if(8===e.nodeType)if(e.data===A)h.push({type:2,index:n});else{let t=-1;for(;-1!==(t=e.data.indexOf(P,t+1));)h.push({type:7,index:n}),t+=P.length-1}n++}}static createElement(t,s){const i=k.createElement("template");return i.innerHTML=t,i}}function st(t,s,i=t,e){if(s===G)return s;let n=void 0!==e?i.U?.[e]:i.N;const r=V(s)?void 0:s._$litDirective$;return n?.constructor!==r&&(n?._$AO?.(!1),void 0===r?n=void 0:(n=new r(t),n._$AT(t,i,e)),void 0!==e?(i.U??=[])[e]=n:i.N=n),void 0!==n&&(s=st(t,n._$AS(t,s.values),n,e)),s}class it{constructor(t,s){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=s}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}O(t){const{el:{content:s},parts:i}=this._$AD,e=(t?.creationScope??k).importNode(s,!0);Y.currentNode=e;let n=Y.nextNode(),r=0,o=0,h=i[0];for(;void 0!==h;){if(r===h.index){let s;2===h.type?s=new et(n,n.nextSibling,this,t):1===h.type?s=new h.ctor(n,h.name,h.strings,this,t):6===h.type&&(s=new ct(n,this,t)),this._$AV.push(s),h=i[++o]}r!==h?.index&&(n=Y.nextNode(),r++)}return Y.currentNode=k,e}R(t){let s=0;for(const i of this._$AV)void 0!==i&&(void 0!==i.strings?(i._$AI(t,i,s),s+=i.strings.length-2):i._$AI(t[s])),s++}}let et=class t{get _$AU(){return this._$AM?._$AU??this.V}constructor(t,s,i,e){this.type=2,this._$AH=J,this._$AN=void 0,this._$AA=t,this._$AB=s,this._$AM=i,this.options=e,this.V=e?.isConnected??!0}get parentNode(){let t=this._$AA.parentNode;const s=this._$AM;return void 0!==s&&11===t?.nodeType&&(t=s.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,s=this){t=st(this,t,s),V(t)?t===J||null==t||""===t?(this._$AH!==J&&this._$AR(),this._$AH=J):t!==this._$AH&&t!==G&&this.L(t):void 0!==t._$litType$?this.I(t):void 0!==t.nodeType?this.j(t):R(t)?this.D(t):this.L(t)}H(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}j(t){this._$AH!==t&&(this._$AR(),this._$AH=this.H(t))}L(t){this._$AH!==J&&V(this._$AH)?this._$AA.nextSibling.data=t:this.j(k.createTextNode(t)),this._$AH=t}I(t){const{values:s,_$litType$:i}=t,e="number"==typeof i?this._$AC(t):(void 0===i.el&&(i.el=tt.createElement(Q(i.h,i.h[0]),this.options)),i);if(this._$AH?._$AD===e)this._$AH.R(s);else{const t=new it(e,this),i=t.O(this.options);t.R(s),this.j(i),this._$AH=t}}_$AC(t){let s=K.get(t.strings);return void 0===s&&K.set(t.strings,s=new tt(t)),s}D(s){O(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let e,n=0;for(const r of s)n===i.length?i.push(e=new t(this.H(U()),this.H(U()),this,this.options)):e=i[n],e._$AI(r),n++;n<i.length&&(this._$AR(e&&e._$AB.nextSibling,n),i.length=n)}_$AR(t=this._$AA.nextSibling,s){for(this._$AP?.(!1,!0,s);t&&t!==this._$AB;){const s=t.nextSibling;t.remove(),t=s}}setConnected(t){void 0===this._$AM&&(this.V=t,this._$AP?.(t))}};class nt{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,s,i,e,n){this.type=1,this._$AH=J,this._$AN=void 0,this.element=t,this.name=s,this._$AM=e,this.options=n,i.length>2||""!==i[0]||""!==i[1]?(this._$AH=Array(i.length-1).fill(new String),this.strings=i):this._$AH=J}_$AI(t,s=this,i,e){const n=this.strings;let r=!1;if(void 0===n)t=st(this,t,s,0),r=!V(t)||t!==this._$AH&&t!==G,r&&(this._$AH=t);else{const e=t;let o,h;for(t=n[0],o=0;o<n.length-1;o++)h=st(this,e[i+o],s,o),h===G&&(h=this._$AH[o]),r||=!V(h)||h!==this._$AH[o],h===J?t=J:t!==J&&(t+=(h??"")+n[o+1]),this._$AH[o]=h}r&&!e&&this.B(t)}B(t){t===J?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"")}}class rt extends nt{constructor(){super(...arguments),this.type=3}B(t){this.element[this.name]=t===J?void 0:t}}class ot extends nt{constructor(){super(...arguments),this.type=4}B(t){this.element.toggleAttribute(this.name,!!t&&t!==J)}}class ht extends nt{constructor(t,s,i,e,n){super(t,s,i,e,n),this.type=5}_$AI(t,s=this){if((t=st(this,t,s,0)??J)===G)return;const i=this._$AH,e=t===J&&i!==J||t.capture!==i.capture||t.once!==i.once||t.passive!==i.passive,n=t!==J&&(i===J||e);e&&this.element.removeEventListener(this.name,this,i),n&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t)}}class ct{constructor(t,s,i){this.element=t,this.type=6,this._$AN=void 0,this._$AM=s,this.options=i}get _$AU(){return this._$AM._$AU}_$AI(t){st(this,t)}}const lt={W:C,q:P,J:A,Z:1,F:X,G:it,K:R,X:st,Y:et,tt:nt,st:ot,it:ht,et:rt,ht:ct},at=T.litHtmlPolyfillSupport;at?.(tt,et),(T.litHtmlVersions??=[]).push("3.2.1");const ut=(t,s,i)=>{const e=i?.renderBefore??s;let n=e._$litPart$;if(void 0===n){const t=i?.renderBefore??null;e._$litPart$=n=new et(s.insertBefore(U(),t),t,void 0,i??{})}return n._$AI(t),n};
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */class dt extends ${constructor(){super(...arguments),this.renderOptions={host:this},this.ot=void 0}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const s=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this.ot=ut(s,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this.ot?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this.ot?.setConnected(!1)}render(){return G}}dt._$litElement$=!0,dt["finalized"]=!0,globalThis.litElementHydrateSupport?.({LitElement:dt});const ft=globalThis.litElementPolyfillSupport;ft?.({LitElement:dt});const pt={_$AK:(t,s,i)=>{t._$AK(s,i)},_$AL:t=>t._$AL};(globalThis.litElementVersions??=[]).push("4.1.1");
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const vt=!1,{Y:yt}=lt,mt=t=>null===t||"object"!=typeof t&&"function"!=typeof t,bt={HTML:1,SVG:2,MATHML:3},gt=(t,s)=>void 0===s?void 0!==t?._$litType$:t?._$litType$===s,wt=t=>null!=t?._$litType$?.h,_t=t=>void 0!==t?._$litDirective$,St=t=>t?._$litDirective$,$t=t=>void 0===t.strings,Tt=()=>document.createComment(""),xt=(t,s,i)=>{const e=t._$AA.parentNode,n=void 0===s?t._$AB:s._$AA;if(void 0===i){const s=e.insertBefore(Tt(),n),r=e.insertBefore(Tt(),n);i=new yt(s,r,t,t.options)}else{const s=i._$AB.nextSibling,r=i._$AM,o=r!==t;if(o){let s;i._$AQ?.(t),i._$AM=t,void 0!==i._$AP&&(s=t._$AU)!==r._$AU&&i._$AP(s)}if(s!==n||o){let t=i._$AA;for(;t!==s;){const s=t.nextSibling;e.insertBefore(t,n),t=s}}}return i},Et=(t,s,i=t)=>(t._$AI(s,i),t),Ct={},Pt=(t,s=Ct)=>t._$AH=s,At=t=>t._$AH,Mt=t=>{t._$AP?.(!1,!0);let s=t._$AA;const i=t._$AB.nextSibling;for(;s!==i;){const t=s.nextSibling;s.remove(),s=t}},kt=t=>{t._$AR()},Ut={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},Vt=t=>(...s)=>({_$litDirective$:t,values:s});class Ot{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,s,i){this.nt=t,this._$AM=s,this.rt=i}_$AS(t,s){return this.update(t,s)}update(t,s){return this.render(...s)}}
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const Rt=(t,s)=>{const i=t._$AN;if(void 0===i)return!1;for(const t of i)t._$AO?.(s,!1),Rt(t,s);return!0},Nt=t=>{let s,i;do{if(void 0===(s=t._$AM))break;i=s._$AN,i.delete(t),t=s}while(0===i?.size)},Lt=t=>{for(let s;s=t._$AM;t=s){let i=s._$AN;if(void 0===i)s._$AN=i=new Set;else if(i.has(t))break;i.add(t),Ht(s)}};function zt(t){void 0!==this._$AN?(Nt(this),this._$AM=t,Lt(this)):this._$AM=t}function jt(t,s=!1,i=0){const e=this._$AH,n=this._$AN;if(void 0!==n&&0!==n.size)if(s)if(Array.isArray(e))for(let t=i;t<e.length;t++)Rt(e[t],!1),Nt(e[t]);else null!=e&&(Rt(e,!1),Nt(e));else Rt(this,t)}const Ht=t=>{2==t.type&&(t._$AP??=jt,t._$AQ??=zt)};class It extends Ot{constructor(){super(...arguments),this._$AN=void 0}_$AT(t,s,i){super._$AT(t,s,i),Lt(this),this.isConnected=t._$AU}_$AO(t,s=!0){t!==this.isConnected&&(this.isConnected=t,t?this.reconnected?.():this.disconnected?.()),s&&(Rt(this,t),Nt(this))}setValue(t){if($t(this.nt))this.nt._$AI(t,this);else{const s=[...this.nt._$AH];s[this.rt]=t,this.nt._$AI(s,this,0)}}disconnected(){}reconnected(){}}
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */class Dt{constructor(t){this.ct=t}disconnect(){this.ct=void 0}reconnect(t){this.ct=t}deref(){return this.ct}}class Bt{constructor(){this.lt=void 0,this.ut=void 0}get(){return this.lt}pause(){this.lt??=new Promise((t=>this.ut=t))}resume(){this.ut?.(),this.lt=this.ut=void 0}}
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */class Wt extends It{constructor(){super(...arguments),this.dt=new Dt(this),this.ft=new Bt}render(t,s){return G}update(t,[s,i]){if(this.isConnected||this.disconnected(),s===this.vt)return G;this.vt=s;let e=0;const{dt:n,ft:r}=this;return(async(t,s)=>{for await(const i of t)if(!1===await s(i))return})(s,(async t=>{for(;r.get();)await r.get();const o=n.deref();if(void 0!==o){if(o.vt!==s)return!1;void 0!==i&&(t=i(t,e)),o.commitValue(t,e),e++}return!0})),G}commitValue(t,s){this.setValue(t)}disconnected(){this.dt.disconnect(),this.ft.pause()}reconnected(){this.dt.reconnect(this),this.ft.resume()}}const Zt=Vt(Wt),qt=Vt(
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+class extends Wt{constructor(t){if(super(t),2!==t.type)throw Error("asyncAppend can only be used in child expressions")}update(t,s){return this.ot=t,super.update(t,s)}commitValue(t,s){0===s&&kt(this.ot);const i=xt(this.ot);Et(i,t)}}),Ft=t=>wt(t)?t._$litType$.h:t.strings,Gt=Vt(class extends Ot{constructor(t){super(t),this.yt=new WeakMap}render(t){return[t]}update(t,[s]){const i=gt(this.bt)?Ft(this.bt):null,e=gt(s)?Ft(s):null;if(null!==i&&(null===e||i!==e)){const s=At(t).pop();let e=this.yt.get(i);if(void 0===e){const t=document.createDocumentFragment();e=ut(J,t),e.setConnected(!1),this.yt.set(i,e)}Pt(e,[s]),xt(e,void 0,s)}if(null!==e){if(null===i||i!==e){const s=this.yt.get(e);if(void 0!==s){const i=At(s).pop();kt(t),xt(t,void 0,i),Pt(t,[i])}}this.bt=s}else this.bt=void 0;return this.render(s)}}),Jt=(t,s,i)=>{for(const i of s)if(i[0]===t)return(0,i[1])();return i?.()},Kt=Vt(
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+class extends Ot{constructor(t){if(super(t),1!==t.type||"class"!==t.name||t.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return" "+Object.keys(t).filter((s=>t[s])).join(" ")+" "}update(t,[s]){if(void 0===this.gt){this.gt=new Set,void 0!==t.strings&&(this.wt=new Set(t.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in s)s[t]&&!this.wt?.has(t)&&this.gt.add(t);return this.render(s)}const i=t.element.classList;for(const t of this.gt)t in s||(i.remove(t),this.gt.delete(t));for(const t in s){const e=!!s[t];e===this.gt.has(t)||this.wt?.has(t)||(e?(i.add(t),this.gt.add(t)):(i.remove(t),this.gt.delete(t)))}return G}}),Yt={},Qt=Vt(class extends Ot{constructor(){super(...arguments),this._t=Yt}render(t,s){return s()}update(t,[s,i]){if(Array.isArray(s)){if(Array.isArray(this._t)&&this._t.length===s.length&&s.every(((t,s)=>t===this._t[s])))return G}else if(this._t===s)return G;return this._t=Array.isArray(s)?Array.from(s):s,this.render(s,i)}}),Xt=t=>t??J
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */;function*ts(t,s){const i="function"==typeof s;if(void 0!==t){let e=-1;for(const n of t)e>-1&&(yield i?s(e):s),e++,yield n}}
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const ss=Vt(class extends Ot{constructor(){super(...arguments),this.key=J}render(t,s){return this.key=t,s}update(t,[s,i]){return s!==this.key&&(Pt(t),this.key=s),i}}),is=Vt(
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+class extends Ot{constructor(t){if(super(t),3!==t.type&&1!==t.type&&4!==t.type)throw Error("The `live` directive is not allowed on child or event bindings");if(!$t(t))throw Error("`live` bindings can only contain a single expression")}render(t){return t}update(t,[s]){if(s===G||s===J)return s;const i=t.element,e=t.name;if(3===t.type){if(s===i[e])return G}else if(4===t.type){if(!!s===i.hasAttribute(e))return G}else if(1===t.type&&i.getAttribute(e)===s+"")return G;return Pt(t),s}});
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+function*es(t,s){if(void 0!==t){let i=0;for(const e of t)yield s(e,i++)}}
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */function*ns(t,s,i=1){const e=void 0===s?0:t;s??=t;for(let t=e;i>0?t<s:s<t;t+=i)yield t}
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const rs=()=>new os;class os{}const hs=new WeakMap,cs=Vt(class extends It{render(t){return J}update(t,[s]){const i=s!==this.ct;return i&&void 0!==this.ct&&this.St(void 0),(i||this.$t!==this.Tt)&&(this.ct=s,this.xt=t.options?.host,this.St(this.Tt=t.element)),J}St(t){if(this.isConnected||(t=void 0),"function"==typeof this.ct){const s=this.xt??globalThis;let i=hs.get(s);void 0===i&&(i=new WeakMap,hs.set(s,i)),void 0!==i.get(this.ct)&&this.ct.call(this.xt,void 0),i.set(this.ct,t),void 0!==t&&this.ct.call(this.xt,t)}else this.ct.value=t}get $t(){return"function"==typeof this.ct?hs.get(this.xt??globalThis)?.get(this.ct):this.ct?.value}disconnected(){this.$t===this.Tt&&this.St(void 0)}reconnected(){this.St(this.Tt)}}),ls=(t,s,i)=>{const e=new Map;for(let n=s;n<=i;n++)e.set(t[n],n);return e},as=Vt(class extends Ot{constructor(t){if(super(t),2!==t.type)throw Error("repeat() can only be used in text expressions")}Et(t,s,i){let e;void 0===i?i=s:void 0!==s&&(e=s);const n=[],r=[];let o=0;for(const s of t)n[o]=e?e(s,o):o,r[o]=i(s,o),o++;return{values:r,keys:n}}render(t,s,i){return this.Et(t,s,i).values}update(t,[s,i,e]){const n=At(t),{values:r,keys:o}=this.Et(s,i,e);if(!Array.isArray(n))return this.Ct=o,r;const h=this.Ct??=[],c=[];let l,a,u=0,d=n.length-1,f=0,p=r.length-1;for(;u<=d&&f<=p;)if(null===n[u])u++;else if(null===n[d])d--;else if(h[u]===o[f])c[f]=Et(n[u],r[f]),u++,f++;else if(h[d]===o[p])c[p]=Et(n[d],r[p]),d--,p--;else if(h[u]===o[p])c[p]=Et(n[u],r[p]),xt(t,c[p+1],n[u]),u++,p--;else if(h[d]===o[f])c[f]=Et(n[d],r[f]),xt(t,n[u],n[d]),d--,f++;else if(void 0===l&&(l=ls(o,f,p),a=ls(h,u,d)),l.has(h[u]))if(l.has(h[d])){const s=a.get(o[f]),i=void 0!==s?n[s]:null;if(null===i){const s=xt(t,n[u]);Et(s,r[f]),c[f]=s}else c[f]=Et(i,r[f]),xt(t,n[u],i),n[s]=null;f++}else Mt(n[d]),d--;else Mt(n[u]),u++;for(;f<=p;){const s=xt(t,c[p+1]);Et(s,r[f]),c[f++]=s}for(;u<=d;){const t=n[u++];null!==t&&Mt(t)}return this.Ct=o,Pt(t,c),G}}),us="important",ds=" !"+us,fs=Vt(class extends Ot{constructor(t){if(super(t),1!==t.type||"style"!==t.name||t.strings?.length>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(t){return Object.keys(t).reduce(((s,i)=>{const e=t[i];return null==e?s:s+`${i=i.includes("-")?i:i.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${e};`}),"")}update(t,[s]){const{style:i}=t.element;if(void 0===this.Pt)return this.Pt=new Set(Object.keys(s)),this.render(s);for(const t of this.Pt)null==s[t]&&(this.Pt.delete(t),t.includes("-")?i.removeProperty(t):i[t]=null);for(const t in s){const e=s[t];if(null!=e){this.Pt.add(t);const s="string"==typeof e&&e.endsWith(ds);t.includes("-")||s?i.setProperty(t,s?e.slice(0,-11):e,s?us:""):i[t]=e}}return G}}),ps=Vt(
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+class extends Ot{constructor(t){if(super(t),2!==t.type)throw Error("templateContent can only be used in child bindings")}render(t){return this.At===t?G:(this.At=t,document.importNode(t.content,!0))}});class vs extends Ot{constructor(t){if(super(t),this.bt=J,2!==t.type)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(t){if(t===J||null==t)return this.Mt=void 0,this.bt=t;if(t===G)return t;if("string"!=typeof t)throw Error(this.constructor.directiveName+"() called with a non-string value");if(t===this.bt)return this.Mt;this.bt=t;const s=[t];return s.raw=s,this.Mt={_$litType$:this.constructor.resultType,strings:s,values:[]}}}vs.directiveName="unsafeHTML",vs.resultType=1;const ys=Vt(vs);
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */class ms extends vs{}ms.directiveName="unsafeSVG",ms.resultType=2;const bs=Vt(ms),gs=t=>!mt(t)&&"function"==typeof t.then,ws=1073741823;
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */class _s extends It{constructor(){super(...arguments),this.kt=ws,this.Ut=[],this.dt=new Dt(this),this.ft=new Bt}render(...t){return t.find((t=>!gs(t)))??G}update(t,s){const i=this.Ut;let e=i.length;this.Ut=s;const n=this.dt,r=this.ft;this.isConnected||this.disconnected();for(let t=0;t<s.length&&!(t>this.kt);t++){const o=s[t];if(!gs(o))return this.kt=t,o;t<e&&o===i[t]||(this.kt=ws,e=0,Promise.resolve(o).then((async t=>{for(;r.get();)await r.get();const s=n.deref();if(void 0!==s){const i=s.Ut.indexOf(o);i>-1&&i<s.kt&&(s.kt=i,s.setValue(t))}})))}return G}disconnected(){this.dt.disconnect(),this.ft.pause()}reconnected(){this.dt.reconnect(this),this.ft.resume()}}const Ss=Vt(_s);
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */function $s(t,s,i){return t?s(t):i?.(t)}
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const Ts=Symbol.for(""),xs=t=>{if(t?.r===Ts)return t?._$litStatic$},Es=t=>({_$litStatic$:t,r:Ts}),Cs=(t,...s)=>({_$litStatic$:s.reduce(((s,i,e)=>s+(t=>{if(void 0!==t._$litStatic$)return t._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${t}. Use 'unsafeStatic' to pass non-literal values, but\n            take care to ensure page security.`)})(i)+t[e+1]),t[0]),r:Ts}),Ps=new Map,As=t=>(s,...i)=>{const e=i.length;let n,r;const o=[],h=[];let c,l=0,a=!1;for(;l<e;){for(c=s[l];l<e&&void 0!==(r=i[l],n=xs(r));)c+=n+s[++l],a=!0;l!==e&&h.push(r),o.push(c),l++}if(l===e&&o.push(s[e]),a){const t=o.join("$$lit$$");void 0===(s=Ps.get(t))&&(o.raw=o,Ps.set(t,s=o)),i=h}return t(s,...i)},Ms=As(Z),ks=As(q);
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+window.litDisableBundleWarning||console.warn("Lit has been loaded from a bundle that combines all core features into a single file. To reduce transfer size and parsing cost, consider using the `lit` npm package directly in your project.");export{It as AsyncDirective,Wt as AsyncReplaceDirective,n as CSSResult,Ot as Directive,dt as LitElement,Ut as PartType,$ as ReactiveElement,bt as TemplateResultType,vs as UnsafeHTMLDirective,_s as UntilDirective,pt as _$LE,lt as _$LH,h as adoptStyles,qt as asyncAppend,Zt as asyncReplace,Gt as cache,Jt as choose,Kt as classMap,kt as clearPart,rs as createRef,o as css,w as defaultConverter,Vt as directive,At as getCommittedValue,c as getCompatibleStyle,St as getDirectiveClass,Qt as guard,Z as html,Xt as ifDefined,xt as insertPart,wt as isCompiledTemplateResult,_t as isDirectiveResult,mt as isPrimitive,vt as isServer,$t as isSingleExpression,gt as isTemplateResult,ts as join,ss as keyed,Cs as literal,is as live,es as map,F as mathml,G as noChange,_ as notEqual,J as nothing,ns as range,cs as ref,Mt as removePart,ut as render,as as repeat,Et as setChildPartValue,Pt as setCommittedValue,Ms as staticHtml,ks as staticSvg,fs as styleMap,s as supportsAdoptingStyleSheets,q as svg,ps as templateContent,r as unsafeCSS,ys as unsafeHTML,bs as unsafeSVG,Es as unsafeStatic,Ss as until,$s as when,As as withStatic};
+//# sourceMappingURL=lit-all.min.js.map
diff --git a/live-chat-elements.js b/live-chat-elements.js
new file mode 100644
index 000000000..30ee8e6d6
--- /dev/null
+++ b/live-chat-elements.js
@@ -0,0 +1,369 @@
+import { LitElement, html, styleMap, unsafeHTML, until } from "./lit.all.min.js"
+// @ts-expect-error Hack to access window globals from module script
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+var { cMessages, currentChannel, chatMessages, x, y, pos, chatMentionUser, onChatContext, chatReply, chatReport, chatModerate, chatReactionsPanel, CHAT_COLOURS, hash, chatReact, EMOJIS, CUSTOM_EMOJIS, intIdNames } = window.moduleExports
+
+class LiveChatMessage extends LitElement {
+	static properties = {
+		messageId: { type: Number, reflect: true, attribute: "messageid" },
+		senderId: { type: String, reflect: true, attribute: "senderid" },
+		name: { type: String, reflect: true, attribute: "name" },
+		sendDate: { type: Number, reflect: true, attribute: "senddate" },
+		repliesTo: { type: Number, reflect: true, attribute: "repliesto" },
+		content: { type: String, reflect: true, attribute: "content" },
+		reactions: { type: Object, attribute: false },
+		openedReactionDetails: { type: String, attribute: false },
+		class: { reflect: true }
+	}
+	
+	constructor() {
+		super()
+		this.messageId = null
+		this.senderId = null
+		this.name = null
+		this.sendDate = null
+		/** @type {LiveChatMessage|null} */ this.repliesTo = null
+		this.content = null
+		/** @type {Map<string, Set<number>>|null} */ this.reactions = null
+		this.replyingMessage = null
+		this.openedReactionDetails = ""
+		this.addEventListener("contextmenu", this.#handleContextMenu)
+	}
+
+	connectedCallback() {
+		super.connectedCallback()
+		this.classList.add("message")
+	}
+
+	// @ts-expect-error Remove shadow DOM by using element itself as the shadowroot
+	createRenderRoot() {
+		return this
+	}
+
+	/**
+	 * @param {{ messageId: any; txt: any; senderId: any; name: any; sendDate: any; repliesTo?: null | undefined; }} data
+	 */
+	fromMessage(data) {
+		const { messageId, txt, senderId, name, sendDate, repliesTo = null } = data
+		this.messageId = messageId
+		this.senderId = senderId
+		this.name = name
+		this.sendDate = sendDate
+		this.repliesTo = repliesTo
+		this.content = txt
+	}
+
+	/**
+	 * @param {Map<any, any>} changedProperties
+	 */
+	willUpdate(changedProperties) {
+		if (changedProperties.has("repliesTo") && this.repliesTo !== null) {
+			this.replyingMessage = this.#findReplyingMessage()
+		}
+		if (changedProperties.has("class")) {
+			this.classList.add("message")
+		}
+	}
+
+	/**
+	 * @param {string} txt Raw message text
+	 * @returns {any} Lit HTML output
+	 */
+	#parseMessage(txt) {
+		if (!txt) {
+			return null
+		}
+
+		// Sanitize and parse markdown
+		let parsedHTML = markdownParse(sanitise(txt))
+	
+		// Handle emojis
+		parsedHTML = parsedHTML.replaceAll(/:([a-z-_]{0,16}):/g, (full, source) => {
+			const isLargeEmoji = parsedHTML.match(new RegExp(`:${source}:`, "g")).length === 1 &&
+				!parsedHTML.replace(full, "").trim()
+			const size = isLargeEmoji ? "48" : "16"
+			return `<img src="custom_emojis/${source}.png" alt=":${source}:" title=":${source}:" width="${size}" height="${size}">`;
+		})
+	
+		// Handle coordinates and generate final lit HTML
+		const formattedMessage = this.#parseCoordinates(parsedHTML)
+		return html`${formattedMessage}`
+	}
+
+	/**
+	 * 
+	 * @param {string} parsedHTML 
+	 * @returns {any} Lit HTML fragment
+	 */
+	#parseCoordinates(parsedHTML) {
+		const regex = /(\d+),\s*(\d+)/g // Matches coordinate patterns like "10, 20"
+		const parts = []
+		let lastIndex = 0
+
+		for (const match of parsedHTML.matchAll(regex)) {
+			const [fullMatch, x, y] = match
+			const startIndex = match.index
+
+			// Push the text before the match
+			if (startIndex > lastIndex) {
+				parts.push(unsafeHTML(parsedHTML.slice(lastIndex, startIndex)))
+			}
+
+			const href = `${window.location.pathname}?x=${x}&y=${y}`
+			parts.push(html`<a href="${href}" @click=${(e) => 
+				this.#handleCoordinateClick(e, parseInt(x, 10), parseInt(y, 10))}>${x},${y}</a>`)
+
+			lastIndex = startIndex + fullMatch.length
+		}
+
+		// Push any text following matches
+		if (lastIndex < parsedHTML.length) {
+			parts.push(unsafeHTML(parsedHTML.slice(lastIndex)))
+		}
+
+		return html`${parts}`
+	}
+
+	#findReplyingMessage() {
+		if (!cMessages.has(currentChannel)) {
+			return { name: "[ERROR]", content: "Channel not found", fake: true }
+		}
+		
+		const message = cMessages.get(currentChannel).find(msg => msg.messageId === this.repliesTo)
+		translate("messageNotFound").then(translated => message.content = translated) // TODO: Sus
+		return message || {
+			name: "[?????]",
+			content: "...",
+			fake: true
+		}
+	}
+	
+	#scrollToReply() {
+		if (!this.replyingMessage || this.replyingMessage.fake || !chatMessages) {
+			return
+		}
+
+		this.replyingMessage.setAttribute("highlight", "true")
+		setTimeout(() => this.replyingMessage.removeAttribute("highlight"), 500)
+		this.replyingMessage.scrollIntoView({ behavior: "smooth", block: "nearest" })
+	}
+
+	/**
+	 * @param {MouseEvent} e
+	 * @param {number} newX 
+	 * @param {number} newY 
+	 */
+	#handleCoordinateClick(e, newX, newY) {
+		e.preventDefault()
+		const params = new URLSearchParams(window.location.search)
+		params.set("x", x)
+		params.set("y", y)
+		const newUrl = `${window.location.pathname}?${params.toString()}`
+		window.history.pushState({}, "", newUrl)
+		pos(newX, newY)
+	}
+
+	#handleNameClick() {
+		if (this.messageId > 0) {
+			chatMentionUser(this.senderId)
+		}
+	}
+	
+	#handleContextMenu(e) {
+		e.preventDefault()
+		if (this.messageId > 0) {
+			onChatContext(e, this.senderId, this.messageId)
+		}
+	}
+	
+	#handleReply() {
+		chatReply(this.messageId, this.senderId)
+	}
+	
+	#handleReport() {
+		chatReport(this.messageId, this.senderId)
+	}
+	
+	#handleModerate() {
+		chatModerate("delete", this.senderId, this.messageId, this)
+	}
+
+	#handleReact() {
+		// Open react panel singleton element
+		chatReactionsPanel.setAttribute("open", "true")
+		
+		const bounds = this.getBoundingClientRect()
+		const panelHeight = chatReactionsPanel.offsetHeight
+		const viewportHeight = window.innerHeight
+		const topPosition = Math.min(bounds.y, viewportHeight - panelHeight - 8) // Ensure it stays on screen
+	
+		// Apply position
+		chatReactionsPanel.style.right = "8px"
+		chatReactionsPanel.style.top = `${Math.max(8, topPosition)}px` // Ensure it doesn't go off the top
+	
+		chatReactionsPanel.onemojiselection = (e) => {
+			this.#onReactEmojiSelected(e)
+			chatReactionsPanel.removeAttribute("open")
+		}
+	}
+
+	#onReactEmojiSelected(e) {
+		const { key } = e.detail
+		chatReact(this.messageId, key)
+	}
+	
+	#renderName() {
+		const nameStyle = {
+			color: this.messageId === 0 ? undefined : CHAT_COLOURS[hash("" + this.senderId) & 7]
+		}
+		
+		return html`
+			<span 
+				class="name ${this.messageId === 0 ? "rainbow-glow" : ""}" style=${styleMap(nameStyle)}
+				title=${new Date(this.sendDate * 1000).toLocaleString()}
+				@click=${this.#handleNameClick}>[${this.name || ("#" + this.senderId)}]</span>`
+	}
+	
+	#renderReply() {
+		if (!this.repliesTo || !this.replyingMessage) {
+			return null
+		}
+		
+		return html`
+			<p class="reply" @click=${this.#scrollToReply}>
+				↪️ ${this.replyingMessage.name} ${this.replyingMessage.content}
+			</p>`
+	}
+	
+	#renderActions() {
+		if (this.messageId <= 0) {
+			return null
+		}
+
+		const renderActionButton = async (src, titleKey, clickHandler) => {
+			const title = await translate(titleKey)
+			return html`
+				<img class="action-button" src="${src}"
+					title="${title}" tabindex="0" @click="${clickHandler}">
+			`
+		}
+
+		return html`
+			<div class="actions">
+				${until(renderActionButton("svg/reply-action.svg", "replyTo", this.#handleReply), html`<span>...</span>`)}
+				${until(renderActionButton("svg/react-action.svg", "addReaction", this.#handleReact), html`<span>...</span>`)}
+				${until(renderActionButton("svg/report-action.svg", "report", this.#handleReport), html`<span>...</span>`)}
+				${localStorage.vip?.startsWith("!") ? until(renderActionButton("svg/moderate-action.svg", "Moderation options", this.#handleModerate), html`<span>Loading...</span>`) : null}
+			</div>`
+	}
+
+	#renderReactions() {
+		if (this.reactions == null) {
+			return null
+		}
+
+		return html`
+			<ul class="reactions">
+				${this.reactions.entries().map(([emojiKey, reactors]) => {
+					let emojiEl = null
+					if (EMOJIS.has(emojiKey)) {
+						emojiEl = html`<span class="emoji ${this.openedReactionDetails === emojiKey ? "expanded" : ""}">${EMOJIS.get(emojiKey)}</span>`
+					}
+					else if (CUSTOM_EMOJIS.has(emojiKey)) {
+						emojiEl = html`<img src="custom_emojis/${emojiKey}.png" class="emoji ${this.openedReactionDetails === emojiKey ? "expanded" : ""}" alt=":${emojiKey}:" title=":${emojiKey}:" width="18" height="18">`
+					}
+					if (!emojiEl) {
+						return null
+					}
+					return html`
+						<li class="reaction ${this.openedReactionDetails == emojiKey ? "expanded" : ""}">
+							<details class="reaction-details" ?open=${this.openedReactionDetails === emojiKey} @toggle=${(e) => {
+								if (e.target.open) {
+									this.openedReactionDetails = emojiKey
+								}
+								else if (this.openedReactionDetails === emojiKey) {
+									this.openedReactionDetails = ""
+								}
+							}}>
+								<summary>
+									<div class="emoji-container">
+										${emojiEl}
+										${this.openedReactionDetails == emojiKey ? html`<p>:${emojiKey}:</p>` : null}
+									</div>
+								</summary>
+								<div class="reaction-body">
+									<hr>
+									<h3>Added by:</h3>
+									<ul class="reactors">
+										${reactors.entries().map(([reactorId]) => html`
+											<li class="reactor" title=${"User ID: #" + reactorId}>
+												${intIdNames.has(reactorId)
+													? intIdNames.get(reactorId)
+													: "#" + reactorId}
+											</li>`)}
+									</ul>
+								</div>
+							</details>
+						</li>`
+				})}
+			</ul>
+		`
+	}
+		
+	render() {
+		return html`
+			${this.#renderReply()}
+			${this.#renderName()}
+			<span>${this.#parseMessage(this.content)}</span>
+			${this.#renderReactions()}
+			${this.#renderActions()}`
+	}
+}
+customElements.define("r-live-chat-message", LiveChatMessage)
+
+class CreatePostContent extends HTMLElement {
+	#fileThumbnail
+	#deleteButton
+	#deleteEvent
+	#ondelete
+
+	constructor() {
+		super()
+		this.file = null
+		this.#deleteEvent = new Event("delete")
+		this.ondelete = null
+		const _this = this
+		this.#fileThumbnail = document.createElement("img")
+		this.#deleteButton = document.createElement("button")
+		this.#deleteButton.onclick = function() {
+			_this.dispatchEvent(_this.#deleteEvent)
+		}
+		this.#deleteButton.innerHTML = `
+			<svg viewBox="0 0 20 20" style="fill: white;" xmlns="http://www.w3.org/2000/svg" height="16">
+				<path d="M18.442 2.442l-.884-.884L10 9.116 2.442 1.558l-.884.884L9.116 10l-7.558 7.558.884.884L10 10.884l7.558 7.558.884-.884L10.884 10l7.558-7.558z" class=""></path>
+			</svg>`
+	}
+
+	get ondelete() {
+		return this.#ondelete
+	}
+
+	set ondelete(value) {
+		if (this.#ondelete) {
+			this.removeEventListener("delete", this.#ondelete)
+		}
+		this.addEventListener("delete", value)
+		this.#ondelete = value
+	}
+
+	connectedCallback() {
+		this.appendChild(this.#fileThumbnail)
+		this.appendChild(this.#deleteButton)
+	}
+
+	setFile(fileObject) {
+		this.file = fileObject
+		this.#fileThumbnail.src = window.URL.createObjectURL(this.file)
+	}
+}
+customElements.define("r-create-post-content", CreatePostContent)
\ No newline at end of file
diff --git a/migration.sh b/migration.sh
index 1a13e8027..69499b5d2 100755
--- a/migration.sh
+++ b/migration.sh
@@ -1,95 +1,90 @@
 #!/bin/bash
 if [ "$#" -ne 1 ]; then
-  echo "Usage: $0 <database_file>"
-  exit 1
+    echo "Usage: $0 <database_file>"
+    exit 1
 fi
 
 db_file="$1"
 
-execute_migration() {
-    local description="$1"
-    local sql="$2"
-
-    read -p "$description '$db_file'. Do you want to proceed? (y/n): " confirm
+confirm_action() {
+    local prompt="$1"
+    read -p "$prompt (y/n): " confirm
     if [ "$confirm" != "y" ]; then
-      echo "Migration aborted."
-      exit 1
+        echo "Action aborted."
+        exit 1
     fi
+}
 
-    echo "Executing migration..."
+run_sql() {
+    local sql="$1"
     if ! sqlite3 "$db_file" <<< "$sql"; then
-      echo "Migration failed."
-      exit 1
+        echo "SQL execution failed."
+        exit 1
     fi
-    echo "Migration completed successfully."
 }
 
-migration_041123() {
-    local description="This migration as of 04/11/23 adds the UserVips, LiveChatDeletions tables and deletionId column to LiveChatMessages."
-    local sql="
-    BEGIN;
-    -- Add 'deletionId' to LiveChatMessages
-    ALTER TABLE LiveChatMessages ADD COLUMN deletionId INTEGER;
-
-    -- Create LiveChatDeletions table
-    CREATE TABLE IF NOT EXISTS LiveChatDeletions (
-        deletionId INTEGER PRIMARY KEY,
-        moderatorIntId INTEGER NOT NULL,
-        reason TEXT,
-        deletionDate INTEGER,
-        FOREIGN KEY (messageId) REFERENCES LiveChatMessages(messageId),
-        FOREIGN KEY (moderatorIntId) REFERENCES Users(intId)
-    );
+execute_migration() {
+    local description="$1"
+    local sql="$2"
 
-    -- Create UserVips table
-    CREATE TABLE IF NOT EXISTS UserVips (
-        userIntId INTEGER NOT NULL,
-        keyHash TEXT NOT NULL,
-        lastUsed INTEGER,
-        FOREIGN KEY(userIntId) REFERENCES Users(intId)
-    );
+    confirm_action "$description '$db_file'. Do you want to proceed?"
+    
+    echo "Executing migration..."
+    run_sql "BEGIN;"
+    run_sql "$sql"
 
-    COMMIT;
-    "
+    confirm_action "Migration completed, commit?"
+    
+    if ! run_sql "COMMIT;"; then
+        echo "Commit failed."
+        exit 1
+    fi
 
-    execute_migration "$description" "$sql"
+    echo "Changes committed successfully"
 }
 
-migration_200624() {
-    local description="This migration as of 20/06/24 adds userAgent column to KnownIps and a Linkages table."
-    local sql="
-    BEGIN;
-    -- Add 'userAgent' to KnownIps
-    ALTER TABLE KnownIps ADD COLUMN userAgent TEXT;
-
-    -- Create Linkages table
-    CREATE TABLE IF NOT EXISTS Linkages (
-        userIntId INTEGER UNIQUE,
-        accountId INTEGER,
-        linkDate INTEGER,
-        FOREIGN KEY (userIntId) REFERENCES Users(intId)
-    );
+migrations=(
+    "04/11/2023:This migration as of 04/11/23 adds the UserVips, LiveChatDeletions tables and deletionId column to LiveChatMessages.:\
+    ALTER TABLE LiveChatMessages ADD COLUMN deletionId INTEGER;\
+    CREATE TABLE IF NOT EXISTS LiveChatDeletions (\
+        deletionId INTEGER PRIMARY KEY,\
+        moderatorIntId INTEGER NOT NULL,\
+        reason TEXT,\
+        deletionDate INTEGER,\
+        FOREIGN KEY (messageId) REFERENCES LiveChatMessages(messageId),\
+        FOREIGN KEY (moderatorIntId) REFERENCES Users(intId)\
+    );\
+    CREATE TABLE IF NOT EXISTS UserVips (\
+        userIntId INTEGER NOT NULL,\
+        keyHash TEXT NOT NULL,\
+        lastUsed INTEGER,\
+        FOREIGN KEY(userIntId) REFERENCES Users(intId)\
+    );"
 
-    COMMIT;
-    "
-
-    execute_migration "$description" "$sql"
-}
+    "20/06/2024:This migration as of 20/06/24 adds userAgent column to KnownIps and a Linkages table.:\
+    ALTER TABLE KnownIps ADD COLUMN userAgent TEXT;\
+    CREATE TABLE IF NOT EXISTS Linkages (\
+        userIntId INTEGER UNIQUE,\
+        accountId INTEGER,\
+        linkDate INTEGER,\
+        FOREIGN KEY (userIntId) REFERENCES Users(intId)\
+    );"
+)
 
 echo "Please choose a migration to execute:"
-echo "1) Migration for 04/11/23"
-echo "2) Migration for 20/06/24"
+for i in "${!migrations[@]}"; do
+    migration_date=$(echo "${migrations[i]}" | cut -d':' -f1)
+    echo "$((i + 1))) Migration for $migration_date"
+done
+
 read -p "Enter the number of the migration you want to execute: " choice
+if ! [[ "$choice" =~ ^[0-9]+$ ]] || (( choice < 1 || choice > ${#migrations[@]} )); then
+    echo "Invalid choice."
+    exit 1
+fi
 
-case $choice in
-    1)
-        migration_041123
-        ;;
-    2)
-        migration_200624
-        ;;
-    *)
-        echo "Specified migration doesn't exist"
-        exit 1
-        ;;
-esac
\ No newline at end of file
+migration_data="${migrations[$((choice - 1))]}"
+migration_description=$(echo "$migration_data" | cut -d':' -f2)
+migration_sql=$(echo "$migration_data" | cut -d':' -f3)
+
+execute_migration "$migration_description" "$migration_sql"
diff --git a/misc-page.css b/misc-page.css
new file mode 100644
index 000000000..c13ac9965
--- /dev/null
+++ b/misc-page.css
@@ -0,0 +1,44 @@
+body {
+	background-color: #dae0e6;
+	margin: 0;
+	font-family: 'IBM Plex Sans', sans-serif;
+	box-sizing: border-box;
+}
+header {
+	background-color: white;
+	margin: 0;
+	padding: 8px;
+	border-bottom: 1px solid #EDEFF1;
+	display: flex;
+	column-gap: 8px;
+	height: 64px;
+}
+header h1 {
+	margin: 0;
+	align-self: center;
+}
+section.reddit-cards-container {
+	display: flex;flex-direction: column;align-items: center;
+	margin: 8px;
+}
+section.reddit-cards-container > article {
+	background-color: white;
+	border-radius: 4px;
+	border: 1px solid #EDEFF1;
+	display: flex;column-gap: 16px;
+	width: min(100%, 1000px);
+	margin-bottom: 8px;
+}
+section.reddit-cards-container > article:hover {
+	border: 1px solid #afb2b4;
+}
+section.reddit-cards-container > article > div:nth-child(1) {
+	background-color: #F7F9FA;
+	width: 32px;
+	padding: 8px;
+}
+section.reddit-cards-container > article > div:nth-child(2) {
+	flex-direction: column;
+	display: flex;
+	padding: 4px;
+}
\ No newline at end of file
diff --git a/newboard.sh b/newboard.sh
deleted file mode 100755
index 714f2c6a9..000000000
--- a/newboard.sh
+++ /dev/null
@@ -1,13 +0,0 @@
-#!/bin/bash
-#This script will attempt to generate a nwe board (canvas) and accompanying configuration file.
-if [ -z "$1" ] || [-z "$2" ] || [ -z "$3" ]
-then
-    echo -e "\x1b[31mPlease provide arguments for canvas width, height, and cooldown, e.g './newboard.sh 400 400 2'"
-    exit 0
-fi
-
-sudo systemctl stop place
-node -e "fs=require('fs'); fs.writeFileSync('place', new Uint8Array(process.argv[2]*process.argv[3]).fill(31)); fs.unlinkSync('change'); fs.writeFileSync('config.json',JSON.stringify({WIDTH:process.argv[2]>>>0,HEIGHT:process.argv[3]>>>0,COOLDOWN:+process.argv[4]||10e3,PALETTE_SIZE:+process.argv[5]||32, USE_GIT: true, CAPTCHA: true, USE_CLOUDFLARE: false}))" $0 $1 $2
-sudo systemctl start place
-
-echo -e "\x1b[32mCompleted! Make sure to edit config.json to configure the server settings before your first run."
\ No newline at end of file
diff --git a/package.json b/package.json
index d80451089..a734124ff 100644
--- a/package.json
+++ b/package.json
@@ -5,8 +5,9 @@
   "author": "rplace.live",
   "dependencies": {
     "@datastructures-js/queue": "^4.2.3",
+    "@types/sha256": "^0.2.2",
     "basic-repl": "^2.2.2",
-    "bun-types": "^1.1.15",
+    "bun-types": "^1.1.36",
     "cookie": "^0.6.0",
     "fastest-levenshtein": "^1.0.16",
     "fs.promises.exists": "^1.1.4",
@@ -16,7 +17,7 @@
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
-    "eslint": "^8.57.0",
+    "eslint": "^8.57.1",
     "eslint-plugin-jsdoc": "^46.10.1",
     "eslint-plugin-node": "^11.1.0",
     "@types/bun": "latest"
diff --git a/padchanges.sh b/padchanges.sh
deleted file mode 100644
index 0bec67fb5..000000000
--- a/padchanges.sh
+++ /dev/null
@@ -1,6 +0,0 @@
-#!/bin/bash
-#WARNING: Script only designed to be used on official rplace.tk initial canvas, do not run without modifications if you intend to use for your own solution.
-sudo push
-sudo systemctl stop place
-node -e "fs=require('fs'); let {WIDTH, HEIGHT, PALETTE_SIZE, PALETTE, COOLDOWN, USE_GIT} = JSON.parse(fs.readFile('./config.json')); let CHANGES = fs.readFile('change'); CHANGES=Buffer.concat(CHANGES,Buffer.of(WIDTH*HEIGHT-CHANGES.length))"
-sudo systemctl start place
\ No newline at end of file
diff --git a/posts-elements.js b/posts-elements.js
new file mode 100644
index 000000000..db1f68307
--- /dev/null
+++ b/posts-elements.js
@@ -0,0 +1,517 @@
+import { LitElement, html, unsafeHTML } from "./lit.all.min.js"
+
+// @ts-expect-error Hack to access window globals from module script
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+var { DEFAULT_AUTH, markdownParse, sanitise, cachedFetch } = window.moduleExports
+const fuzzyNumberFormat = new Intl.NumberFormat(navigator.language, { notation: "compact" })
+
+
+class Post extends LitElement {
+	static properties = {
+		title: { type: String, attribute: "title" },
+		description: { type: String, attribute: "description" },
+		showVotes: { 
+			type: Boolean, 
+			attribute: "novotes", 
+			converter: {
+				fromAttribute: (value) => value !== "true",
+				toAttribute: (value) => value ? "false" : "true"
+			}
+		},
+		coverImageUrl: { type: String, attribute: "coverimageurl" },
+		hidden: { type: Boolean, attribute: "hidden" },
+		authorName: { type: String, attribute: "authorname" },
+		authorImageUrl: { type: String, attribute: "authorimageurl" },
+		showAuthor: { type: Boolean },
+		showAuthorTooltip: { type: Boolean },
+		creationDate: { type: Object, attribute: "creationdate" },
+		showContents: { type: Boolean },
+		upvotes: { type: Number, state: true, attribute: "upvotes" },
+		downvotes: { type: Number, state: true, attribute: "downvotes" },
+		contentUrls: { type: Array, state: true, attribute: "contenturls" },
+	}
+
+	constructor() {
+		super()
+		// Sources
+		this.post = null
+		this.profile = null
+		this.canvasUser = null
+		this.authorType = ""
+		// Reactive props
+		this.title = ""
+		this.description = ""
+		this.coverImageUrl = null
+		this.hidden = false
+		this.authorName = ""
+		this.authorImageUrl = "images/rplace.png"
+		this.showAuthor = false
+		this.creationDate = new Date()
+		this.showContents = true
+		this.showVotes = true
+		this.upvotes = 0
+		this.downvotes = 0
+		this.contentUrls = []
+		this.showAuthorTooltip = false
+	}
+
+	// @ts-expect-error Disable shadow DOM to inherit global CSS
+	createRenderRoot() {
+		return this
+	}
+
+	render() {
+		return html`
+			${this.coverImageUrl ? this.#renderCoverImage() : ""}
+			<div id="body" class="body">
+				<div id="header" class="header">
+					${this.showAuthor ? this.#renderAuthorContainer() : ""}
+				</div>
+				<div id="main" class="main ${this.showAuthor ? "authored" : ""}">
+					<div id="title" class="title">${this.title}</div>
+					<p id="description" class="description">${unsafeHTML(markdownParse(sanitise(this.description)))}</p>
+					${this.showContents ? this.#renderContents() : ""}
+				</div>
+				${this.hidden ? this.#renderHiddenButton() : ""}
+				${this.showVotes ? this.#renderVotes() : ""}
+			</div>`
+	}
+
+	#renderAuthorContainer() {
+		return html`
+			<div class="author-container" @mouseenter=${() => this.showAuthorTooltip = true} @mouseleave=${() => this.showAuthorTooltip = false}>
+				<img src="${this.authorImageUrl}" class="author-image" width="28" height="28">
+				<a class="author-name" href="#">
+					<span>Posted by ${this.authorName}${this.showAuthorTooltip ? this.#renderAuthorTooltip() : ""}</span>
+				</a>
+				<span>·</span>
+				<span class="creation-date">
+					${this.creationDate.toLocaleString()}
+				</span>
+			</div>`
+	}
+
+	#renderHiddenButton() {
+		return html`
+			<button class="hider" @click=${() => this.hidden = false}>
+				Post contains sensitive content. Click to show
+			</button>`
+	}
+
+	#renderCoverImage() {
+		return html`<img src="${this.coverImageUrl}" class="cover-image">`
+	}
+
+	#renderVotes() {
+		return html`<r-votes .upvotes=${this.upvotes} .downvotes=${this.downvotes}></r-votes>`
+	}
+
+	#renderContents() {
+		return html`<r-post-contents .contentUrls=${this.contentUrls}></r-post-contents>`
+	}
+
+	#renderAuthorTooltip() {
+		let chatName = "", creationDate = 0, pixelsPlaced = 0, badges = [], lastJoined = 0, playTimeSeconds = 0, userIntId = 0
+		if (this.authorType === "account") {
+			chatName = this.profile.chatName
+			creationDate = this.profile.creationDate
+			pixelsPlaced = this.profile.pixelsPlaced
+			badges = this.profile.badges	
+			lastJoined = this.profile.lastJoined
+			playTimeSeconds = this.profile.playTimeSeconds
+		}
+		else if (this.authorType === "canvasuser") {
+			chatName = this.canvasUser.chatName
+			creationDate = this.canvasUser.creationDate
+			pixelsPlaced = this.canvasUser.pixelsPlaced
+			badges = this.canvasUser.badges
+			lastJoined = this.canvasUser.lastJoined
+			playTimeSeconds = this.canvasUser.playTimeSeconds
+			userIntId = this.canvasUser.userIntId
+		}
+
+		return html `<r-user-tooltip .type=${this.authorType} .chatName=${chatName} .creationDate=${creationDate}
+			.pixelsPlaced=${pixelsPlaced} .badges=${badges} .lastJoined=${lastJoined} .playTimeSeconds=${playTimeSeconds}
+			.userIntId=${userIntId}></r-user-tooltip>`
+	}
+
+	async fromPost(fromPost) {
+		const AUTHOR_CACHE_EXPIRY = 2.592e8 // 3 days
+		
+		// Set basic post details
+		this.post = fromPost
+		this.title = fromPost.title
+		this.description = fromPost.description
+		this.upvotes = fromPost.upvotes
+		this.downvotes = fromPost.downvotes
+		
+		// Handle account or canvas user
+		if (fromPost.accountId) {
+			const profileObject = await cachedFetch(
+				"profiles", 
+				fromPost.accountId,
+				`${localStorage.auth || DEFAULT_AUTH}/profiles/${fromPost.accountId}`, 
+				AUTHOR_CACHE_EXPIRY
+			)
+			
+			if (profileObject === null) {
+				console.error(`Could not load account profile ${fromPost.accountId}`)
+				return
+			}
+			
+			this.authorType = "account"
+			this.profile = profileObject
+			this.authorName = profileObject.username
+			this.authorImageUrl = "images/rplace.png"
+			this.showAuthor = true
+		} else if (fromPost.canvasUserId) {
+			const canvasUserObject = await cachedFetch(
+				"users", 
+				fromPost.canvasUserId,
+				`${localStorage.auth || DEFAULT_AUTH}/instances/users/${fromPost.canvasUserId}`, 
+				AUTHOR_CACHE_EXPIRY
+			)
+			
+			if (canvasUserObject === null) {
+				console.error(`Could not load canvas user ${fromPost.canvasUserId}`)
+				return
+			}
+			
+			this.authorType = "canvasuser"
+			this.canvasUser = canvasUserObject
+			this.authorName = canvasUserObject.chatName || `#${canvasUserObject.userIntId}`
+			this.authorImageUrl = "images/rplace.png"
+			this.showAuthor = true
+		}
+		
+		// Set creation date
+		this.creationDate = new Date(fromPost.creationDate)
+		
+		// Handle contents
+		const contentUrls = fromPost.contents.map(
+			(content) => `${localStorage.auth || DEFAULT_AUTH}/posts/contents/${content.id}`
+		)
+		
+		if (contentUrls.length > 0) {
+			this.contentUrls = contentUrls
+		}
+	}
+}
+customElements.define("r-post", Post)
+
+class PostContents extends LitElement {
+	static properties = {
+		contentUrls: { type: Array, attribute: "contenturls" }
+	}
+
+	constructor() {
+		super()
+		this.contentUrls = []
+	}
+
+	// @ts-expect-error Disable shadow DOM to inherit global CSS
+	createRenderRoot() {
+		return this
+	}
+
+	render() {
+		return html`
+			<dialog class="reddit-modal">
+				<div class="dialog-header">
+					<h4>Viewing image </h4>
+					<a id="dialog-reference" href="#"></a>
+					<r-close-icon @click=${this.#closeDialog}></r-close-icon>
+				</div>
+				<img id="dialog-img" />
+			</dialog>
+			<div class="contents-album" style=${this.#getGridStyle()}>
+				${this.contentUrls.map((contentUrl, index) => this.#renderImage(contentUrl, index))}
+			</div>`
+	}
+
+	#getGridStyle() {
+		switch (this.contentUrls.length) {
+			case 1:
+				return "grid-template-columns: 1fr; grid-template-rows: 1fr;"
+			case 2:
+				return "grid-template-columns: 1fr 1fr; grid-template-rows: 1fr;"
+			case 3:
+				return "grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;"
+			case 4:
+				return "grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;"
+			default:
+				return ""
+		}
+	}
+
+	#renderImage(contentUrl, index) {
+		const gridColumnStyle = this.contentUrls.length === 3 && index === 2 
+			? "grid-column: 1 / span 2;" 
+			: ""
+
+		return html`
+			<img loading="lazy" src="${contentUrl}" 
+				style="${gridColumnStyle}" @click=${() => this.#openDialog(contentUrl)}>`
+	}
+
+	#openDialog(contentUrl) {
+		const dialogReference = this.querySelector('#dialog-reference')
+		const dialogImg = this.querySelector('#dialog-img')
+		const dialog = this.querySelector('dialog')
+
+		dialogReference.textContent = "(Download original)"
+		dialogReference.href = contentUrl
+		dialogImg.src = contentUrl
+		dialog.showModal()
+	}
+
+	#closeDialog() {
+		const dialog = this.querySelector("dialog")
+		dialog.close()
+	}
+}
+customElements.define("r-post-contents", PostContents)
+
+class UserTooltip extends LitElement {
+	static properties = {
+		type: { type: String },
+		chatName: { type: String, attribute: "chatname" },
+		creationDate: { type: Number, attribute: "creationdate" },
+		pixelsPlaced: { type: Number, attribute: "pixelsplaced" },
+		badges: { type: Array, attribute: "badges" },
+		lastJoined: { type: Number, attribute: "lastjoined" },
+		playTimeSeconds: { type: Number, attribute: "playtimeseconds" },
+		userIntId: { type: Number, attribute: "userintid" }
+	}
+
+	constructor() {
+		super()
+		this.type = ""
+		this.chatName = "..."
+		this.creationDate = 0
+		this.pixelsPlaced = 0
+		this.badges = []
+		this.lastJoined = 0
+		this.playTimeSeconds = 0
+		this.userIntId = 0
+	}
+
+	// @ts-expect-error Disable shadow DOM to inherit global CSS
+	createRenderRoot() {
+		return this
+	}
+
+	render() {
+		let userIdentifier = this.chatName || (this.userIntId ? `#${this.userIntId}` : "...")
+		
+		let playTime = this.playTimeSeconds
+		let playTimeUnit = "Seconds played"
+		
+		if (playTime > 3600) {
+			playTime = Math.floor(playTime / 3600)
+			playTimeUnit = "Hours played"
+		}
+		else if (playTime > 60) {
+			playTime = Math.floor(playTime / 60)
+			playTimeUnit = "Minutes played"
+		}
+
+		const userDate = this.type === "account" 
+			? `Joined on ${new Date(this.creationDate).toLocaleString()}`
+			: `Last joined ${new Date(this.lastJoined).toLocaleString()}`
+
+		const secondInfoValue = this.type === "account" 
+			? this.badges.length 
+			: fuzzyNumberFormat.format(playTime)
+
+		const secondInfoDescription = this.type === "account" 
+			? "User badges" 
+			: playTimeUnit
+
+		return html`
+			<div class="user-tooltip-header">
+				<img src="images/rplace.png" width="32">
+				<h2 id="userName">${userIdentifier}</h2>
+			</div>
+			<span id="userDate">${userDate}</span>
+			<hr>
+			<div class="user-tooltip-grid">
+				<h1 id="userInfo1">${fuzzyNumberFormat.format(this.pixelsPlaced)}</h1>
+				<h1 id="userInfo2">${secondInfoValue}</h1>
+				<span id="userInfo1Description">Pixels placed</span>
+				<span id="userInfo2Description">${secondInfoDescription}</span>
+			</div>`
+	}
+
+	fromAccount(profile) {
+		this.type = "account"
+		this.chatName = profile.chatName
+		this.creationDate = profile.creationDate
+		this.pixelsPlaced = profile.pixelsPlaced
+		this.badges = profile.badges
+	}
+
+	fromCanvasUser(canvasUser) {
+		this.type = "canvasuser"
+		this.chatName = canvasUser.chatName
+		this.userIntId = canvasUser.userIntId
+		this.lastJoined = canvasUser.lastJoined
+		this.pixelsPlaced = canvasUser.pixelsPlaced
+		this.playTimeSeconds = canvasUser.playTimeSeconds
+	}
+}
+customElements.define("r-user-tooltip", UserTooltip)
+
+class CreatePostContentsPreview extends HTMLElement {
+	#contents
+	#maxContents
+	#uploadLabel
+	#elementItems
+	#contentsContainer
+
+	constructor() {
+		super()
+		this.#maxContents = 4
+		this.#elementItems = new Map()
+		this.#contents = new Set()
+		this.#uploadLabel = document.createElement("span")
+		this.#uploadLabel.textContent = "Content upload:"
+		this.#contentsContainer = document.createElement("div")
+	}
+
+	addContent(file) {
+		if (this.#contents.size >= this.#maxContents) {
+			alert("Error: Can't attach more than 4 files")
+			return
+		}
+		if (file.size > 5e6) {
+			alert("Error: Attachment size can't be more than 5mb")
+			return
+		}
+		this.#contents.add(file)
+		if (this.#elementItems.size == 0) {
+			this.insertBefore(this.#uploadLabel, this.#contentsContainer)
+			this.style.height = "72px"
+		}
+		const itemEl = document.createElement("r-create-post-content")
+		this.#contentsContainer.appendChild(itemEl)
+		itemEl.setFile(file)
+		const _this = this
+		itemEl.ondelete = function(e) {
+			_this.deleteContent(e.target.file)
+		}
+		this.#elementItems.set(file, itemEl)
+	}
+
+	deleteContent(file) {
+		if (!this.#contents.delete(file)) {
+			return
+		}
+
+		if (this.#elementItems.size == 1) {
+			this.style.height = "36px"
+			this.removeChild(this.#uploadLabel)
+		}
+		const itemEl = this.#elementItems.get(file)
+		if (itemEl) {
+			this.#contentsContainer.removeChild(itemEl)
+			this.#elementItems.delete(file)
+		}
+	}
+
+	clearContents() {
+		this.#contents.clear()
+		this.#elementItems.clear()
+		for (const item of this.#contentsContainer.children) {
+			this.#contentsContainer.removeChild(item)
+		}
+	}
+
+	connectedCallback() {
+		this.appendChild(this.#contentsContainer)
+	}
+}
+customElements.define("r-post-contents-preview", CreatePostContentsPreview)
+
+class Votes extends LitElement {
+	static properties = {
+		upvotes: { type: Number, attribute: "upvotes" },
+		downvotes: { type: Number, attribute: "downvotes" },
+		voted: { type: String, attribute: "voted" }
+	}
+
+	constructor() {
+		super()
+		/** @type {number | null} */ this.upvotes = null
+		/** @type {number | null} */ this.downvotes = null
+		this.voted = ""
+	}
+
+	// @ts-expect-error Disable shadow DOM to inherit global CSS
+	createRenderRoot() {
+		return this
+	}
+
+	get votes() {
+		return (this.upvotes !== null && this.downvotes !== null) 
+			? this.upvotes - this.downvotes 
+			: "..."
+	}
+
+	render() {
+		const upSelected = this.voted === "up"
+		const downSelected = this.voted === "down"
+		
+
+		return html`
+			${upSelected
+				? html`
+					<svg class="arrow voted" height="24" width="24" viewBox="0 0 16 16">
+						<path clip-rule="evenodd" d="M8.44857 0.401443C8.3347 0.273284 8.17146 0.199951 8.00002 0.199951C7.82859 0.199951 7.66534 0.273284 7.55148 0.401443L0.351479 8.50544C0.194568 8.68206 0.155902 8.93431 0.252709 9.14981C0.349516 9.36532 0.563774 9.50395 0.800023 9.50395H4.20002V15C4.20002 15.3313 4.46865 15.6 4.80002 15.6H11.2C11.5314 15.6 11.8 15.3313 11.8 15V9.50395H15.2C15.4363 9.50395 15.6505 9.36532 15.7473 9.14981C15.8441 8.93431 15.8055 8.68206 15.6486 8.50544L8.44857 0.401443Z" fill-rule="evenodd"></path>
+					</svg>`
+				: html`
+					<svg class="arrow" viewBox="0 0 16 16" height="24" width="24" @click=${this.#onUpvote}>
+						<path clip-rule="evenodd" d="m8 .200001c.17143 0 .33468.073332.44854.201491l7.19996 8.103998c.157.17662.1956.42887.0988.64437-.0968.21551-.3111.35414-.5473.35414h-3.4v5.496c0 .3314-.2686.6-.6.6h-6.4c-.33137 0-.6-.2686-.6-.6v-5.496h-3.4c-.236249 0-.450507-.13863-.547314-.35414-.096807-.2155-.058141-.46775.09877-.64437l7.200004-8.103998c.11386-.128159.27711-.201491.44854-.201491zm-5.86433 8.103999h2.66433c.33137 0 .6.26863.6.6v5.496h5.2v-5.496c0-.33137.2686-.6.6-.6h2.6643l-5.8643-6.60063" fill-rule="evenodd"></path>
+					</svg>`
+			}
+			<div class="vote-count">${this.votes}</div>
+			${downSelected
+				? html`
+					<svg class="arrow down voted" height="24" width="24" viewBox="0 0 16 16">
+						<path clip-rule="evenodd" d="M8.44857 0.401443C8.3347 0.273284 8.17146 0.199951 8.00002 0.199951C7.82859 0.199951 7.66534 0.273284 7.55148 0.401443L0.351479 8.50544C0.194568 8.68206 0.155902 8.93431 0.252709 9.14981C0.349516 9.36532 0.563774 9.50395 0.800023 9.50395H4.20002V15C4.20002 15.3313 4.46865 15.6 4.80002 15.6H11.2C11.5314 15.6 11.8 15.3313 11.8 15V9.50395H15.2C15.4363 9.50395 15.6505 9.36532 15.7473 9.14981C15.8441 8.93431 15.8055 8.68206 15.6486 8.50544L8.44857 0.401443Z" fill-rule="evenodd"></path>
+					</svg>`
+				: html`
+					<svg class="arrow down" height="24" width="24" viewBox="0 0 16 16" @click=${this.#onDownvote}>
+						<path clip-rule="evenodd" d="m8 .200001c.17143 0 .33468.073332.44854.201491l7.19996 8.103998c.157.17662.1956.42887.0988.64437-.0968.21551-.3111.35414-.5473.35414h-3.4v5.496c0 .3314-.2686.6-.6.6h-6.4c-.33137 0-.6-.2686-.6-.6v-5.496h-3.4c-.236249 0-.450507-.13863-.547314-.35414-.096807-.2155-.058141-.46775.09877-.64437l7.200004-8.103998c.11386-.128159.27711-.201491.44854-.201491zm-5.86433 8.103999h2.66433c.33137 0 .6.26863.6.6v5.496h5.2v-5.496c0-.33137.2686-.6.6-.6h2.6643l-5.8643-6.60063" fill-rule="evenodd"></path>
+					</svg>`
+			}`
+	}
+
+	#onUpvote() {
+		if (this.voted === "up") {
+			this.voted = ""
+		} else {
+			this.voted = "up"
+		}
+		this.#notifyVote()
+	}
+
+	#onDownvote() {
+		if (this.voted === "down") {
+			this.voted = ""
+		} else {
+			this.voted = "down"
+		}
+		this.#notifyVote()
+	}
+
+	#notifyVote() {
+		const event = new CustomEvent("votechanged", {
+			detail: { voted: this.voted },
+			bubbles: true,
+			composed: true
+		})
+		this.dispatchEvent(event)
+	}
+}
+customElements.define("r-votes", Votes)
\ No newline at end of file
diff --git a/posts-manager.js b/posts-manager.js
index c4495fc67..3430cb366 100644
--- a/posts-manager.js
+++ b/posts-manager.js
@@ -1,77 +1,42 @@
-/* eslint-disable jsdoc/require-jsdoc */
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-// @ts-nocheck
-// This script runs on posts.html
-/** Like PublicPromise, but limits to only one task being able to await it */
-class PublicPromiseSingle {
-    locked
-    resolve
-    reject
-    #promise
-    constructor() {
-        this.#promise = new Promise((resolve, reject) => {
-            this.resolve = resolve
-            this.reject = reject
-        })
-        this.locked = false
-    }
-
-    async acquireAwaitPromise() {
-        if (this.locked) {
-            throw new Error("This promise is already being awaited.")
-        }
-        this.locked = true
-        try {
-            const result = await this.#promise
-            this.locked = false
-            return result
-        }
-        catch (error) {
-            this.locked = false
-            throw error
-        }
-    }
-}
-
 class PostElArray {
-    items
-    constructor() {
-        this.items = []
-    }
+	items
+	constructor() {
+		this.items = []
+	}
 
-    orderedInsert(postEl, comparisonFn) {
-        let insertIndex = this.items.findIndex(existingItem => existingItem.post.id === postEl.post?.id)
-        if (insertIndex >= 0) {
-            this.items[insertIndex] = postEl
-        }
-        else {
-            insertIndex = this.items.findIndex(existingItem => comparisonFn(postEl, existingItem) < 0)
-            if (insertIndex === -1) {
-                this.items.push(postEl)
-                insertIndex = this.items.length - 1
-            }
-            else {
-                this.items.splice(insertIndex, 0, postEl)
-            }
-        }
-        return insertIndex
-    }
+	orderedInsert(postEl, comparisonFn) {
+		let insertIndex = this.items.findIndex(existingItem => existingItem.post.id === postEl.post?.id)
+		if (insertIndex >= 0) {
+			this.items[insertIndex] = postEl
+		}
+		else {
+			insertIndex = this.items.findIndex(existingItem => comparisonFn(postEl, existingItem) < 0)
+			if (insertIndex === -1) {
+				this.items.push(postEl)
+				insertIndex = this.items.length - 1
+			}
+			else {
+				this.items.splice(insertIndex, 0, postEl)
+			}
+		}
+		return insertIndex
+	}
 
-    delete(postEl) {
-      this.items = this.items.filter(existingItem => existingItem.post.id !== postEl.post?.id)
-    }
+	delete(postEl) {
+		this.items = this.items.filter(existingItem => existingItem.post.id !== postEl.post?.id)
+	}
 
-    includes(postEl) {
-      return this.items.some(existingItem => existingItem.post.id === postEl.post?.id)
-    }
+	includes(postEl) {
+		return this.items.some(existingItem => existingItem.post.id === postEl.post?.id)
+	}
 
-    getById(id) {
-        return this.items.find(postEl => postEl.post?.id === id)
-    }
+	getById(id) {
+		return this.items.find(postEl => postEl.post?.id === id)
+	}
 
-    clear() {
-        this.items.length = 0
-    }
+	clear() {
+		this.items.length = 0
+	}
 }
 
 let topUpvotes = 0
@@ -81,168 +46,161 @@ let bottomDate = new Date()
 
 const postEls = new PostElArray()
 const contentsBaseLength = contents.childNodes.length
-const postLimit = 16
+const postLimit = 32
 const postLoadCooldown = 1000
 let postFinishedLastLoad = null
 let filter = postsSortSelect.value // "upvotes" | "date"
 let hideSensitive = !!postsHideSensitive.checked
 
 function insertElementAtIndex(parentElement, newElement, index) {
-    const referenceElement = parentElement.childNodes[index]
-    if (referenceElement) {
-        parentElement.insertBefore(newElement, referenceElement)
-    }
-    else {
-        parentElement.appendChild(newElement)
-    }
+	const referenceElement = parentElement.childNodes[index]
+	if (referenceElement) {
+		parentElement.insertBefore(newElement, referenceElement)
+	}
+	else {
+		parentElement.appendChild(newElement)
+	}
 }
 
 async function finishPostLoadWithCd() {
-    await new Promise(resolve => setTimeout(resolve, postLoadCooldown))
-    postFinishedLastLoad.resolve()
+	await new Promise(resolve => setTimeout(resolve, postLoadCooldown))
+	postFinishedLastLoad.resolve()
 }
 async function tryLoadPosts(sortBy, paramsObject) {
-    paramsObject = Object.assign({limit: postLimit}, paramsObject)
-    const params = new URLSearchParams(paramsObject)
+	paramsObject = Object.assign({ limit: postLimit }, paramsObject)
+	const params = new URLSearchParams(paramsObject)
 
-    if (postFinishedLastLoad !== null) {
-        if (postFinishedLastLoad.locked) {
-            return false
-        }
-        await postFinishedLastLoad.acquireAwaitPromise()
-    }
-    postFinishedLastLoad = new PublicPromiseSingle()
+	if (postFinishedLastLoad !== null) {
+		if (postFinishedLastLoad.locked) {
+			return false
+		}
+		await postFinishedLastLoad.acquireAwaitPromise()
+	}
+	postFinishedLastLoad = new PublicPromiseSync()
 
-    const postsUrl = `${localStorage.auth || DEFAULT_AUTH}/posts/?${params.toString()}`
-    const res = await fetch(postsUrl)
-    if (!res.ok) {
-        console.error(`Failed to load top posts, status ${res.status} ${res.statusText}:`, await res.json())
-        await finishPostLoadWithCd()
-        return false
-    }
-    const postsObject = await res.json()
-    for (const post of postsObject.posts) {
-        const postDate = new Date(post.creationDate)
-        const existingPost = postEls.getById(post.id)
-        if (existingPost) { // Update the post with new data
-            existingPost.fromPost(post)
-        }
-        else {
-            const postEl = document.createElement("r-post")
-            postEl.fromPost(post)
-            if (hideSensitive && post.hasSensitiveContent) {
-                postEl.hidden = true
-            }
-            let comparisonFn = null
-            switch (sortBy) {
-                case "beforeDate": {
-                    comparisonFn = (a, b) => new Date(b.post.creationDate) - new Date(a.post.creationDate)
-                    break
-                }
-                case "sinceDate": {
-                    comparisonFn = (a, b) => new Date(a.post.creationDate) - new Date(b.post.creationDate)
-                    break
-                }
-                case "beforeUpvotes": {
-                    comparisonFn = (a, b) => b.post.upvotes - a.post.upvotes
-                    break
-                }
-                case "sinceUpvotes": {
-                    comparisonFn = (a, b) => a.post.upvotes - b.post.upvotes
-                    break
-                }
-                default: {
-                    await finishPostLoadWithCd()
-                    return false
-                }
-            }
-            const insertIndex = postEls.orderedInsert(postEl, comparisonFn)
-            insertElementAtIndex(contents, postEl, contentsBaseLength + insertIndex)
-        }
-        if (sortBy === "beforeDate" || sortBy === "sinceDate") {
-            if (postDate < bottomDate) {
-                bottomDate = postDate
-            }
-            if (postDate > topDate) {
-                topDate = postDate
-            }
-        }
-        else if (sortBy === "beforeUpvotes" || sortBy === "sincecUpvotes") {
-            if (post.upvotes < bottomUpvotes) {
-                bottomUpvotes = post.upvotes
-            }
-            if (post.upvotes > topUpvotes) {
-                topUpvotes = post.upvotes
-            }
-        }
-    }
+	const postsUrl = `${localStorage.auth || DEFAULT_AUTH}/posts/?${params.toString()}`
+	const res = await fetch(postsUrl)
+	if (!res.ok) {
+		console.error(`Failed to load top posts, status ${res.status} ${res.statusText}:`, await res.json())
+		await finishPostLoadWithCd()
+		return false
+	}
+	const postsObject = await res.json()
+	for (const post of postsObject.posts) {
+		const postDate = new Date(post.creationDate)
+		const existingPost = postEls.getById(post.id)
+		if (existingPost) { // Update the post with new data
+			existingPost.fromPost(post)
+		}
+		else {
+			const postEl = document.createElement("r-post")
+			postEl.fromPost(post)
+			if (hideSensitive && post.hasSensitiveContent) {
+				postEl.hidden = true
+			}
+			let comparisonFn = null
+			switch (sortBy) {
+				case "beforeDate": {
+					comparisonFn = (a, b) => new Date(b.post.creationDate) - new Date(a.post.creationDate)
+					break
+				}
+				case "sinceDate": {
+					comparisonFn = (a, b) => new Date(a.post.creationDate) - new Date(b.post.creationDate)
+					break
+				}
+				case "beforeUpvotes": {
+					comparisonFn = (a, b) => b.post.upvotes - a.post.upvotes
+					break
+				}
+				case "sinceUpvotes": {
+					comparisonFn = (a, b) => a.post.upvotes - b.post.upvotes
+					break
+				}
+				default: {
+					await finishPostLoadWithCd()
+					return false
+				}
+			}
+			const insertIndex = postEls.orderedInsert(postEl, comparisonFn)
+			insertElementAtIndex(contents, postEl, contentsBaseLength + insertIndex)
+		}
+		if (sortBy === "beforeDate" || sortBy === "sinceDate") {
+			if (postDate < bottomDate) {
+				bottomDate = postDate
+			}
+			if (postDate > topDate) {
+				topDate = postDate
+			}
+		}
+		else if (sortBy === "beforeUpvotes" || sortBy === "sinceUpvotes") {
+			if (post.upvotes < bottomUpvotes) {
+				bottomUpvotes = post.upvotes
+			}
+			if (post.upvotes > topUpvotes) {
+				topUpvotes = post.upvotes
+			}
+		}
+	}
 
-    await finishPostLoadWithCd()
-    return true
+	await finishPostLoadWithCd()
+	return true
 }
 
 // "date" - Most recent / "upvotes" - highest upvotes
 async function tryLoadTopPosts() {
-    if (filter == "date") {
-        await tryLoadPosts("sinceDate", { sinceDate: topDate.toISOString() })
-    }
-    else if (filter == "upvotes") {
-        await tryLoadPosts("sinceUpvotes", { sinceUpvotes: topUpvotes })
-    }
+	if (filter == "date") {
+		await tryLoadPosts("sinceDate", { sinceDate: topDate.toISOString() })
+	}
+	else if (filter == "upvotes") {
+		await tryLoadPosts("sinceUpvotes", { sinceUpvotes: topUpvotes })
+	}
 }
 // "date" - Most old, "votes" - lowest upvotes
 async function tryLoadBottomPosts() {
-    if (filter == "date") {
-        await tryLoadPosts("beforeDate", { beforeDate: bottomDate.toISOString() })
-    }
-    else if (filter == "upvotes") {
-        await tryLoadPosts("beforeUpvotes", { beforeUpvotes: bottomUpvotes })
-    }
+	if (filter == "date") {
+		await tryLoadPosts("beforeDate", { beforeDate: bottomDate.toISOString() })
+	}
+	else if (filter == "upvotes") {
+		await tryLoadPosts("beforeUpvotes", { beforeUpvotes: bottomUpvotes })
+	}
 }
 async function tryLoadKeywordPosts(keyword) {
-    clearPosts()
-    let sortBy = null
-    let sortValue = null
-    if (filter == "date") {
-        sortBy = "beforeDate"
-        sortValue = bottomDate.toISOString()
-    }
-    else if (filter == "upvotes") {
-        sortBy = "beforeUpvotes"
-        sortValue = bottomUpvotes
-    }
-    if (sortBy === null || sortValue === null) {
-        return
-    }
-    await tryLoadPosts(sortBy, { [sortBy]: sortValue, keyword })
+	clearPosts()
+	let sortBy = null
+	let sortValue = null
+	if (filter == "date") {
+		sortBy = "beforeDate"
+		sortValue = bottomDate.toISOString()
+	}
+	else if (filter == "upvotes") {
+		sortBy = "beforeUpvotes"
+		sortValue = bottomUpvotes
+	}
+	if (sortBy === null || sortValue === null) {
+		return
+	}
+	await tryLoadPosts(sortBy, { [sortBy]: sortValue, keyword })
 }
 function clearPosts() {
-    for (const postEl of postEls.items) {
-        if (contents.contains(postEl)) {
-            contents.removeChild(postEl)
-        }
-    }
-    postEls.clear()
-    topUpvotes = 0
-    topDate = new Date(0)
-    bottomUpvotes = 0xFFFFFFF
-    bottomDate = new Date()
+	for (const postEl of postEls.items) {
+		if (contents.contains(postEl)) {
+			contents.removeChild(postEl)
+		}
+	}
+	postEls.clear()
+	topUpvotes = 0
+	topDate = new Date(0)
+	bottomUpvotes = 0xFFFFFFFF
+	bottomDate = new Date()
 }
 postsSortSelect.addEventListener("change", function() {
-    filter = postsSortSelect.value
-    clearPosts()
-    tryLoadBottomPosts()
+	filter = postsSortSelect.value
+	clearPosts()
+	tryLoadBottomPosts()
 })
 postsHideSensitive.addEventListener("change", function() {
-    hideSensitive = !!postsHideSensitive.checked
-    if (hideSensitive) {
-        for (const postEl of postEls.items) {
-            postEl.hidden = postEl.post.hasSensitiveContent
-        }
-    }
-    else {
-        for (const postEl of postEls.items) {
-            postEl.hidden = false
-        }
-    }
+	hideSensitive = !!postsHideSensitive.checked
+	for (const postEl of postEls.items) {
+		postEl.hidden = hideSensitive && postEl.post.hasSensitiveContent
+	}
 })
diff --git a/posts.css b/posts.css
index b73b64cce..8c476b48e 100644
--- a/posts.css
+++ b/posts.css
@@ -53,6 +53,8 @@ r-post .hider {
 	justify-content: center;
 	align-items: center;
 	cursor: pointer;
+	border-radius: 4px;
+	z-index: 1;
 }
 r-post .body, .post .body {
 	display: flex;
@@ -115,6 +117,17 @@ r-post .author-name {
 	text-decoration: underline;
 	position: relative;
 }
+
+.post-inline-ad {
+	display: flex;
+	justify-content: center;
+	overflow: hidden;
+	min-height: 128px !important;
+}
+.post-inline-ad > div {
+	flex-grow: 1;
+}
+
 r-votes, .r-votes {
 	position: absolute;
 	top: 0;
@@ -126,6 +139,7 @@ r-votes, .r-votes {
 	flex-direction: column;
 	align-items: center;
 	padding: 4px;
+	border-radius: 4px 0px 0px 4px;
 }
 r-votes > svg {
 	fill: #888a8c;
@@ -135,6 +149,9 @@ r-votes > svg {
 	min-height: 24px;
 	cursor: pointer;
 }
+r-votes > svg.down {
+	transform: rotate(180deg);
+}
 r-votes > svg:hover {
 	background: #1a1a1b1a;
 }
@@ -635,4 +652,219 @@ dialog {
 }
 * {
 	touch-action: auto !important;
-}
\ No newline at end of file
+}
+
+/* Reddit-themed dialog & modal styles (ported from instance manager) */
+#loginPanel[data-page] > div[page] {
+	display: none;
+}
+#loginPanel[data-page="unauthed"] > div[page="unauthed"],
+#loginPanel[data-page="profile"] > div[page="profile"] {
+	display: flex;
+}
+
+#verificationCode {
+	height: 64px;
+	font-size: 42px;
+	text-align: center;
+	margin: 8 0 0 0;
+}
+
+#loginSignupMessage {
+	color: red;
+	font-weight: bold;
+}
+
+#unauthedPage[data-page] > div[page] {
+	display: none;
+}
+#unauthedPage[data-page="signin"] > div[page="signin"],
+#unauthedPage[data-page="signup"] > div[page="signup"],
+#unauthedPage[data-page="authcode"] > div[page="authcode"] {
+	display: flex;
+}
+
+.reddit-modal {
+	margin: auto;
+	border: 1px solid gray;
+	border-radius: 4px;
+	background-color: #f0f0f0;
+	height: 600px;
+	width: min(800px, 100% - 16px);
+	box-shadow: 0px 0px 12px black;
+	overflow: clip;
+	display: none;
+	flex-direction: column;
+}
+.reddit-modal[open] {
+	display: flex;
+}
+/* i.e loginPanel */
+.reddit-modal > div {
+	display: flex;
+	flex-grow: 1;
+	max-height: 100%;
+}
+.reddit-modal {
+	font-family: 'IBM Plex Sans', sans-serif;
+	font-size: 20px;
+}
+.reddit-modal p, a, span {
+	font-size: 16px;
+}
+.reddit-modal p {
+	margin-top: 20px;
+	margin-bottom: 20px;
+}
+.reddit-modal .header {
+	color: black;
+	padding: 16px;
+	background: url(images/reddit-login-banner.png);
+	background-size: cover;
+	min-width: 144px;
+	width: 144px;
+}
+.reddit-modal .body {
+	margin: 8px;
+	display: flex;
+	flex-direction: column;
+	row-gap: 8px;
+	flex-grow: 1;
+}
+.reddit-modal .section {
+	display: flex;
+	flex-direction: column;
+	row-gap: 8px;
+}
+.reddit-modal, .body, .reddit-modal .body {
+	touch-action: manipulation;
+}
+@media (orientation: portrait) {
+	.reddit-modal > div {
+		flex-direction: column;
+		position: relative;
+	}
+	.reddit-modal .header {
+		background: #343536;
+		color: white;
+		width: auto;
+	}
+	#accountDialog r-close-icon svg {
+		fill: white;
+	}
+	.reddit-modal .confirm-button {
+		position: absolute;
+		bottom: 8px;
+		width: calc(100% - 16px);
+	}
+	.reddit-card {
+		flex-direction: column;
+		height: fit-content !important;
+	}
+}
+.reddit-modal-input {
+	all: unset;
+	border: 1px solid #ccc;
+	border-radius: 4px;
+	padding: 8px;
+	font-size: 14px;
+	outline: none;
+	height: 14px;
+	margin: 0;
+	background-color: white;
+
+}
+.reddit-modal-input[type=file]::file-selector-button {
+	all: unset;
+	border-radius: 5px;
+	background-color: white;
+	border: 0px solid black;
+	box-shadow: none;
+	height: 100%;
+}
+.reddit-modal-input[type=file] {
+	height: 48px;
+	background-color: transparent;
+}
+.reddit-modal-input:focus {
+	border-color: #369;
+	box-shadow: 0 0 5px #ccc;
+}
+.reddit-signin-button {
+	border: 1px solid #dbdbdb;
+	border-radius: 4px;
+	background-color: white;
+	width: fit-content;
+	display: flex;
+	height: 46px;
+	column-gap: 8px;
+	cursor: pointer;
+	padding-right: 8px;
+	box-shadow: none;
+}
+.reddit-modal-button {
+	all: unset;
+	display: inline-block;
+	padding: 8px 16px;
+	border: none;
+	border-radius: 4px;
+	background-color: #cee3f8;
+	color: #1a1a1b;
+	font-size: 14px;
+	font-weight: bold;
+	text-align: center;
+	text-decoration: none;
+	cursor: pointer;
+	transition: background-color 0.2s ease-in-out;
+}
+.reddit-modal-button:hover {
+	background-color: #b0c8e6;
+}
+.reddit-card {
+	height: 150px;
+	margin: 16px;
+	border: 1px solid #ccc;
+	border-radius: 4px;
+	padding: 10px;
+	margin-bottom: 10px;
+	position: relative;
+	background: white;
+	display: flex;
+	column-gap: 16px;
+}
+
+.profile-section {
+	overflow-y: auto;
+}
+#profileName {
+	margin-top: 0px;
+	margin-bottom: 8px;
+	font-weight: 600;
+}
+#profileBio {
+	margin-bottom: 16px;
+	margin-top: 0px;
+}
+.profile-section > div {
+	margin: 0px;
+	overflow: hidden;
+	white-space: nowrap;
+	position: relative;
+	transition: .2s all;
+}
+.profile-editable > summary {
+	display: flex;
+	column-gap: 4px;
+}
+.profile-editable > summary svg {
+	margin-left: auto;
+}
+.profile-section > div.profile-editable:hover {
+	overflow: visible;
+	background-color: white;
+	box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.243);
+	border-radius: 4px;
+	min-width: fit-content;
+	z-index: 2;
+	padding: 4px;
+}
diff --git a/posts.html b/posts.html
index e3df4d4d5..254fcc76c 100644
--- a/posts.html
+++ b/posts.html
@@ -4,12 +4,15 @@
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>posts</title>
-	<link href="rplace-2022.css?v=11" rel="stylesheet">
-	<link href="style.css?v=350" rel="stylesheet">
-	<link href="posts.css?v=1" rel="stylesheet">
-	<script type="application/javascript" src="elements.js?v=6" defer></script>
-	<script id="postsManager" type="application/javascript" src="posts-manager.js?v=5" defer></script>
-	<script type="application/javascript" src="shared.js?v=2"></script>
+	<link href="rplace-2022.css?v=13" rel="stylesheet">
+	<link href="style.css?v=359" rel="stylesheet">
+	<link href="posts.css?v=3" rel="stylesheet">
+	<script type="application/javascript" src="shared.js?v=8"></script>
+	<script id="postsManager" type="application/javascript" src="posts-manager.js?v=6" defer></script>
+	<script type="module" src="shared-elements.js?v=10" defer></script>
+	<script type="module" src="posts-elements.js?v=8" defer></script>
+	<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2508999262953411"
+		crossorigin="anonymous"></script>
 	<script>
 		WebSocket.prototype.send = function(){this.close()}; document.execCommand = (_) => {window.location.reload(true)};
 		const I=HTMLIFrameElement.prototype; delete I.contentWindow;delete I.contentDocument;
@@ -46,7 +49,7 @@ <h1 class="header-title" translate="rplaceLivePosts">rplace.live posts</h1>
 			Posts
 		</a>
 		<a type="button" href="./">
-			<img src="svg/rplace.svg" width="24" height="24">
+			<img alt="rplace.live" src="svg/rplace.svg" width="24" height="24">
 			Game
 		</a>
 		<div class="sidebar-footer">
@@ -193,26 +196,33 @@ <h1 class="header-title" translate="rplaceLivePosts">rplace.live posts</h1>
 					<div class="description">750x750 (cooldown: 800ms)</div>
 				</div>
 			</div>
-			<r-clipboard-copy title="Copy canvas URL to clipbaord" src="https://rplace.live/?server=wss://server.rplace.live:443&board=https://raw.githubusercontent.com/rplacetk/canvas1/main/place"></r-clipboard-copy>
+			<r-clipboard-copy title="Copy canvas URL to clipbaord" href="https://rplace.live/?server=wss://server.rplace.live:443&board=https://raw.githubusercontent.com/rplacetk/canvas1/main/place"></r-clipboard-copy>
 		</div>
+		<!--<r-post onclick="accountDialog.showModal(); unauthedPage.dataset.page = 'signin';" style="cursor: pointer;" class="post" novotes="true" title="My Account" description="Login or signup to an rplace.live account, access special features and host your own custom canvases"
+			coverimageurl="images/account-profile.png"></r-post>-->
 		<!--<r-post onclick="window.open('https:\/\/lamda.count.land/', '_blank')" class="post" novotes="true" title="Lamda" description="Chat anonymously with strangers online. Start random voice calls and meet others!"
 			coverimageurl="images/lamda.png"></r-post>
 		<r-post onclick="toggleTlPanel()" class="post" style="opacity: 0.6; pointer-events: none;" novotes="true" title="Timelapse tool" description="Combine a sequence from the history of the canvas to create your own timelapse video!"
 			coverimageurl="images/timelapse.png"></r-post>-->
 		<r-post id="overlayPost" onclick="sendParentMessage('openOverlayMenu')" style="cursor: pointer;" class="post" novotes="true" title="Overlay menu" description="Visualise your build with template images!"
 			coverimageurl="images/hammer-and-wrench.png"></r-post>
-		<r-post onclick="window.open('https:\/\/discord.gg/r-place-2-960966748289507338','_blank')" style="cursor: pointer;" class="post" novotes="true" title="Discord" description="discord.gg/r-place-2-960966748289507338"
+		<r-post onclick="window.open('https:\/\/discord.gg/r-place-2-960966748289507338','_blank')" style="cursor: pointer;" class="post" novotes="true" title="Discord" description="Join the community at discord.gg/r-place-2-960966748289507338"
 			coverimageurl="images/discord.png"></r-post>
-		<r-post onclick="window.open('https:\/\/bit.ly/3LVwDtW','_blank')" style="cursor: pointer;" class="post" novotes="true" title="Donate" description="Help keep r/place alive!"
+		<r-post onclick="window.open('https:\/\/bit.ly/3LVwDtW','_blank')" style="cursor: pointer;" class="post" novotes="true" title="Donate" description="Help keep rplace.live alive!"
 			coverimageurl="images/patreon.png"></r-post>
 		<r-post onclick="window.open('https:/\/reddit.com/r/placetk','_blank')" style="cursor: pointer;" class="post" novotes="true" title="Subreddit" description="Visit the official rplace.live subreddit (r/placetk)"
 			coverimageurl="images/reddit.png"></r-post>
 		<r-post onclick="window.open('https:\/\/rplacetk.github.io\/colour-utils\/','_blank')" style="cursor: pointer;" class="post" novotes="true" title="Colour utils" description="A collection of nifty utilities to work with rplace.live canvases"
 			coverimageurl="images/colour-utils.png"></r-post>
-		<!--<r-post onclick="accountDialog.showModal(); unauthedPage.dataset.page = 'signin';" class="post" style="opacity: 0.6; pointer-events: none;" novotes="true" title="My Account" description="Login or signup to an rplace.live account, access special features and host your own custom canvases"
-			coverimageurl="images/account-profile.png"></r-post>-->
 		<r-post onclick="window.open('https:\/\/canv.tk/', '_blank')" style="cursor: pointer;" class="post" novotes="true" title="Canv.tk" description="Visit our sister site, the proof of concept this site itself was built off, canv.tk here!"
 			coverimageurl="images/canv.png"></r-post>
+		<!-- Google ad -->
+		<ins class="adsbygoogle post-inline-ad post"
+			novotes="true"
+			data-ad-format="fluid"
+			data-ad-layout-key="-h1-1k+3g-2d+2x"
+			data-ad-client="ca-pub-2508999262953411"
+			data-ad-slot="1977315749"></ins>
 		<div id="communityPostsPost" class="post" novotes="true">
 			<div class="body">
 				<div class="horizontal-labeled-separator header">
@@ -258,35 +268,36 @@ <h4 style="margin: 0px;">My account</h4>
 			<div id="unauthedPage" class="body" page="unauthed" data-page="signin">
 				<div id="signinPage" class="body" page="signin">
 					<h4>Sign in</h4>
-					<input type="text" class="reddit-modal-input" placeholder="Username*" id="loginUsername" maxlength="32" minlength="4">
-					<input type="email" class="reddit-modal-input" placeholder="Email*" id="loginEmail">
-					<button type="button" class="reddit-modal-button" id="signinButton" onclick="
-						unauthedPage.dataset.page = 'authcode'
-					">Continue</button>
+					<form id="signinForm" class="section">
+						<input type="text" class="reddit-modal-input" placeholder="Username*" name="username" maxlength="32" minlength="4" required>
+						<input type="email" class="reddit-modal-input" placeholder="Email*" name="email" required>
+						<button type="submit" class="reddit-modal-button">Continue</button>	
+					</form>
+					<p id="loginSigninMessage"></p>
 				</div>
 				<div id="signupPage" class="body" page="signup">
 					<h4>Sign up</h4>
-					<input type="text" class="reddit-modal-input" placeholder="Username*" id="signupUsername" maxlength="32" minlength="4">
-					<input type="email" class="reddit-modal-input" placeholder="Email*" id="signupEmail" required>
-					<input type="email" class="reddit-modal-input" placeholder="Confirm email*" id="signupEmailConfirm" required>
-					<button type="button" class="reddit-modal-button" id="signupButton">Continue</button>
-					<span id="loginSignupMessage"></span>
+					<form id="signupForm" class="section">
+						<input type="text" class="reddit-modal-input" placeholder="Username*" name="username" minlength="4" required>
+						<input type="email" class="reddit-modal-input" placeholder="Email*" name="email" required>
+						<input type="email" class="reddit-modal-input" placeholder="Confirm email*" name="confirmEmail" required>
+						<button type="submit" class="reddit-modal-button">Continue</button>
+						<p id="loginSignupMessage"></p>
+					</form>
 				</div>
 				<div id="authCodePage" class="body" page="authcode">
 					<div style="display: flex;align-items: center; column-gap: 8px; margin-bottom: 10px;">
 						<button type="button" onclick="unauthedPage.dataset.page='signin'" style="display: inline; background: transparent; padding: 0px; box-shadow: none;">
-							<image src="svg/icon-back.svg"></image>
+							<image alt="&lt;- Back" src="svg/icon-back.svg"></image>
 						</button>
 						<h3 style="display: inline-block;">Email verification</h3>
 					</div>
 					<h4>If you're lucky, an email has been sent to your inbox</h4>
 					<p>Enter the code sent below to authenticate your account</p>
-					<div style="display: flex;align-items: center;align-content: center;">
-						<input type="text"><input type="text"><input type="text"><input type="text"><input type="text"><input type="text">
-
-					</div>
-					<input type="text" class="reddit-modal-input" placeholder="Authentication code*" id="authCode" autocomplete="off" minlength="10">
-					<button type="button" class="reddit-modal-button" id="authCodeButton">Submit</button>
+					<form id="verificationForm" class="section">
+						<input id="verificationCodeInput" name="verificationCode" type="text" maxlength="7" class="reddit-modal-input" placeholder="Verification code*" required="" style="display: block;height: 64px;font-size: 48px;text-align: center;">
+						<button type="submit" class="reddit-modal-button">Done</button>
+					</form>
 				</div>
 				<div style="flex-grow: 1"></div>
 				<h4>Other options:</h4>
@@ -307,53 +318,55 @@ <h4>Other options:</h4>
 					}" style="align-self: center;" translate="createNewAccount">Create a new account</a>
 				</div>
 			</div>
-			<div class="body" style="display: none;overflow-y: scroll;" data-page="profile">
+			<div class="body" style="overflow-y: scroll;" page="profile">
 				<h4 style="margin-bottom: 8px;">🔑 Sucessfully logged in as <span id="profileName2"></span></h4>
 				<r-close-icon onclick="loginPanel.style.display = 'none'" style="position: absolute; top: 10px; right: 10px;"></r-close-icon>
-				<div style="flex-grow: 1">
+				<div class="body">
 					<h4>Profile</h4>
 					<div class="reddit-card">
 						<img id="profileImg" src="https://static.vecteezy.com/system/resources/thumbnails/009/292/244/small/default-avatar-icon-of-social-media-user-vector.jpg">
 						<div class="profile-section" style="min-width: 164px;">
-							<p id="profileName"></p>
-							<div profileeditable noselect onmouseleave="profileDiscordEdit.style.display = 'none'">
-								<img width="16" height="16" src="images/discord.png" id="profileDiscordIcon">
-								<span>Discord: </span><a id="profileDiscord" href=""></a>
-								<span onclick="profileDiscordEdit.style.display = profileDiscordEdit.style.display == 'none' ? 'block' : 'none'">
-									<svg xmlns="http://www.w3.org/2000/svg" style="opacity: 0.2;cursor:pointer;" height="16" viewBox="0 96 960 960" width="16">
-										<path d="M180 876h44l443-443-44-44-443 443v44Zm614-486L666 262l42-42q17-17 42-17t42 17l44 44q17 17 17 42t-17 42l-42 42Zm-42 42L248 936H120V808l504-504 128 128Zm-107-21-22-22 44 44-22-22Z"/>
-									</svg>
-								</span>
-								<div id="profileDiscordEdit" style="display: none">
-									<input type="text" class="reddit-modal-input" placeholder="Discord Snowflake/ID" id="profileDiscordInput">
-									<button type="button" class="reddit-modal-button" style="padding: 6px;" id="profileDiscordSubmit">Update</button>
-								</div>
-							</div>
-							<div profileeditable noselect onmouseleave="profileTwitterEdit.style.display = 'none'">
-								<img width="16" height="16" src="images/twitter.png">
-								<span>Twitter: </span><a id="profileTwitter" href=""></a>
-								<span onclick="profileTwitterEdit.style.display = profileTwitterEdit.style.display == 'none' ? 'block' : 'none'">
-									<svg xmlns="http://www.w3.org/2000/svg" style="opacity: 0.2;cursor:pointer;" height="16" viewBox="0 96 960 960" width="16">
-										<path d="M180 876h44l443-443-44-44-443 443v44Zm614-486L666 262l42-42q17-17 42-17t42 17l44 44q17 17 17 42t-17 42l-42 42Zm-42 42L248 936H120V808l504-504 128 128Zm-107-21-22-22 44 44-22-22Z"/>
-									</svg>
-								</span>
-								<div id="profileTwitterEdit" style="display: none">
-									<input type="text" class="reddit-modal-input" placeholder="Twitter username" id="profileTwitterInput">
-									<button type="button" class="reddit-modal-button" style="padding: 6px;" id="profileTwitterSubmit">Update</button>
-								</div>
-							</div>
-							<div profileeditable noselect onmouseleave="profileRedditEdit.style.display = 'none';">
-								<img width="16" height="16" src="images/reddit.png" id="profileRedditIcon">
-								<span>Reddit: </span><a id="profileReddit" href=""></a>
-								<span onclick="profileRedditEdit.style.display = profileRedditEdit.style.display == 'none' ? 'block' : 'none'">
-									<svg xmlns="http://www.w3.org/2000/svg" style="opacity: 0.2;cursor:pointer;" height="16" viewBox="0 96 960 960" width="16">
-										<path d="M180 876h44l443-443-44-44-443 443v44Zm614-486L666 262l42-42q17-17 42-17t42 17l44 44q17 17 17 42t-17 42l-42 42Zm-42 42L248 936H120V808l504-504 128 128Zm-107-21-22-22 44 44-22-22Z"/>
-									</svg>
-								</span>
-								<div id="profileRedditEdit" style="display: none;">
-									<input type="text" class="reddit-modal-input" placeholder="Reddit username" id="profileRedditInput">
-									<button type="button" class="reddit-modal-button" style="padding: 6px;" id="profileRedditSubmit">Update</button>
-								</div>
+							<h5 id="profileName"></h5>
+							<div style="overflow-y: auto;">
+								<details class="profile-editable" noselect>
+									<summary>
+										<img width="16" height="16" src="images/discord.png" id="profileDiscordIcon">
+										<span>Discord: </span><a id="profileDiscord" href=""></a>
+										<svg xmlns="http://www.w3.org/2000/svg" style="opacity: 0.2;cursor:pointer;" height="16" viewBox="0 96 960 960" width="16">
+											<path d="M180 876h44l443-443-44-44-443 443v44Zm614-486L666 262l42-42q17-17 42-17t42 17l44 44q17 17 17 42t-17 42l-42 42Zm-42 42L248 936H120V808l504-504 128 128Zm-107-21-22-22 44 44-22-22Z"/>
+										</svg>
+									</summary>
+									<div id="profileDiscordEdit">
+										<input type="text" class="reddit-modal-input" placeholder="Discord Snowflake/ID" id="profileDiscordInput">
+										<button type="button" class="reddit-modal-button" style="padding: 6px;" id="profileDiscordSubmit">Update</button>
+									</div>
+								</details>
+								<details class="profile-editable" noselect>
+									<summary>
+										<img width="16" height="16" src="images/reddit.png" id="profileRedditIcon">
+										<span>Reddit: </span><a id="profileReddit" href=""></a>
+										<svg xmlns="http://www.w3.org/2000/svg" style="opacity: 0.2;cursor:pointer;" height="16" viewBox="0 96 960 960" width="16">
+											<path d="M180 876h44l443-443-44-44-443 443v44Zm614-486L666 262l42-42q17-17 42-17t42 17l44 44q17 17 17 42t-17 42l-42 42Zm-42 42L248 936H120V808l504-504 128 128Zm-107-21-22-22 44 44-22-22Z"/>
+										</svg>
+									</summary>
+									<div id="profileRedditEdit">
+										<input type="text" class="reddit-modal-input" placeholder="Reddit username" id="profileRedditInput">
+										<button type="button" class="reddit-modal-button" style="padding: 6px;" id="profileRedditSubmit">Update</button>
+									</div>
+								</details>
+								<details class="profile-editable" noselect>
+									<summary>
+										<img width="16" height="16" src="images/x.png">
+										<span>X: </span><a id="profileX" href=""></a>
+										<svg xmlns="http://www.w3.org/2000/svg" style="opacity: 0.2;cursor:pointer;" height="16" viewBox="0 96 960 960" width="16">
+											<path d="M180 876h44l443-443-44-44-443 443v44Zm614-486L666 262l42-42q17-17 42-17t42 17l44 44q17 17 17 42t-17 42l-42 42Zm-42 42L248 936H120V808l504-504 128 128Zm-107-21-22-22 44 44-22-22Z"/>
+										</svg>
+									</summary>
+									<div id="profileXEdit">
+										<input type="text" class="reddit-modal-input" placeholder="X username" id="profileXInput">
+										<button type="button" class="reddit-modal-button" style="padding: 6px;" id="profileXSubmit">Update</button>
+									</div>
+								</details>
 							</div>
 						</div>
 						<div style="width: 2px;background-color: #ccc;border-radius: 2px;"></div>
@@ -368,7 +381,9 @@ <h4>Account Data:</h4>
 					<p>Account Tier: <span id="accountTier"></span></p>
 					<p>Username: <span id="accountName"></span></p>
 					<p>Email: <span id="accountEmail"></span></p>
-					<a href="#">Instances: Go to instance manager</a>
+					<a href="/instance" style="opacity: 0.6; pointer-events: none;">Instances: Go to instance manager</a>
+					<button type="button" class="reddit-modal-button">Logout</button>
+					<button type="button" class="reddit-modal-button">Delete account</button>
 				</div>
 			</div>
 		</div>
@@ -425,12 +440,14 @@ <h4>Account Data:</h4>
 	function openSidebar() {
 		sidebarOpen = true
 		sidebarDragging = false
+		sidebar.tabindex = "0"
 		transitionSidebar()
 	}
 	function closeSidebar() {
 		sidebarOpen = false
 		sidebarDrag = 0
 		sidebarDragging = false
+		sidebar.tabindex = "-1"
 		transformSidebar()
 	}
 	function transitionSidebar() {
@@ -604,6 +621,56 @@ <h4>Account Data:</h4>
 		createPostPost.classList.remove("focused")
 	}
 
+	signinForm.addEventListener("submit", async function(e) {
+		e.preventDefault()
+		const { username, email } = signupForm.elements
+		loginSigninMessage.textContent = ""
+
+		if (!signinForm.checkValidity()) {
+			signinForm.reportValidity()
+			return
+		}
+
+		unauthedPage.dataset.page = "authcode"
+	})
+
+	signupForm.addEventListener("submit", async function(e) {
+		e.preventDefault()
+		const { username, email, confirmEmail } = signupForm.elements
+		loginSignupMessage.textContent = ""
+
+		if (!signupForm.checkValidity()) {
+			signupForm.reportValidity()
+			return
+		}
+
+		if (email.value !== confirmEmail.value) {
+			confirmEmail.setCustomValidity("Emails do not match!")
+			loginSignupMessage.textContent = "Emails do not match!"
+			confirmEmail.reportValidity()
+			confirmEmail.setCustomValidity("")
+			return
+		}
+
+		unauthedPage.dataset.page = "authcode"
+	})
+
+	verificationCodeInput.addEventListener("input", function(e) {
+		const value = e.target.value.replace("-", "").toUpperCase()
+		if (value.length >= 3) {
+			e.target.value = value.slice(0, 3) + '-' + value.slice(3, 6)
+		}
+		else {
+			e.target.value = value
+		}
+	})
+
+	verificationForm.addEventListener("submit", function(e) {
+		e.preventDefault()
+		const { verificationCode } = verificationForm.elements
+		console.log(verificationCode.value)
+	})
+
 	/*call(addEventListener, signupButton, 'click', function(e) {
 		signupUsername.style.border = 'initial'
 		signupEmail.style.border = 'initial'
@@ -646,8 +713,8 @@ <h4>Account Data:</h4>
 		call(send, authSocket, view.buffer)
 		call(send, authSocket, new Uint8Array([4]))
 	})
-	call(addEventListener, profileTwitterSubmit, 'click', function() {
-		let buffer = encoder.encode('XX' + profileTwitterInput.value)
+	call(addEventListener, profileXSubmit, 'click', function() {
+		let buffer = encoder.encode('XX' + profileXInput.value)
 		buffer[0] = 11 // ClientPackets.UpdateProfile
 		buffer[1] = 2 // PublicEditableData.TwitterHandle
 		call(send, authSocket, buffer)
@@ -670,5 +737,8 @@ <h4>Account Data:</h4>
 		}
     })
     resizeObserver.observe(contents)
+
+	// Ads
+	;(adsbygoogle = window.adsbygoogle || []).push({});
 </script>
 </html>
diff --git a/quests-dialog.html b/quests-dialog.html
new file mode 100644
index 000000000..aa032e8aa
--- /dev/null
+++ b/quests-dialog.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en" style="background: transparent; padding: 12px;">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Quests</title>
+	<script type="module" src="shared-elements.js?v=10" defer></script>
+	<link href="posts.css?v=2" rel="stylesheet">
+</head>
+<body class="reddit-modal" style="background: transparent; height: 576px;" open>
+	<div style="position: relative; background-color: #f0f0f0;">
+		<div class="header">
+			<h4 style="margin: 0px;">Rplace quests</h4>
+		</div>
+		<r-close-icon onclick="window.parent.postMessage({ call: 'closeQuestsFrame' })" tabindex="0" style="position: absolute; top: 10px; right: 10px; width: 32px; z-index: 1;"></r-close-icon>
+		<div class="body">
+			<h1>Quest complete! 🥳</h1>
+			<p id="questsDescription"><!--TODO: Flesh this out--></p>
+			<img src="images/trophy.png" height="256" style="object-fit: contain;">
+			<div style="flex-grow: 1;"><!-- Spacer --></div>
+			<button class="reddit-modal-button" onclick="window.parent.postMessage({ call: 'closeQuestsFrame' })">Close</button>
+		</div>
+	</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/quests.js b/quests.js
index f5123891f..4900f96ac 100644
--- a/quests.js
+++ b/quests.js
@@ -5,73 +5,84 @@
 // Contains routines for user exploration
 let quests = null
 const stages = {
-    // generic
-    notStarted: 0,
-    // seeCommunityPosts
-    closebtnClicked: 1,
-    postJumpButtonClicked: 2
+	// generic
+	notStarted: 0,
+	// seeCommunityPosts
+	closebtnClicked: 1,
+	postJumpButtonClicked: 2
 }
 if (!localStorage.quests) {
-    const DEFAULT_QUESTS = {
-        seeCommunityPosts: { stage: stages.notStarted }
-    }
-    quests = DEFAULT_QUESTS
-    localStorage.quests = JSON.stringify(quests)
+	const DEFAULT_QUESTS = {
+		seeCommunityPosts: { stage: stages.notStarted }
+	}
+	quests = DEFAULT_QUESTS
+	localStorage.quests = JSON.stringify(quests)
 }
 else {
-    quests = JSON.parse(localStorage.quests)
+	quests = JSON.parse(localStorage.quests)
 }
 
 function syncLocalStorage(target) {
-    const handler = {
-        get(obj, prop) {
-            if (typeof obj[prop] === "object" && obj[prop] !== null) {
-                return new Proxy(obj[prop], handler)
-            }
-            return obj[prop]
-        },
-        set(obj, key, value) {
-            obj[key] = value
-            localStorage.quests = JSON.stringify(quests)
-            return true
-        }
-    }
-    return new Proxy(target, handler)
+	const handler = {
+		get(obj, prop) {
+			if (typeof obj[prop] === "object" && obj[prop] !== null) {
+				return new Proxy(obj[prop], handler)
+			}
+			return obj[prop]
+		},
+		set(obj, key, value) {
+			obj[key] = value
+			localStorage.quests = JSON.stringify(quests)
+			return true
+		}
+	}
+	return new Proxy(target, handler)
 }
 quests = syncLocalStorage(quests)
 
-if (quests.seeCommunityPosts.stage <= stages.notStarted) {
-    closebtn.classList.add("please-click")
-    const closeClicked = () => {
-        closebtn.classList.remove("please-click")
-        quests.seeCommunityPosts.stage = stages.closebtnClicked
-        AUDIOS.bell.run()
-        confetti({
-            particleCount: 100,
-            spread: 70,
-            origin: { y: 0.6 },
-        })
-        closebtn.removeEventListener("click", closeClicked)
-    }
-    closebtn.addEventListener("click", closeClicked)
+const questsFrame = document.getElementById("questsFrame")
+questsFrame.addEventListener("load", function() {
+	if (quests.seeCommunityPosts.stage <= stages.notStarted) {
+		closebtn.classList.add("please-click")
+		const closeClicked = () => {
+			closebtn.classList.remove("please-click")
+			quests.seeCommunityPosts.stage = stages.closebtnClicked
+			AUDIOS.bell.run()
+			confetti({
+				particleCount: 100,
+				spread: 70,
+				origin: { y: 0.6 },
+			})
+			closebtn.removeEventListener("click", closeClicked)
+		}
+		closebtn.addEventListener("click", closeClicked)
+	}
+	if (quests.seeCommunityPosts.stage <= stages.closebtnClicked) {
+		postsFrame.addEventListener("load", function(e) {
+			const postJumpButton = postsFrame.contentDocument.querySelector("#postJumpButton")
+			postJumpButton.classList.add("please-click")
+			const postJumpClicked = () => {
+				postJumpButton.classList.remove("please-click")
+				quests.seeCommunityPosts.stage = stages.postJumpButtonClicked
+				AUDIOS.celebration.run()
+				confetti({
+					particleCount: 100,
+					spread: 100,
+					origin: { y: 0.6 },
+				})
+	
+				// Display quests popup
+				questsFrame.style.display = "block"
+				const questsDescription = questsFrame.contentDocument.querySelector("#questsDescription")
+				questsDescription.textContent = "You have visited the community posts menu. Here you share canvas arts, make public announcements and chat with the community!"
+	
+				postJumpButton.removeEventListener("click", postJumpClicked)
+			}
+			postJumpButton.addEventListener("click", postJumpClicked)    
+		})    
+	}
+})
+
+function closeQuestsFrame() {
+	questsFrame.style.display = "none"
 }
-if (quests.seeCommunityPosts.stage <= stages.closebtnClicked) {
-    postsFrame.addEventListener("load", function(e) {
-        const postJumpButton = postsFrame.contentDocument.querySelector("#postJumpButton")
-        postJumpButton.classList.add("please-click")
-        const postJumpClicked = () => {
-            postJumpButton.classList.remove("please-click")
-            quests.seeCommunityPosts.stage = stages.postJumpButtonClicked
-            AUDIOS.celebration.run()
-            confetti({
-                particleCount: 100,
-                spread: 100,
-                origin: { y: 0.6 },
-            })
-            questsDescription.textContent = "You have visited the community posts menu. Here you share canvas arts, make public announcements and chat with the community!"
-            questsDialog.showModal()
-            postJumpButton.removeEventListener("click", postJumpClicked)
-        }
-        postJumpButton.addEventListener("click", postJumpClicked)    
-    })    
-}
\ No newline at end of file
diff --git a/restore.sh b/restore.sh
deleted file mode 100755
index a00bea39e..000000000
--- a/restore.sh
+++ /dev/null
@@ -1,9 +0,0 @@
-#!/bin/bash
-#WARNING: Script only designed to be used on official rplace.tk initial canvas, do not run without modifications if you intend to use for your own solution.
-sudo systemctl stop place
-sudo rm place
-curl https://raw.githubusercontent.com/rslashplace2/rslashplace2.github.io/$1/place -o place
-chmod +x place
-sudo rm change
-sudo systemctl start place
-push
\ No newline at end of file
diff --git a/robots.txt b/robots.txt
index 99934c76c..1a5ad92e5 100644
--- a/robots.txt
+++ b/robots.txt
@@ -1,4 +1,17 @@
-User-agent: YandexAccessibilityBot
+User-agent: Googlebot
+Disallow:
+
+User-agent: Googlebot-Image
+Disallow:
+
+User-agent: Googlebot-News
+Disallow:
+
+User-agent: Googlebot-Video
+Disallow:
+
 User-agent: YandexBot
-User-agent: Yandex
 Disallow: /
+
+User-agent: *
+Disallow:
\ No newline at end of file
diff --git a/rplace-2022.css b/rplace-2022.css
index a953532bc..6cbb0254b 100644
--- a/rplace-2022.css
+++ b/rplace-2022.css
@@ -1,4 +1,5 @@
 :root {
+	--ui-frame-shadow: none;
 	--ui-background: #333;
 	--ui-panel-hover: lightgrey;
 	--ui-panel-bg: white;
@@ -6,6 +7,7 @@
 }
 
 :root[data-variant="dark"] {
+	--ui-frame-shadow: none;
 	--ui-background: black;
 	--ui-panel-hover: #313131;
 	--ui-panel-bg: #141414;
@@ -15,6 +17,18 @@
 	filter: invert(1);
 }
 
+:root[data-variant="merry"] {
+	--ui-frame-shadow: inset 0 0 32px #10ad3a;
+	--ui-background: linear-gradient(to bottom, #568dae, #7fa2b4 30%, #8e9eac 60%, #bdb6a7 90%);
+	--ui-panel-hover: #f7c6c6;
+	--ui-panel-bg: #ffffff;
+	--ui-text: #333333;
+}
+
+::selection {
+	background-color: var(--ui-panel-hover);
+}
+
 html, body {
 	color: var(--ui-text);
 	background: var(--ui-background);
@@ -98,8 +112,8 @@ input[type=range]::-webkit-slider-thumb {
 	cursor: pointer;
 }
 
-input:focus, button:focus, textarea:focus {
-    outline: auto;
+input:focus-visible, button:focus-visible, textarea:focus-visible {
+	outline: auto;
 }
 
 a {
@@ -107,14 +121,19 @@ a {
 }
 
 #loadingScreen {
-    background: #d6dfe3;
+	background: #d6dfe3;
+}
+
+#maincontent {
+	box-shadow: var(--ui-frame-shadow);
 }
 
 #modal {
-    background: var(--ui-panel-bg);
-    border-radius: 8px;
-    width: min(325px, calc(100% - 64px));
-    padding: 24px;
+	border: none;
+	background: var(--ui-panel-bg);
+	border-radius: 8px;
+	width: min(325px, calc(100% - 64px));
+	padding: 24px;
 }
 
 @media (max-width:500px){
@@ -229,6 +248,8 @@ a {
 	text-align: center;
 	font-size: 25px;
 	line-height: 8px;
+	display: flex;
+	justify-content: center;
 }
 
 #helpbtn, #posel, #place, #archiveView, .toast-menu, #captchaPopup, #closebtn, #timelapsePanel {
@@ -256,7 +277,7 @@ a {
 
 #messageInput {
 	color: var(--ui-text);
-    padding-top: 8px;
+	padding-top: 8px;
 	height: max(35px, var(--message-input-height));
 }
 #messageInput[state="command"] {
@@ -269,12 +290,16 @@ a {
 	background: var(--ui-panel-hover);
 	border-radius: 4px;
 }
-.ad-close {
-    color: var(--ui-text);
+
+.chat-ad-ins::before {
+	background: var(--ui-panel-bg);
+}
+.chat-ad-close {
+	color: var(--ui-text);
 }
 
 .toast-menu {
-    padding: 10px;
+	padding: 10px;
 	line-height: 17px;
 	background: var(--ui-panel-bg);
 	border-radius: 15px;
@@ -334,7 +359,7 @@ a {
 	height: 35px;
 	aspect-ratio: 1/1;
 	text-align: center;
-    line-height: 18px;
+	line-height: 18px;
 	cursor: pointer;
 	font-weight: bolder;
 	border-radius: 10px;
@@ -353,6 +378,11 @@ a {
 	box-shadow: 0 0 10px rgba(0,0,0,0.4);
 }
 
+.channel-button {
+	background: transparent;
+	box-shadow: none;
+}
+
 #captchaPopup {
 	padding: 24px;
 	border-radius: 8px;
@@ -398,24 +428,24 @@ a {
 }
 
 #onlineCounter {
-    color: white;
+	color: white;
 }
 
 #popup {
-    border: none;
-    background: white;
-    border-radius: 20px;
-    box-shadow: 0 0 0 1000px #0004, 0 0 100px #000;
+	border: none;
+	background: white;
+	border-radius: 20px;
+	box-shadow: 0 0 0 1000px #0004, 0 0 100px #000;
 }
 
 #popup r-close-icon {
-    position: absolute;
-    top: 9px;
-    right: 12px;
+	position: absolute;
+	top: 9px;
+	right: 12px;
 }
 
 #popup > div {
-    padding: 12px;
+	padding: 12px;
 }
 
 #eventCountdown {
diff --git a/rplace-2023.css b/rplace-2023.css
index cd9141b81..4f7d571ed 100644
--- a/rplace-2023.css
+++ b/rplace-2023.css
@@ -1,94 +1,94 @@
 :root {
-    font-size: 16px;
-    --font-pixel: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
-    --pixel-color-orange: #d93a00;
-    --pixel-border: 3px solid #000000;
-    --pixel-box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.75);
-    --pixel-border-size: 3px;
-    --pixel-shadow-size: 8px;
-    --pixel-shadow-color: rgba(0, 0, 0, 0.75);
-    --gray-color: #576f76
+	font-size: 16px;
+	--font-pixel: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
+	--pixel-color-orange: #d93a00;
+	--pixel-border: 3px solid #000000;
+	--pixel-box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.75);
+	--pixel-border-size: 3px;
+	--pixel-shadow-size: 8px;
+	--pixel-shadow-color: rgba(0, 0, 0, 0.75);
+	--gray-color: #576f76
 }
 :root, button, html, input, select, textarea {
-    font-family: var(--font-pixel);
+	font-family: var(--font-pixel);
 }
 
 input {
-    color: black;
-    border: var(--pixel-border);
-    outline: none;
-    height: 38px;
-    padding: 4px;
+	color: black;
+	border: var(--pixel-border);
+	outline: none;
+	height: 38px;
+	padding: 4px;
 }
 
 input[type="radio"] {
-    height: auto;
-    width: 16px;
+	height: auto;
+	width: 16px;
 }
 
 button, input[type="button"], textarea {
-    border: var(--pixel-border);
-    background-color: white;
-    height: 36px;
+	border: var(--pixel-border);
+	background-color: white;
+	height: 36px;
 }
 
 button:hover, input[type="button"]:hover {
-    background-color: lightgray;
+	background-color: lightgray;
 }
 
 input[type="button"]:disabled, button:disabled {
-    cursor: default;
-    color: #0000009c;
-    pointer-events: none;
-    background-color: lightgray;
+	cursor: default;
+	color: #0000009c;
+	pointer-events: none;
+	background-color: lightgray;
 }
 
-input:focus, button:focus, textarea:focus {
-    outline: auto;
+input:focus-visible, button:focus-visible, textarea:focus-visible {
+	outline: auto;
 }
 
 body {
-    background-color: #333;
+	background-color: #333;
 }
 
 #loadingScreen {
-    background: white;
+	background: white;
 }
 
 #modal {
-    background: rgb(255, 255, 255);
-    color: rgb(0, 0, 0);
-    width: 261px;
-    padding: 21px;
-    border: var(--pixel-border);
-    box-shadow: var(--pixel-box-shadow);
+	background: rgb(255, 255, 255);
+	color: rgb(0, 0, 0);
+	width: 261px;
+	padding: 21px;
+	border: var(--pixel-border);
+	box-shadow: var(--pixel-box-shadow);
 }
 
 .modal-footer > img {
-    display: none;
+	display: none;
 }
 
 .modal-install {
-    border: var(--pixel-border);
+	border: var(--pixel-border);
 	height: 40px;
 	align-self: center;
 	width: 80%;
-    line-height: 28px;
-    cursor: pointer;
-    padding: 4px;
+	line-height: 28px;
+	cursor: pointer;
+	padding: 4px;
 }
 
 .modal-install:hover {
-    background: linear-gradient(rgba(0, 0, 0, 0.2) 0px, rgba(0, 0, 0, 0.2) 0px), rgb(255, 255, 255);
+	background: linear-gradient(rgba(0, 0, 0, 0.2) 0px, rgba(0, 0, 0, 0.2) 0px), rgb(255, 255, 255);
 }
 
 #themeDropParent {
-    border-bottom: var(--pixel-border);
+	border-bottom: var(--pixel-border);
 }
 
 .context-menu {
-    border: var(--pixel-border);
-    background-color: white;
+	border: var(--pixel-border);
+	background-color: white;
 }
 .context-menu > ul > li:hover {
 	background: lightgrey;
@@ -96,38 +96,38 @@ body {
 
 /* Buttons */
 .layout {
-    border: var(--pixel-border);
-    box-shadow: var(--pixel-box-shadow);
-    font-family: var(--font-pixel);
-    background-color: rgb(255, 255, 255);
-    display: flex;
-    width: 46px;
+	border: var(--pixel-border);
+	box-shadow: var(--pixel-box-shadow);
+	font-family: var(--font-pixel);
+	background-color: rgb(255, 255, 255);
+	display: flex;
+	width: 46px;
 	height: 46px;
-    align-items: center;
-    justify-content: center;
-    color: rgb(0, 0, 0);
-    font-size: var(--font-size);
-    pointer-events: all;
-    position: absolute;
-    z-index: 5;
+	align-items: center;
+	justify-content: center;
+	color: rgb(0, 0, 0);
+	font-size: var(--font-size);
+	pointer-events: all;
+	position: absolute;
+	z-index: 5;
 }
 
 .layout:hover {
-    background: linear-gradient(rgba(0, 0, 0, 0.2) 0px, rgba(0, 0, 0, 0.2) 0px), rgb(255, 255, 255);
+	background: linear-gradient(rgba(0, 0, 0, 0.2) 0px, rgba(0, 0, 0, 0.2) 0px), rgb(255, 255, 255);
 }
 
 #helpbtn {
 	bottom: 20px;
-    left: calc(50% - 140px);
+	left: calc(50% - 140px);
 }
 #helpbtn > img {
-    height: 24px;
+	height: 24px;
 }
 
 #chatbtn {
 	bottom: 20px;
-    right: calc(50% - 140px);
-    line-height: 15px;
+	right: calc(50% - 140px);
+	line-height: 15px;
 	text-align: center;
 }
 
@@ -140,32 +140,32 @@ body {
 }
 
 r-close-icon {
-    position: absolute;
-    right: 0px;
-    top: 0px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 29px;
-    height: 29px;
-    font-size: 20px;
-    cursor: pointer;
-    border-left: var(--pixel-border);
-    border-bottom: var(--pixel-border);
+	position: absolute;
+	right: 0px;
+	top: 0px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 29px;
+	height: 29px;
+	font-size: 20px;
+	cursor: pointer;
+	border-left: var(--pixel-border);
+	border-bottom: var(--pixel-border);
 }
 
 #posel {
-    position: absolute;
-    bottom: 24px;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 140px;
-    text-align: center;
-    z-index: 6;
-    pointer-events: none;
-    color: white;
-    font-family: var(--font-pixel);
-    font-size: 14px;
+	position: absolute;
+	bottom: 24px;
+	left: 50%;
+	transform: translateX(-50%);
+	width: 140px;
+	text-align: center;
+	z-index: 6;
+	pointer-events: none;
+	color: white;
+	font-family: var(--font-pixel);
+	font-size: 14px;
 }
 
 #palette {
@@ -174,46 +174,51 @@ r-close-icon {
 }
 
 #namePanel {
-    border-top: var(--pixel-border);
-    background-color: white;
+	border-top: var(--pixel-border);
+	background-color: white;
 }
 
 .name-input-container > button {
-    background-color: white;
-    border: var(--pixel-border);
-    padding: 4px;
-    transition: background-color .1s ease-in;
+	background-color: white;
+	border: var(--pixel-border);
+	padding: 4px;
+	transition: background-color .1s ease-in;
 }
 
 .name-input-container > button:hover {
-    background-color: lightgray;
+	background-color: lightgray;
 }
 
 .message-options {
 	height: 38px;
 	aspect-ratio: 1/1;
-    text-align: center;
-    line-height: 24px;
-    cursor: pointer;
-    font-weight: bolder;
-    border: var(--pixel-border);
+	text-align: center;
+	line-height: 24px;
+	cursor: pointer;
+	font-weight: bolder;
+	border: var(--pixel-border);
 }
 
 .chat-input-panel {
-    background-color: white;
-    border-top: var(--pixel-border);
-    padding-top: 8px;
+	background-color: white;
+	border-top: var(--pixel-border);
+	padding-top: 8px;
 }
 
 .channels-options {
 	border-bottom: var(--pixel-border);
 }
 
+.channel-button {
+	background: transparent;
+	border: none;
+}
+
 #captchaPopup {
 	padding: 24px;
-    border: var(--pixel-border);
+	border: var(--pixel-border);
 	background-color: white;
-    box-shadow: var(--pixel-box-shadow);
+	box-shadow: var(--pixel-box-shadow);
 }
 
 .captcha-options-button {
@@ -231,15 +236,15 @@ r-close-icon {
 }
 
 #captchaImg {
-    border: var(--pixel-border);
+	border: var(--pixel-border);
 }
 
 /* TODO: Unjank */
 .live-chat-header1 {
-    display: none;
+	display: none;
 }
 .live-chat-header2 {
-    display: block !important;
+	display: block !important;
 }
 
 #playerIcon {
@@ -247,34 +252,34 @@ r-close-icon {
 }
 
 #onlineCounter {
-    color: black;
+	color: black;
 }
 
 #place {
-    width: 142px;
-    height: 46px;
-    display: flex;
-    color: rgb(255, 255, 255);
-    background-color: var(--pixel-color-orange);
-    font-size: 14px;
-    border: var(--pixel-border);
-    box-shadow: var(--pixel-box-shadow);
-    justify-content: center;
-    font-family: var(--font-pixel);
+	width: 142px;
+	height: 46px;
+	display: flex;
+	color: rgb(255, 255, 255);
+	background-color: var(--pixel-color-orange);
+	font-size: 14px;
+	border: var(--pixel-border);
+	box-shadow: var(--pixel-box-shadow);
+	justify-content: center;
+	font-family: var(--font-pixel);
 }
 #place:hover {
-    background: linear-gradient(rgba(0, 0, 0, 0.2) 0 0), var(--pixel-color-orange);
+	background: linear-gradient(rgba(0, 0, 0, 0.2) 0 0), var(--pixel-color-orange);
 }
 
 #chatPanel {
-    border: var(--pixel-border);
-    background: white;
-    padding: 8px;
+	border: var(--pixel-border);
+	background: white;
+	padding: 8px;
 }
 #messageInput {
 	color: var(--ui-text);
-    padding: 4px;
-    height: max(38px, var(--message-input-height));
+	padding: 4px;
+	height: max(38px, var(--message-input-height));
 }
 #messageInput[state="command"] {
 	color: #00FA9A;
@@ -283,17 +288,21 @@ r-close-icon {
 	background: lightgrey;
 }
 .chat-header {
-    margin-right: 24px;
+	margin-right: 24px;
 }
-.ad-close {
-    color: black;
+
+.chat-ad-ins::before {
+	background: var(--ui-panel-bg);
+}
+.chat-ad-close {
+	color: black;
 }
 
 .toast-menu {
-    border: var(--pixel-border);
-    box-shadow: var(--pixel-box-shadow);
-    padding: 21px;
-    background-color: white;
+	border: var(--pixel-border);
+	box-shadow: var(--pixel-box-shadow);
+	padding: 21px;
+	background-color: white;
 }
 
 #modMessagePreview {
@@ -301,51 +310,51 @@ r-close-icon {
 	padding: 8px;
 	background: #f7f7f7;
 	padding: 4px;
-    opacity: 0.8;
+	opacity: 0.8;
 }
 
 .tooltip {
-    cursor: pointer;
-    background-color: white !important;
-    text-align: center !important;
-    border-radius: 0px !important;
-    padding: 2px 5px !important;
-    position: absolute;
-    z-index: 8;
-    box-shadow: 0 0 10px rgba(0,0,0,0.4);
-    top: 32px;
-    left: 50%;
-    transform: translateX(-50%);
-    transition: opacity .2s ease-out;
-    border: var(--pixel-border);
+	cursor: pointer;
+	background-color: white !important;
+	text-align: center !important;
+	border-radius: 0px !important;
+	padding: 2px 5px !important;
+	position: absolute;
+	z-index: 8;
+	box-shadow: 0 0 10px rgba(0,0,0,0.4);
+	top: 32px;
+	left: 50%;
+	transform: translateX(-50%);
+	transition: opacity .2s ease-out;
+	border: var(--pixel-border);
 }
 
 .tooltip::before {
-    content: " ";
-    position: absolute;
-    left: calc(50% - 8px);
-    background: white !important;
-    width: 16px;
-    height: 16px;
-    transform: rotate(45deg) translate(-50%, -50%);
-    border: var(--pixel-border);
+	content: " ";
+	position: absolute;
+	left: calc(50% - 8px);
+	background: white !important;
+	width: 16px;
+	height: 16px;
+	transform: rotate(45deg) translate(-50%, -50%);
+	border: var(--pixel-border);
 }
 
 #popup {
 
-    border: var(--pixel-border);
-    background: white;
+	border: var(--pixel-border);
+	background: white;
 }
 
 #popup r-close-icon {
-    position: absolute;
-    right: 0px;
-    top: 0px;
+	position: absolute;
+	right: 0px;
+	top: 0px;
 }
 
 #popup > div {
 	padding: 12px;
-    padding-top: 4px;
+	padding-top: 4px;
 }
 
 #eventCountdown {
@@ -353,18 +362,18 @@ r-close-icon {
 }
 r-spoiler {
 	display: inline-block;
-    color: inherit;
+	color: inherit;
 	transition: .2s text-shadow;
 }
 r-spoiler[hidden] {
-    color: transparent;
+	color: transparent;
 	cursor: pointer;
 	text-shadow: 0px 0px 4px var(--ui-text);
 	color: transparent;
 	cursor: pointer;
 	background-color: white;
-    border: var(--pixel-border);
+	border: var(--pixel-border);
 }
 r-spoiler[hidden]:hover {
-    background-color: lightgray;
+	background-color: lightgray;
 }
\ No newline at end of file
diff --git a/server.ts b/server.ts
index 19c00946a..c2ff182a7 100644
--- a/server.ts
+++ b/server.ts
@@ -20,7 +20,7 @@ import cookie from "cookie"
 import repl from "basic-repl"
 import { $, Server, ServerWebSocket, TLSWebSocketServeOptions } from "bun"
 import { DbInternals, LiveChatMessage } from "./db-worker.ts"
-import { PublicPromise } from "./server-types.ts"
+import { PublicPromise, ReactionInfo } from "./server-types.ts"
 import { distance } from "fastest-levenshtein"
 
 let BOARD:Uint8Array, CHANGES:Uint8Array, PLACERS:Buffer
@@ -102,77 +102,84 @@ if (configFailed) {
     process.exit(0)
 }
 
-const DEFAULT_EMOJIS = {
-    rofl: "🤣",
-    joy: "😂",
-    cool: "😎",
-    sunglasses: "😎",
-    heart: "❤️",
-    moyai: "🗿",
-    bruh: "🗿",
-    turkey: "🇹🇷",
-    skull: "💀",
-    sus: "ඞ",
-    iran: "🇮🇷",
-    uk: "🇬🇧",
-    usa: "🇺🇸",
-    america: "🇺🇸",
-    eyes: "👀",
-    fire: "🔥",
-    thumbsup: "👍",
-    thumbsdown: "👎",
-    clown: "🤡",
-    facepalm: "🤦‍♂️",
-    ok: "👌",
-    poop: "💩",
-    rocket: "🚀",
-    tada: "🎉",
-    celebration: "🎉",
-    moneybag: "💰",
-    crown: "👑",
-    muscle: "💪",
-    beer: "🍺",
-    pizza: "🍕",
-    cookie: "🍪",
-    balloon: "🎈",
-    gift: "🎁",
-    star: "⭐️",
-    love: "😍",
-    crying: "😢",
-    angry: "😠",
-    sleepy: "😴",
-    nerd: "🤓",
-    laughing: "😆",
-    vomiting: "🤮",
-    unicorn: "🦄",
-    alien: "👽",
-    ghost: "👻",
-    skullcrossbones: "☠️",
-    explosion: "💥",
-    shush: "🤫",
-    deaf: "🧏",
-    mew:"🤫🧏",
-    pray: "🙏",
-    thinking: "🤔"
-}
-const DEFAULT_CUSTOM_EMOJIS = {
-    amogus: "custom_emojis/amogus.png",
-    biaoqing: "custom_emojis/biaoqing.png",
-    deepfriedh: "custom_emojis/deepfriedh.png",
-    edp445: "custom_emojis/edp445.png",
-    fan: "custom_emojis/fan.png",
-    heavy: "custom_emojis/heavy.png",
-    herkul: "custom_emojis/herkul.png",
-    kaanozdil: "custom_emojis/kaanozdil.png",
-    lowtiergod: "custom_emojis/lowtiergod.png",
-    manly: "custom_emojis/manly.png",
-    plsaddred: "custom_emojis/plsaddred.png",
-    rplace: "custom_emojis/rplace.png",
-    rplacediscord: "custom_emojis/rplacediscord.png",
-    sonic: "custom_emojis/sonic.png",
-    transparent: "custom_emojis/transparent.png",
-    trollface: "custom_emojis/trollface.png"
-}
+const DEFAULT_EMOJIS = new Map([
+    [ "rofl", "🤣" ],
+    [ "joy", "😂" ],
+    [ "cool", "😎" ],
+    [ "sunglasses", "😎" ],
+    [ "heart", "❤️" ],
+    [ "moyai", "🗿" ],
+    [ "bruh", "🗿" ],
+    [ "skull", "💀" ],
+    [ "sus", "ඞ" ],
+    [ "tr", "🇹🇷" ],
+    [ "turkey", "🇹🇷" ],
+    [ "ir", "🇮🇷" ],
+    [ "iran", "🇮🇷" ],
+    [ "uk", "🇬🇧" ],
+    [ "britain", "🇬🇧" ],
+    [ "usa", "🇺🇸" ],
+    [ "america", "🇺🇸" ],
+    [ "ru", "🇷🇺" ],
+    [ "russia", "🇷🇺" ],
+    [ "eyes", "👀" ],
+    [ "fire", "🔥" ],
+    [ "thumbsup", "👍" ],
+    [ "thumbsdown", "👎" ],
+    [ "clown", "🤡" ],
+    [ "facepalm", "🤦‍♂️" ],
+    [ "ok", "👌" ],
+    [ "poop", "💩" ],
+    [ "rocket", "🚀" ],
+    [ "tada", "🎉" ],
+    [ "celebration", "🎉" ],
+    [ "moneybag", "💰" ],
+    [ "crown", "👑" ],
+    [ "muscle", "💪" ],
+    [ "beer", "🍺" ],
+    [ "pizza", "🍕" ],
+    [ "cookie", "🍪" ],
+    [ "balloon", "🎈" ],
+    [ "gift", "🎁"],
+    [ "star", "⭐️" ],
+    [ "love", "😍" ],
+    [ "crying", "😢" ],
+    [ "angry", "😠" ],
+    [ "sleepy", "😴" ],
+    [ "nerd", "🤓" ],
+    [ "laughing", "😆" ],
+    [ "vomiting", "🤮" ],
+    [ "unicorn", "🦄" ],
+    [ "alien", "👽" ],
+    [ "ghost", "👻" ],
+    [ "skullcrossbones", "☠️" ],
+    [ "explosion", "💥" ],
+    [ "shush", "🤫" ],
+    [ "deaf", "🧏" ],
+    [ "mew", "🤫🧏" ],
+    [ "pray", "🙏" ],
+    [ "thinking", "🤔" ],
+    [ "sweat", "😅" ],
+    [ "wave", "👋"]
+])
+const DEFAULT_CUSTOM_EMOJIS = new Map([
+    [ "amogus", "custom_emojis/amogus.png" ],
+    [ "biaoqing", "custom_emojis/biaoqing.png" ],
+    [ "deepfriedh", "custom_emojis/deepfriedh.png" ],
+    [ "edp445", "custom_emojis/edp445.png" ],
+    [ "fan", "custom_emojis/fan.png" ],
+    [ "heavy", "custom_emojis/heavy.png" ],
+    [ "herkul", "custom_emojis/herkul.png" ],
+    [ "kaanozdil", "custom_emojis/kaanozdil.png" ],
+    [ "lowtiergod", "custom_emojis/lowtiergod.png" ],
+    [ "manly", "custom_emojis/manly.png" ],
+    [ "plsaddred", "custom_emojis/plsaddred.png" ],
+    [ "rplace", "custom_emojis/rplace.png" ],
+    [ "rplacediscord", "custom_emojis/rplacediscord.png" ],
+    [ "sonic", "custom_emojis/sonic.png" ],
+    [ "transparent", "custom_emojis/transparent.png" ],
+    [ "trollface", "custom_emojis/trollface.png" ]
+])
 const DEFAULT_PALETTE = [ 0xff1a006d, 0xff3900be, 0xff0045ff, 0xff00a8ff, 0xff35d6ff, 0xffb8f8ff, 0xff68a300, 0xff78cc00, 0xff56ed7e, 0xff6f7500, 0xffaa9e00, 0xffc0cc00, 0xffa45024, 0xffea9036, 0xfff4e951, 0xffc13a49, 0xffff5c6a, 0xffffb394, 0xff9f1e81, 0xffc04ab4, 0xffffabe4, 0xff7f10de, 0xff8138ff, 0xffaa99ff, 0xff2f486d, 0xff26699c, 0xff70b4ff, 0xff000000, 0xff525251, 0xff908d89, 0xffd9d7d4, 0xffffffff ]
 let { SECURE, CERT_PATH, PORT, KEY_PATH, WIDTH, HEIGHT, ORIGINS, PALETTE, PALETTE_USABLE_REGION, COOLDOWN, CAPTCHA,
     PXPS_SECURITY, USE_CLOUDFLARE, PUSH_LOCATION, PUSH_PLACE_PATH, LOCKED, CHAT_WEBHOOK_URL, MOD_WEBHOOK_URL,
@@ -568,7 +575,7 @@ function censorText(text:string):string {
  * @param {number?} positionIndex - Index on canvas of place chat message (u32)
  * @returns {Buffer} Message packet data prepended with packet code (15)
  */
-function createChatPacket(type: number, message: string, sendDate: number, messageId: number, intId: number, channel: string|null = null, repliesTo: number|null = null, positionIndex: number|null = null): Buffer {
+function createChatPacket(type: number, message: string, sendDate: number, messageId: number, intId: number, channel: string|null = null, repliesTo: number|null = null, reactions: Map<string, number[]>|null = null, positionIndex: number|null = null): Buffer {
     let encodedChannel:Uint8Array|null = null
     if (channel) encodedChannel = encoderUTF8.encode(channel)
     const encodedTxt = encoderUTF8.encode(message)
@@ -585,9 +592,18 @@ function createChatPacket(type: number, message: string, sendDate: number, messa
 
     if (type == 0 && encodedChannel != null) { // Live chat message
         msgPacket.writeUInt32BE(sendDate, i); i += 4
-        // TODO: reactions
-        msgPacket[i] = 0; i++
-        // TODO: reactions
+        msgPacket[i] = reactions?.size || 0; i++
+        if (reactions != null) {
+            for (const [reactionKey, reactors] of reactions.entries()) {
+                const encodedReactionKey = encoderUTF8.encode(reactionKey)
+                msgPacket[i++] = encodedReactionKey.byteLength
+                msgPacket.set(encodedReactionKey)
+                msgPacket.writeUint32BE(reactors.length, i)
+                for (const reactor of reactors) {
+                    msgPacket.writeUint32BE(reactor, i); i += 4
+                }
+            }
+        }
         msgPacket[i] = encodedChannel.byteLength; i++
         msgPacket.set(encodedChannel, i); i += encodedChannel.byteLength
         if (repliesTo != null) {
@@ -688,18 +704,20 @@ async function applyPunishments(ws: ServerWebSocket<ClientData>, intId: number,
                 // Banned user ID on a new IP, ban this IP too
                 ipFinishMap.set(ip, punishInfo.finishDate)
             }
-            ws.send(createPunishPacket(stateType, punishInfo.startDate,
-                punishInfo.finishDate, punishInfo.reason, punishInfo.userAppeal, punishInfo.appealRejected))
+            const punishPacket = createPunishPacket(stateType, punishInfo.startDate,
+                punishInfo.finishDate, punishInfo.reason, punishInfo.userAppeal, punishInfo.appealRejected)
+            ws.send(punishPacket)
         }
         else if (ipFinish) {
-            ws.send(createPunishPacket(stateType, NOW, ipFinish, "Unknown", "N/A", true))
+            const punishPacket = createPunishPacket(stateType, NOW, ipFinish, "Unknown", "N/A", true)
+            ws.send(punishPacket)
         }    
     }
     await resolvePunishments("Bans", bans, PUNISHMENT_STATE.ban)
     await resolvePunishments("Mutes", mutes, PUNISHMENT_STATE.mute)
 }
 
-function rejectPixel(ws:ServerWebSocket<any>, i:number, cd:number) {
+function rejectPixel(ws:ServerWebSocket<ClientData>, i:number, cd:number) {
     const data = Buffer.alloc(10)
     data[0] = 7
     data.writeInt32BE(Math.ceil(cd / 1000) || 1, 1)
@@ -770,7 +788,14 @@ const serverOptions:TLSWebSocketServeOptions<ClientData> = {
                 })
             }
 
-            return new Response(JSON.stringify(usersInfo[0]), {
+            const userInfo = usersInfo[0]
+            for (const p of wss.clients) {
+                if (p.data.intId === userInfo.intId) {
+                    userInfo.online = true
+                    break
+                }
+            }
+            return new Response(JSON.stringify(userInfo), {
                 status: 200,
                 headers: { "Content-Type": "application/json", ...corsHeaders }
             })
@@ -883,7 +908,7 @@ const serverOptions:TLSWebSocketServeOptions<ClientData> = {
                     ws.data.challenge = "pending"
                 }
                 if (TURNSTILE) {
-                    const turnstileBuffer = encoderUTF8.encode("\x17" + TURNSTILE_SITE_KEY)
+                    const turnstileBuffer = encoderUTF8.encode("\x18" + TURNSTILE_SITE_KEY)
                     ws.send(turnstileBuffer)
                     ws.data.turnstile = "active"
                 }
@@ -1033,11 +1058,22 @@ const serverOptions:TLSWebSocketServeOptions<ClientData> = {
                     ws.send(placerInfoBuf)
                     break
                 }
-                case 11: { // Live chat reaction
+                case 18: { // Live chat reaction
                     const messageId = data.readUInt32BE(1)
                     const reactionKey = data.subarray(5).toString()
+                    // Validate reaction
+                    if (!DEFAULT_EMOJIS.has(reactionKey) && !DEFAULT_CUSTOM_EMOJIS.has(reactionKey)) {
+                        break
+                    }
                     postDbMessage("addLiveChatReaction", { messageId, reaction: reactionKey, senderIntId: ws.data.intId })
-                    // TODO: Implement this
+                    
+                    const encodedReaction = encoderUTF8.encode(reactionKey)
+                    const reactionBuf = Buffer.alloc(9 + encodedReaction.byteLength)
+                    reactionBuf[0] = 18
+                    reactionBuf.writeUint32BE(messageId, 1)
+                    reactionBuf.writeUint32BE(ws.data.intId, 5)
+                    reactionBuf.set(encodedReaction, 9)
+                    wss.publish("all", reactionBuf)
                     break
                 }
                 case 12: { // Submit name
@@ -1070,7 +1106,7 @@ const serverOptions:TLSWebSocketServeOptions<ClientData> = {
                     const messageHistory = await makeDbRequest("getLiveChatHistory", { messageId, count, before, channel }) as any[]
 
                     const messages:Buffer[] = []
-                    const usernames = new Map()
+                    const usernames = new Map() // TODO: Insert reactor usernames
                     let size = 7 + encChannel.byteLength
                     for (const row of messageHistory) {
                         usernames.set(row.senderIntId, row.chatName)
@@ -1088,7 +1124,7 @@ const serverOptions:TLSWebSocketServeOptions<ClientData> = {
                     ws.send(nmInfoBuf)
 
                     let i = 0
-                    const historyBuffer = Buffer.allocUnsafe(size)
+                    const historyBuffer = Buffer.alloc(size)
                     historyBuffer[i++] = 13
                     historyBuffer.writeUInt32BE(messageId, i); i += 4
                     historyBuffer[i++] = data[5]
@@ -1125,7 +1161,7 @@ const serverOptions:TLSWebSocketServeOptions<ClientData> = {
                         `Message:\n\`\`\`\n${sanitisedMessage}\n\`\`\`\n`)
                     break
                 }
-                case 15: { // chat
+                case 15: { // Chat
                     if (ws.data.lastChat + (CHAT_COOLDOWN_MS || 2500) > NOW
                         || data.length > (CHAT_MAX_LENGTH || 400) || bans.has(IP) || mutes.has(IP)
                         || ws.data.shadowBanned === true) {
@@ -1166,7 +1202,8 @@ const serverOptions:TLSWebSocketServeOptions<ClientData> = {
                     const msgSimilar = isSimilarToPrevious(message, previousBucket)
                     previousBucket.push(message)
                     if (msgSimilar) {
-                        ws.send(createChatPacket(type, "Your message was filtered for spam", Math.floor(NOW / 1000), 0, 0, channel, null, positionIndex))
+                        const spamChatPacket = createChatPacket(type, "Your message was filtered for spam", Math.floor(NOW / 1000), 0, 0, channel, null, null, positionIndex)
+                        ws.send(spamChatPacket)
                         return
                     }
 
@@ -1195,10 +1232,10 @@ const serverOptions:TLSWebSocketServeOptions<ClientData> = {
                     }
 
                     const censoredChatPacket = createChatPacket(type, censoredMessage, Math.floor(NOW / 1000), messageId, ws.data.intId,
-                        channel, repliesTo, positionIndex)
+                        channel, repliesTo, null, positionIndex)
                     if (censoredMessage !== message) {
                         const chatPacket = createChatPacket(type, message, Math.floor(NOW / 1000), messageId, ws.data.intId,
-                            channel, repliesTo, positionIndex)
+                            channel, repliesTo, null, positionIndex)
                         for (const p of wss.clients) {
                             p.send(p === ws ? chatPacket : censoredChatPacket)
                         }
@@ -1219,7 +1256,7 @@ const serverOptions:TLSWebSocketServeOptions<ClientData> = {
                     }catch (err){ console.log("Could not post chat message to discord: " + err) }
                     break
                 }
-                case 16: { // Captcha
+                case 16: { // Captcha response
                     const response = data.subarray(1).toString()
                     const info = toValidate.get(ws)
                     if (info && response === info.answer && info.start + CAPTCHA_EXPIRY_SECS * 1000 > NOW) {
@@ -1244,7 +1281,7 @@ const serverOptions:TLSWebSocketServeOptions<ClientData> = {
                     }
                     break
                 }
-                case 21: {
+                case 23: {
                     const result = await padlock.verifySolution(ws, data)
                     if (result === "badpacket" || result === "nosolution") return ws.close(4000, "Invalid solve packet")
                     if (result === false) {
@@ -1257,7 +1294,7 @@ const serverOptions:TLSWebSocketServeOptions<ClientData> = {
                     }
                     break
                 }
-                case 23: {
+                case 24: {
                     const turnstileToken = decoderUTF8.decode(data.buffer.slice(1))
                     if (!turnstileToken) return ws.close(4000, "Invalid turnstile packet")
                     const outcome = await verifyTurnstile(turnstileToken, ws.data.ip)
@@ -1266,12 +1303,12 @@ const serverOptions:TLSWebSocketServeOptions<ClientData> = {
                             modWebhookLog(`Couldn't verify turnstile for client ${IP}/${ws.data.intId} bad cloudflare HTTP response, kicking`)
                             return ws.close(4000, "Internal turnstile fail")
                         }
-                        case  "fail": {
+                        case "fail": {
                             modWebhookLog(`Client ${IP}/${ws.data.intId} gave an incorrect turnstile token, kicking`)
                             return ws.close(4000, "No turnstile")
                         }
                         default: {
-                            const turnstileSuccessBuf = Buffer.from([24])
+                            const turnstileSuccessBuf = Buffer.from([25])
                             ws.send(turnstileSuccessBuf)
                             delete ws.data.turnstile
                             break
@@ -1292,7 +1329,7 @@ const serverOptions:TLSWebSocketServeOptions<ClientData> = {
                     ws.data.shadowBanned = true
                     const sanitisedDetail = detail.replaceAll("```", "`​`​`​")
                     modWebhookLog("Client activity reported webdriver usage:\nClient data:\n```\n" +
-                        `Ip: ${ws.data.ip}\nChat name: ${ws.data.chatName}\nUser id: ${ws.data.intId}\nPerms: ${ws.data.perms}\nHeaders: ${JSON.stringify(ws.data.headers, null, 4)}\n` +
+                        `Ip: ${ws.data.ip}\nChat name: ${ws.data.chatName}\nUser ID: ${ws.data.intId}\nPerms: ${ws.data.perms}\nHeaders: ${JSON.stringify(ws.data.headers, null, 4)}\n` +
                         `Connect date: ${new Date(ws.data.connDate).toLocaleString()}\nLast period captcha: ${new Date(ws.data.lastPeriodCaptcha).toLocaleString()}\n` +
                         `\`\`\`\nClient details (untrusted):\n\`\`\`\n${sanitisedDetail}\n\`\`\`\nServer has temporarily shadowbanned this connection.`)
                     break
@@ -1595,13 +1632,13 @@ async function forceCaptchaSolve(identifier:string|number|ServerWebSocket<Client
         toValidate.set(cli, { start: NOW, answer: result.answer })
         const dv = new DataView(new ArrayBuffer(3 + encodedDummies.byteLength + result.data.byteLength))
         if (currentCaptcha == zcaptcha.genTextCaptcha) {
-            dv.setUint8(0, 18)
+            dv.setUint8(0, 20)
         }
         else if (currentCaptcha == zcaptcha.genMathCaptcha) {
-            dv.setUint8(0, 19)
+            dv.setUint8(0, 21)
         }
         else if (currentCaptcha == zcaptcha.genEmojiCaptcha) {
-            dv.setUint8(0, 20)
+            dv.setUint8(0, 22)
         }
         else {
             throw new Error("Could not generate captcha packet. Handler for packet code doesn't exist")
diff --git a/shared-elements.js b/shared-elements.js
new file mode 100644
index 000000000..84c3b7b6c
--- /dev/null
+++ b/shared-elements.js
@@ -0,0 +1,165 @@
+import { LitElement, html, unsafeHTML } from "./lit.all.min.js"
+
+class Spoiler extends HTMLElement {
+	constructor() {
+		super()
+		this.addEventListener("click", () => {
+			this.show()
+		})
+	}
+	show() {
+		this.removeAttribute("hidden")
+	}
+	static get observedAttributes() {
+		return ["hidden"]
+	}
+}
+customElements.define("r-spoiler", Spoiler)
+
+class PostCopy extends HTMLElement {
+	constructor() {
+		super()
+	}
+	static get observedAttributes() {
+		return ["href"]
+	}
+	async connectedCallback() {
+		const clipbardSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
+		clipbardSvg.setAttribute("viewBox", "0 0 48 48")
+		clipbardSvg.setAttribute("width", "30")
+		clipbardSvg.setAttribute("height", "30")
+		clipbardSvg.setAttribute("opacity", "0.6")
+		clipbardSvg.innerHTML = "<path d=\"M9 43.95q-1.2 0-2.1-.9-.9-.9-.9-2.1V10.8h3v30.15h23.7v3Zm6-6q-1.2 0-2.1-.9-.9-.9-.9-2.1v-28q0-1.2.9-2.1.9-.9 2.1-.9h22q1.2 0 2.1.9.9.9.9 2.1v28q0 1.2-.9 2.1-.9.9-2.1.9Zm0-3h22v-28H15v28Zm0 0v-28 28Z\"/>"
+		this.appendChild(clipbardSvg)
+		const copyStatusSpan = document.createElement("span")
+		copyStatusSpan.className = "copy-status"
+		// TODO: Use CSS
+		copyStatusSpan.style.opacity = 0
+		copyStatusSpan.style.position = "absolute"
+		copyStatusSpan.textContent = await translate("copiedToClipboard")
+		this.appendChild(copyStatusSpan)
+
+		this.addEventListener("click", (event) => {
+			const source = this.getAttribute("href")
+			event.stopPropagation()
+			navigator.clipboard.writeText(source)
+			copyStatusSpan.animate([
+				{ opacity: 1 },
+				{ scale: 1.1 }
+			], { duration: 1000, iterations: 1, })
+		})
+	}
+}
+customElements.define("r-clipboard-copy", PostCopy)
+
+class CloseIcon extends HTMLElement {
+	constructor() {
+		super()
+	}
+
+	connectedCallback() {
+		this.innerHTML = `
+			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="active">
+				<path d="M18.442 2.442l-.884-.884L10 9.116 2.442 1.558l-.884.884L9.116 10l-7.558 7.558.884.884L10 10.884l7.558 7.558.884-.884L10.884 10l7.558-7.558z" class=""></path>
+			</svg>`
+		this.tabIndex = 0
+		this.addEventListener("keydown", function(event) {
+			if (event.key == "Enter" || event.key == " ") {
+				this.click()
+			}
+		})
+	}
+}
+customElements.define("r-close-icon", CloseIcon)
+
+class EmojiPanel extends LitElement {
+	#onEmojiSelection = null
+
+	constructor() {
+		super()
+	}
+
+	connectedCallback() {
+		super.connectedCallback()
+		this.classList.add("context-menu")
+	}
+
+	set onemojiselection(handler) {
+		if (this.#onEmojiSelection) {
+			this.removeEventListener("emojiselection", this.#onEmojiSelection)
+		}
+		if (typeof handler === "function") {
+			this.#onEmojiSelection = handler
+			this.addEventListener("emojiselection", handler)
+		}
+	}
+
+	get onemojiselection() {
+		return this.#onEmojiSelection
+	}
+
+	// @ts-expect-error Remove shadow DOM by using element itself as the shadowroot
+	createRenderRoot() {
+		return this
+	}	
+
+	/**
+	 * @param {Map<any, any>} changedProperties
+	 */
+	willUpdate(changedProperties) {
+		if (changedProperties.has("class")) {
+			this.classList.add("context-menu")
+		}
+	}
+
+	render() {
+		const values = []
+		return html`
+			<div class="emojis-header">
+				<h3>Select an emoji:</h3>
+				<r-close-icon @click=${this.#notifyClose}></r-close-icon>
+			</div>
+			<div class="emojis-body">
+				<ul class="emojis-container">
+					${EMOJIS.entries().map(([emojiKey, value]) => {
+							let entry = null
+							if (!values.includes(value)) {
+								entry = html`<li title=${emojiKey}>
+										<button type="button" @click=${() => this.#notifySelection(emojiKey, value)}>${value}</button>
+									</li>`
+							}
+							values.push(value)
+							return entry
+						}
+					)}
+				</ul>
+				<hr>
+				<h4>Custom emojis:</h4>
+				<ul class="emojis-container">
+					${CUSTOM_EMOJIS.entries().map(([emojiKey, value]) =>
+						html`<li title=${emojiKey}>
+								<button type="button" @click=${() => this.#notifySelection(emojiKey, value)}>${unsafeHTML(value)}</button>
+							</li>`
+					)}
+				</ul>
+			</div>`
+	}
+
+	#notifyClose() {
+		const event = new CustomEvent("close", {
+			bubbles: true,
+			composed: true
+		})
+		this.dispatchEvent(event)
+	}
+
+	#notifySelection(key, value) {
+		const event = new CustomEvent("emojiselection", {
+			detail: { key, value },
+			bubbles: true,
+			composed: true
+		})
+		this.dispatchEvent(event)
+	}
+}
+customElements.define("r-emoji-panel", EmojiPanel)
\ No newline at end of file
diff --git a/shared.js b/shared.js
index 89e0db075..ad3332043 100644
--- a/shared.js
+++ b/shared.js
@@ -8,397 +8,307 @@ const DEFAULT_BOARD = "https://raw.githubusercontent.com/rplacetk/canvas1/main/p
 const DEFAULT_AUTH = "https://server.rplace.live/auth"
 
 const TRANSLATIONS = {
-    en: {
-        // Game
-        connecting: "Connecting...",
-        connectingFail: "Could not connect!",
-        downloadingImage: "Downloading image...",
-        placeTile: "Place a tile",
-        donate: "Donate",
-        myAccount: "My Account",
-        chat: "Chat",
-        liveChat: "Live Chat:",
-        nicknameToContinue: "Enter a nickname to continue:",
-        changeChannel: "Change channel:",
-        captchaPrompt: "Solve this small captcha to help keep rplace.live fun for all...",
-        webappInstall: "Install rplace.live web app",
-        connectionProblems: "Connection problems?",
-        tryClickingHere: "try clicking here",
-        pleaseBeRespectful: "Please be respectful and try not to spam!",
-        enterNickname: "Enter nickname...",
-        enterMessage: "Enter message...",
-        signInInstead: "Sign in instead",
-        createNewAccount: "Create a new account",
-        mention: "Mention",
-        replyTo: "Reply to",
-        report: "Report",
-        block: "Block",
-        unblock: "Unblock",
-        changeMyName: "Change my name",
-        putOnCanvas: "🫧 Put on canvas",
-        sendInLiveChat: "📨 Send in live chat",
-        overlayMenu: "Overlay menu",
-        modalAboutContent: "There is an empty canvas.<br><br>You may place a tile upon it, but you must wait to place another.<br><br>Individually you can create something.<br><br>Together you can create something more.",
-        overlayMenuDesciption: "Visualise your build with a template image!",
-        messageCouldntBeLoaded: "Message could not be loaded",
-        placedBy: "Placed by:",
-        lockMessage: "This canvas is locked... You can't place pixels here anymore",
-        adHidden: "Ad hidden for 14 days!",
-        specialEventTitle: "Special event - August 21st!",
-        copiedToClipboard: "Copied to clipboard!",
-        // Posts
-        rplaceLivePosts: "rplace.live posts",
-        searchKeyword: "Search keyword",
-        createPost: "Create post",
-        communityPosts: "Community posts",
-        sortBy: "Sort by:",
-        hideSensitive: "Hide sensitive:",
-        date: "Date",
-        upvotes: "Upvotes",
-    },
-    fa: {
-        connecting: "در حال وصل شدن",
-        connectingFail: "متصل نشد",
-        downloadingImage: "در حال بارگزاری عکس ها",
-        placeTile: "نقاشی کردن",
-        donate: "حمایت",
-        myAccount: "حساب کاربری من",
-        chat: "چت",
-        liveChat: "چت زنده",
-        nicknameToContinue: "لطفا نام خود را برای چت کردن وارد کنید",
-        changeChannel: "تغییر کانال:",
-        captchaPrompt: "لطفا روی دکمه حاوی ایموجی که در زیر می بینید کلیک کنید",
-        webappInstall: "برنامه وب rplace.live را نصب کنید",
-        connectionProblems: "مشکلات اتصال؟",
-        tryClickingHere: "برای حل اینجا کلیک کنید",
-        pleaseBeRespectful: "لطفا محترمانه رفتار کنید و سعی کنید اسپم نکنید!",
-        enterNickname: "نام مستعار را وارد کنید...",
-        enterMessage: "پیام را وارد کنید..."
-    },
-    tr: {
-        connecting: "Bağlanıyor...",
-        connectingFail: "Bağlanamadı!",
-        downloadingImage: "Resim indiriliyor...",
-        placeTile: "Bir piksel yerleştir",
-        donate: "Bağış yap",
-        myAccount: "Hesabım",
-        chat: "Sohbet",
-        // liveChat: "Canlı sohbet:", // TOO LONG
-        nicknameToContinue: "Devam etmek için bir takma ad girin:",
-        changeChannel: "Kanalı değiştir:",
-        captchaPrompt: "Lütfen aşağıda gördüğünüz emojiyi içeren butona tıklayın",
-        webappInstall: "rplace.live web uygulamasını kurun",
-        connectionProblems: "Bağlantı problemleri?",
-        tryClickingHere: "buraya tıklamayı dene",
-        pleaseBeRespectful: "Lütfen saygılı olun ve spam yapmamaya çalışın!",
-        enterNickname: "Takma ad girin...",
-        enterMessage: "Mesaj girin...",
-        signInInstead: "Oturum aç",
-        createNewAccount: "Hesap oluştur",
-        mention: "Etiketle",
-        block: "Engellemek",
-        changeMyName: "İsimi değiştir",
-        putOnCanvas: "🫧 Haritanın üstüne yaz",
-        sendInLiveChat: "📨 Sohbete yaz",
-        overlayMenu: "Bindirme menüsü",
-        modalAboutContent: "Boş bir tuval var.<br><br>Üzerine renkli bir piksel koyabilirsiniz ama yenisini yerleştirmek için beklemeniz gerekir.<br><br>Tek başınıza bir şeyler yapabilirsiniz.<br><br>Topluluk ile daha fazlasını yapabilirsiniz.",
-        overlayMenuDesciption: "Haritanın üzerine bir fotoğraf koyun ve onu çizin!",
-        specialEventTitle: "Özel etkinlik - August 21st!"
-    },
-    ro: {
-        connecting: "Se conectează...",
-        connectingFail: "Nu s-a putut conecta!",
-        downloadingImage: "Se descarcă imaginea...",
-        placeTile: "Pune un pixel",
-        donate: "Donează",
-        myAccount: "Contul meu",
-        chat: "Conversații",
-        //liveChat: "Conversații în direct:", // TOO LONG
-        nicknameToContinue: "Introdu un nume pentru a continua:",
-        changeChannel: "Schimbați canalul:",
-        captchaPrompt: "Dați clic pe butonul care conține emoji-ul pe care îl vedeți mai jos",
-        webappInstall: "Instalați aplicația web rplace.live",
-        connectionProblems: "Probleme de conectare?",
-        tryClickingHere: "incearca sa dai click aici",
-        pleaseBeRespectful: "Vă rugăm să fiți respectuos și să nu trimiteți spam!",
-        enterNickname: "Introduceți porecla...",
-        enterMessage: "Introdu mesajul..."
-    },
-    el: {
-        connecting: "Συνδετικός...",
-        connectingFail: "Δεν μπορούσε να συνδεθεί!",
-        downloadingImage: "Λήψη εικόνας...",
-        placeTile: "τοποθετώ ένα πίξελ",
-        donate: "δανεισω",
-        myAccount: "Ο λογαριασμός μου",
-        chat: "συζήτηση",
-        //liveChat: "ζωντανή συζήτηση",  // TOO LONG
-        nicknameToContinue: "Εισαγάγετε ένα ψευδώνυμο για να συνεχίσετε:",
-        changeChannel: "Αλλαγή καναλιού:",
-        captchaPrompt: "Κάντε κλικ στο κουμπί που περιέχει το emoji που βλέπετε παρακάτω",
-        webappInstall: "Εγκαταστήστε την εφαρμογή web rplace.live",
-        connectionProblems: "Προβλήματα σύνδεσης;",
-        tryClickingHere: "δοκιμάστε να κάνετε κλικ εδώ",
-        pleaseBeRespectful: "Παρακαλώ να είστε σεβαστές!",
-        enterNickname: "Εισαγάγετε ψευδώνυμο...",
-        enterMessage: "Εισαγάγετε μήνυμα..."
-    },
-    es: {
-        connecting: "Conectando...",
-        connectingFail: "¡No podía conectar!",
-        downloadingImage: "Descargando imagen...",
-        placeTile: "Coloca un pixel",
-        donate: "Donar",
-        myAccount: "Mi cuenta",
-        chat: "Chat",
-        liveChat: "Chat:",  // en vivo
-        nicknameToContinue: "Introduce un apodo para continuar:",
-        changeChannel: "Cambia el canal:",
-        captchaPrompt: "Haga clic en el botón que contiene el emoji que ve a continuación",
-        webappInstall: "Instale la aplicación web rplace.live",
-        connectionProblems: "¿Problemas de conexión?",
-        tryClickingHere: "intente hacer clic aquí",
-        pleaseBeRespectful: "Por favor se respetuoso!",
-        enterNickname: "Introduce el apodo...",
-        enterMessage: "Introduce el mensaje...",
-        specialEventTitle: "Evento especial - August 21st!"
-    },
-    fr: {
-        connecting: "De liaison...",
-        connectingFail: "Impossible de se connecter!",
-        downloadingImage: "Télécharger l'image...",
-        placeTile: "Place un pixel",
-        donate: "Faire un don",
-        myAccount: "Mon compte",
-        chat: "Discuter",
-        //liveChat: "Chat en direct:", // TOO LONG
-        nicknameToContinue: "Entrez un surnom pour continuer :",
-        changeChannel: "Changer de chaîne:",
-        captchaPrompt: "Veuillez cliquer sur le bouton contenant l'emoji que vous voyez ci-dessous",
-        webappInstall: "Installez l'application Web rplace.live",
-        connectionProblems: "Problèmes de connexion?",
-        tryClickingHere: "résoudre en cliquant ici",
-        pleaseBeRespectful: "Soyez respectueux et essayez de ne pas spammer !",
-        enterNickname: "Entrez le pseudo...",
-        enterMessage: "Saisissez le message..."
-    },
-    ru: {
-        connecting: "Подключение...",
-        connectingFail: "Не могу подключиться!",
-        downloadingImage: "Загрузка изображения...",
-        placeTile: "Поместите пиксель",
-        donate: "Пожертвовать",
-        myAccount: "Мой счет",
-        chat: "Чат",
-        liveChat: "Живой чат:",
-        nicknameToContinue: "Введите псевдоним:",
-        changeChannel: "Изменить канал:",
-        captchaPrompt: "Пожалуйста, решите эту небольшую капчу, чтобы сделать rplace.live приятным для всех...",
-        webappInstall: "Установите веб-приложение rplace.live",
-        connectionProblems: "Проблемы с подключением?",
-        tryClickingHere: "попробуйте нажать здесь",
-        pleaseBeRespectful: "Пожалуйста, будьте уважительны и старайтесь не спамить!",
-        enterNickname: "Введите псевдоним...",
-        enterMessage: "Введите сообщение...",
-        signInInstead: "зарегистрироваться вместо этого",
-        createNewAccount: "создайте новый аккаунт",
-        mention: "упомянуть",
-        replyto: "ответить",
-        report: "пожаловаться",
-        block: "заблокировать",
-        unblock: "разблокировать",
-        changeMyName: "изменить моё имя",
-        //putOnCanvas: ,
-        sendInLiveChat: "Incoming_envelope:отправить в живой чат",
-        overlaymenu: "меню наложения",
-        modelAboutContent: "есть пустое полотно.<br><br> Вы можете поставить пиксель на нём,но вы должны подождать чтобы поставить ещё.<br<br>Вы можете создать что-то.<br><br> Вместе вы можете создать много.",
-        overlayMenuDescription: "визуализируйте вашу постройку с шаблоном вашего изображения!"
-    },
-    uk: {
-        connecting: "підключення...",
-        connectingFail: "Не вдалося підключитися!",
-        downloadingImage: "Завантажую зображення",
-        placeTile: "Покласти піксель",
-        donate: "Пожертвувати",
-        myAccount: "Мій обліковий запис",
-        chat: "Чат",
-        liveChat: "Живий чат",
-        nicknameToContinue: "Введіть ім'я щоб продовжити",
-        changeChannel: "Зменіть канал",
-        captchaPrompt: "вирішіть цю мальнеку captcha щоб допомогти залишити rplace.live веселим для всіх",
-        webappInstall: "скачайте rplace.live веб-программу",
-        connectionProblems: "Проблеми с підключенням?",
-        tryClickingHere: "спробуйте клацнути сюди",
-        pleaseBeRespectful: "будь ласка будьте поважними і не спамьте!",
-        enterNickname: "Введіть ім'я...",
-        enterMessage: "Введіть повідомлення",
-        signInInstead: "Увійти замість цього",
-        createNewAccount: "Створіть новий аккаунт",
-        mention: "згадати",
-        replyto: "Відповісти на",
-        report: "Доповідь",
-        block: "Заблокувати",
-        unblock: "Разблокувати",
-        changeMyName: "Змінити ім'я",
-        putOnCanvas: "🫧поставити на полотно",
-        sendInLiveChat: "📨відправьте в живий чат",
-        overlaymenu: "Меню накладки",
-        modelAboutContent: "Є пусте полотно.<br><br>Ви можете поставити піксель на ньому,<br><br>але вам треба почекати перед тим як поставити іще один.<br><br>Індиаідуально ви можете створити багато чого.",
-        overlayMenuDescription: "Візуалізуйте вашу творчість с шаблоном зображення!"
-    },
-    de: {
-        connecting: "Zugreifen...",
-        connectingFail: "Konnte keine Verbindung herstellen!",
-        downloadingImage: "Bild wird heruntergeladen...",
-        placeTile: "Platziere ein Pixel",
-        donate: "Spenden",
-        myAccount: "Mein Konto",
-        chat: "Chat",
-        liveChat: "Live-Chat:",
-        nicknameToContinue: "Geben Sie einen Spitznamen ein, um fortzufahren:",
-        changeChannel: "Kanal wechseln:",
-        captchaPrompt: "Bitte lösen Sie dieses kleine Captcha, damit rplace.live allen Spaß macht...",
-        webappInstall: "Installieren Sie die Web-App rplace.live",
-        connectionProblems: "Verbindungsprobleme?",
-        tryClickingHere: "klicken Sie hier, um zu lösen",
-        pleaseBeRespectful: "Bitte seien Sie respektvoll, nicht zu spammen!",
-        enterNickname: "Spitznamen eingeben...",
-        enterMessage: "Nachricht eingeben..."
-    },
-    hi: {
-        connecting: "कनेक्टिंग ...",
-        connectingFail: "कनेक्ट नहीं हो सका!",
-        downloadingImage: "इमेज डाउनलोड हो रही है...",
-        placeTile: "एक टाइल रखें",
-        donate: "दान करें",
-        myAccount: "मेरा खाता",
-        chat: "चैट",
-        liveChat: "लाइव चैट:",
-        nicknameToContinue: "जारी रखने के लिए एक उपनाम दर्ज करें:",
-        changeChannel: "चैनल बदलें:",
-        captchaPrompt: "rplace.live को सभी के लिए मज़ेदार बनाए रखने में मदद के लिए कृपया इस छोटे कैप्चा को हल करें...",
-        webappInstall: "rplace.live वेब ऐप इंस्टॉल करें",
-        connectionProblems: "कनेक्शन समस्याएं?",
-        tryClickingHere: "यहाँ क्लिक करने का प्रयास करें",
-        pleaseBeRespectful: "कृपया सम्मान करें और स्पैम न करने का प्रयास करें!",
-        enterNickname: "उपनाम दर्ज करें ...",
-        enterMessage: "संदेश दर्ज करें ..."
-    },
-    ar: {
-        connecting: "جار الاتصال...",
-        connectingFail: "لقد فشل الاتصال!",
-        downloadingImage: "جار تحميل الصورة...",
-        placeTile: "ضع بلاطة",
-        donate: "تبرع",
-        myAccount: "حسابي",
-        chat: "الدردشة",
-        liveChat: "الدردشة المباشرة:",
-        nicknameToContinue: "اكتب اسم مستعار للمواصلة:",
-        changeChannel: "تغيير القناة:",
-        captchaPrompt: "رجاءا قم بحل هذا اللغز...",
-        webappInstall: "تحميل الموقع كتطبيق",
-        connectionProblems: "مشاكل في الاتصال?",
-        tryClickingHere: "جرب ان تضغط هنا",
-        pleaseBeRespectful: "رجاءا كن محترما ولا تزعج الاخرين!",
-        enterNickname: "اكتب اسم مستعار...",
-        enterMessage: "اكتب الرسالة...",
-        signInInstead: "قم بتسجيل الدخول من هنا بدلا من ذلك",
-        createNewAccount: "انشئ حساب جديد",
-        mention: "ذِكر",
-        replyTo: "الرد على",
-        report: "ابلاغ",
-        block: "حظر",
-        unblock: "ازالة الحظر",
-        changeMyName: "غير اسمي",
-        putOnCanvas: "🫧 ضع على اللوحه",
-        sendInLiveChat: "📨 ارسل في الدردشة المباشرة",
-        overlayMenu: "قائمة الصوره",
-        modalAboutContent: "هنالك لوح فاضي.<br><br>تستطيع اضافة بلاطه, ولكن يجب عليك الانتظار لإضافة اخرى<br><br>لوحدك, تستطيع انشاء شيء.<br><br>مع الاخرين, تستطيع انشاء الكثير.",
-        overlayMenuDesciption: "تصور بناءك بصورة نموذج!",
-        messageCouldntBeLoaded: "لا يمكن تحميل الرسالة"
-    },
-    jp: {
-        connecting: "接続中...",
-        connectingFail: "接続できませんでした!",
-        downloadingImage: "画像をダウンロードしています...",
-        placeTile: "タイルを配置する",
-        donate: "寄付する",
-        myAccount: "マイアカウント",
-        chat: "チャット",
-        liveChat: "ライブチャット:",
-        nicknameToContinue: "続行するにはニックネームを入力してください:",
-        changeChannel: "チャンネルを変更:",
-        captchaPrompt: "rplace.live をすべての人が楽しめるように、この小さなキャプチャを解決してください...",
-        webappInstall: "rplace.live Web アプリをインストール",
-        connectionProblems: "接続の問題?",
-        tryClickingHere: "ここをクリックしてみてください",
-        pleaseBeRespectful: "敬意を払い、スパム行為をしないようにしてください!",
-        enterNickname: "ニックネームを入力してください...",
-        enterMessage: "メッセージを入力してください..."
-    }
+	en: {
+		// Game
+		connecting: "Connecting...",
+		connectingFail: "Could not connect!",
+		disconnectedFromServer: "Disconnected from server",
+		downloadingImage: "Downloading image...",
+		placeTile: "Place a tile",
+		donate: "Donate",
+		myAccount: "My Account",
+		chat: "Chat",
+		liveChat: "Live Chat:",
+		nicknameToContinue: "Enter a nickname to continue:",
+		changeChannel: "Change channel:",
+		captchaPrompt: "Solve this small captcha to help keep rplace.live fun for all...",
+		webappInstall: "Install rplace.live web app",
+		connectionProblems: "Connection problems?",
+		tryClickingHere: "try clicking here",
+		pleaseBeRespectful: "Please be respectful and try not to spam!",
+		enterNickname: "Enter nickname...",
+		enterMessage: "Enter message...",
+		signInInstead: "Sign in instead",
+		createNewAccount: "Create a new account",
+		mention: "Mention",
+		replyTo: "Reply to",
+		addReaction: "Add reaction",
+		report: "Report",
+		block: "Block",
+		unblock: "Unblock",
+		changeMyName: "Change my name",
+		putOnCanvas: "🫧 Put on canvas",
+		sendInLiveChat: "📨 Send in live chat",
+		overlayMenu: "Overlay menu",
+		modalAboutContent: "There is an empty canvas.<br><br>You may place a tile upon it, but you must wait to place another.<br><br>Individually you can create something.<br><br>Together you can create something more.",
+		overlayMenuDesciption: "Visualise your build with a template image!",
+		messageNotFound: "Message could not be loaded",
+		placedBy: "Placed by:",
+		lockMessage: "This canvas is locked... You can't place pixels here anymore",
+		adHidden: "Ad hidden for 14 days!",
+		specialEventTitle: "Special event - August 21st!",
+		copiedToClipboard: "Copied to clipboard!",
+		// Posts
+		rplaceLivePosts: "rplace.live posts",
+		searchKeyword: "Search keyword",
+		createPost: "Create post",
+		communityPosts: "Community posts",
+		sortBy: "Sort by:",
+		hideSensitive: "Hide sensitive:",
+		date: "Date",
+		upvotes: "Upvotes",
+	}
 }
 
 const lang = navigator.language.split("-")[0]
 
-//Thanks to (Discord) @carkan988"<%#1409, @anonimbiri#4089 for providing turkish translations, and @sorenaxmee#4191 and @rplacetk telegram contributors for persian translations, a big thanks (ig) to Cyart#9657 for romanian, greek and spanish translations, thanks to embed#2752 for french translation.
-function translate(key) {
-    if (TRANSLATIONS[lang] != null)
-        return TRANSLATIONS[lang][key] || TRANSLATIONS["en"][key]
-    else
-        return TRANSLATIONS["en"][key] || key
+const TRANSLATION_EXPIRY = 3 * 24 * 60 * 60 * 1000 // 3 days
+function openTranslationDB() {
+	return new Promise((resolve, reject) => {
+		const request = indexedDB.open("translationsDB", 1)
+		request.onupgradeneeded = event => {
+			const db = event.target.result
+			db.createObjectStore("translations", { keyPath: "lang" })
+		};
+		request.onsuccess = event => resolve(event.target.result)
+		request.onerror = event => reject(event.target.error)
+	})
+}
+
+function getCachedTranslation(lang) {
+	return new Promise(async (resolve, reject) => {
+		const db = await openTranslationDB()
+		const transaction = db.transaction("translations", "readonly")
+		const store = transaction.objectStore("translations")
+		const request = store.get(lang)
+		request.onsuccess = event => resolve(event.target.result)
+		request.onerror = event => reject(event.target.error)
+	})
+}
+
+function setCachedTranslation(lang, data) {
+	return new Promise(async (resolve, reject) => {
+		const db = await openTranslationDB()
+		const transaction = db.transaction("translations", "readwrite")
+		const store = transaction.objectStore("translations")
+		const request = store.put({ lang, data, timestamp: Date.now() })
+		request.onsuccess = () => resolve()
+		request.onerror = event => reject(event.target.error)
+	})
+}
+
+async function fetchTranslations(lang) {
+	try {
+		const cachedTranslation = await getCachedTranslation(lang)
+		const now = Date.now()
+		if (cachedTranslation && (now - cachedTranslation.timestamp) <= TRANSLATION_EXPIRY) {
+			return cachedTranslation.data
+		}
+		const response = await fetch(`translations/${lang}.json`)
+		if (!response.ok) {
+			throw new Error(`Translations for ${lang} not found`)
+		}
+		const translation = await response.json()
+		await setCachedTranslation(lang, translation)
+		TRANSLATIONS[lang] = translation
+		return translation
+	} catch (error) {
+		console.log(error)
+		return TRANSLATIONS["en"]
+	}
+}
+
+async function translate(key) {
+	let translations = TRANSLATIONS[lang]
+	if (!translations) {
+		translations = await fetchTranslations(lang)
+	}
+	return translations?.[key] ?? TRANSLATIONS["en"]?.[key] ?? key
 }
 
-function translateAll() {
-	document.querySelectorAll("[translate]").forEach((element) => {
+async function translateAll() {
+	let translations = TRANSLATIONS[lang]
+	if (!translations) {
+		translations = await fetchTranslations(lang)
+	}
+	const elements = document.querySelectorAll("[translate]")
+	elements.forEach((element) => {
 		const key = element.getAttribute("translate")
-		if (TRANSLATIONS[lang] == null) return
+		const translation = translations?.[key] ?? TRANSLATIONS["en"]?.[key] ?? key
 		if (element.nodeName === "INPUT" || element.nodeName === "TEXTAREA") {
-			if (element.getAttribute("type") == "text")
-				element.placeholder = TRANSLATIONS[lang][key] || element.placeholder
-			else
-				element.value = TRANSLATIONS[lang][key] || element.value
+			if (element.getAttribute("type") == "text") {
+				element.placeholder = translation || element.placeholder
+			}
+			else {
+				element.value = translation || element.value
+			}
+		}
+		else {
+			element.innerHTML = translation || element.innerHTML
 		}
-		else
-			element.innerHTML = TRANSLATIONS[lang][key] || element.innerHTML
 	})
 }
 
+// Preload default language translations
+fetchTranslations(lang)
+
 class PublicPromise {
-    constructor() {
-        this.promise = new Promise((resolve, reject) => {
-            this.resolve = resolve
-            this.reject = reject
-        })
-    }
+	constructor() {
+		this.promise = new Promise((resolve, reject) => {
+			this.resolve = resolve
+			this.reject = reject
+		})
+	}
+}
+
+class PublicPromiseSync {
+	locked
+	resolve
+	reject
+	#promise
+	constructor() {
+		this.#promise = new Promise((resolve, reject) => {
+			this.resolve = resolve
+			this.reject = reject
+		})
+		this.locked = false
+	}
+
+	async acquireAwaitPromise() {
+		if (this.locked) {
+			throw new Error("This promise is already being awaited.")
+		}
+		this.locked = true
+		try {
+			const result = await this.#promise
+			this.locked = false
+			return result
+		}
+		catch (error) {
+			this.locked = false
+			throw error
+		}
+	}
 }
 
 function sanitise(txt) {
-    return txt.replaceAll(/&/g,"&amp;").replaceAll(/</g,"&lt;").replaceAll(/"/g,"&quot;")
+	return txt.replaceAll(/&/g,"&amp;").replaceAll(/</g,"&lt;").replaceAll(/"/g,"&quot;")
 }
 
 function markdownParse(text) {
-    text = text.replace(/^(#{3}\s)(.*)/gm, (match, p1, p2) => {
-        return `<h3 style="display:inline;">${p2}</h3>`
-    })
-    text = text.replace(/^(#{2}\s)(.*)/gm, (match, p1, p2) => {
-        return `<h2 style="display:inline;">${p2}</h2>`
-    })
-    text = text.replace(/^(#{1}\s)(.*)/gm, (match, p1, p2) => {
-        return `<h1 style="display:inline;">${p2}</h1>`
-    })
-    function matchBold(match) {
-        return `<b>${match.slice(2, -2)}</b>`
-    }
-    text = text.replace(/\*\*([^*]+)\*\*/g, matchBold)
-    text = text.replace(/\_\_([^*]+)\_\_/g, matchBold)
-    function matchItalic(match) {
-        return `<i>${match.slice(1, -1)}</i>`
-    }
-    text = text.replace(/\*([^*]+)\*/g, matchItalic)
-    text = text.replace(/\_(.*)\_/g, matchItalic)
+	// Headers
+	text = text.replace(/^(#{3}\s)(.+)/gm, (match, p1, p2) => {
+		return `<h3>${p2}</h3>`
+	})
+	text = text.replace(/^(#{2}\s)(.+)/gm, (match, p1, p2) => {
+		return `<h2>${p2}</h2>`
+	})
+	text = text.replace(/^(#{1}\s)(.+)/gm, (match, p1, p2) => {
+		return `<h1>${p2}</h1>`
+	})
+	// Bold
+	text = text.replace(/\*\*(.+?)\*\*/g, (match) => {
+		return `<b>${match.slice(2, -2)}</b>`
+	})
+	// Underline
+	text = text.replace(/__(.+?)__/g, (match) => {
+		return `<u>${match.slice(2, -2)}</u>`
+	})
+	// Italic
+	text = text.replace(/\*([^*]+?)\*/g, (match) => {
+		return `<i>${match.slice(1, -1)}</i>`
+	})
+	text = text.replace(/_(.+?)_/g, (match) => {
+		return `<i>${match.slice(1, -1)}</i>`
+	})
+	// Spoiler
+	text = text.replace(/\|\|([\s\S]+?)\|\|/g, (match) => {
+		return `<r-spoiler hidden="true">${match.slice(2, -2)}</r-spoiler>`
+	})
+	// Strikethrough
+	text = text.replace(/~(.+?)~/g, (match) => {
+		return `<s>${match.slice(1, -1)}</s>`
+	})
+	// Separator
+	text = text.replace(/^\s*---\s*$/gm, () => {
+		return "<hr>"
+	})
+	return text
+}
+
+// Utility functions for Auth DB IndexedDB caches
+const currentAuthUrl = new URL(localStorage.auth || DEFAULT_AUTH) // i.e server.rplace.live/auth
+const currentAuthDb = `${currentAuthUrl.host}${currentAuthUrl.pathname}`
 
-    text = text.replace(/\|\|([^*]+)\|\|/g, (match) => {
-        return `<r-spoiler hidden="true">${match.slice(2, -2)}</r-spoiler>`
-    })
-    return text
+function openCurrentAuthDB() {
+	return new Promise((resolve, reject) => {
+		const request = indexedDB.open(currentAuthDb, 2)
+		request.onupgradeneeded = event => {
+			const db = event.target.result
+			db.createObjectStore("profiles", { keyPath: "id" })
+			db.createObjectStore("users", { keyPath: "id" })
+		}
+		request.onsuccess = event => resolve(event.target.result)
+		request.onerror = event => reject(event.target.error)
+	})
 }
+
+function getCachedData(storeName, key) {
+	return new Promise(async (resolve, reject) => {
+		const db = await openCurrentAuthDB()
+		const transaction = db.transaction(storeName, "readonly")
+		const store = transaction.objectStore(storeName)
+		const request = store.get(key)
+		request.onsuccess = event => resolve(event.target.result)
+		request.onerror = event => reject(event.target.error)
+	})
+}
+
+function setCachedData(storeName, data) {
+	return new Promise(async (resolve, reject) => {
+		const db = await openCurrentAuthDB()
+		const transaction = db.transaction(storeName, "readwrite")
+		const store = transaction.objectStore(storeName)
+		const request = store.put(data)
+		request.onsuccess = () => resolve()
+		request.onerror = event => reject(event.target.error)
+	})
+}
+
+// Responsible for setting and retrieving form DB, will attempt to grab the object from the DB, if it can't
+// it will grab the object from the URL and then cache it in the database
+async function cachedFetch(keystore, id, url, expiry) {
+	const now = Date.now()
+	let cachedObject = await getCachedData(keystore, id)
+	if (!cachedObject || (now - cachedObject.timestamp) > expiry) {
+		const res = await fetch(url)
+		if (!res.ok) {
+			console.error(`Could not fetch object ${id} belonging to ${keystore}: ${res.status} ${res.statusText}:`, await res.json())
+			return null
+		}
+
+		cachedObject = await res.json()
+		await setCachedData(keystore, { id, data: cachedObject, timestamp: now })
+	}
+	else {
+		cachedObject = cachedObject.data
+	}
+
+	return cachedObject
+}
+
+window.moduleExports = {
+	...window.moduleExports,
+	get DEFAULT_AUTH() {
+		return DEFAULT_AUTH
+	},
+	get markdownParse() {
+		return markdownParse
+	},
+	get sanitise() {
+		return sanitise
+	},
+	get cachedFetch() {
+		return cachedFetch
+	}
+}
\ No newline at end of file
diff --git a/snowplace.js b/snowplace.js
index 738e8273f..6b46d10c8 100644
--- a/snowplace.js
+++ b/snowplace.js
@@ -3,24 +3,24 @@
 let winterCanvasSnow = null
 let winterHat = null
 function enableWinter() {
-    console.log(
-        "%cHappy Holidays!",
-        "font-size: 24px;color: #c00; background-color: #fff; padding: 10px; border: 2px solid #00f; border-radius: 5px; text-shadow: 1px 1px 0 #c00, 2px 2px 0 #00f, 3px 3px 0 #c00, 4px 4px 0 #00f, 5px 5px 0 #c00, 6px 6px 0 #00f, 7px 7px 0 #c00, 8px 8px 0 #00f, 9px 9px 0 #c00, 10px 10px 0 #00f, 11px 11px 0 #c00, 12px 12px 0 #00f, 13px 13px 0 #c00, 14px 14px 0 #00f, 15px 15px 0 #c00, 16px 16px 0 #00f, 17px 17px 0 #c00, 18px 18px 0 #00f, 19px 19px 0 #c00, 20px 20px 0 #00f"
-    )
-    winterHat = document.createElement("img")
-    winterHat.src = "svg/santa-hat.svg"
-    winterHat.setAttribute("style", "position: absolute;  height: 128px; z-index: 22;left: calc(50% - 160px);top: calc(50% - 110px);transform: rotate(-30deg);")
-    document.getElementById("loadingScreen")?.appendChild(winterHat)
+	console.log(
+		"%cHappy Holidays!",
+		"font-size: 24px;color: #c00; background-color: #fff; padding: 10px; border: 2px solid #00f; border-radius: 5px; text-shadow: 1px 1px 0 #c00, 2px 2px 0 #00f, 3px 3px 0 #c00, 4px 4px 0 #00f, 5px 5px 0 #c00, 6px 6px 0 #00f, 7px 7px 0 #c00, 8px 8px 0 #00f, 9px 9px 0 #c00, 10px 10px 0 #00f, 11px 11px 0 #c00, 12px 12px 0 #00f, 13px 13px 0 #c00, 14px 14px 0 #00f, 15px 15px 0 #c00, 16px 16px 0 #00f, 17px 17px 0 #c00, 18px 18px 0 #00f, 19px 19px 0 #c00, 20px 20px 0 #00f"
+	)
+	winterHat = document.createElement("img")
+	winterHat.src = "svg/santa-hat.svg"
+	winterHat.setAttribute("style", "position: absolute;  height: 128px; z-index: 22;left: calc(50% - 160px);top: calc(50% - 110px);transform: rotate(-30deg);")
+	document.getElementById("loadingScreen")?.appendChild(winterHat)
 
-    winterCanvasSnow = new CanvasSnow({
-        context: "#bgWrapper",
-        cell: 30
-    }).init()
-    winterCanvasSnow.start()
+	winterCanvasSnow = new CanvasSnow({
+		context: "#bgWrapper",
+		cell: 30
+	}).init()
+	winterCanvasSnow.start()
 }
 
 function disableWinter() {
-    winterHat?.remove()
-    winterCanvasSnow?.stop()
-    winterCanvasSnow?.clear()
+	winterHat?.remove()
+	winterCanvasSnow?.stop()
+	winterCanvasSnow?.clear()
 }
\ No newline at end of file
diff --git a/style.css b/style.css
index 634e32a32..83b6b6eae 100644
--- a/style.css
+++ b/style.css
@@ -44,7 +44,7 @@ body {
 	src: url(fonts/RedditSans-Regular.woff2);
 }
 
-#maincontent{
+#maincontent {
 	position: absolute;
 	top: 0;
 	left: 0;
@@ -53,7 +53,7 @@ body {
 	overflow: hidden;
 	z-index: 1;
 }
-#posts{
+#posts {
 	position: absolute;
 	top: 90%;
 	bottom: 0;
@@ -62,22 +62,54 @@ body {
 }
 
 #loadingScreen {
-    z-index: 20;
-    transition: opacity .3s;
-    opacity: 1;
-    position: fixed;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+	z-index: 20;
+	transition: opacity .3s;
+	opacity: 1;
+	position: fixed;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
 	/* Needs a default value to hide anything behind that is still loading */
 	background-color: white;
 	transition: .2s background-color;
 }
 
+.loading-logo {
+	width: 128px;
+	height: 128px;
+	z-index: 1;
+}
+
+.loading-message {
+	z-index: 1;
+	margin-top: 4px;
+	opacity: 0.2;
+}
+
+#waitingGameCanvas {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+
+#connproblems {
+	text-align:center;
+	transition: opacity .5s;
+	position: absolute;
+	opacity: 0;
+	bottom: 80px;
+	z-index: 1;
+	color: black;
+	font-family: 'mono';
+}
+
 btn{
 	display: block;
 	height: 50px;
@@ -101,8 +133,9 @@ btn{
 	box-shadow: 2px 2px black;
 }
 
-#mainmenu bg{
-	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYBAMAAAASWSDLAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAPUExURf///wAAAEdwTHh4eAAAAERrJnIAAAAEdFJOU2ZmAGZFVb26AAAAJUlEQVQY02NwQQIMzgYMMMCCynEUUoICheHOEYQBYRNUDnJQAQACbSUPxnEdigAAAABJRU5ErkJggg'), url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAHlJREFUOE+tk10OgDAIg+GAntYDzkzDpkD5SeR1W+nXARONk8LiYx4PIvceW4HnQVRvMUdgPv2KoO73ze0g7+yhtBA8J0rAuojsKwQvNowlwn8jiIs6SpqBBtOZwG/MwlteO5NY+EY0wHgyyxk0lsnugvgqIsQ7oUUuLrY7MUeZYKEAAAAASUVORK5CYIIA');
+#mainmenu bg {
+	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYBAMAAAASWSDLAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAPUExURf///wAAAEdwTHh4eAAAAERrJnIAAAAEdFJOU2ZmAGZFVb26AAAAJUlEQVQY02NwQQIMzgYMMMCCynEUUoICheHOEYQBYRNUDnJQAQACbSUPxnEdigAAAABJRU5ErkJggg"),
+		url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAHlJREFUOE+tk10OgDAIg+GAntYDzkzDpkD5SeR1W+nXARONk8LiYx4PIvceW4HnQVRvMUdgPv2KoO73ze0g7+yhtBA8J0rAuojsKwQvNowlwn8jiIs6SpqBBtOZwG/MwlteO5NY+EY0wHgyyxk0lsnugvgqIsQ7oUUuLrY7MUeZYKEAAAAASUVORK5CYIIA");
 	background-size: 6.25%, 100%;
 	image-rendering: pixelated;
 	background-position: 0% 0%, center;
@@ -117,7 +150,7 @@ btn{
 	transform: scale(1.2) rotate(-10deg);
 }
 
-#canvparent1{
+#canvparent1 {
 	position: absolute;
 	font-size: 0;
 	z-index: 1;
@@ -194,19 +227,14 @@ btn{
 	top: 50%;
 	left: 50%;
 	transform: translate(-50%, -50%);
-	display: none;
 	flex-direction: column;
-	z-index: 7;
 	box-sizing: content-box;
+	overflow: visible;
+	z-index: 7;
 }
 
-#bg {
-	display: block;
-	position: absolute;
-	background: rgba(0, 0, 0, 0.4);
-	inset: 0px;
-	z-index: 6;
-	opacity: 1;
+#modal[open] {
+	display: flex;
 }
 
 @media (max-width:500px){
@@ -597,24 +625,13 @@ body[eventphase="3"] .coverer-title {
 	justify-content: center;
 }
 
-#connproblems {
-	text-align:center;
-	transition: opacity .5s;
-	position: absolute;
-	opacity: 0;
-	bottom: 80px;
-	z-index: 22;
-	color: black;
-	font-family: 'mono';
-}
-
 #chatPanel {
 	display: flex;
 	flex-flow: column;
 	gap: 5px;
 	position: absolute;
 	top: 20px;
-	width: 330px;
+	width: 360px;
 	bottom: 20px;
 	right: 20px;
 	z-index: 99;
@@ -639,35 +656,58 @@ body[eventphase="3"] .coverer-title {
 	align-items:center
 }
 
-#ad {
+.chat-header-right {
+	display: flex;
+	column-gap: 8px;
+}
+
+#chatAd {
 	/* Default: 'Advertise here', will be overriden in element style */
 	--adurl: url(./images/default-ad.png);
-    flex-shrink: 0;
-    background-image: var(--adurl);
-    background-position: center;
-    background-size: contain;
-    max-height: 180px;
-    background-repeat: no-repeat;
+	flex-shrink: 0;
+	background-image: var(--adurl);
+	background-position: center;
+	background-size: contain;
+	max-height: 180px;
+	background-repeat: no-repeat;
 	position: relative;
 	overflow: clip;
 	height: 100%;
 }
 
-#ad::before {
-    content: " ";
-    background-image: var(--adurl);
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    width: 100%;
-    height: 100%;
-    z-index: -1;
-    background-size: cover;
-    transform: scale(1.5);
-    filter: blur(6px) saturate(1.2);
+#chatAd::before {
+	content: " ";
+	background-image: var(--adurl);
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	width: 100%;
+	height: 100%;
+	z-index: -1;
+	background-size: cover;
+	transform: scale(1.5);
+	filter: blur(6px) saturate(1.2);
 }
 
-.ad-close {
+.chat-ad-ins {
+	display: flex;
+	justify-content: center;
+	width: 100%;
+	height: 100%;
+	margin: 0 !important;
+	padding: 0 !important;
+}
+
+.chat-ad-ins::before {
+	content: " ";
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	width: 100%;
+	height: 100%;
+}
+
+.chat-ad-close {
 	position: absolute;
 	right: -8px;
 	top: -8px;
@@ -697,6 +737,8 @@ body[eventphase="3"] .coverer-title {
 	cursor: pointer;
 	transform: scaleY(1);
 	height: auto;
+	padding: 0;
+	box-shadow: none;
 	transition: .2s transform, .2s height;
 }
 
@@ -716,32 +758,34 @@ body[eventphase="3"] .coverer-title {
 }
 
 #chatMessages, #chatMessages * {
-    touch-action: pan-y;
+	touch-action: pan-y;
 }
 
-#chatMessages > div {
+#chatMessages > .message {
 	position: relative;
+	display: block;
+	white-space: collapse;
 	transition: .2s background-color;
 }
 
-#chatMessages > div:hover {
-    background-color: #d3d3d333;
+#chatMessages > .message:hover {
+	background-color: #d3d3d333;
 	border-radius: 4px;
 }
 
-#chatMessages > div[highlight] {
+#chatMessages > .message[highlight] {
 	background-color: #4dd77780;
 }
 
-#chatMessages > div[mention] {
+#chatMessages > .message[mention] {
 	background-color: #ffff0080;
 }
 
-#chatMessages > div[reply] {
+#chatMessages > .message[reply] {
 	background-color: #e4efff;
 }
 
-#chatMessages > div > p {
+#chatMessages > .message > p {
 	border-left: 4px solid gray;
 	padding: 2px 4px 2px 8px;
 	font-size: 12px;
@@ -752,11 +796,11 @@ body[eventphase="3"] .coverer-title {
 	border-radius: 2px 0px 0px 0px;
 }
 
-#chatMessages > div > span:nth-of-type(1) {
+#chatMessages > .message > span:nth-of-type(1) {
 	cursor: pointer;
 }
 
-#chatMessages > div > div {
+#chatMessages > .message > div {
 	position: absolute;
 	right: 0px;
 	top: -4px;
@@ -773,7 +817,7 @@ body[eventphase="3"] .coverer-title {
 	transition: .2s opacity;
 }
 
-#chatMessages > div:hover > div {
+#chatMessages > .message:hover > div {
 	opacity: 1;
 	cursor: pointer;
 }
@@ -795,6 +839,15 @@ body[eventphase="3"] .coverer-title {
 	border-radius: 20px 0px 0px 20px;
 	background-color: transparent;
 	white-space: nowrap;
+	display: flex;
+	align-items: center;
+}
+
+.channel-button {
+	display: flex;
+	align-items: center;
+	height: 100%;
+	padding: 0;	
 }
 
 #captchaPopup {
@@ -886,7 +939,7 @@ body[eventphase="3"] .coverer-title {
 	left: 0px;
 	width: 100%;
 	overflow: clip;
-	transition: .3s height, .0s visibility, .2s opacity;
+	transition: .0s visibility, .2s opacity;
 	transition-delay: 0s, .2s;
 }
 .chat-input-panel[closed] {
@@ -1090,7 +1143,7 @@ body[eventphase="3"] .coverer-title {
 	left: 50%;
 	transform: translateX(-50%);
 	opacity: 1;
-    transition: opacity .2s ease-out;
+	transition: opacity .2s ease-out;
 }
 
 .tooltip::after {
@@ -1276,11 +1329,12 @@ kbd {
 	height: 60vh;
 	width: 100%;
 	flex-shrink: 0;
+	background: rgba(0, 0, 0, 0.2);
 }
 #spaceFiller {
 	background: transparent;
 	height: 100vh;
-	transition: .5s height;
+	transition: .5s height, .5s background-color;
 }
 
 .virtselect {
@@ -1348,218 +1402,194 @@ postcopy span {
 	pointer-events: none;
 }
 
-/* Reddit-themed styles ported from the instance manager*/
-#loginPanel[data-page] > div[page] {
-	display: none;
+#popup {
+	position: fixed;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+	z-index: 20;
+	overflow: hidden;
 }
-#loginPanel[data-page="unauthed"] > div[page="unauthed"],
-#loginPanel[data-page="profile"] > div[page="profile"] {
+
+#popup > div {
+	width: 90vmin;
+	/*height: calc(60.4vmin + 36px);*/
 	display: flex;
+	flex-direction: column;
+	row-gap: 4px;
+	height: fit-content;
+	max-height: 90vh;
 }
 
-#unauthedPage[data-page] > div[page] {
-	display: none;
-}
-#unauthedPage[data-page="signin"] > div[page="signin"],
-#unauthedPage[data-page="signup"] > div[page="signup"],
-#unauthedPage[data-page="authcode"] > div[page="authcode"] {
+.august21-popup-content {
 	display: flex;
+	flex-direction: column;
+	row-gap: 16px;
+	touch-action: pan-y;
+	overflow-y: auto;
 }
 
-.reddit-modal {
-	margin: auto;
-	border: 1px solid gray;
-	border-radius: 4px;
-	background-color: #f0f0f0;
-	height: 600px;
-	width: min(800px, 100% - 16px);
-	box-shadow: 0px 0px 12px black;
-	overflow: clip;
-	display: none;
-	flex-direction: column;
+.hidden-question {
+	display: block;
+	cursor: pointer;
+	font-size: 8px;
+	opacity: 0.3;
 }
-.reddit-modal[open] {
-	display: flex;
+
+/* TODO: Clean up and separate out into theme specific CSS files */
+r-live-chat-message r-emoji-panel {
+	right: 5px;
+	top: 24px;
 }
-/* i.e loginPanel */
-.reddit-modal > div {
+r-live-chat-message .reactions {
 	display: flex;
-	flex-grow: 1;
-}
-.reddit-modal {
-	font-family: 'IBM Plex Sans', sans-serif;
-	font-size: 20px;
+	list-style: none;
+	margin-left: 12px;
+	flex-wrap: wrap;
+	opacity: 0.8;
+	padding-top: 6px;
+	transition: .2s opacity;
 }
-.reddit-modal p, a, span {
-	font-size: 16px;
+r-live-chat-message .reactions:hover {
+	opacity: 1;
 }
-.reddit-modal p {
-	margin-top: 20px;
-	margin-bottom: 20px;
+r-live-chat-message .reaction {
+	list-style: none;
 }
-.reddit-modal .header {
-	color: black;
-	padding: 16px;
-	background: url(images/reddit-login-banner.png);
-	background-size: cover;
-	min-width: 144px;
+r-live-chat-message .reaction.expanded {
+	z-index: 1;
 }
-.reddit-modal .body {
-	margin: 8px;
-	display: flex;
+r-live-chat-message .emoji-container {
+	display: inline-flex;
 	flex-direction: column;
-	flex-grow: 1;
-}
-.reddit-modal, .body, .reddit-modal .body {
-	touch-action: manipulation;
+	align-items: center;
+	row-gap: 4px;
+	margin-bottom: 4px;
 }
-@media (orientation: portrait) {
-	.reddit-modal > div {
-		flex-direction: column;
-		position: relative;
-	}
-	.reddit-modal .header {
-		background: #343536;
-		color: white;
-	}
-	.reddit-modal .confirm-button {
-		position: absolute;
-		bottom: 8px;
-		width: calc(100% - 16px);
-	}
-	.reddit-card {
-		flex-direction: column;
-		height: fit-content !important;
-	}
+r-live-chat-message .emoji-container p {
+	width: 100%;
 }
-.reddit-modal-input {
-	all: unset;
-	border: 1px solid #ccc;
-	border-radius: 4px;
-	padding: 8px;
-	font-size: 14px;
-	outline: none;
-	height: 14px;
-	margin-top: 4px;
-	margin-bottom: 4px;
-	background-color: white;
-
+r-live-chat-message .emoji {
+	min-width: 18px;
+	width: 18px;
+	min-height: 18px;
+	height: 18px;
+	font-size: 18px;
+	user-select: none;
+	transition: .2s font-size, .2s min-width, .2s min-height
 }
-.reddit-modal-input[type=file]::file-selector-button {
-	all: unset;
-	border-radius: 5px;
-	background-color: white;
-	border: 0px solid black;
-	box-shadow: none;
-	height: 100%;
+r-live-chat-message img.emoji.expanded {
+	min-height: 54px;
+	min-width: 54px;
 }
-.reddit-modal-input[type=file] {
-	height: 48px;
-	background-color: transparent;
+r-live-chat-message span.emoji.expanded {
+	font-size: 48px;
+	width: 54px;
+	height: 54px;
 }
-.reddit-modal-input:focus {
-	border-color: #369;
-	box-shadow: 0 0 5px #ccc;
+r-live-chat-messaage hr {
+	margin: 4px;
 }
-.reddit-signin-button {
-	border: 1px solid #dbdbdb;
-	border-radius: 4px;
+r-live-chat-message .reaction-details {
+	padding: 2px 4px 2px 4px;
+	border: 1px solid gray;
+	border-radius: 64px;
+	max-height: 42px;
 	background-color: white;
-	width: fit-content;
+	box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 2px 0 0 rgba(255, 255, 255, .7) inset;
+	margin-left: -8px;
+	margin-top: -8px;
+	overflow: hidden;
+	transition: .2s max-height, .2s box-shadow;
+}
+r-live-chat-message .reaction-body {
 	display: flex;
-	height: 46px;
-	column-gap: 8px;
-	cursor: pointer;
-	padding-right: 8px;
-	box-shadow: none;
+	flex-direction: column;
+	row-gap: 4px;
+	touch-action: pan-y;
 }
-.reddit-modal-button {
-	all: unset;
-	display: inline-block;
-	padding: 8px 16px;
-	border: none;
+r-live-chat-message .reaction-details[open] {
 	border-radius: 4px;
-	background-color: #cee3f8;
-	color: #1a1a1b;
-	font-size: 14px;
-	font-weight: bold;
-	text-align: center;
-	text-decoration: none;
-	cursor: pointer;
-	transition: background-color 0.2s ease-in-out;
-}
-.reddit-modal-button:hover {
-	background-color: #b0c8e6;
+	max-height: 256px;
+	border: none;
+	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
 }
-.reddit-card {
-	height: 150px;
-	margin: 16px;
-	border: 1px solid #ccc;
-	border-radius: 4px;
-	padding: 10px;
-	margin-bottom: 10px;
-	position: relative;
-	background: white;
-	display: flex;
-	column-gap: 16px;
+r-live-chat-message .reactors {
+	padding-left: 8px;
+	overflow-y: auto;
 }
-
-.profile-section > p {
-	margin-top: 0px;
-	margin-bottom: revert;
-	font-weight: 600;
+r-live-chat-message .reactor {
+	list-style: inside;
 }
-.profile-section > div {
-	margin: 0px;
-	overflow: hidden;
-	white-space: nowrap;
-	position: relative;
-	transition: .2s all;
 
+r-emoji-panel.context-menu {
+	display: none;
+	width: 240px;
+	max-height: 360px;
+	overflow-y: auto;
+	position: fixed;
+	resize: vertical;
+	min-height: 120px;
+	padding: 0;
 }
-.profile-section > div[profileeditable]:hover {
-	overflow: visible;
-	background-color: white;
-	box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.243);
-	border-radius: 4px;
-	min-width: fit-content;
-	z-index: 2;
-	padding: 4px;
-}
-.profile-section > div > img {
-	border-radius: 100%;
+r-emoji-panel[open].context-menu {
+	display: block;
 }
-
-#popup {
-	position: fixed;
-	left: 50%;
-	top: 50%;
-	transform: translate(-50%, -50%);
-	z-index: 20;
-	overflow: hidden;
+r-emoji-panel .emojis-header {
+	display: flex;
+	justify-content: space-between;
+	position: sticky;
+	top: 0px;
+	padding: 5px;
+	background: var(--ui-panel-bg);
 }
 
-#popup > div {
-    width: 90vmin;
-	/*height: calc(60.4vmin + 36px);*/
+r-emoji-panel .emojis-body {
+	padding: 5px;
 	display: flex;
 	flex-direction: column;
-	row-gap: 4px;
-	height: fit-content;
-	max-height: 90vh;
+	row-gap: 8px;
 }
 
-.august21-popup-content {
+r-emoji-panel .emojis-container {
+	padding: 0px;
+	margin: 0px;
+	width: 100%;
+	list-style: none;
+	row-gap: 2px;
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(32px, 1fr));
+}
+
+r-emoji-panel .emojis-container > li {
 	display: flex;
-	flex-direction: column;
-	row-gap: 16px;
-	touch-action: pan-y;
-	overflow-y: auto;
+	align-items: center;
+	justify-content: center;
+	list-style-type: none;
+	padding: 0;
 }
 
-.hidden-question {
-    display: block;
-    cursor: pointer;
-    font-size: 8px;
-    opacity: 0.3;
+r-emoji-panel button {
+	box-shadow: none;
+	background: none;
+	border: none;
+	width: auto;
+	height: auto;
+	font-size: 28px;
+	width: 32px;
+	height: 32px;
+	padding: 0;
 }
+
+#questsFrame {
+	position: fixed;
+	width: 500px;
+	height: 500px;
+	left: 50%;
+	top: 50%;
+	z-index: 21;
+	transform: translate(-50%, -50%);
+	height: 600px;
+	width: min(800px, 100% - 16px);
+	background: transparent;
+}
\ No newline at end of file
diff --git a/svg/react-action.svg b/svg/react-action.svg
new file mode 100644
index 000000000..d24a4b771
--- /dev/null
+++ b/svg/react-action.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M480-480Zm0 400q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q43 0 83 8.5t77 24.5v90q-35-20-75.5-31.5T480-800q-133 0-226.5 93.5T160-480q0 133 93.5 226.5T480-160q133 0 226.5-93.5T800-480q0-32-6.5-62T776-600h86q9 29 13.5 58.5T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm320-600v-80h-80v-80h80v-80h80v80h80v80h-80v80h-80ZM620-520q25 0 42.5-17.5T680-580q0-25-17.5-42.5T620-640q-25 0-42.5 17.5T560-580q0 25 17.5 42.5T620-520Zm-280 0q25 0 42.5-17.5T400-580q0-25-17.5-42.5T340-640q-25 0-42.5 17.5T280-580q0 25 17.5 42.5T340-520Zm140 260q68 0 123.5-38.5T684-400H276q25 63 80.5 101.5T480-260Z"/></svg>
\ No newline at end of file
diff --git a/sw.js b/sw.js
index d841c32e4..2143efb57 100644
--- a/sw.js
+++ b/sw.js
@@ -1,129 +1,157 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 // @ts-nocheck
 // Service worker for PWA installation
-const CURRENT_CACHES = "tkv2"
+const CURRENT_CACHES = "tkv3"
 self.addEventListener("install", (event) => {
-    event.waitUntil(
-        caches.open(CURRENT_CACHES).then((cache) =>
-            cache.addAll([
-                "index.html",
-                "style.css",
-                "rplace-2022.css",
-                "rplace-2023.css",
+	event.waitUntil(
+		caches.open(CURRENT_CACHES).then((cache) =>
+			cache.addAll([
+				// Pages
+				"404.html",
+				"disclaimer.html",
+				"fakeapp.html",
+				"index.html",
+				"instance.html",
+				"posts.html",
+				"quests-dialog.html",
 
-                // Images
-                "images/1984.png",
-                "images/account-profile.png",
-                "images/canv.png",
-                "images/discord-ad.png",
-                "images/discord.png",
-                "images/discord-popup.png",
-                "images/hammer-and-wrench.png",
-                "images/lamda.png",
-                "images/live.png",
-                "images/news.png",
-                "images/patreon.png",
-                "images/reddit-login-banner.png",
-                "images/reddit.png",
-                "images/rplace2.png",
-                "images/rplace-loader.gif",
-                "images/rplace-offline.png",
-                "images/rplace.png",
-                "images/snoo-edge.png",
-                "images/telegram-ad.png",
-                "images/timelapse.png",
-                "images/trophy.png",
-                "images/twitter.png",
-                "images/default-ad.png",
-                "images/august21-ad.png",
+				// Styles
+				"goldplace.css",
+				"misc-page.css",
+				"posts.css",
+				"rplace-2022.css",
+				"rplace-2023.css",
+				"shared.css",
+				"style.css",
+				"theme-switch.css",
 
-                // Svg
-                "svg/account.svg",
-                "svg/chat.svg",
-                "svg/clipboard.svg",
-                "svg/expand-external.svg",
-                "svg/flag-gb.svg",
-                "svg/green-checkmark.svg",
-                "svg/help.svg",
-                "svg/icon-back.svg",
-                "svg/image.svg",
-                "svg/loading-spinner.svg",
-                "svg/lock.svg",
-                "svg/menu.svg",
-                "svg/moderate-action.svg",
-                "svg/pattern.svg",
-                "svg/pixel-select-2022.svg",
-                "svg/pixel-select-2023.svg",
-                "svg/place-chat.svg",
-                "svg/player.svg",
-                "svg/reply-action.svg",
-                "svg/report-action.svg",
-                "svg/rplace.svg",
-                "svg/santa-hat.svg",
-                
-                //Badges
-                "badges/1000000-pixels-placed.svg",
-                "badges/100000-pixels-placed.svg",
-                "badges/1000-pixels-placed.svg",
-                "badges/100-pixels-placed.svg",
-                "badges/20000-pixels-placed.svg",
-                "badges/5000-pixels-placed.svg",
-                "badges/admin.svg",
-                "badges/based.svg",
-                "badges/discord-member.svg",
-                "badges/ethical-botter.svg",
-                "badges/gay.svg",
-                "badges/moderator.svg",
-                "badges/noob.svg",
-                "badges/script-kiddie.svg",
-                "badges/trouble-maker.svg",
-                "badges/veteran.svg",
+				// Images
+				"images/1984.png",
+				"images/account-profile.png",
+				"images/canv.png",
+				"images/discord-ad.png",
+				"images/discord.png",
+				"images/discord-popup.png",
+				"images/hammer-and-wrench.png",
+				"images/lamda.png",
+				"images/live.png",
+				"images/news.png",
+				"images/patreon.png",
+				"images/reddit-login-banner.png",
+				"images/reddit.png",
+				"images/rplace2.png",
+				"images/rplace-loader.gif",
+				"images/rplace-offline.png",
+				"images/rplace.png",
+				"images/snoo-edge.png",
+				"images/telegram-ad.png",
+				"images/timelapse.png",
+				"images/trophy.png",
+				"images/x.png",
+				"images/default-ad.png",
+				"images/august21-ad.png",
 
-                // Custom emojis
-                "custom_emojis/amogus.png",
-                "custom_emojis/biaoqing.png",
-                "custom_emojis/deepfriedh.png",
-                "custom_emojis/edp445.png",
-                "custom_emojis/fan.png",
-                "custom_emojis/heavy.png",
-                "custom_emojis/herkul.png",
-                "custom_emojis/kaanozdil.png",
-                "custom_emojis/lowtiergod.png",
-                "custom_emojis/manly.png",
-                "custom_emojis/plsaddred.png",
-                "custom_emojis/rplace.png",
-                "custom_emojis/rplacediscord.png",
-                "custom_emojis/sonic.png",
-                "custom_emojis/transparent.png",
-                "custom_emojis/trollface.png",
+				// Svg
+				"svg/account.svg",
+				"svg/chat.svg",
+				"svg/clipboard.svg",
+				"svg/expand-external.svg",
+				"svg/flag-gb.svg",
+				"svg/green-checkmark.svg",
+				"svg/help.svg",
+				"svg/icon-back.svg",
+				"svg/image.svg",
+				"svg/loading-spinner.svg",
+				"svg/lock.svg",
+				"svg/menu.svg",
+				"svg/moderate-action.svg",
+				"svg/pattern.svg",
+				"svg/pixel-select-2022.svg",
+				"svg/pixel-select-2023.svg",
+				"svg/place-chat.svg",
+				"svg/player.svg",
+				"svg/reply-action.svg",
+				"svg/report-action.svg",
+				"svg/rplace.svg",
+				"svg/santa-hat.svg",
+				
+				// Badges
+				"badges/1000000-pixels-placed.svg",
+				"badges/100000-pixels-placed.svg",
+				"badges/1000-pixels-placed.svg",
+				"badges/100-pixels-placed.svg",
+				"badges/20000-pixels-placed.svg",
+				"badges/5000-pixels-placed.svg",
+				"badges/admin.svg",
+				"badges/based.svg",
+				"badges/discord-member.svg",
+				"badges/ethical-botter.svg",
+				"badges/gay.svg",
+				"badges/moderator.svg",
+				"badges/noob.svg",
+				"badges/script-kiddie.svg",
+				"badges/trouble-maker.svg",
+				"badges/veteran.svg",
 
-                // Fonts
-                "fonts/RedditMono-Bold.woff2",
-                "fonts/RedditSans-Bold.woff2",
-                "fonts/RedditSans-Regular.woff2",
+				// Custom emojis
+				"custom_emojis/amogus.png",
+				"custom_emojis/biaoqing.png",
+				"custom_emojis/deepfriedh.png",
+				"custom_emojis/edp445.png",
+				"custom_emojis/fan.png",
+				"custom_emojis/heavy.png",
+				"custom_emojis/herkul.png",
+				"custom_emojis/kaanozdil.png",
+				"custom_emojis/lowtiergod.png",
+				"custom_emojis/manly.png",
+				"custom_emojis/plsaddred.png",
+				"custom_emojis/rplace.png",
+				"custom_emojis/rplacediscord.png",
+				"custom_emojis/sonic.png",
+				"custom_emojis/transparent.png",
+				"custom_emojis/trollface.png",
 
-                // Sounds
-                "sounds/cooldown-start.mp3",
-                "sounds/invalid.mp3",
-                "sounds/cooldown-end.mp3",
-                "sounds/highlight.mp3",
-                "sounds/select-colour.mp3",
-                "sounds/close-palette.mp3",
-                "sounds/bell.mp3"
-            ])
-        )
-    )
+				// Fonts
+				"fonts/RedditMono-Bold.woff2",
+				"fonts/RedditSans-Bold.woff2",
+				"fonts/RedditSans-Regular.woff2",
+
+				// Sounds
+				"sounds/cooldown-start.mp3",
+				"sounds/invalid.mp3",
+				"sounds/cooldown-end.mp3",
+				"sounds/highlight.mp3",
+				"sounds/select-colour.mp3",
+				"sounds/close-palette.mp3",
+				"sounds/bell.mp3",
+
+				// Translatins
+				"translations/ar.json",
+				"translations/de.json",
+				"translations/el.json",
+				"translations/es.json",
+				"translations/fa.json",
+				"translations/fr.json",
+				"translations/hi.json",
+				"translations/jp.json",
+				"translations/ro.json",
+				"translations/ru.json",
+				"translations/tr.json",
+				"translations/uk.json"
+			])
+		)
+	)
 })
 
 self.addEventListener("fetch", (event) => {
-    if (event.request.method !== "GET") return
-    event.respondWith(
-        (async () => {
-            const cache = await caches.open(CURRENT_CACHES)
-            const cachedResponse = await cache.match(event.request)
+	if (event.request.method !== "GET") return
+	event.respondWith(
+		(async () => {
+			const cache = await caches.open(CURRENT_CACHES)
+			const cachedResponse = await cache.match(event.request)
 
-            if (cachedResponse) return cachedResponse
-            return await fetch(event.request)
-        })()
-    )
+			if (cachedResponse) return cachedResponse
+			return await fetch(event.request)
+		})()
+	)
 })
\ No newline at end of file
diff --git a/translations/README.md b/translations/README.md
new file mode 100644
index 000000000..52cee3e5e
--- /dev/null
+++ b/translations/README.md
@@ -0,0 +1,36 @@
+# Translations
+
+This directory contains translations for various languages. Below is the list of available translations and their contributors. 
+
+## Available Translations
+The site currently provides first class translations for the following languages:
+- **Arabic** ([ar.json](ar.json))
+- **German** ([de.json](de.json))
+- **Greek** ([el.json](el.json))
+  - Contributors: Cyart#9657
+- **Spanish** ([es.json](es.json))
+  - Contributors: Cyart#9657
+- **Persian** ([fa.json](fa.json))
+  - Contributors: @sorenaxmee#4191, (@rplacelive Telegram) contributors
+- **French** ([fr.json](fr.json))
+  - Contributors: embed#2752
+- **Hindi** ([hi.json](hi.json))
+- **Japanese** ([jp.json](jp.json))
+- **Romanian** ([ro.json](ro.json))
+  - Contributors: Cyart#9657
+- **Russian** ([ru.json](ru.json))
+- **Turkish** ([tr.json](tr.json))
+  - Contributors: (Discord) @carkan988#1409, @anonimbiri#4089
+- **Ukrainian** ([uk.json](uk.json))
+
+Thank you to all contributors! Please note that some files contain machine-translated text, and further contributions are always appreciated!
+
+# Planned Translations
+We are currently looking for official translations for the following languages:
+- **Chinese**
+- **Portugese**
+- **Urdu**
+- **Vietnamese**
+- **Italian**
+- **Serbian**
+- **Azerbaijani**
diff --git a/translations/ar.json b/translations/ar.json
new file mode 100644
index 000000000..90bee87bd
--- /dev/null
+++ b/translations/ar.json
@@ -0,0 +1,38 @@
+{
+	"connecting": "جار الاتصال...",
+	"connectingFail": "لقد فشل الاتصال!",
+	"downloadingImage": "جار تحميل الصورة...",
+	"placeTile": "ضع بلاطة",
+	"donate": "تبرع",
+	"myAccount": "حسابي",
+	"chat": "الدردشة",
+	"liveChat": "Live Chat:",
+	"nicknameToContinue": "اكتب اسم مستعار للمواصلة:",
+	"changeChannel": "تغيير القناة:",
+	"captchaPrompt": "رجاءا قم بحل هذا اللغز...",
+	"webappInstall": "تحميل الموقع كتطبيق",
+	"connectionProblems": "مشاكل في الاتصال?",
+	"tryClickingHere": "جرب ان تضغط هنا",
+	"pleaseBeRespectful": "رجاءا كن محترما ولا تزعج الاخرين!",
+	"enterNickname": "اكتب اسم مستعار...",
+	"enterMessage": "اكتب الرسالة...",
+	"signInInstead": "قم بتسجيل الدخول من هنا بدلا من ذلك",
+	"createNewAccount": "انشئ حساب جديد",
+	"mention": "ذِكر",
+	"replyTo": "الرد على",
+	"report": "ابلاغ",
+	"block": "حظر",
+	"unblock": "ازالة الحظر",
+	"changeMyName": "غير اسمي",
+	"putOnCanvas": "🫧 ضع على اللوحه",
+	"sendInLiveChat": "📨 ارسل في الدردشة المباشرة",
+	"overlayMenu": "قائمة الصوره",
+	"modalAboutContent": "هنالك لوح فاضي.<br><br>تستطيع اضافة بلاطه, ولكن يجب عليك الانتظار لإضافة اخرى<br><br>لوحدك, تستطيع انشاء شيء.<br><br>مع الاخرين, تستطيع انشاء الكثير.",
+	"overlayMenuDesciption": "تصور بناءك بصورة نموذج!",
+	"messageNotFound": "لا يمكن تحميل الرسالة",
+	"placedBy": "وضع بواسطة:",
+	"lockMessage": "هذه اللوحة مقفلة... لا يمكنك وضع المزيد من البكسلات هنا",
+	"adHidden": "تم إخفاء الإعلان لمدة 14 يومًا!",
+	"specialEventTitle": "حدث خاص - 21 أغسطس!",
+	"copiedToClipboard": "نسخ إلى الحافظة!"
+}
\ No newline at end of file
diff --git a/translations/de.json b/translations/de.json
new file mode 100644
index 000000000..76687f4dd
--- /dev/null
+++ b/translations/de.json
@@ -0,0 +1,39 @@
+{
+	"connecting": "Zugreifen...",
+	"connectingFail": "Konnte keine Verbindung herstellen!",
+	"downloadingImage": "Bild wird heruntergeladen...",
+	"placeTile": "Platziere ein Pixel",
+	"donate": "Spenden",
+	"myAccount": "Mein Konto",
+	"chat": "Chat",
+	"liveChat": "Live-Chat:",
+	"nicknameToContinue": "Geben Sie einen Spitznamen ein, um fortzufahren:",
+	"changeChannel": "Kanal wechseln:",
+	"captchaPrompt": "Bitte lösen Sie dieses kleine Captcha, damit rplace.live allen Spaß macht...",
+	"webappInstall": "Installieren Sie die Web-App rplace.live",
+	"connectionProblems": "Verbindungsprobleme?",
+	"tryClickingHere": "klicken Sie hier, um zu lösen",
+	"pleaseBeRespectful": "Bitte seien Sie respektvoll, nicht zu spammen!",
+	"enterNickname": "Spitznamen eingeben...",
+	"enterMessage": "Nachricht eingeben...",
+	"signInInstead": "Stattdessen anmelden",
+	"createNewAccount": "Neues Konto erstellen",
+	"mention": "Erwähnen",
+	"replyTo": "Antworten auf",
+	"addReaction": "Reaktion hinzufügen",
+	"report": "Melden",
+	"block": "Blockieren",
+	"unblock": "Entsperren",
+	"changeMyName": "Meinen Namen ändern",
+	"putOnCanvas": "🫧 Auf die Leinwand legen",
+	"sendInLiveChat": "📨 Im Live-Chat senden",
+	"overlayMenu": "Overlay-Menü",
+	"modalAboutContent": "Es gibt eine leere Leinwand.<br><br>Sie können einen Pixel darauf platzieren, aber Sie müssen warten, um einen weiteren zu platzieren.<br><br>Individuell können Sie etwas schaffen.<br><br>Zusammen können Sie mehr schaffen.",
+	"overlayMenuDesciption": "Visualisieren Sie Ihren Bau mit einem Vorlagenbild!",
+	"messageNotFound": "Nachricht konnte nicht geladen werden",
+	"placedBy": "Platziert von:",
+	"lockMessage": "Diese Leinwand ist gesperrt... Sie können hier keine Pixel mehr platzieren",
+	"adHidden": "Anzeige für 14 Tage ausgeblendet!",
+	"specialEventTitle": "Sonderveranstaltung - 21. August!",
+	"copiedToClipboard": "In die Zwischenablage kopiert!"
+}
\ No newline at end of file
diff --git a/translations/el.json b/translations/el.json
new file mode 100644
index 000000000..39e9b5ba7
--- /dev/null
+++ b/translations/el.json
@@ -0,0 +1,39 @@
+{
+	"connecting": "Συνδετικός...",
+	"connectingFail": "Δεν μπορούσε να συνδεθεί!",
+	"downloadingImage": "Λήψη εικόνας...",
+	"placeTile": "τοποθετώ ένα πίξελ",
+	"donate": "δανεισω",
+	"myAccount": "Ο λογαριασμός μου",
+	"chat": "συζήτηση",
+	"liveChat": "ζωντανό chat",
+	"nicknameToContinue": "Εισαγάγετε ένα ψευδώνυμο για να συνεχίσετε:",
+	"changeChannel": "Αλλαγή καναλιού:",
+	"captchaPrompt": "Κάντε κλικ στο κουμπί που περιέχει το emoji που βλέπετε παρακάτω",
+	"webappInstall": "Εγκαταστήστε την εφαρμογή web rplace.live",
+	"connectionProblems": "Προβλήματα σύνδεσης;",
+	"tryClickingHere": "δοκιμάστε να κάνετε κλικ εδώ",
+	"pleaseBeRespectful": "Παρακαλώ να είστε σεβαστές!",
+	"enterNickname": "Εισαγάγετε ψευδώνυμο...",
+	"enterMessage": "Εισαγάγετε μήνυμα...",
+	"signInInstead": "Συνδεθείτε αντ 'αυτού",
+	"createNewAccount": "Δημιουργήστε νέο λογαριασμό",
+	"mention": "Αναφορά",
+	"replyTo": "Απάντηση σε",
+	"addReaction": "Προσθήκη αντίδρασης",
+	"report": "Αναφορά",
+	"block": "Αποκλεισμός",
+	"unblock": "Ξεμπλοκάρισμα",
+	"changeMyName": "Αλλάξτε το όνομά μου",
+	"putOnCanvas": "🫧 Βάλτε στον καμβά",
+	"sendInLiveChat": "📨 Στείλτε στο ζωντανό chat",
+	"overlayMenu": "Μενού επικάλυψης",
+	"modalAboutContent": "Υπάρχει ένας κενός καμβάς.<br><br>Μπορείτε να τοποθετήσετε ένα pixel πάνω του, αλλά πρέπει να περιμένετε για να τοποθετήσετε άλλο.<br><br>Ατομικά μπορείτε να δημιουργήσετε κάτι.<br><br>Μαζί μπορείτε να δημιουργήσετε κάτι περισσότερο.",
+	"overlayMenuDesciption": "Οπτικοποιήστε την κατασκευή σας με μια εικόνα προτύπου!",
+	"messageNotFound": "Το μήνυμα δεν μπόρεσε να φορτωθεί",
+	"placedBy": "Τοποθετήθηκε από:",
+	"lockMessage": "Αυτός ο καμβάς είναι κλειδωμένος... Δεν μπορείτε να τοποθετήσετε άλλα pixel εδώ",
+	"adHidden": "Η διαφήμιση κρύφτηκε για 14 ημέρες!",
+	"specialEventTitle": "Ειδική εκδήλωση - 21 Αυγούστου!",
+	"copiedToClipboard": "Αντιγράφηκε στο πρόχειρο!"
+}
\ No newline at end of file
diff --git a/translations/es.json b/translations/es.json
new file mode 100644
index 000000000..b58816d9b
--- /dev/null
+++ b/translations/es.json
@@ -0,0 +1,40 @@
+{
+	"connecting": "Conectando...",
+	"connectingFail": "¡No podía conectar!",
+	"downloadingImage": "Descargando imagen...",
+	"placeTile": "Coloca un pixel",
+	"donate": "Donar",
+	"myAccount": "Mi cuenta",
+	"chat": "Chat",
+	"liveChat": "Chat:",
+	"nicknameToContinue": "Introduce un apodo para continuar:",
+	"changeChannel": "Cambia el canal:",
+	"captchaPrompt": "Haga clic en el botón que contiene el emoji que ve a continuación",
+	"webappInstall": "Instale la aplicación web rplace.live",
+	"connectionProblems": "¿Problemas de conexión?",
+	"tryClickingHere": "intente hacer clic aquí",
+	"pleaseBeRespectful": "Por favor se respetuoso!",
+	"enterNickname": "Introduce el apodo...",
+	"enterMessage": "Introduce el mensaje...",
+	"specialEventTitle": "Evento especial - August 21st!",
+	"signInInstead": "Iniciar sesión en su lugar",
+	"createNewAccount": "Crear una nueva cuenta",
+	"mention": "Mencionar",
+	"replyTo": "Responder a",
+	"addReaction": "Agregar reacción",
+	"report": "Reportar",
+	"block": "Bloquear",
+	"unblock": "Desbloquear",
+	"changeMyName": "Cambiar mi nombre",
+	"putOnCanvas": "🫧 Poner en el lienzo",
+	"sendInLiveChat": "📨 Enviar en el chat en vivo",
+	"overlayMenu": "Menú de superposición",
+	"modalAboutContent": "Hay un lienzo vacío.<br><br>Puedes colocar un píxel sobre él, pero debes esperar para colocar otro.<br><br>Individualmente puedes crear algo.<br><br>Juntos pueden crear algo más.",
+	"overlayMenuDesciption": "¡Visualiza tu construcción con una imagen de plantilla!",
+	"messageNotFound": "No se pudo cargar el mensaje",
+	"placedBy": "Colocado por:",
+	"lockMessage": "Este lienzo está bloqueado... No puedes colocar más píxeles aquí",
+	"adHidden": "¡Anuncio oculto por 14 días!",
+	"specialEventTitle": "Evento especial - 21 de agosto!",
+	"copiedToClipboard": "¡Copiado al portapapeles!"
+}
\ No newline at end of file
diff --git a/translations/fa.json b/translations/fa.json
new file mode 100644
index 000000000..a1695b2c1
--- /dev/null
+++ b/translations/fa.json
@@ -0,0 +1,39 @@
+{
+	"connecting": "در حال وصل شدن",
+	"connectingFail": "متصل نشد",
+	"downloadingImage": "در حال بارگزاری عکس ها",
+	"placeTile": "نقاشی کردن",
+	"donate": "حمایت",
+	"myAccount": "حساب کاربری من",
+	"chat": "چت",
+	"liveChat": "چت زنده",
+	"nicknameToContinue": "لطفا نام خود را برای چت کردن وارد کنید",
+	"changeChannel": "تغییر کانال:",
+	"captchaPrompt": "لطفا روی دکمه حاوی ایموجی که در زیر می بینید کلیک کنید",
+	"webappInstall": "برنامه وب rplace.live را نصب کنید",
+	"connectionProblems": "مشکلات اتصال؟",
+	"tryClickingHere": "برای حل اینجا کلیک کنید",
+	"pleaseBeRespectful": "لطفا محترمانه رفتار کنید و سعی کنید اسپم نکنید!",
+	"enterNickname": "نام مستعار را وارد کنید...",
+	"enterMessage": "پیام را وارد کنید...",
+	"signInInstead": "به جای آن وارد شوید",
+	"createNewAccount": "ایجاد حساب جدید",
+	"mention": "ذکر",
+	"replyTo": "پاسخ دادن به",
+	"addReaction": "اضافه کردن واکنش",
+	"report": "گزارش",
+	"block": "مسدود کردن",
+	"unblock": "رفع انسداد",
+	"changeMyName": "نام من را تغییر دهید",
+	"putOnCanvas": "🫧 قرار دادن روی بوم",
+	"sendInLiveChat": "📨 ارسال در چت زنده",
+	"overlayMenu": "منوی پوشش",
+	"modalAboutContent": "یک بوم خالی وجود دارد.<br><br>می‌توانید یک کاشی روی آن قرار دهید، اما باید منتظر بمانید تا یکی دیگر قرار دهید.<br><br>به تنهایی می‌توانید چیزی ایجاد کنید.<br><br>با هم می‌توانید چیز بیشتری ایجاد کنید.",
+	"overlayMenuDesciption": "ساخت خود را با یک تصویر الگو تجسم کنید!",
+	"messageNotFound": "پیام بارگیری نشد",
+	"placedBy": "قرار داده شده توسط:",
+	"lockMessage": "این بوم قفل شده است... شما نمی‌توانید دیگر پیکسل‌ها را اینجا قرار دهید",
+	"adHidden": "تبلیغ به مدت ۱۴ روز مخفی شد!",
+	"specialEventTitle": "رویداد ویژه - ۲۱ اوت!",
+	"copiedToClipboard": "به کلیپ بورد کپی شد!"
+}
\ No newline at end of file
diff --git a/translations/fr.json b/translations/fr.json
new file mode 100644
index 000000000..2825b55d2
--- /dev/null
+++ b/translations/fr.json
@@ -0,0 +1,38 @@
+{
+	"connecting": "De liaison...",
+	"connectingFail": "Impossible de se connecter!",
+	"downloadingImage": "Télécharger l'image...",
+	"placeTile": "Place un pixel",
+	"donate": "Faire un don",
+	"myAccount": "Mon compte",
+	"chat": "Discuter",
+	"nicknameToContinue": "Entrez un surnom pour continuer :",
+	"changeChannel": "Changer de chaîne:",
+	"captchaPrompt": "Veuillez cliquer sur le bouton contenant l'emoji que vous voyez ci-dessous",
+	"webappInstall": "Installez l'application Web rplace.live",
+	"connectionProblems": "Problèmes de connexion?",
+	"tryClickingHere": "résoudre en cliquant ici",
+	"pleaseBeRespectful": "Soyez respectueux et essayez de ne pas spammer !",
+	"enterNickname": "Entrez le pseudo...",
+	"enterMessage": "Saisissez le message...",
+	"signInInstead": "Connectez-vous à la place",
+	"createNewAccount": "Créer un nouveau compte",
+	"mention": "Mentionner",
+	"replyTo": "Répondre à",
+	"addReaction": "Ajouter une réaction",
+	"report": "Signaler",
+	"block": "Bloquer",
+	"unblock": "Débloquer",
+	"changeMyName": "Changer mon nom",
+	"putOnCanvas": "🫧 Mettre sur la toile",
+	"sendInLiveChat": "📨 Envoyer dans le chat en direct",
+	"overlayMenu": "Menu de superposition",
+	"modalAboutContent": "Il y a une toile vide.<br><br>Vous pouvez y placer un pixel, mais vous devez attendre pour en placer un autre.<br><br>Individuellement, vous pouvez créer quelque chose.<br><br>Ensemble, vous pouvez créer quelque chose de plus.",
+	"overlayMenuDesciption": "Visualisez votre construction avec une image modèle!",
+	"messageNotFound": "Le message n'a pas pu être chargé",
+	"placedBy": "Placé par:",
+	"lockMessage": "Cette toile est verrouillée... Vous ne pouvez plus placer de pixels ici",
+	"adHidden": "Annonce masquée pendant 14 jours!",
+	"specialEventTitle": "Événement spécial - 21 août!",
+	"copiedToClipboard": "Copié dans le presse-papiers!"
+}
diff --git a/translations/hi.json b/translations/hi.json
new file mode 100644
index 000000000..b807dae51
--- /dev/null
+++ b/translations/hi.json
@@ -0,0 +1,39 @@
+{
+	"connecting": "कनेक्टिंग ...",
+	"connectingFail": "कनेक्ट नहीं हो सका!",
+	"downloadingImage": "इमेज डाउनलोड हो रही है...",
+	"placeTile": "एक टाइल रखें",
+	"donate": "दान करें",
+	"myAccount": "मेरा खाता",
+	"chat": "चैट",
+	"liveChat": "लाइव चैट:",
+	"nicknameToContinue": "जारी रखने के लिए एक उपनाम दर्ज करें:",
+	"changeChannel": "चैनल बदलें:",
+	"captchaPrompt": "rplace.live को सभी के लिए मज़ेदार बनाए रखने में मदद के लिए कृपया इस छोटे कैप्चा को हल करें...",
+	"webappInstall": "rplace.live वेब ऐप इंस्टॉल करें",
+	"connectionProblems": "कनेक्शन समस्याएं?",
+	"tryClickingHere": "यहाँ क्लिक करने का प्रयास करें",
+	"pleaseBeRespectful": "कृपया सम्मान करें और स्पैम न करने का प्रयास करें!",
+	"enterNickname": "उपनाम दर्ज करें ...",
+	"enterMessage": "संदेश दर्ज करें ...",
+	"signInInstead": "इसके बजाय साइन इन करें",
+	"createNewAccount": "नया खाता बनाएँ",
+	"mention": "उल्लेख",
+	"replyTo": "उत्तर दें",
+	"addReaction": "प्रतिक्रिया जोड़ें",
+	"report": "रिपोर्ट",
+	"block": "ब्लॉक करें",
+	"unblock": "अनब्लॉक करें",
+	"changeMyName": "मेरा नाम बदलें",
+	"putOnCanvas": "🫧 कैनवास पर रखें",
+	"sendInLiveChat": "📨 लाइव चैट में भेजें",
+	"overlayMenu": "ओवरले मेनू",
+	"modalAboutContent": "एक खाली कैनवास है।<br><br>आप इस पर एक पिक्सेल रख सकते हैं, लेकिन आपको दूसरा रखने के लिए इंतजार करना होगा।<br><br>अकेले आप कुछ बना सकते हैं।<br><br>साथ में आप कुछ और बना सकते हैं।",
+	"overlayMenuDesciption": "एक टेम्पलेट छवि के साथ अपनी निर्माण की कल्पना करें!",
+	"messageNotFound": "संदेश लोड नहीं किया जा सका",
+	"placedBy": "द्वारा रखा गया:",
+	"lockMessage": "यह कैनवास लॉक है... आप यहां और पिक्सेल नहीं रख सकते",
+	"adHidden": "विज्ञापन 14 दिनों के लिए छिपा हुआ!",
+	"specialEventTitle": "विशेष कार्यक्रम - 21 अगस्त!",
+	"copiedToClipboard": "क्लिपबोर्ड पर कॉपी किया गया!"
+}
\ No newline at end of file
diff --git a/translations/ja.json b/translations/ja.json
new file mode 100644
index 000000000..22cbdd523
--- /dev/null
+++ b/translations/ja.json
@@ -0,0 +1,39 @@
+{
+	"connecting": "接続中...",
+	"connectingFail": "接続できませんでした!",
+	"downloadingImage": "画像をダウンロードしています...",
+	"placeTile": "タイルを配置する",
+	"donate": "寄付する",
+	"myAccount": "マイアカウント",
+	"chat": "チャット",
+	"liveChat": "ライブチャット:",
+	"nicknameToContinue": "続行するにはニックネームを入力してください:",
+	"changeChannel": "チャンネルを変更:",
+	"captchaPrompt": "rplace.live をすべての人が楽しめるように、この小さなキャプチャを解決してください...",
+	"webappInstall": "rplace.live Web アプリをインストール",
+	"connectionProblems": "接続の問題?",
+	"tryClickingHere": "ここをクリックしてみてください",
+	"pleaseBeRespectful": "敬意を払い、スパム行為をしないようにしてください!",
+	"enterNickname": "ニックネームを入力してください...",
+	"enterMessage": "メッセージを入力してください...",
+	"signInInstead": "代わりにサインイン",
+	"createNewAccount": "新しいアカウントを作成する",
+	"mention": "言及",
+	"replyTo": "返信する",
+	"addReaction": "リアクションを追加",
+	"report": "報告する",
+	"block": "ブロックする",
+	"unblock": "ブロック解除",
+	"changeMyName": "名前を変更する",
+	"putOnCanvas": "🫧 キャンバスに置く",
+	"sendInLiveChat": "📨 ライブチャットで送信",
+	"overlayMenu": "オーバーレイメニュー",
+	"modalAboutContent": "空のキャンバスがあります。<br><br>その上にピクセルを置くことができますが、別のピクセルを置くには待つ必要があります。<br><br>個別に何かを作成できます。<br><br>一緒に何かもっと作成できます。",
+	"overlayMenuDesciption": "テンプレート画像でビルドを視覚化しましょう！",
+	"messageNotFound": "メッセージを読み込めませんでした",
+	"placedBy": "配置者:",
+	"lockMessage": "このキャンバスはロックされています... ここにピクセルを置くことはできません",
+	"adHidden": "広告が14日間非表示になりました！",
+	"specialEventTitle": "特別イベント - 8月21日！",
+	"copiedToClipboard": "クリップボードにコピーされました！"
+}
\ No newline at end of file
diff --git a/translations/ro.json b/translations/ro.json
new file mode 100644
index 000000000..b2081e5ca
--- /dev/null
+++ b/translations/ro.json
@@ -0,0 +1,39 @@
+{
+	"connecting": "Se conectează...",
+	"connectingFail": "Nu s-a putut conecta!",
+	"downloadingImage": "Se descarcă imaginea...",
+	"placeTile": "Pune un pixel",
+	"donate": "Donează",
+	"myAccount": "Contul meu",
+	"chat": "Chat",
+	"liveChat": "Chat live:",
+	"nicknameToContinue": "Introdu un nume pentru a continua:",
+	"changeChannel": "Schimbați canalul:",
+	"captchaPrompt": "Dați clic pe butonul care conține emoji-ul pe care îl vedeți mai jos",
+	"webappInstall": "Instalați aplicația web rplace.live",
+	"connectionProblems": "Probleme de conectare?",
+	"tryClickingHere": "incearca sa dai click aici",
+	"pleaseBeRespectful": "Vă rugăm să fiți respectuos și să nu trimiteți spam!",
+	"enterNickname": "Introduceți porecla...",
+	"enterMessage": "Introdu mesajul...",
+	"signInInstead": "În schimb, autentificați-vă",
+	"createNewAccount": "Creează un cont nou",
+	"mention": "Menționează",
+	"replyTo": "Răspunde la",
+	"addReaction": "Adaugă reacție",
+	"report": "Raportează",
+	"block": "Blochează",
+	"unblock": "Deblochează",
+	"changeMyName": "Schimbă-mi numele",
+	"putOnCanvas": "🫧 Pune pe pânză",
+	"sendInLiveChat": "📨 Trimite în chat-ul live",
+	"overlayMenu": "Meniu suprapus",
+	"modalAboutContent": "Există o pânză goală.<br><br>Puteți pune un pixel pe ea, dar trebuie să așteptați pentru a pune altul.<br><br>Individual puteți crea ceva.<br><br>Împreună puteți crea ceva mai mult.",
+	"overlayMenuDesciption": "Vizualizați construcția dvs. cu o imagine șablon!",
+	"messageNotFound": "Mesajul nu a putut fi încărcat",
+	"placedBy": "Plasat de:",
+	"lockMessage": "Această pânză este blocată... Nu mai puteți plasa pixeli aici",
+	"adHidden": "Reclama ascunsă pentru 14 zile!",
+	"specialEventTitle": "Eveniment special - 21 august!",
+	"copiedToClipboard": "Copiat în clipboard!"
+}
\ No newline at end of file
diff --git a/translations/ru.json b/translations/ru.json
new file mode 100644
index 000000000..d5e260ce9
--- /dev/null
+++ b/translations/ru.json
@@ -0,0 +1,40 @@
+{
+	"connecting": "Подключение...",
+	"connectingFail": "Не могу подключиться!",
+	"downloadingImage": "Загрузка изображения...",
+	"placeTile": "Поместите пиксель",
+	"donate": "Пожертвовать",
+	"myAccount": "Мой счет",
+	"chat": "Чат",
+	"liveChat": "Живой чат:",
+	"nicknameToContinue": "Введите псевдоним:",
+	"changeChannel": "Изменить канал:",
+	"captchaPrompt": "Пожалуйста, решите эту небольшую капчу, чтобы сделать rplace.live приятным для всех...",
+	"webappInstall": "Установите веб-приложение rplace.live",
+	"connectionProblems": "Проблемы с подключением?",
+	"tryClickingHere": "попробуйте нажать здесь",
+	"pleaseBeRespectful": "Пожалуйста, будьте уважительны и старайтесь не спамить!",
+	"enterNickname": "Введите псевдоним...",
+	"enterMessage": "Введите сообщение...",
+	"signInInstead": "зарегистрироваться вместо этого",
+	"createNewAccount": "создайте новый аккаунт",
+	"mention": "упомянуть",
+	"replyto": "ответить",
+	"report": "пожаловаться",
+	"block": "заблокировать",
+	"unblock": "разблокировать",
+	"changeMyName": "изменить моё имя",
+	"sendInLiveChat": "📨: отправить в живой чат",
+	"overlaymenu": "меню наложения",
+	"modalAboutContent": "есть пустое полотно.<br><br> Вы можете поставить пиксель на нём,но вы должны подождать чтобы поставить ещё.<br<br>Вы можете создать что-то.<br><br> Вместе вы можете создать много.",
+	"overlayMenuDescription": "визуализируйте вашу постройку с шаблоном вашего изображения!",
+	"addReaction": "добавить реакцию",
+	"putOnCanvas": "🫧 положить на холст",
+	"overlayMenu": "меню наложения",
+	"messageNotFound": "Сообщение не может быть загружено",
+	"placedBy": "Размещено:",
+	"lockMessage": "Этот холст заблокирован... Вы больше не можете размещать пиксели здесь",
+	"adHidden": "Реклама скрыта на 14 дней!",
+	"specialEventTitle": "Специальное событие - 21 августа!",
+	"copiedToClipboard": "Скопировано в буфер обмена!"
+}
diff --git a/translations/tr.json b/translations/tr.json
new file mode 100644
index 000000000..01ae85a4b
--- /dev/null
+++ b/translations/tr.json
@@ -0,0 +1,36 @@
+{
+	"connecting": "Bağlanıyor...",
+	"connectingFail": "Bağlanamadı!",
+	"downloadingImage": "Resim indiriliyor...",
+	"placeTile": "Bir piksel yerleştir",
+	"donate": "Bağış yap",
+	"myAccount": "Hesabım",
+	"chat": "Sohbet",
+	"nicknameToContinue": "Devam etmek için bir takma ad girin:",
+	"changeChannel": "Kanalı değiştir:",
+	"captchaPrompt": "Lütfen aşağıda gördüğünüz emojiyi içeren butona tıklayın",
+	"webappInstall": "rplace.live web uygulamasını kurun",
+	"connectionProblems": "Bağlantı problemleri?",
+	"tryClickingHere": "buraya tıklamayı dene",
+	"pleaseBeRespectful": "Lütfen saygılı olun ve spam yapmamaya çalışın!",
+	"enterNickname": "Takma ad girin...",
+	"enterMessage": "Mesaj girin...",
+	"signInInstead": "Oturum aç",
+	"createNewAccount": "Hesap oluştur",
+	"mention": "Etiketle",
+	"block": "Engellemek",
+	"changeMyName": "İsimi değiştir",
+	"putOnCanvas": "🫧 Haritanın üstüne yaz",
+	"sendInLiveChat": "📨 Sohbete yaz",
+	"overlayMenu": "Bindirme menüsü",
+	"modalAboutContent": "Boş bir tuval var.<br><br>Üzerine renkli bir piksel koyabilirsiniz ama yenisini yerleştirmek için beklemeniz gerekir.<br><br>Tek başınıza bir şeyler yapabilirsiniz.<br><br>Topluluk ile daha fazlasını yapabilirsiniz.",
+	"overlayMenuDesciption": "Haritanın üzerine bir fotoğraf koyun ve onu çizin!",
+	"specialEventTitle": "Özel etkinlik - August 21st!",
+	"addReaction": "Tepki ekle",
+	"report": "Rapor et",
+	"unblock": "Engeli kaldır",
+	"placedBy": "Yerleştiren:",
+	"lockMessage": "Bu tuval kilitli... Buraya artık piksel yerleştiremezsiniz",
+	"adHidden": "Reklam 14 gün boyunca gizlendi!",
+	"copiedToClipboard": "Panoya kopyalandı!"
+}
diff --git a/translations/uk.json b/translations/uk.json
new file mode 100644
index 000000000..84da39d27
--- /dev/null
+++ b/translations/uk.json
@@ -0,0 +1,40 @@
+{
+	"connecting": "підключення...",
+	"connectingFail": "Не вдалося підключитися!",
+	"downloadingImage": "Завантажую зображення",
+	"placeTile": "Покласти піксель",
+	"donate": "Пожертвувати",
+	"myAccount": "Мій обліковий запис",
+	"chat": "Чат",
+	"liveChat": "Живий чат",
+	"nicknameToContinue": "Введіть ім'я щоб продовжити",
+	"changeChannel": "Зменіть канал",
+	"captchaPrompt": "вирішіть цю мальнеку captcha щоб допомогти залишити rplace.live веселим для всіх",
+	"webappInstall": "скачайте rplace.live веб-программу",
+	"connectionProblems": "Проблеми с підключенням?",
+	"tryClickingHere": "спробуйте клацнути сюди",
+	"pleaseBeRespectful": "будь ласка будьте поважними і не спамьте!",
+	"enterNickname": "Введіть ім'я...",
+	"enterMessage": "Введіть повідомлення",
+	"signInInstead": "Увійти замість цього",
+	"createNewAccount": "Створіть новий аккаунт",
+	"mention": "згадати",
+	"replyto": "Відповісти на",
+	"report": "Доповідь",
+	"block": "Заблокувати",
+	"unblock": "Разблокувати",
+	"changeMyName": "Змінити ім'я",
+	"sendInLiveChat": "📨відправьте в живий чат",
+	"overlaymenu": "Меню накладки",
+	"modalAboutContent": "Є пусте полотно.<br><br>Ви можете поставити піксель на ньому,<br><br>але вам треба почекати перед тим як поставити іще один.<br><br>Індиаідуально ви можете створити багато чого.",
+	"overlayMenuDescription": "Візуалізуйте вашу творчість с шаблоном зображення!",
+	"addReaction": "додати реакцію",
+	"putOnCanvas": "🫧 поставити на полотно",
+	"overlayMenu": "Меню накладки",
+	"messageNotFound": "Повідомлення не може бути завантажене",
+	"placedBy": "Розміщено:",
+	"lockMessage": "Це полотно заблоковано... Ви більше не можете розміщувати пікселі тут",
+	"adHidden": "Реклама прихована на 14 днів!",
+	"specialEventTitle": "Спеціальна подія - 21 серпня!",
+	"copiedToClipboard": "Скопійовано в буфер обміну!"
+}
\ No newline at end of file
diff --git a/virtual-select.min.css b/virtual-select.min.css
deleted file mode 100644
index 84156bf82..000000000
--- a/virtual-select.min.css
+++ /dev/null
@@ -1,13 +0,0 @@
-/*!
- * Virtual Select v1.0.31
- * https://sa-si-dev.github.io/virtual-select
- * Licensed under MIT (https://github.com/sa-si-dev/virtual-select/blob/master/LICENSE)
- */
-@-webkit-keyframes vscomp-animation-spin{to{transform:rotateZ(360deg)}}@keyframes vscomp-animation-spin{to{transform:rotateZ(360deg)}}.vscomp-popup-active{overflow:hidden !important}.vscomp-ele{display:inline-block;max-width:250px;width:100%}.vscomp-wrapper{color:#333;display:inline-flex;flex-wrap:wrap;font-family:sans-serif;font-size:14px;position:relative;text-align:left;width:100%}.vscomp-wrapper *,.vscomp-wrapper *::before,.vscomp-wrapper *::after{box-sizing:border-box}.vscomp-wrapper:focus{outline:none}.vscomp-dropbox-wrapper{left:0;position:absolute;top:0}.vscomp-toggle-button{align-items:center;background-color:#fff;border:1px solid #ddd;cursor:pointer;display:flex;padding:7px 30px 7px 10px;position:relative;width:100%}.vscomp-value{height:20px;line-height:20px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vscomp-arrow{align-items:center;display:flex;height:100%;justify-content:center;position:absolute;right:0;top:0;width:30px}.vscomp-arrow::after{transform:rotate(45deg);border:1px solid rgba(0,0,0,0);border-bottom-color:#111;border-right-color:#111;content:"";height:8px;margin-top:-6px;width:8px}.vscomp-clear-icon{height:12px;position:relative;width:12px}.vscomp-clear-icon::before,.vscomp-clear-icon::after{background-color:#999;content:"";height:12px;left:5px;position:absolute;top:0;width:2px}.vscomp-clear-icon::before{transform:rotate(45deg)}.vscomp-clear-icon::after{transform:rotate(-45deg)}.vscomp-clear-icon:hover::before,.vscomp-clear-icon:hover::after{background:#333}.vscomp-clear-button{align-items:center;border-radius:50%;display:none;height:24px;justify-content:center;margin-top:-12px;position:absolute;right:30px;top:50%;width:24px}.vscomp-clear-button:hover{background:#ccc}.vscomp-clear-button:hover .vscomp-clear-icon::before,.vscomp-clear-button:hover .vscomp-clear-icon::after{background-color:#333}.vscomp-dropbox-close-button{align-items:center;background-color:#fff;border-radius:50%;bottom:-48px;cursor:pointer;display:none;height:40px;justify-content:center;left:50%;margin-left:-20px;position:absolute;width:40px}.vscomp-value-tag.more-value-count{white-space:nowrap}.vscomp-dropbox-container{width:100%;z-index:2}.vscomp-dropbox{background-color:#fff;width:100%}.vscomp-options-container{max-height:210px;overflow:auto;position:relative}.vscomp-options-bottom-freezer{bottom:0;height:2px;left:0;position:absolute;right:0}.vscomp-option{align-items:center;cursor:pointer;display:flex;flex-wrap:wrap;height:40px;padding:0 15px;position:relative}.vscomp-option.selected{background-color:#eee}.vscomp-option.focused{background-color:#ccc}.vscomp-option.disabled{cursor:default;opacity:.5}.vscomp-option.group-title .vscomp-option-text{cursor:default;opacity:.6}.vscomp-option.group-title.selected{background-color:rgba(0,0,0,0)}.vscomp-option.group-option{padding-left:30px}.vscomp-new-option-icon{height:30px;position:absolute;right:0;top:0;width:30px}.vscomp-new-option-icon::before{border:15px solid #512da8;border-bottom-color:rgba(0,0,0,0);border-left-color:rgba(0,0,0,0);content:"";position:absolute;right:0;top:0}.vscomp-new-option-icon::after{align-items:center;color:#fff;content:"+";display:flex;font-size:18px;height:15px;justify-content:center;position:absolute;right:1px;top:0;width:15px}.vscomp-option-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.vscomp-option-description{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#666;font-size:13px;line-height:15px;width:100%}.vscomp-search-container{align-items:center;border-bottom:1px solid #ddd;display:flex;height:40px;padding:0 5px 0 15px;position:relative}.vscomp-search-input{background-color:rgba(0,0,0,0);border:0;color:inherit;font-size:15px;height:38px;padding:10px 0;width:calc(100% - 30px)}.vscomp-search-input:focus{outline:none}.vscomp-search-clear{align-items:center;color:#999;cursor:pointer;display:flex;font-size:25px;height:30px;justify-content:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;visibility:hidden;width:30px}.vscomp-search-clear:hover{color:inherit}.vscomp-no-options,.vscomp-no-search-results{align-items:center;display:none;justify-content:center;padding:20px 10px}.vscomp-options-loader{display:none;padding:20px 0;text-align:center}.vscomp-options-loader::before{-webkit-animation:vscomp-animation-spin .8s infinite linear;animation:vscomp-animation-spin .8s infinite linear;background-color:#fff;border-radius:50%;box-shadow:-4px -5px 3px -3px rgba(0,0,0,.3);content:"";display:inline-block;height:40px;opacity:.7;width:40px}.vscomp-ele[disabled]{cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vscomp-ele[disabled] .vscomp-wrapper{opacity:.7;pointer-events:none}.vscomp-wrapper .checkbox-icon{display:inline-flex;height:15px;margin-right:10px;position:relative;width:15px}.vscomp-wrapper .checkbox-icon::after{transition-duration:.2s;border:2px solid #888;content:"";display:inline-block;height:100%;width:100%}.vscomp-wrapper .checkbox-icon.checked::after{transform:rotate(45deg) translate(1px, -4px);border-color:#512da8;border-left-color:rgba(0,0,0,0);border-top-color:rgba(0,0,0,0);width:50%}.vscomp-wrapper.show-as-popup .vscomp-dropbox-container{align-items:center;background-color:rgba(0,0,0,.5);display:flex;height:100vh;justify-content:center;left:0;opacity:1;overflow:auto;padding:0 10px;position:fixed;top:0;width:100vw}.vscomp-wrapper.show-as-popup .vscomp-dropbox{margin-top:-24px;max-height:calc(80% - 48px);max-width:500px;position:relative;width:80%}.vscomp-wrapper.show-as-popup .vscomp-dropbox-close-button{display:flex}.vscomp-wrapper.popup-position-left .vscomp-dropbox-container{justify-content:flex-start}.vscomp-wrapper.popup-position-right .vscomp-dropbox-container{justify-content:flex-end}.vscomp-wrapper.has-select-all .vscomp-toggle-all-button{align-items:center;cursor:pointer;display:flex}.vscomp-wrapper.has-select-all .vscomp-search-input,.vscomp-wrapper.has-select-all .vscomp-toggle-all-label{width:calc(100% - 55px)}.vscomp-wrapper.has-select-all .vscomp-toggle-all-label{display:none}.vscomp-wrapper:not(.has-search-input) .vscomp-toggle-all-button{width:100%}.vscomp-wrapper:not(.has-search-input) .vscomp-toggle-all-label{display:inline-block}.vscomp-wrapper.multiple .vscomp-option .vscomp-option-text{width:calc(100% - 25px)}.vscomp-wrapper.multiple .vscomp-option .vscomp-option-description{padding-left:25px}.vscomp-wrapper.multiple .vscomp-option.selected .checkbox-icon::after{transform:rotate(45deg) translate(1px, -4px);border-color:#512da8;border-left-color:rgba(0,0,0,0);border-top-color:rgba(0,0,0,0);width:50%}.vscomp-wrapper.focused .vscomp-toggle-button,.vscomp-wrapper:focus .vscomp-toggle-button{box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12),0 1px 5px 0 rgba(0,0,0,.2)}.vscomp-wrapper.closed .vscomp-dropbox-container,.vscomp-wrapper.closed.vscomp-dropbox-wrapper{display:none}.vscomp-wrapper:not(.has-value) .vscomp-value{opacity:.5}.vscomp-wrapper.has-clear-button.has-value .vscomp-clear-button{display:flex}.vscomp-wrapper.has-clear-button .vscomp-toggle-button{padding-right:54px}.vscomp-wrapper.has-no-options .vscomp-options-container,.vscomp-wrapper.has-no-search-results .vscomp-options-container{display:none}.vscomp-wrapper.has-no-options .vscomp-no-options{display:flex}.vscomp-wrapper.has-no-search-results .vscomp-no-search-results{display:flex}.vscomp-wrapper.has-search-value .vscomp-search-clear{visibility:visible}.vscomp-wrapper.has-no-options .vscomp-toggle-all-button{opacity:.5;pointer-events:none}.vscomp-wrapper.keep-always-open .vscomp-toggle-button{padding-right:24px}.vscomp-wrapper.keep-always-open .vscomp-clear-button{right:5px}.vscomp-wrapper.keep-always-open .vscomp-arrow{display:none}.vscomp-wrapper.keep-always-open .vscomp-dropbox-container{position:relative;z-index:1}.vscomp-wrapper.keep-always-open .vscomp-dropbox{transition-duration:0s;border:1px solid #ddd;box-shadow:none}.vscomp-wrapper.keep-always-open.focused,.vscomp-wrapper.keep-always-open:focus,.vscomp-wrapper.keep-always-open:hover{box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12),0 1px 5px 0 rgba(0,0,0,.2)}.vscomp-wrapper.server-searching .vscomp-options-list{display:none}.vscomp-wrapper.server-searching .vscomp-options-loader{display:block}.vscomp-wrapper.has-error .vscomp-toggle-button{border-color:#b00020}.vscomp-wrapper.show-value-as-tags .vscomp-toggle-button{padding:4px 22px 0 10px}.vscomp-wrapper.show-value-as-tags .vscomp-value{display:flex;flex-wrap:wrap;height:auto;min-height:28px;overflow:auto;text-overflow:unset;white-space:normal}.vscomp-wrapper.show-value-as-tags .vscomp-value-tag{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;align-items:center;border:1px solid #ddd;border-radius:20px;display:inline-flex;font-size:12px;line-height:16px;margin:0 4px 4px 0;max-width:100%;padding:2px 3px 2px 8px}.vscomp-wrapper.show-value-as-tags .vscomp-value-tag.more-value-count{padding-right:8px}.vscomp-wrapper.show-value-as-tags .vscomp-value-tag-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:calc(100% - 20px)}.vscomp-wrapper.show-value-as-tags .vscomp-value-tag-clear-button{align-items:center;display:flex;height:20px;justify-content:center;width:20px}.vscomp-wrapper.show-value-as-tags .vscomp-value-tag-clear-button .vscomp-clear-icon{transform:scale(0.8)}.vscomp-wrapper.show-value-as-tags .vscomp-arrow{height:34px}.vscomp-wrapper.show-value-as-tags .vscomp-clear-button{margin-top:0;top:5px}.vscomp-wrapper.show-value-as-tags.has-value .vscomp-arrow{display:none}.vscomp-wrapper.show-value-as-tags.has-value .vscomp-clear-button{right:2px}.vscomp-wrapper.show-value-as-tags:not(.has-value) .vscomp-toggle-button{padding-bottom:2px}.vscomp-wrapper.show-value-as-tags:not(.has-value) .vscomp-value{align-items:center;padding-bottom:3px}.vscomp-wrapper.text-direction-rtl{direction:rtl}.vscomp-wrapper.text-direction-rtl .vscomp-toggle-button{padding:7px 10px 7px 30px}.vscomp-wrapper.text-direction-rtl .vscomp-arrow{left:0;right:auto}.vscomp-wrapper.text-direction-rtl .vscomp-clear-button{left:30px;right:auto !important}.vscomp-wrapper.text-direction-rtl .checkbox-icon{margin-left:10px;margin-right:0}.vscomp-wrapper.text-direction-rtl .checkbox-icon.checked::after{transform:rotate(45deg) translate(-4px, 1px)}.vscomp-wrapper.text-direction-rtl .vscomp-search-container{padding:0 15px 0 5px}.vscomp-wrapper.text-direction-rtl .vscomp-toggle-all-label{text-align:right}.vscomp-wrapper.text-direction-rtl .vscomp-option{text-align:right}.vscomp-wrapper.text-direction-rtl .vscomp-option.group-option{padding-right:30px}.vscomp-wrapper.text-direction-rtl .vscomp-new-option-icon{left:0;right:auto}.vscomp-wrapper.text-direction-rtl .vscomp-new-option-icon::before{border-left-color:#512da8;border-right-color:rgba(0,0,0,0)}.vscomp-wrapper.text-direction-rtl .vscomp-new-option-icon::after{left:1px;right:auto}.vscomp-wrapper.text-direction-rtl.multiple .vscomp-option.selected .checkbox-icon::after{transform:rotate(45deg) translate(-4px, 1px)}.vscomp-wrapper.text-direction-rtl.has-clear-button .vscomp-toggle-button{padding-left:54px}.vscomp-wrapper.text-direction-rtl.keep-always-open .vscomp-toggle-button{padding-left:24px}.vscomp-wrapper.text-direction-rtl.keep-always-open .vscomp-clear-button{left:5px}.vscomp-wrapper.text-direction-rtl.show-value-as-tags .vscomp-toggle-button{padding:4px 10px 0 22px}.vscomp-wrapper.text-direction-rtl.show-value-as-tags .vscomp-value-tag{margin:0 0 4px 4px;padding:2px 8px 2px 3px}.vscomp-wrapper.text-direction-rtl.show-value-as-tags .vscomp-value-tag.more-value-count{padding-left:8px}.vscomp-wrapper.text-direction-rtl.show-value-as-tags.has-value .vscomp-clear-button{left:2px}
-/*!
- * Popover v1.0.10
- * https://sa-si-dev.github.io/popover
- * Licensed under MIT (https://github.com/sa-si-dev/popover/blob/master/LICENSE)
- */
-.pop-comp-wrapper{display:none;position:absolute;top:0;left:0;opacity:0;color:#000;background-color:#fff;box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12),0 1px 5px 0 rgba(0,0,0,.2);text-align:left;flex-wrap:wrap;z-index:1}.pop-comp-arrow{position:absolute;z-index:1;width:16px;height:16px;overflow:hidden}.pop-comp-arrow::before{content:"";position:absolute;top:8px;left:8px;width:16px;height:16px;background-color:#fff;box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12),0 1px 5px 0 rgba(0,0,0,.2);-webkit-transform-origin:left top;transform-origin:left top;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.pop-comp-content{position:relative;z-index:2}.pop-comp-wrapper.position-bottom>.pop-comp-arrow{margin-left:-8px;left:0;top:-15px}.pop-comp-wrapper.position-bottom>.pop-comp-arrow::before{box-shadow:0px 0px 2px 0 rgba(0,0,0,.14)}.pop-comp-wrapper.position-top>.pop-comp-arrow{margin-left:-8px;left:0;bottom:-15px}.pop-comp-wrapper.position-right>.pop-comp-arrow{margin-top:-8px;top:0;left:-15px}.pop-comp-wrapper.position-left>.pop-comp-arrow{margin-top:-8px;top:0;right:-15px}.pop-comp-disable-events{pointer-events:none}
-
diff --git a/virtual-select.min.js b/virtual-select.min.js
deleted file mode 100644
index 4a5b16f8b..000000000
--- a/virtual-select.min.js
+++ /dev/null
@@ -1,5 +0,0 @@
-/*!
- * Virtual Select v1.0.31
- * https://sa-si-dev.github.io/virtual-select
- * Licensed under MIT (https://github.com/sa-si-dev/virtual-select/blob/master/LICENSE)
- */!function(){"use strict";function e(e){return function(e){if(Array.isArray(e))return t(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||function(e,i){if(e){if("string"==typeof e)return t(e,i);var o=Object.prototype.toString.call(e).slice(8,-1);return"Object"===o&&e.constructor&&(o=e.constructor.name),"Map"===o||"Set"===o?Array.from(e):"Arguments"===o||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(o)?t(e,i):void 0}}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function t(e,t){(null==t||t>e.length)&&(t=e.length);for(var i=0,o=new Array(t);i<t;i++)o[i]=e[i];return o}function i(e){return(i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function o(e,t){for(var i=0;i<t.length;i++){var o=t[i];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}var s=function(){function t(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t)}var s,n,r;return s=t,r=[{key:"getString",value:function(e){return e||0===e?e.toString():""}},{key:"convertToBoolean",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];return!0===e||"true"===e||!1!==e&&"false"!==e&&t}},{key:"isEmpty",value:function(e){var t=!1;return e?Array.isArray(e)?0===e.length&&(t=!0):"object"===i(e)&&0===Object.keys(e).length&&(t=!0):t=!0,t}},{key:"isNotEmpty",value:function(e){return!this.isEmpty(e)}},{key:"removeItemFromArray",value:function(t,i){var o=arguments.length>2&&void 0!==arguments[2]&&arguments[2];if(!Array.isArray(t)||!t.length)return t;var s=o?e(t):t,n=s.indexOf(i);return-1!==n&&s.splice(n,1),s}},{key:"removeArrayEmpty",value:function(e){return Array.isArray(e)&&e.length?e.filter((function(e){return!!e})):[]}},{key:"getRandomInt",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,i=Math.ceil(t),o=Math.floor(e);return Math.floor(Math.random()*(o-i-1))+i}}],(n=null)&&o(s.prototype,n),r&&o(s,r),Object.defineProperty(s,"prototype",{writable:!1}),t}();function n(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var i=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=i){var o,s,n=[],r=!0,a=!1;try{for(i=i.call(e);!(r=(o=i.next()).done)&&(n.push(o.value),!t||n.length!==t);r=!0);}catch(e){a=!0,s=e}finally{try{r||null==i.return||i.return()}finally{if(a)throw s}}return n}}(e,t)||a(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function r(e){return function(e){if(Array.isArray(e))return l(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||a(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function a(e,t){if(e){if("string"==typeof e)return l(e,t);var i=Object.prototype.toString.call(e).slice(8,-1);return"Object"===i&&e.constructor&&(i=e.constructor.name),"Map"===i||"Set"===i?Array.from(e):"Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i)?l(e,t):void 0}}function l(e,t){(null==t||t>e.length)&&(t=e.length);for(var i=0,o=new Array(t);i<t;i++)o[i]=e[i];return o}function u(e,t){for(var i=0;i<t.length;i++){var o=t[i];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}var p=function(){function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e)}var t,i,o;return t=e,o=[{key:"addClass",value:function(t,i){if(t){var o=i.split(" ");e.getElements(t).forEach((function(e){var t;(t=e.classList).add.apply(t,r(o))}))}}},{key:"removeClass",value:function(t,i){if(t){var o=i.split(" ");e.getElements(t).forEach((function(e){var t;(t=e.classList).remove.apply(t,r(o))}))}}},{key:"toggleClass",value:function(t,i,o){var s;t&&(void 0!==o&&(s=Boolean(o)),e.getElements(t).forEach((function(e){e.classList.toggle(i,s)})))}},{key:"hasClass",value:function(e,t){return!!e&&e.classList.contains(t)}},{key:"hasEllipsis",value:function(e){return!!e&&e.scrollWidth>e.offsetWidth}},{key:"getData",value:function(e,t,i){if(e){var o=e?e.dataset[t]:"";return"number"===i?o=parseFloat(o)||0:"true"===o?o=!0:"false"===o&&(o=!1),o}}},{key:"setData",value:function(e,t,i){e&&(e.dataset[t]=i)}},{key:"setAttr",value:function(e,t,i){e&&e.setAttribute(t,i)}},{key:"setAttrFromEle",value:function(e,t,i,o){var s={};i.forEach((function(t){s[t]=e.getAttribute(t)})),i.forEach((function(e){var i=s[e];(i||-1!==o.indexOf(e)&&""===i)&&t.setAttribute(e,i)}))}},{key:"setStyle",value:function(e,t,i){e&&(e.style[t]=i)}},{key:"setStyles",value:function(e,t){e&&t&&Object.keys(t).forEach((function(i){e.style[i]=t[i]}))}},{key:"setAria",value:function(e,t,i){var o=t;"role"!==o&&(o="aria-".concat(o)),e.setAttribute(o,i)}},{key:"getElements",value:function(e){return e?void 0===e.forEach?[e]:e:[]}},{key:"addEvent",value:function(t,i,o){t&&s.removeArrayEmpty(i.split(" ")).forEach((function(i){e.getElements(t).forEach((function(e){e.addEventListener(i,o)}))}))}},{key:"dispatchEvent",value:function(t,i){var o=arguments.length>2&&void 0!==arguments[2]&&arguments[2];if(t){var s=e.getElements(t);setTimeout((function(){s.forEach((function(e){e.dispatchEvent(new CustomEvent(i,{bubbles:o}))}))}),0)}}},{key:"getAttributesText",value:function(e){var t="";return e?(Object.entries(e).forEach((function(e){var i=n(e,2),o=i[0],s=i[1];void 0!==s&&(t+=" ".concat(o,'="').concat(s,'" '))})),t):t}},{key:"convertPropToDataAttr",value:function(e){return e?"data-".concat(e).replace(/([A-Z])/g,"-$1").toLowerCase():""}}],(i=null)&&u(t.prototype,i),o&&u(t,o),Object.defineProperty(t,"prototype",{writable:!1}),e}();function h(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),i.push.apply(i,o)}return i}function c(e){for(var t=1;t<arguments.length;t++){var i=null!=arguments[t]?arguments[t]:{};t%2?h(Object(i),!0).forEach((function(t){d(e,t,i[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):h(Object(i)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(i,t))}))}return e}function d(e,t,i){return t in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function v(e){return(v="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function f(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var i=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=i){var o,s,n=[],r=!0,a=!1;try{for(i=i.call(e);!(r=(o=i.next()).done)&&(n.push(o.value),!t||n.length!==t);r=!0);}catch(e){a=!0,s=e}finally{try{r||null==i.return||i.return()}finally{if(a)throw s}}return n}}(e,t)||b(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function y(e){return function(e){if(Array.isArray(e))return g(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||b(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function b(e,t){if(e){if("string"==typeof e)return g(e,t);var i=Object.prototype.toString.call(e).slice(8,-1);return"Object"===i&&e.constructor&&(i=e.constructor.name),"Map"===i||"Set"===i?Array.from(e):"Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i)?g(e,t):void 0}}function g(e,t){(null==t||t>e.length)&&(t=e.length);for(var i=0,o=new Array(t);i<t;i++)o[i]=e[i];return o}function m(e,t){for(var i=0;i<t.length;i++){var o=t[i];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}var O,S={13:"onEnterPress",38:"onUpArrowPress",40:"onDownArrowPress"},x=["autofocus","disabled","multiple","required"],w=["autofocus","class","disabled","id","multiple","name","placeholder","required"],k=["additionalClasses","aliasKey","allOptionsSelectedText","allowNewOption","alwaysShowSelectedOptionsCount","ariaLabelledby","autoSelectFirstOption","clearButtonText","descriptionKey","disableAllOptionsSelectedText","disableOptionGroupCheckbox","disableSelectAll","disableValidation","dropboxWidth","dropboxWrapper","emptyValue","enableSecureText","hasOptionDescription","hideClearButton","hideValueTooltipOnSelectAll","keepAlwaysOpen","labelKey","markSearchResults","maxValues","maxWidth","moreText","noOfDisplayValues","noOptionsText","noSearchResultsText","optionHeight","optionSelectedText","optionsCount","optionsSelectedText","popupDropboxBreakpoint","popupPosition","position","search","searchByStartsWith","searchGroup","searchPlaceholderText","selectAllOnlyVisible","selectAllText","setValueAsArray","showDropboxAsPopup","showOptionsOnlyOnSearch","showSelectedOptionsFirst","showValueAsTags","silentInitialValueSet","textDirection","tooltipAlignment","tooltipFontSize","tooltipMaxWidth","updatePositionThrottle","useGroupValue","valueKey","zIndex"],C=function(){function e(t){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e);try{this.createSecureTextElements(),this.setProps(t),this.setDisabledOptions(t.disabledOptions),this.setOptions(t.options),this.render()}catch(e){console.warn("Couldn't initiate Virtual Select"),console.error(e)}}var t,i,o;return t=e,o=[{key:"init",value:function(t){var i=t.ele;if(i){var o=!1;if("string"==typeof i){var s=(i=document.querySelectorAll(i)).length;if(0===s)return;1===s&&(o=!0)}void 0!==i.length&&void 0!==i.forEach||(i=[i],o=!0);var n=[];return i.forEach((function(i){i.virtualSelect?n.push(i.virtualSelect):(t.ele=i,"SELECT"===i.tagName&&e.setPropsFromSelect(t),n.push(new e(t)))})),o?n[0]:n}}},{key:"getAttrProps",value:function(){var e=p.convertPropToDataAttr,t={};return w.forEach((function(e){t[e]=e})),k.forEach((function(i){t[e(i)]=i})),t}},{key:"setPropsFromSelect",value:function(e){var t=e.ele,i=[],o=[],s=function e(t){var s=[];return Array.from(t.children).forEach((function(t){var n=t.value,r={value:n};"OPTGROUP"===t.tagName?(r.label=t.getAttribute("label"),r.options=e(t)):r.label=t.innerHTML,s.push(r),t.disabled&&i.push(n),t.selected&&o.push(n)})),s}(t),n=document.createElement("div");p.setAttrFromEle(t,n,Object.keys(O),x),t.parentNode.insertBefore(n,t),t.remove(),e.ele=n,e.options=s,e.disabledOptions=i,e.selectedValue=o}},{key:"onFormReset",value:function(e){var t=e.target.closest("form");t&&t.querySelectorAll(".vscomp-ele-wrapper").forEach((function(e){e.parentElement.virtualSelect.reset(!0)}))}},{key:"onFormSubmit",value:function(t){e.validate(t.target.closest("form"))||t.preventDefault()}},{key:"validate",value:function(e){if(!e)return!0;var t=!1;return e.querySelectorAll(".vscomp-ele-wrapper").forEach((function(e){var i=e.parentElement.virtualSelect.validate();t||i||(t=!0)})),!t}},{key:"reset",value:function(){this.virtualSelect.reset()}},{key:"setValueMethod",value:function(){var e;(e=this.virtualSelect).setValueMethod.apply(e,arguments)}},{key:"setOptionsMethod",value:function(){var e;(e=this.virtualSelect).setOptionsMethod.apply(e,arguments)}},{key:"setDisabledOptionsMethod",value:function(){var e;(e=this.virtualSelect).setDisabledOptionsMethod.apply(e,arguments)}},{key:"toggleSelectAll",value:function(e){this.virtualSelect.toggleAllOptions(e)}},{key:"isAllSelected",value:function(){return this.virtualSelect.isAllSelected}},{key:"addOptionMethod",value:function(e){this.virtualSelect.addOption(e,!0)}},{key:"getNewValueMethod",value:function(){return this.virtualSelect.getNewValue()}},{key:"getDisplayValueMethod",value:function(){return this.virtualSelect.getDisplayValue()}},{key:"getSelectedOptionsMethod",value:function(e){return this.virtualSelect.getSelectedOptions(e)}},{key:"openMethod",value:function(){return this.virtualSelect.openDropbox()}},{key:"closeMethod",value:function(){return this.virtualSelect.closeDropbox()}},{key:"focusMethod",value:function(){return this.virtualSelect.focus()}},{key:"enableMethod",value:function(){return this.virtualSelect.enable()}},{key:"disableMethod",value:function(){return this.virtualSelect.disable()}},{key:"destroyMethod",value:function(){return this.virtualSelect.destroy()}},{key:"validateMethod",value:function(){return this.virtualSelect.validate()}},{key:"toggleRequiredMethod",value:function(e){return this.virtualSelect.toggleRequired(e)}},{key:"onResizeMethod",value:function(){document.querySelectorAll(".vscomp-ele-wrapper").forEach((function(e){e.parentElement.virtualSelect.onResize()}))}}],(i=[{key:"render",value:function(){if(this.$ele){var e=this.uniqueId,t="vscomp-wrapper",i=this.getTooltipAttrText(this.placeholder,!0,!0),o=this.getTooltipAttrText(this.clearButtonText),s=this.ariaLabelledby?'aria-labelledby="'.concat(this.ariaLabelledby,'"'):"",n=!1;this.additionalClasses&&(t+=" ".concat(this.additionalClasses)),this.multiple&&(t+=" multiple",this.disableSelectAll||(t+=" has-select-all")),this.hideClearButton||(t+=" has-clear-button"),this.keepAlwaysOpen?(t+=" keep-always-open",n=!0):t+=" closed",this.showAsPopup&&(t+=" show-as-popup"),this.hasSearch&&(t+=" has-search-input"),this.showValueAsTags&&(t+=" show-value-as-tags"),this.textDirection&&(t+=" text-direction-".concat(this.textDirection)),this.popupPosition&&(t+=" popup-position-".concat(this.popupPosition.toLowerCase()));var r='<div id="vscomp-ele-wrapper-'.concat(e,'" class="vscomp-ele-wrapper ').concat(t,'" tabindex="0"\n        role="combobox" aria-haspopup="listbox" aria-controls="vscomp-dropbox-container-').concat(e,'"\n        aria-expanded="').concat(n,'" ').concat(s,'\n      >\n        <input type="hidden" name="').concat(this.name,'" class="vscomp-hidden-input">\n\n        <div class="vscomp-toggle-button">\n          <div class="vscomp-value" ').concat(i,">\n            ").concat(this.placeholder,'\n          </div>\n\n          <div class="vscomp-arrow"></div>\n\n          <div class="vscomp-clear-button toggle-button-child" ').concat(o,'>\n            <i class="vscomp-clear-icon"></i>\n          </div>\n        </div>\n\n        ').concat(this.renderDropbox({wrapperClasses:t}),"\n      </div>");this.$ele.innerHTML=r,this.$body=document.querySelector("body"),this.$wrapper=this.$ele.querySelector(".vscomp-wrapper"),this.hasDropboxWrapper?(this.$allWrappers=[this.$wrapper,this.$dropboxWrapper],this.$dropboxContainer=this.$dropboxWrapper.querySelector(".vscomp-dropbox-container"),p.addClass(this.$dropboxContainer,"pop-comp-wrapper")):(this.$allWrappers=[this.$wrapper],this.$dropboxContainer=this.$wrapper.querySelector(".vscomp-dropbox-container")),this.$toggleButton=this.$ele.querySelector(".vscomp-toggle-button"),this.$clearButton=this.$ele.querySelector(".vscomp-clear-button"),this.$valueText=this.$ele.querySelector(".vscomp-value"),this.$hiddenInput=this.$ele.querySelector(".vscomp-hidden-input"),this.$dropbox=this.$dropboxContainer.querySelector(".vscomp-dropbox"),this.$dropboxCloseButton=this.$dropboxContainer.querySelector(".vscomp-dropbox-close-button"),this.$search=this.$dropboxContainer.querySelector(".vscomp-search-wrapper"),this.$optionsContainer=this.$dropboxContainer.querySelector(".vscomp-options-container"),this.$optionsList=this.$dropboxContainer.querySelector(".vscomp-options-list"),this.$options=this.$dropboxContainer.querySelector(".vscomp-options"),this.$noOptions=this.$dropboxContainer.querySelector(".vscomp-no-options"),this.$noSearchResults=this.$dropboxContainer.querySelector(".vscomp-no-search-results"),this.afterRenderWrapper()}}},{key:"renderDropbox",value:function(e){var t=e.wrapperClasses,i="self"!==this.dropboxWrapper?document.querySelector(this.dropboxWrapper):null,o='<div id="vscomp-dropbox-container-'.concat(this.uniqueId,'" role="listbox" class="vscomp-dropbox-container">\n        <div class="vscomp-dropbox">\n          <div class="vscomp-search-wrapper"></div>\n\n          <div class="vscomp-options-container">\n            <div class="vscomp-options-loader"></div>\n\n            <div class="vscomp-options-list">\n              <div class="vscomp-options"></div>\n            </div>\n          </div>\n\n          <div class="vscomp-options-bottom-freezer"></div>\n          <div class="vscomp-no-options">').concat(this.noOptionsText,'</div>\n          <div class="vscomp-no-search-results">').concat(this.noSearchResultsText,'</div>\n\n          <span class="vscomp-dropbox-close-button"><i class="vscomp-clear-icon"></i></span>\n        </div>\n      </div>');if(i){var s=document.createElement("div");return this.$dropboxWrapper=s,this.hasDropboxWrapper=!0,s.innerHTML=o,i.appendChild(s),p.addClass(s,"vscomp-dropbox-wrapper ".concat(t)),""}return this.hasDropboxWrapper=!1,o}},{key:"renderOptions",value:function(){var e,t=this,i="",o=this.getVisibleOptions(),n="",r="",a=!(!this.markSearchResults||!this.searchValue),l=this.labelRenderer,u=this.disableOptionGroupCheckbox,p=this.uniqueId,h=this.searchGroup,c="function"==typeof l,d=s.convertToBoolean;if(a&&(e=new RegExp("(".concat(this.searchValue,")"),"gi")),this.multiple&&(n='<span class="checkbox-icon"></span>'),this.allowNewOption){var v=this.getTooltipAttrText("New Option");r='<span class="vscomp-new-option-icon" '.concat(v,"></span>")}o.forEach((function(o){var s,v=o.index,f="vscomp-option",y=t.getTooltipAttrText("",!0,!0),b=n,g="",m="",O="",S=d(o.isSelected),x="";o.isFocused&&(f+=" focused"),o.isDisabled&&(f+=" disabled",x='aria-disabled="true"'),o.isGroupTitle&&(f+=" group-title",u&&(b="")),S&&(f+=" selected"),o.isGroupOption&&(f+=" group-option",O='data-group-index="'.concat(o.groupIndex,'"')),s=c?l(o):o.label,o.description&&(m='<div class="vscomp-option-description" '.concat(y,">").concat(o.description,"</div>")),o.isCurrentNew?(f+=" current-new",g+=r):!a||o.isGroupTitle&&!h||(s=s.replace(e,"<mark>$1</mark>")),i+='<div role="option" aria-selected="'.concat(S,'" id="vscomp-option-').concat(p,"-").concat(v,'"\n          class="').concat(f,'" data-value="').concat(o.value,'" data-index="').concat(v,'" data-visible-index="').concat(o.visibleIndex,'"\n          ').concat(O," ").concat(x,"\n        >\n          ").concat(b,'\n          <span class="vscomp-option-text" ').concat(y,">\n            ").concat(s,"\n          </span>\n          ").concat(m,"\n          ").concat(g,"\n        </div>")})),this.$options.innerHTML=i,this.$visibleOptions=this.$options.querySelectorAll(".vscomp-option"),this.afterRenderOptions()}},{key:"renderSearch",value:function(){if(this.hasSearchContainer){var e="",t="";this.multiple&&!this.disableSelectAll&&(e='<span class="vscomp-toggle-all-button">\n          <span class="checkbox-icon vscomp-toggle-all-checkbox"></span>\n          <span class="vscomp-toggle-all-label">'.concat(this.selectAllText,"</span>\n        </span>")),this.hasSearch&&(t='<input type="text" class="vscomp-search-input" placeholder="'.concat(this.searchPlaceholderText,'">\n      <span class="vscomp-search-clear">&times;</span>'));var i='<div class="vscomp-search-container">\n        '.concat(e,"\n        ").concat(t,"\n      </div>");this.$search.innerHTML=i,this.$searchInput=this.$dropboxContainer.querySelector(".vscomp-search-input"),this.$searchClear=this.$dropboxContainer.querySelector(".vscomp-search-clear"),this.$toggleAllButton=this.$dropboxContainer.querySelector(".vscomp-toggle-all-button"),this.$toggleAllCheckbox=this.$dropboxContainer.querySelector(".vscomp-toggle-all-checkbox"),this.addEvent(this.$searchInput,"input","onSearch"),this.addEvent(this.$searchClear,"click","onSearchClear"),this.addEvent(this.$toggleAllButton,"click","onToggleAllOptions")}}},{key:"addEvents",value:function(){this.addEvent(document,"click","onDocumentClick"),this.addEvent(this.$allWrappers,"keydown","onKeyDown"),this.addEvent(this.$toggleButton,"click","onToggleButtonClick"),this.addEvent(this.$clearButton,"click","onClearButtonClick"),this.addEvent(this.$dropboxContainer,"click","onDropboxContainerClick"),this.addEvent(this.$dropboxCloseButton,"click","onDropboxCloseButtonClick"),this.addEvent(this.$optionsContainer,"scroll","onOptionsScroll"),this.addEvent(this.$options,"click","onOptionsClick"),this.addEvent(this.$options,"mouseover","onOptionsMouseOver"),this.addEvent(this.$options,"touchmove","onOptionsTouchMove"),this.addMutationObserver()}},{key:"addEvent",value:function(e,t,i){var o=this;e&&s.removeArrayEmpty(t.split(" ")).forEach((function(t){var s="".concat(i,"-").concat(t),n=o.events[s];n||(n=o[i].bind(o),o.events[s]=n),p.addEvent(e,t,n)}))}},{key:"onDocumentClick",value:function(e){var t=e.target.closest(".vscomp-wrapper");t!==this.$wrapper&&t!==this.$dropboxWrapper&&this.isOpened()&&this.closeDropbox()}},{key:"onKeyDown",value:function(e){var t=e.which||e.keyCode,i=S[t];i&&this[i](e)}},{key:"onEnterPress",value:function(e){e.preventDefault(),this.isOpened()?this.selectFocusedOption():this.openDropbox()}},{key:"onDownArrowPress",value:function(e){e.preventDefault(),this.isOpened()?this.focusOption({direction:"next"}):this.openDropbox()}},{key:"onUpArrowPress",value:function(e){e.preventDefault(),this.isOpened()?this.focusOption({direction:"previous"}):this.openDropbox()}},{key:"onToggleButtonClick",value:function(e){var t=e.target;t.closest(".vscomp-value-tag-clear-button")?this.removeValue(t.closest(".vscomp-value-tag")):t.closest(".toggle-button-child")||this.toggleDropbox()}},{key:"onClearButtonClick",value:function(){this.reset()}},{key:"onOptionsScroll",value:function(){this.setVisibleOptions()}},{key:"onOptionsClick",value:function(e){var t=e.target.closest(".vscomp-option");t&&!p.hasClass(t,"disabled")&&(p.hasClass(t,"group-title")?this.onGroupTitleClick(t):this.selectOption(t,{event:e}))}},{key:"onGroupTitleClick",value:function(e){if(e&&this.multiple&&!this.disableOptionGroupCheckbox){var t=!p.hasClass(e,"selected");this.toggleGroupTitleCheckbox(e,t),this.toggleGroupOptions(e,t)}}},{key:"onDropboxContainerClick",value:function(e){e.target.closest(".vscomp-dropbox")||this.closeDropbox()}},{key:"onDropboxCloseButtonClick",value:function(){this.closeDropbox()}},{key:"onOptionsMouseOver",value:function(e){var t=e.target.closest(".vscomp-option");t&&this.isOpened()&&(p.hasClass(t,"disabled")||p.hasClass(t,"group-title")?this.removeOptionFocus():this.focusOption({$option:t}))}},{key:"onOptionsTouchMove",value:function(){this.removeOptionFocus()}},{key:"onSearch",value:function(e){e.stopPropagation(),this.setSearchValue(e.target.value,!0)}},{key:"onSearchClear",value:function(){this.setSearchValue(""),this.focusSearchInput()}},{key:"onToggleAllOptions",value:function(){this.toggleAllOptions()}},{key:"onResize",value:function(){this.setOptionsContainerHeight(!0)}},{key:"addMutationObserver",value:function(){var e=this;if(this.hasDropboxWrapper){var t=this.$ele;this.mutationObserver=new MutationObserver((function(i){i.some((function(i){var o=y(i.removedNodes).some((function(e){return!(e!==t&&!e.contains(t))}));return o&&e.destroy(),o}))})),this.mutationObserver.observe(document.querySelector("body"),{childList:!0,subtree:!0})}}},{key:"beforeValueSet",value:function(e){this.toggleAllOptionsClass(!e&&void 0)}},{key:"beforeSelectNewValue",value:function(){var e=this,t=this.getNewOption(),i=t.index;this.newValues.push(t.value),this.setOptionProp(i,"isCurrentNew",!1),this.setOptionProp(i,"isNew",!0),setTimeout((function(){e.setSearchValue(""),e.focusSearchInput()}),0)}},{key:"afterRenderWrapper",value:function(){p.addClass(this.$ele,"vscomp-ele"),this.renderSearch(),this.setEleStyles(),this.setDropboxStyles(),this.setOptionsHeight(),this.setVisibleOptions(),this.setOptionsContainerHeight(),this.addEvents(),this.setEleProps(),this.keepAlwaysOpen||this.showAsPopup||this.initDropboxPopover(),this.initialSelectedValue?this.setValueMethod(this.initialSelectedValue,this.silentInitialValueSet):this.autoSelectFirstOption&&this.visibleOptions.length&&this.setValueMethod(this.visibleOptions[0].value,this.silentInitialValueSet),this.showOptionsOnlyOnSearch&&this.setSearchValue("",!1,!0),this.initialDisabled&&this.disable(),this.autofocus&&this.focus()}},{key:"afterRenderOptions",value:function(){var e=this.getVisibleOptions(),t=!this.options.length&&!this.hasServerSearch,i=!t&&!e.length;(!this.allowNewOption||this.hasServerSearch||this.showOptionsOnlyOnSearch)&&p.toggleClass(this.$allWrappers,"has-no-search-results",i),p.toggleClass(this.$allWrappers,"has-no-options",t),this.setOptionAttr(),this.setOptionsPosition(),this.setOptionsTooltip()}},{key:"afterSetOptionsContainerHeight",value:function(e){e&&this.showAsPopup&&this.setVisibleOptions()}},{key:"afterSetSearchValue",value:function(){this.hasServerSearch?this.serverSearch():this.setVisibleOptionsCount(),this.selectAllOnlyVisible&&this.toggleAllOptionsClass(),this.focusOption({focusFirst:!0})}},{key:"afterSetVisibleOptionsCount",value:function(){this.scrollToTop(),this.setOptionsHeight(),this.setVisibleOptions(),this.updatePosition()}},{key:"afterValueSet",value:function(){this.scrollToTop(),this.setSearchValue(""),this.renderOptions()}},{key:"afterSetOptions",value:function(e){e&&this.setSelectedProp(),this.setOptionsHeight(),this.setVisibleOptions(),this.showOptionsOnlyOnSearch&&this.setSearchValue("",!1,!0),e||this.reset()}},{key:"setProps",value:function(e){var t=this.setDefaultProps(e);this.setPropsFromElementAttr(t);var i=s.convertToBoolean;this.$ele=t.ele,this.dropboxWrapper=t.dropboxWrapper,this.valueKey=t.valueKey,this.labelKey=t.labelKey,this.descriptionKey=t.descriptionKey,this.aliasKey=t.aliasKey,this.optionHeightText=t.optionHeight,this.optionHeight=parseFloat(this.optionHeightText),this.multiple=i(t.multiple),this.hasSearch=i(t.search),this.searchByStartsWith=i(t.searchByStartsWith),this.searchGroup=i(t.searchGroup),this.hideClearButton=i(t.hideClearButton),this.autoSelectFirstOption=i(t.autoSelectFirstOption),this.hasOptionDescription=i(t.hasOptionDescription),this.silentInitialValueSet=i(t.silentInitialValueSet),this.allowNewOption=i(t.allowNewOption),this.markSearchResults=i(t.markSearchResults),this.showSelectedOptionsFirst=i(t.showSelectedOptionsFirst),this.disableSelectAll=i(t.disableSelectAll),this.keepAlwaysOpen=i(t.keepAlwaysOpen),this.showDropboxAsPopup=i(t.showDropboxAsPopup),this.hideValueTooltipOnSelectAll=i(t.hideValueTooltipOnSelectAll),this.showOptionsOnlyOnSearch=i(t.showOptionsOnlyOnSearch),this.selectAllOnlyVisible=i(t.selectAllOnlyVisible),this.alwaysShowSelectedOptionsCount=i(t.alwaysShowSelectedOptionsCount),this.disableAllOptionsSelectedText=i(t.disableAllOptionsSelectedText),this.showValueAsTags=i(t.showValueAsTags),this.disableOptionGroupCheckbox=i(t.disableOptionGroupCheckbox),this.enableSecureText=i(t.enableSecureText),this.setValueAsArray=i(t.setValueAsArray),this.disableValidation=i(t.disableValidation),this.initialDisabled=i(t.disabled),this.required=i(t.required),this.autofocus=i(t.autofocus),this.useGroupValue=i(t.useGroupValue),this.noOptionsText=t.noOptionsText,this.noSearchResultsText=t.noSearchResultsText,this.selectAllText=t.selectAllText,this.searchPlaceholderText=t.searchPlaceholderText,this.optionsSelectedText=t.optionsSelectedText,this.optionSelectedText=t.optionSelectedText,this.allOptionsSelectedText=t.allOptionsSelectedText,this.clearButtonText=t.clearButtonText,this.moreText=t.moreText,this.placeholder=t.placeholder,this.position=t.position,this.textDirection=t.textDirection,this.dropboxWidth=t.dropboxWidth,this.tooltipFontSize=t.tooltipFontSize,this.tooltipAlignment=t.tooltipAlignment,this.tooltipMaxWidth=t.tooltipMaxWidth,this.updatePositionThrottle=t.updatePositionThrottle,this.noOfDisplayValues=parseInt(t.noOfDisplayValues),this.zIndex=parseInt(t.zIndex),this.maxValues=parseInt(t.maxValues),this.name=this.secureText(t.name),this.additionalClasses=t.additionalClasses,this.popupDropboxBreakpoint=t.popupDropboxBreakpoint,this.popupPosition=t.popupPosition,this.onServerSearch=t.onServerSearch,this.labelRenderer=t.labelRenderer,this.initialSelectedValue=0===t.selectedValue?"0":t.selectedValue,this.emptyValue=t.emptyValue,this.ariaLabelledby=t.ariaLabelledby,this.maxWidth=t.maxWidth,this.selectedValues=[],this.selectedOptions=[],this.newValues=[],this.events={},this.tooltipEnterDelay=200,this.searchValue="",this.searchValueOriginal="",this.isAllSelected=!1,(void 0===t.search&&this.multiple||this.allowNewOption||this.showOptionsOnlyOnSearch)&&(this.hasSearch=!0),this.hasServerSearch="function"==typeof this.onServerSearch,(this.maxValues||this.hasServerSearch||this.showOptionsOnlyOnSearch)&&(this.disableSelectAll=!0,this.disableOptionGroupCheckbox=!0),this.keepAlwaysOpen&&(this.dropboxWrapper="self"),this.showAsPopup=this.showDropboxAsPopup&&!this.keepAlwaysOpen&&window.innerWidth<=parseFloat(this.popupDropboxBreakpoint),this.hasSearchContainer=this.hasSearch||this.multiple&&!this.disableSelectAll,this.optionsCount=this.getOptionsCount(t.optionsCount),this.halfOptionsCount=Math.ceil(this.optionsCount/2),this.optionsHeight=this.getOptionsHeight(),this.uniqueId=this.getUniqueId()}},{key:"setDefaultProps",value:function(e){var t={dropboxWrapper:"self",valueKey:"value",labelKey:"label",descriptionKey:"description",aliasKey:"alias",optionsCount:5,noOfDisplayValues:50,optionHeight:"40px",noOptionsText:"No options found",noSearchResultsText:"No results found",selectAllText:"Select All",searchPlaceholderText:"Search...",clearButtonText:"Clear",moreText:"more...",optionsSelectedText:"options selected",optionSelectedText:"option selected",allOptionsSelectedText:"All",placeholder:"Select",position:"bottom left",zIndex:e.keepAlwaysOpen?1:2,tooltipFontSize:"14px",tooltipAlignment:"center",tooltipMaxWidth:"300px",updatePositionThrottle:100,name:"",additionalClasses:"",maxValues:0,showDropboxAsPopup:!0,popupDropboxBreakpoint:"576px",popupPosition:"center",hideValueTooltipOnSelectAll:!0,emptyValue:""};return e.hasOptionDescription&&(t.optionsCount=4,t.optionHeight="50px"),Object.assign(t,e)}},{key:"setPropsFromElementAttr",value:function(e){var t=e.ele;Object.keys(O).forEach((function(i){var o=t.getAttribute(i);-1===x.indexOf(i)||""!==o&&"true"!==o||(o=!0),o&&(e[O[i]]=o)}))}},{key:"setEleProps",value:function(){var t=this.$ele;t.virtualSelect=this,t.value=this.multiple?[]:"",t.name=this.name,t.disabled=!1,t.required=this.required,t.autofocus=this.autofocus,t.multiple=this.multiple,t.form=t.closest("form"),t.reset=e.reset,t.setValue=e.setValueMethod,t.setOptions=e.setOptionsMethod,t.setDisabledOptions=e.setDisabledOptionsMethod,t.toggleSelectAll=e.toggleSelectAll,t.isAllSelected=e.isAllSelected,t.addOption=e.addOptionMethod,t.getNewValue=e.getNewValueMethod,t.getDisplayValue=e.getDisplayValueMethod,t.getSelectedOptions=e.getSelectedOptionsMethod,t.open=e.openMethod,t.close=e.closeMethod,t.focus=e.focusMethod,t.enable=e.enableMethod,t.disable=e.disableMethod,t.destroy=e.destroyMethod,t.validate=e.validateMethod,t.toggleRequired=e.toggleRequiredMethod,this.hasDropboxWrapper&&(this.$dropboxWrapper.virtualSelect=this)}},{key:"setValueMethod",value:function(e,t){var i={},o={},s=[],n=this.multiple,r=e;if(r){if(Array.isArray(r)||(r=[r]),n){var a=this.maxValues;a&&r.length>a&&r.splice(a)}else r.length>1&&(r=[r[0]]);r=r.map((function(e){return e||0===e?e.toString():""})),this.useGroupValue&&(r=this.setGroupOptionsValue(r)),r.forEach((function(e,t){i[e]=!0,o[e]=t})),this.allowNewOption&&r&&this.setNewOptionsFromValue(r)}if(this.options.forEach((function(e){!0!==i[e.value]||e.isDisabled||e.isGroupTitle?e.isSelected=!1:(e.isSelected=!0,s.push(e.value))})),n)this.hasOptionGroup&&this.setGroupsSelectedProp(),s.sort((function(e,t){return o[e]-o[t]}));else{var l=f(s,1);s=l[0]}this.beforeValueSet(),this.setValue(s,{disableEvent:t}),this.afterValueSet()}},{key:"setGroupOptionsValue",value:function(e){var t=[],i={},o={};return e.forEach((function(e){o[e]=!0})),this.options.forEach((function(e){var s=e.value,n=!0===o[s];e.isGroupTitle?n&&(i[e.index]=!0):(n||i[e.groupIndex])&&t.push(s)})),t}},{key:"setGroupsSelectedProp",value:function(){var e=this.isAllGroupOptionsSelected.bind(this);this.options.forEach((function(t){t.isGroupTitle&&(t.isSelected=e(t.index))}))}},{key:"setOptionsMethod",value:function(e,t){this.setOptions(e),this.afterSetOptions(t)}},{key:"setDisabledOptionsMethod",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];this.setDisabledOptions(e,!0),t||(this.setValueMethod(null),this.toggleAllOptionsClass()),this.setVisibleOptions()}},{key:"setDisabledOptions",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],i=[];if(e)if(!0===e)t&&this.options.forEach((function(e){return e.isDisabled=!0,i.push(e.value),e}));else{i=e.map((function(e){return e.toString()}));var o={};i.forEach((function(e){o[e]=!0})),t&&this.options.forEach((function(e){return e.isDisabled=!0===o[e.value],e}))}else t&&this.options.forEach((function(e){return e.isDisabled=!1,e}));this.disabledOptions=i}},{key:"setOptions",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],t=[],i=this.disabledOptions.length,o=this.valueKey,n=this.labelKey,r=this.descriptionKey,a=this.aliasKey,l=this.hasOptionDescription,u=s.getString,p=s.convertToBoolean,h=this.secureText.bind(this),c=this.getAlias.bind(this),d=0,f=!1,y={},b=!1;this.disabledOptions.forEach((function(e){y[e]=!0}));var g=function e(s){"object"!==v(s)&&(s={value:s,label:s});var g=h(u(s[o])),m=s.options,O=!!m,S={index:d,value:g,label:h(u(s[n])),alias:c(s[a]),isVisible:p(s.isVisible,!0),isNew:s.isNew||!1,isGroupTitle:O};if(b||""!==g||(b=!0),i&&(S.isDisabled=!0===y[g]),s.isGroupOption&&(S.isGroupOption=!0,S.groupIndex=s.groupIndex),l&&(S.description=h(u(s[r]))),s.customData&&(S.customData=s.customData),t.push(S),d+=1,O){var x=S.index;f=!0,m.forEach((function(t){t.isGroupOption=!0,t.groupIndex=x,e(t)}))}};e.forEach(g);var m=t.length,O=this.$ele;O.options=t,O.length=m,this.options=t,this.visibleOptionsCount=m,this.lastOptionIndex=m-1,this.newValues=[],this.hasOptionGroup=f,this.hasEmptyValueOption=b,this.setSortedOptions()}},{key:"setServerOptions",value:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];this.setOptionsMethod(t,!0);var i=this.selectedOptions,o=this.options,s=!1;if(i.length){var n={};s=!0,o.forEach((function(e){n[e.value]=!0})),i.forEach((function(e){!1===n[e.value]&&(e.isVisible=!1,o.push(e))})),this.setOptionsMethod(o,!0)}if(this.allowNewOption&&this.searchValue){var r=o.some((function(t){return t.label.toLowerCase()===e.searchValue}));r||(s=!0,this.setNewOption())}s?(this.setVisibleOptionsCount(),this.multiple&&this.toggleAllOptionsClass(),this.setValueText()):this.updatePosition(),p.removeClass(this.$allWrappers,"server-searching")}},{key:"setSelectedOptions",value:function(){this.selectedOptions=this.options.filter((function(e){return e.isSelected}))}},{key:"setSortedOptions",value:function(){var e=y(this.options);this.showSelectedOptionsFirst&&this.selectedValues.length&&(e=this.hasOptionGroup?this.sortOptionsGroup(e):this.sortOptions(e)),this.sortedOptions=e}},{key:"setVisibleOptions",value:function(){var e=y(this.sortedOptions),t=2*this.optionsCount,i=this.getVisibleStartIndex(),o=this.getNewOption(),s=i+t-1,n=0;o&&(o.visibleIndex=n,n+=1),e=e.filter((function(e){var t=!1;return e.isVisible&&!e.isCurrentNew&&(t=n>=i&&n<=s,e.visibleIndex=n,n+=1),t})),o&&(e=[o].concat(y(e))),this.visibleOptions=e,this.renderOptions()}},{key:"setOptionsPosition",value:function(e){var t=(e||this.getVisibleStartIndex())*this.optionHeight;this.$options.style.transform="translate3d(0, ".concat(t,"px, 0)"),p.setData(this.$options,"top",t)}},{key:"setOptionsTooltip",value:function(){var e=this,t=this.getVisibleOptions(),i=this.hasOptionDescription;t.forEach((function(t){var o=e.$dropboxContainer.querySelector('.vscomp-option[data-index="'.concat(t.index,'"]'));p.setData(o.querySelector(".vscomp-option-text"),"tooltip",t.label),i&&p.setData(o.querySelector(".vscomp-option-description"),"tooltip",t.description)}))}},{key:"setValue",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=t.disableEvent,o=void 0!==i&&i,n=t.disableValidation,r=void 0!==n&&n,a=this.hasEmptyValueOption&&""===e||e;a?Array.isArray(e)?this.selectedValues=y(e):this.selectedValues=[e]:this.selectedValues=[];var l=this.getValue();this.$ele.value=l,this.$hiddenInput.value=this.getInputValue(l),this.isMaxValuesSelected=!!(this.maxValues&&this.maxValues<=this.selectedValues.length),this.toggleAllOptionsClass(),this.setValueText(),p.toggleClass(this.$allWrappers,"has-value",s.isNotEmpty(this.selectedValues)),p.toggleClass(this.$allWrappers,"max-value-selected",this.isMaxValuesSelected),r||this.validate(),o||p.dispatchEvent(this.$ele,"change",!0)}},{key:"setValueText",value:function(){var e=this.multiple,t=this.selectedValues,i=this.noOfDisplayValues,o=this.showValueAsTags,s=this.$valueText,n=[],r=[],a=t.length,l=0,u=this.isAllSelected&&!this.hasServerSearch&&!this.disableAllOptionsSelectedText&&!o;if(u&&this.hideValueTooltipOnSelectAll)s.innerHTML="".concat(this.allOptionsSelectedText," (").concat(a,")");else{this.getSelectedOptions({fullDetails:!0,keepSelectionOrder:!0}).some((function(e){if(e.isCurrentNew)return!1;if(l>=i)return!0;var t=e.label;if(n.push(t),l+=1,o){var s='<span class="vscomp-value-tag" data-index="'.concat(e.index,'">\n              <span class="vscomp-value-tag-content">').concat(t,'</span>\n              <span class="vscomp-value-tag-clear-button">\n                <i class="vscomp-clear-icon"></i>\n              </span>\n            </span>');r.push(s)}else r.push(t);return!1}));var h=a-i;h>0&&r.push('<span class="vscomp-value-tag more-value-count">+ '.concat(h," ").concat(this.moreText,"</span>"));var c=n.join(", ");if(""===c)s.innerHTML=this.placeholder;else if(s.innerHTML=c,e){var d=this.maxValues;if(p.hasEllipsis(s)||d||this.alwaysShowSelectedOptionsCount||o){var v='<span class="vscomp-selected-value-count">'.concat(a,"</span>");if(d&&(v+=' / <span class="vscomp-max-value-count">'.concat(d,"</span>")),u)s.innerHTML="".concat(this.allOptionsSelectedText," (").concat(a,")");else if(o)s.innerHTML=r.join(""),this.$valueTags=s.querySelectorAll(".vscomp-value-tag"),this.setValueTagAttr();else{var f=1===a?this.optionSelectedText:this.optionsSelectedText;s.innerHTML="".concat(v," ").concat(f)}}else r=[]}}var y="";0===a?y=this.placeholder:o||(y=r.join(", ")),p.setData(s,"tooltip",y),e&&(p.setData(s,"tooltipEllipsisOnly",0===a),o&&this.updatePosition())}},{key:"setSearchValue",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],i=arguments.length>2&&void 0!==arguments[2]&&arguments[2];if(e!==this.searchValueOriginal||i){t||(this.$searchInput.value=e);var o=e.replace(/\\/g,"").toLowerCase().trim();this.searchValue=o,this.searchValueOriginal=e,p.toggleClass(this.$allWrappers,"has-search-value",e),this.afterSetSearchValue()}}},{key:"setVisibleOptionsCount",value:function(){var e,t=0,i=!1,o=this.searchValue,s=this.searchGroup,n=this.showOptionsOnlyOnSearch,r=this.searchByStartsWith,a=this.isOptionVisible.bind(this);this.hasOptionGroup&&(e=this.getVisibleOptionGroupsMapping(o)),this.options.forEach((function(l){var u;l.isCurrentNew||(n&&!o?(l.isVisible=!1,u={isVisible:!1,hasExactOption:!1}):u=a({data:l,searchValue:o,hasExactOption:i,visibleOptionGroupsMapping:e,searchGroup:s,searchByStartsWith:r}),u.isVisible&&(t+=1),i||(i=u.hasExactOption))})),this.allowNewOption&&(o&&!i?(this.setNewOption(),t+=1):this.removeNewOption()),this.visibleOptionsCount=t,this.afterSetVisibleOptionsCount()}},{key:"setOptionProp",value:function(e,t,i){this.options[e]&&(this.options[e][t]=i)}},{key:"setOptionsHeight",value:function(){this.$optionsList.style.height="".concat(this.optionHeight*this.visibleOptionsCount,"px")}},{key:"setOptionsContainerHeight",value:function(e){var t;e?this.showAsPopup&&(this.optionsCount=this.getOptionsCount(),this.halfOptionsCount=Math.ceil(this.optionsCount/2),t=this.getOptionsHeight(),this.optionsHeight=t):(t=this.optionsHeight,this.keepAlwaysOpen&&(p.setStyle(this.$noOptions,"height",t),p.setStyle(this.$noSearchResults,"height",t))),p.setStyle(this.$optionsContainer,"max-height",t),this.afterSetOptionsContainerHeight(e)}},{key:"setNewOption",value:function(e){var t=e||this.searchValueOriginal.trim();if(t){var i=this.getNewOption();if(i){var o=i.index;this.setOptionProp(o,"value",this.secureText(t)),this.setOptionProp(o,"label",this.secureText(t))}else{var s={value:t,label:t};e?(s.isNew=!0,this.newValues.push(t)):s.isCurrentNew=!0,this.addOption(s)}}}},{key:"setSelectedProp",value:function(){var e={};this.selectedValues.forEach((function(t){e[t]=!0})),this.options.forEach((function(t){!0===e[t.value]&&(t.isSelected=!0)}))}},{key:"setNewOptionsFromValue",value:function(e){if(e){var t=this.setNewOption.bind(this),i={};this.options.forEach((function(e){i[e.value]=!0})),e.forEach((function(e){e&&!0!==i[e]&&t(e)}))}}},{key:"setDropboxWrapperWidth",value:function(){if(!this.showAsPopup){var e=this.dropboxWidth||"".concat(this.$wrapper.offsetWidth,"px");p.setStyle(this.$dropboxContainer,"max-width",e)}}},{key:"setEleStyles",value:function(){var e=this.maxWidth,t={};e&&(t["max-width"]=e),p.setStyles(this.$ele,t)}},{key:"setDropboxStyles",value:function(){var e=this.dropboxWidth,t={},i={"z-index":this.zIndex};e&&(this.showAsPopup?t["max-width"]=e:i.width=e),p.setStyles(this.$dropboxContainer,i),p.setStyles(this.$dropbox,t)}},{key:"setOptionAttr",value:function(){var e=this.$visibleOptions,t=this.options,i="".concat(this.optionHeight,"px"),o=p.setStyle,s=p.getData,n=p.setData;e&&e.length&&e.forEach((function(e){var r=t[s(e,"index")];o(e,"height",i),n(e,"value",r.value)}))}},{key:"setValueTagAttr",value:function(){var e=this.$valueTags;if(e&&e.length){var t=p.getData,i=p.setData,o=this.options;e.forEach((function(e){var s=t(e,"index");if(void 0!==s){var n=o[s];i(e,"value",n.value)}}))}}},{key:"setScrollTop",value:function(){var e=this.selectedValues;if(!this.showSelectedOptionsFirst&&0!==e.length){var t,i={};e.forEach((function(e){i[e]=!0})),this.options.some((function(e){return!!i[e.value]&&(t=e.visibleIndex,!0)})),t&&(this.$optionsContainer.scrollTop=this.optionHeight*t)}}},{key:"getVisibleOptions",value:function(){return this.visibleOptions||[]}},{key:"getValue",value:function(){return this.multiple?this.useGroupValue?this.getGroupValue():this.selectedValues:this.selectedValues[0]||""}},{key:"getGroupValue",value:function(){var e=[],t={};return this.options.forEach((function(i){if(i.isSelected){var o=i.value;i.isGroupTitle?o&&(t[i.index]=!0,e.push(o)):!0!==t[i.groupIndex]&&e.push(o)}})),e}},{key:"getInputValue",value:function(e){var t=e;return t&&t.length?this.setValueAsArray&&this.multiple&&(t=JSON.stringify(t)):t=this.emptyValue,t}},{key:"getFirstVisibleOptionIndex",value:function(){return Math.ceil(this.$optionsContainer.scrollTop/this.optionHeight)}},{key:"getVisibleStartIndex",value:function(){var e=this.getFirstVisibleOptionIndex()-this.halfOptionsCount;return e<0&&(e=0),e}},{key:"getTooltipAttrText",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],i=arguments.length>2&&void 0!==arguments[2]&&arguments[2],o={"data-tooltip":e||"","data-tooltip-enter-delay":this.tooltipEnterDelay,"data-tooltip-z-index":this.zIndex,"data-tooltip-font-size":this.tooltipFontSize,"data-tooltip-alignment":this.tooltipAlignment,"data-tooltip-max-width":this.tooltipMaxWidth,"data-tooltip-ellipsis-only":t,"data-tooltip-allow-html":i};return p.getAttributesText(o)}},{key:"getOptionObj",value:function(e){if(e){var t=s.getString,i=this.secureText.bind(this);return{index:e.index,value:i(t(e.value)),label:i(t(e.label)),description:i(t(e.description)),alias:this.getAlias(e.alias),isCurrentNew:e.isCurrentNew||!1,isNew:e.isNew||!1,isVisible:!0}}}},{key:"getNewOption",value:function(){var e=this.options[this.lastOptionIndex];if(e&&e.isCurrentNew)return e}},{key:"getOptionIndex",value:function(e){var t;return this.options.some((function(i){return i.value===e&&(t=i.index,!0)})),t}},{key:"getNewValue",value:function(){var e={};this.newValues.forEach((function(t){e[t]=!0}));var t=this.selectedValues.filter((function(t){return!0===e[t]}));return this.multiple?t:t[0]}},{key:"getAlias",value:function(e){var t=e;return t&&(t=(t=Array.isArray(t)?t.join(","):t.toString().trim()).toLowerCase()),t||""}},{key:"getDisplayValue",value:function(){var e=[];return this.options.forEach((function(t){t.isSelected&&e.push(t.label)})),this.multiple?e:e[0]||""}},{key:"getSelectedOptions",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.fullDetails,i=void 0!==t&&t,o=e.keepSelectionOrder,s=void 0!==o&&o,n=this.valueKey,r=this.labelKey,a=this.selectedValues,l=[];if(this.options.forEach((function(e){if(e.isSelected&&!e.isGroupTitle)if(i)l.push(e);else{var t,o=(d(t={},n,e.value),d(t,r,e.label),t);e.isNew&&(o.isNew=!0),e.customData&&(o.customData=e.customData),l.push(o)}})),s){var u={};a.forEach((function(e,t){u[e]=t})),l.sort((function(e,t){return u[e.value]-u[t.value]}))}return this.multiple||i?l:l[0]}},{key:"getVisibleOptionGroupsMapping",value:function(e){var t=this.options,i={},o=this.isOptionVisible.bind(this);return(t=this.structureOptionGroup(t)).forEach((function(t){i[t.index]=t.options.some((function(t){return o({data:t,searchValue:e}).isVisible}))})),i}},{key:"getOptionsCount",value:function(e){var t;if(this.showAsPopup){var i=80*window.innerHeight/100-48;this.hasSearchContainer&&(i-=40),t=Math.floor(i/this.optionHeight)}else t=parseInt(e);return t}},{key:"getOptionsHeight",value:function(){return"".concat(this.optionsCount*this.optionHeight,"px")}},{key:"getSibling",value:function(e,t){var i="next"===t?"nextElementSibling":"previousElementSibling",o=e;do{o&&(o=o[i])}while(p.hasClass(o,"disabled")||p.hasClass(o,"group-title"));return o}},{key:"getUniqueId",value:function(){var e=s.getRandomInt(1e4);return document.querySelector("#vscomp-ele-wrapper-".concat(e))?this.getUniqueId():e}},{key:"initDropboxPopover",value:function(){var e={ele:this.$ele,target:this.$dropboxContainer,position:this.position,zIndex:this.zIndex,margin:4,transitionDistance:30,hideArrowIcon:!0,disableManualAction:!0,disableUpdatePosition:!this.hasDropboxWrapper,updatePositionThrottle:this.updatePositionThrottle,afterShow:this.afterShowPopper.bind(this),afterHide:this.afterHidePopper.bind(this)};this.dropboxPopover=new PopoverComponent(e)}},{key:"openDropbox",value:function(e){this.isSilentOpen=e,e?p.setStyle(this.$dropboxContainer,"display","inline-flex"):(p.dispatchEvent(this.$ele,"beforeOpen"),p.setAria(this.$wrapper,"expanded",!0)),this.setDropboxWrapperWidth(),p.removeClass(this.$allWrappers,"closed"),this.dropboxPopover&&!e?this.dropboxPopover.show():this.afterShowPopper()}},{key:"afterShowPopper",value:function(){var e=this.isSilentOpen;this.isSilentOpen=!1,e||(this.moveSelectedOptionsFirst(),this.setScrollTop(),p.addClass(this.$allWrappers,"focused"),this.showAsPopup?(p.addClass(this.$body,"vscomp-popup-active"),this.isPopupActive=!0):this.focusSearchInput(),p.dispatchEvent(this.$ele,"afterOpen"))}},{key:"closeDropbox",value:function(e){this.isSilentClose=e,this.keepAlwaysOpen?this.removeOptionFocus():(e?p.setStyle(this.$dropboxContainer,"display",""):(p.dispatchEvent(this.$ele,"beforeClose"),p.setAria(this.$wrapper,"expanded",!1),p.setAria(this.$wrapper,"activedescendant","")),this.dropboxPopover&&!e?this.dropboxPopover.hide():this.afterHidePopper())}},{key:"afterHidePopper",value:function(){var e=this.isSilentClose;this.isSilentClose=!1,p.removeClass(this.$allWrappers,"focused"),this.removeOptionFocus(),e||this.isPopupActive&&(p.removeClass(this.$body,"vscomp-popup-active"),this.isPopupActive=!1),p.addClass(this.$allWrappers,"closed"),e||p.dispatchEvent(this.$ele,"afterClose")}},{key:"moveSelectedOptionsFirst",value:function(){this.showSelectedOptionsFirst&&(this.setSortedOptions(),this.$optionsContainer.scrollTop&&this.selectedValues.length?this.scrollToTop():this.setVisibleOptions())}},{key:"toggleDropbox",value:function(){this.isOpened()?this.closeDropbox():this.openDropbox()}},{key:"updatePosition",value:function(){this.dropboxPopover&&this.$ele.updatePosition()}},{key:"isOpened",value:function(){return!p.hasClass(this.$wrapper,"closed")}},{key:"focusSearchInput",value:function(){var e=this.$searchInput;e&&e.focus()}},{key:"focusOption",value:function(){var e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},i=t.direction,o=t.$option,s=t.focusFirst,n=this.$dropboxContainer.querySelector(".vscomp-option.focused");if(o)e=o;else if(!n||s){var r=this.getFirstVisibleOptionIndex();e=this.$dropboxContainer.querySelector('.vscomp-option[data-visible-index="'.concat(r,'"]')),(p.hasClass(e,"disabled")||p.hasClass(e,"group-title"))&&(e=this.getSibling(e,"next"))}else e=this.getSibling(n,i);e&&e!==n&&(n&&this.toggleOptionFocusedState(n,!1),this.toggleOptionFocusedState(e,!0),this.toggleFocusedProp(p.getData(e,"index"),!0),this.moveFocusedOptionToView(e))}},{key:"moveFocusedOptionToView",value:function(e){var t=e||this.$dropboxContainer.querySelector(".vscomp-option.focused");if(t){var i,o=this.$optionsContainer.getBoundingClientRect(),s=t.getBoundingClientRect(),n=o.top,r=o.bottom,a=o.height,l=s.top,u=s.bottom,h=s.height,c=t.offsetTop,d=p.getData(this.$options,"top","number");n>l?i=c+d:r<u&&(i=c-a+h+d),void 0!==i&&(this.$optionsContainer.scrollTop=i)}}},{key:"removeOptionFocus",value:function(){var e=this.$dropboxContainer.querySelector(".vscomp-option.focused");e&&(this.toggleOptionFocusedState(e,!1),this.toggleFocusedProp(null))}},{key:"selectOption",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=t.event;if(e){var o=!p.hasClass(e,"selected");if(o){if(this.multiple&&this.isMaxValuesSelected)return}else if(!this.multiple)return void this.closeDropbox();var n=this.selectedValues,r=p.getData(e,"value"),a=p.getData(e,"index","number"),l=!1,u=this.lastSelectedOptionIndex;if(this.lastSelectedOptionIndex=null,this.toggleSelectedProp(a,o),o){if(this.multiple)n.push(r),this.toggleAllOptionsClass(),this.toggleGroupOptionsParent(e),i&&i.shiftKey&&(l=!0);else{n.length&&this.toggleSelectedProp(this.getOptionIndex(n[0]),!1),n=[r];var h=this.$dropboxContainer.querySelector(".vscomp-option.selected");h&&this.toggleOptionSelectedState(h,!1),this.closeDropbox()}this.lastSelectedOptionIndex=a,this.toggleOptionSelectedState(e)}else this.multiple&&(this.toggleOptionSelectedState(e),s.removeItemFromArray(n,r),this.toggleAllOptionsClass(!1),this.toggleGroupOptionsParent(e,!1));p.hasClass(e,"current-new")&&this.beforeSelectNewValue(),this.setValue(n),l&&this.selectRangeOptions(u,a)}}},{key:"selectFocusedOption",value:function(){this.selectOption(this.$dropboxContainer.querySelector(".vscomp-option.focused"))}},{key:"selectRangeOptions",value:function(e,t){var i=this;if("number"==typeof e&&!this.maxValues){var o,s,n=this.selectedValues,r=this.hasOptionGroup,a={};if(e<t?(o=e,s=t):(o=t,s=e),this.options.forEach((function(e){if(!e.isDisabled&&!e.isGroupTitle&&e.isVisible&&!e.isSelected){var t=e.index;if(t>o&&t<s){if(r){var i=e.groupIndex;"number"==typeof i&&(a[i]=!0)}e.isSelected=!0,n.push(e.value)}}})),this.toggleAllOptionsClass(),this.setValue(n),(a=Object.keys(a)).length){var l=this.toggleGroupTitleProp.bind(this);a.forEach((function(e){l(parseInt(e))}))}setTimeout((function(){i.renderOptions()}),0)}}},{key:"toggleAllOptions",value:function(e){if(this.multiple&&!this.disableSelectAll){"boolean"!=typeof e&&(e=!p.hasClass(this.$toggleAllCheckbox,"checked"));var t=[],i=this.selectAllOnlyVisible;this.options.forEach((function(o){o.isDisabled||o.isCurrentNew||(!e||i&&!o.isVisible?o.isSelected=!1:(o.isSelected=!0,o.isGroupTitle||t.push(o.value)))})),this.toggleAllOptionsClass(e),this.setValue(t),this.renderOptions()}}},{key:"toggleAllOptionsClass",value:function(e){if(this.multiple){var t="boolean"==typeof e;t||(e=this.isAllOptionsSelected()),p.toggleClass(this.$toggleAllCheckbox,"checked",e),this.selectAllOnlyVisible&&t?this.isAllSelected=this.isAllOptionsSelected():this.isAllSelected=e}}},{key:"isAllOptionsSelected",value:function(){var e=!1;return this.options.length&&this.selectedValues.length&&(e=!this.options.some((function(e){return!e.isSelected&&!e.isDisabled&&!e.isGroupTitle}))),e}},{key:"isAllGroupOptionsSelected",value:function(e){var t=!1;return this.options.length&&(t=!this.options.some((function(t){return!t.isSelected&&!t.isDisabled&&!t.isGroupTitle&&t.groupIndex===e}))),t}},{key:"toggleGroupOptionsParent",value:function(e,t){if(this.hasOptionGroup&&!this.disableOptionGroupCheckbox&&e){var i=p.getData(e,"groupIndex","number"),o=this.$options.querySelector('.vscomp-option[data-index="'.concat(i,'"]')),s="boolean"==typeof t?t:this.isAllGroupOptionsSelected(i);this.toggleGroupTitleCheckbox(o,s)}}},{key:"toggleGroupTitleProp",value:function(e,t){var i="boolean"==typeof t?t:this.isAllGroupOptionsSelected(e);this.toggleSelectedProp(e,i)}},{key:"toggleGroupOptions",value:function(e,t){var i=this;if(this.hasOptionGroup&&!this.disableOptionGroupCheckbox&&e){var o=p.getData(e,"index","number"),n=this.selectedValues,r=this.selectAllOnlyVisible,a={},l=s.removeItemFromArray;n.forEach((function(e){a[e]=!0})),this.options.forEach((function(e){if(!e.isDisabled&&e.groupIndex===o){var i=e.value;!t||r&&!e.isVisible?(e.isSelected=!1,a[i]&&l(n,i)):(e.isSelected=!0,a[i]||n.push(i))}})),this.toggleAllOptionsClass(!!t&&null),this.setValue(n),setTimeout((function(){i.renderOptions()}),0)}}},{key:"toggleGroupTitleCheckbox",value:function(e,t){if(e){var i=p.getData(e,"index","number");this.toggleSelectedProp(i,t),this.toggleOptionSelectedState(e,t)}}},{key:"toggleFocusedProp",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];this.focusedOptionIndex&&this.setOptionProp(this.focusedOptionIndex,"isFocused",!1),this.setOptionProp(e,"isFocused",t),this.focusedOptionIndex=e}},{key:"toggleSelectedProp",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];this.setOptionProp(e,"isSelected",t)}},{key:"scrollToTop",value:function(){var e=!this.isOpened();e&&this.openDropbox(!0),this.$optionsContainer.scrollTop>0&&(this.$optionsContainer.scrollTop=0),e&&this.closeDropbox(!0)}},{key:"reset",value:function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.options.forEach((function(e){e.isSelected=!1})),this.beforeValueSet(!0),this.setValue(null,{disableValidation:e}),this.afterValueSet(),e&&p.removeClass(this.$allWrappers,"has-error"),p.dispatchEvent(this.$ele,"reset")}},{key:"addOption",value:function(e,t){if(e){this.lastOptionIndex+=1;var i=this.getOptionObj(c(c({},e),{},{index:this.lastOptionIndex}));this.options.push(i),this.sortedOptions.push(i),t&&(this.visibleOptionsCount+=1,this.afterSetOptions())}}},{key:"removeOption",value:function(e){(e||0===e)&&(this.options.splice(e,1),this.lastOptionIndex-=1)}},{key:"removeNewOption",value:function(){var e=this.getNewOption();e&&this.removeOption(e.index)}},{key:"sortOptions",value:function(e){return e.sort((function(e,t){var i=e.isSelected||e.isAnySelected,o=t.isSelected||t.isAnySelected;return i||o?i&&(!o||e.index<t.index)?-1:1:0}))}},{key:"sortOptionsGroup",value:function(e){var t=this.sortOptions.bind(this),i=this.structureOptionGroup(e);return i.forEach((function(e){var i=e.options;e.isAnySelected=i.some((function(e){return e.isSelected})),e.isAnySelected&&t(i)})),t(i),this.destructureOptionGroup(i)}},{key:"isOptionVisible",value:function(e){var t=e.data,i=e.searchValue,o=e.hasExactOption,s=e.visibleOptionGroupsMapping,n=e.searchGroup,r=e.searchByStartsWith,a=t.value.toLowerCase(),l=t.label.toLowerCase(),u=t.description,p=t.alias,h=r?l.startsWith(i):-1!==l.indexOf(i);return t.isGroupTitle&&(n&&h||(h=s[t.index])),r||!p||h||(h=-1!==p.indexOf(i)),r||!u||h||(h=-1!==u.toLowerCase().indexOf(i)),t.isVisible=h,o||(o=l===i||a===i),{isVisible:h,hasExactOption:o}}},{key:"structureOptionGroup",value:function(e){var t=[],i={};return e.forEach((function(e){if(e.isGroupTitle){var o=[];e.options=o,i[e.index]=o,t.push(e)}})),e.forEach((function(e){e.isGroupOption&&i[e.groupIndex].push(e)})),t}},{key:"destructureOptionGroup",value:function(e){var t=[];return e.forEach((function(e){t.push(e),t=t.concat(e.options)})),t}},{key:"serverSearch",value:function(){p.removeClass(this.$allWrappers,"has-no-search-results"),p.addClass(this.$allWrappers,"server-searching"),this.setSelectedOptions(),this.onServerSearch(this.searchValue,this)}},{key:"removeValue",value:function(e){var t=this.selectedValues,i=p.getData(e,"value");s.removeItemFromArray(t,i),this.setValueMethod(t)}},{key:"focus",value:function(){this.$wrapper.focus()}},{key:"enable",value:function(){this.$ele.disabled=!1,this.$ele.removeAttribute("disabled"),this.$hiddenInput.removeAttribute("disabled"),p.setAria(this.$wrapper,"disabled",!1)}},{key:"disable",value:function(){this.$ele.disabled=!0,this.$ele.setAttribute("disabled",""),this.$hiddenInput.setAttribute("disabled",""),p.setAria(this.$wrapper,"disabled",!0)}},{key:"validate",value:function(){if(this.disableValidation)return!0;var e=!1;return this.required&&s.isEmpty(this.selectedValues)&&(e=!0),p.toggleClass(this.$allWrappers,"has-error",e),!e}},{key:"destroy",value:function(){var e=this.$ele;e.virtualSelect=void 0,e.value=void 0,e.innerHTML="",this.hasDropboxWrapper&&(this.$dropboxWrapper.remove(),this.mutationObserver.disconnect()),this.dropboxPopover&&this.dropboxPopover.destroy(),p.removeClass(e,"vscomp-ele")}},{key:"createSecureTextElements",value:function(){this.$secureDiv=document.createElement("div"),this.$secureText=document.createTextNode(""),this.$secureDiv.appendChild(this.$secureText)}},{key:"secureText",value:function(e){return e&&this.enableSecureText?(this.$secureText.nodeValue=e,this.$secureDiv.innerHTML):e}},{key:"toggleRequired",value:function(e){this.required=s.convertToBoolean(e),this.$ele.required=this.required}},{key:"toggleOptionSelectedState",value:function(e,t){var i=t;void 0===i&&(i=!p.hasClass(e,"selected")),p.toggleClass(e,"selected",i),p.setAria(e,"selected",i)}},{key:"toggleOptionFocusedState",value:function(e,t){e&&(p.toggleClass(e,"focused",t),t&&p.setAria(this.$wrapper,"activedescendant",e.id))}}])&&m(t.prototype,i),o&&m(t,o),Object.defineProperty(t,"prototype",{writable:!1}),e}();document.addEventListener("reset",C.onFormReset),document.addEventListener("submit",C.onFormSubmit),window.addEventListener("resize",C.onResizeMethod),O=C.getAttrProps(),window.VirtualSelect=C,"undefined"!=typeof NodeList&&NodeList.prototype&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach)}(),function(){"use strict";function e(e){return function(e){if(Array.isArray(e))return t(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||function(e,i){if(e){if("string"==typeof e)return t(e,i);var o=Object.prototype.toString.call(e).slice(8,-1);return"Object"===o&&e.constructor&&(o=e.constructor.name),"Map"===o||"Set"===o?Array.from(e):"Arguments"===o||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(o)?t(e,i):void 0}}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function t(e,t){(null==t||t>e.length)&&(t=e.length);for(var i=0,o=new Array(t);i<t;i++)o[i]=e[i];return o}var i=function(){function t(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t)}var i;return(i=[{key:"addClass",value:function(i,o){i&&(o=o.split(" "),t.getElements(i).forEach((function(t){var i;(i=t.classList).add.apply(i,e(o))})))}},{key:"removeClass",value:function(i,o){i&&(o=o.split(" "),t.getElements(i).forEach((function(t){var i;(i=t.classList).remove.apply(i,e(o))})))}},{key:"getElements",value:function(e){if(e)return void 0===e.forEach&&(e=[e]),e}},{key:"getMoreVisibleSides",value:function(e){if(!e)return{};var t=e.getBoundingClientRect(),i=window.innerWidth,o=window.innerHeight,s=t.left,n=t.top;return{horizontal:s>i-s-t.width?"left":"right",vertical:n>o-n-t.height?"top":"bottom"}}},{key:"getAbsoluteCoords",value:function(e){if(e){var t=e.getBoundingClientRect(),i=window.pageXOffset,o=window.pageYOffset;return{width:t.width,height:t.height,top:t.top+o,right:t.right+i,bottom:t.bottom+o,left:t.left+i}}}},{key:"getCoords",value:function(e){return e?e.getBoundingClientRect():{}}},{key:"getData",value:function(e,t,i){if(e){var o=e?e.dataset[t]:"";return"number"===i?o=parseFloat(o)||0:"true"===o?o=!0:"false"===o&&(o=!1),o}}},{key:"setData",value:function(e,t,i){e&&(e.dataset[t]=i)}},{key:"setStyle",value:function(e,t,i){e&&(e.style[t]=i)}},{key:"show",value:function(e){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"block";t.setStyle(e,"display",i)}},{key:"hide",value:function(e){t.setStyle(e,"display","none")}},{key:"getHideableParent",value:function(e){for(var t,i=e.parentElement;i;){var o=getComputedStyle(i).overflow;if(-1!==o.indexOf("scroll")||-1!==o.indexOf("auto")){t=i;break}i=i.parentElement}return t}}])&&function(e,t){for(var i=0;i<t.length;i++){var o=t[i];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}(t,i),t}(),o=["top","bottom","left","right"].map((function(e){return"position-".concat(e)})),s={top:"rotate(180deg)",left:"rotate(90deg)",right:"rotate(-90deg)"},n=function(){function e(t){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e);try{this.setProps(t),this.init()}catch(e){console.warn("Couldn't initiate popper"),console.error(e)}}var t;return(t=[{key:"init",value:function(){var e=this.$popperEle;e&&this.$triggerEle&&(i.setStyle(e,"zIndex",this.zIndex),this.setPosition())}},{key:"setProps",value:function(e){var t=(e=this.setDefaultProps(e)).position?e.position.toLowerCase():"auto";if(this.$popperEle=e.$popperEle,this.$triggerEle=e.$triggerEle,this.$arrowEle=e.$arrowEle,this.margin=parseFloat(e.margin),this.offset=parseFloat(e.offset),this.enterDelay=parseFloat(e.enterDelay),this.exitDelay=parseFloat(e.exitDelay),this.showDuration=parseFloat(e.showDuration),this.hideDuration=parseFloat(e.hideDuration),this.transitionDistance=parseFloat(e.transitionDistance),this.zIndex=parseFloat(e.zIndex),this.afterShowCallback=e.afterShow,this.afterHideCallback=e.afterHide,this.hasArrow=!!this.$arrowEle,-1!==t.indexOf(" ")){var i=t.split(" ");this.position=i[0],this.secondaryPosition=i[1]}else this.position=t}},{key:"setDefaultProps",value:function(e){return Object.assign({position:"auto",margin:8,offset:5,enterDelay:0,exitDelay:0,showDuration:300,hideDuration:200,transitionDistance:10,zIndex:1},e)}},{key:"setPosition",value:function(){i.show(this.$popperEle,"inline-flex");var e,t,n,r=window.innerWidth,a=window.innerHeight,l=i.getAbsoluteCoords(this.$popperEle),u=i.getAbsoluteCoords(this.$triggerEle),p=l.width,h=l.height,c=l.top,d=l.right,v=l.bottom,f=l.left,y=u.width,b=u.height,g=u.top,m=u.right,O=u.bottom,S=u.left,x=g-c,w=S-f,k=w,C=x,E=this.position,A=this.secondaryPosition,$=y/2-p/2,T=b/2-h/2,D=this.margin,V=this.transitionDistance,P=window.scrollY-c,I=a+P,M=window.scrollX-f,F=r+M,G=this.offset;G&&(P+=G,I-=G,M+=G,F-=G),"auto"===E&&(E=i.getMoreVisibleSides(this.$triggerEle).vertical);var H={top:{top:C-h-D,left:k+$},bottom:{top:C+b+D,left:k+$},right:{top:C+T,left:k+y+D},left:{top:C+T,left:k-p-D}},W=H[E];if(C=W.top,k=W.left,A&&("top"===A?C=x:"bottom"===A?C=x+b-h:"left"===A?k=w:"right"===A&&(k=w+y-p)),k<M?"left"===E?n="right":k=M+f>m?m-f:M:k+p>F&&("right"===E?n="left":k=F+f<S?S-d:F-p),C<P?"top"===E?n="bottom":C=P+c>O?O-c:P:C+h>I&&("bottom"===E?n="top":C=I+c<g?g-v:I-h),n){var q=H[n];"top"===(E=n)||"bottom"===E?C=q.top:"left"!==E&&"right"!==E||(k=q.left)}"top"===E?(e=C+V,t=k):"right"===E?(e=C,t=k-V):"left"===E?(e=C,t=k+V):(e=C-V,t=k);var j="translate3d(".concat(t,"px, ").concat(e,"px, 0)");if(i.setStyle(this.$popperEle,"transform",j),i.setData(this.$popperEle,"fromLeft",t),i.setData(this.$popperEle,"fromTop",e),i.setData(this.$popperEle,"top",C),i.setData(this.$popperEle,"left",k),i.removeClass(this.$popperEle,o.join(" ")),i.addClass(this.$popperEle,"position-".concat(E)),this.hasArrow){var N=0,L=0,R=k+f,B=C+c,z=this.$arrowEle.offsetWidth/2,K=s[E]||"";"top"===E||"bottom"===E?(N=y/2+S-R)<z?N=z:N>p-z&&(N=p-z):"left"!==E&&"right"!==E||((L=b/2+g-B)<z?L=z:L>h-z&&(L=h-z)),i.setStyle(this.$arrowEle,"transform","translate3d(".concat(N,"px, ").concat(L,"px, 0) ").concat(K))}i.hide(this.$popperEle)}},{key:"resetPosition",value:function(){i.setStyle(this.$popperEle,"transform","none"),this.setPosition()}},{key:"show",value:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},o=t.resetPosition,s=t.data;clearTimeout(this.exitDelayTimeout),clearTimeout(this.hideDurationTimeout),o&&this.resetPosition(),this.enterDelayTimeout=setTimeout((function(){var t=i.getData(e.$popperEle,"left"),o=i.getData(e.$popperEle,"top"),n="translate3d(".concat(t,"px, ").concat(o,"px, 0)"),r=e.showDuration;i.show(e.$popperEle,"inline-flex"),i.getCoords(e.$popperEle),i.setStyle(e.$popperEle,"transitionDuration",r+"ms"),i.setStyle(e.$popperEle,"transform",n),i.setStyle(e.$popperEle,"opacity",1),e.showDurationTimeout=setTimeout((function(){"function"==typeof e.afterShowCallback&&e.afterShowCallback(s)}),r)}),this.enterDelay)}},{key:"hide",value:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},o=t.data;clearTimeout(this.enterDelayTimeout),clearTimeout(this.showDurationTimeout),this.exitDelayTimeout=setTimeout((function(){if(e.$popperEle){var t=i.getData(e.$popperEle,"fromLeft"),s=i.getData(e.$popperEle,"fromTop"),n="translate3d(".concat(t,"px, ").concat(s,"px, 0)"),r=e.hideDuration;i.setStyle(e.$popperEle,"transitionDuration",r+"ms"),i.setStyle(e.$popperEle,"transform",n),i.setStyle(e.$popperEle,"opacity",0),e.hideDurationTimeout=setTimeout((function(){i.hide(e.$popperEle),"function"==typeof e.afterHideCallback&&e.afterHideCallback(o)}),r)}}),this.exitDelay)}},{key:"updatePosition",value:function(){i.setStyle(this.$popperEle,"transitionDuration","0ms"),this.resetPosition();var e=i.getData(this.$popperEle,"left"),t=i.getData(this.$popperEle,"top");i.show(this.$popperEle,"inline-flex"),i.setStyle(this.$popperEle,"transform","translate3d(".concat(e,"px, ").concat(t,"px, 0)"))}}])&&function(e,t){for(var i=0;i<t.length;i++){var o=t[i];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}(e.prototype,t),e}();window.PopperComponent=n}(),function(){"use strict";function e(e,t){for(var i=0;i<t.length;i++){var o=t[i];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}var t=function(){function t(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t)}var i,o;return i=t,(o=[{key:"convertToBoolean",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];return!0===e||"true"===e||!1!==e&&"false"!==e&&t}},{key:"removeArrayEmpty",value:function(e){return Array.isArray(e)&&e.length?e.filter((function(e){return!!e})):[]}},{key:"throttle",value:function(e,t){var i,o=0;return function(){for(var s=arguments.length,n=new Array(s),r=0;r<s;r++)n[r]=arguments[r];var a=(new Date).getTime(),l=t-(a-o);clearTimeout(i),l<=0?(o=a,e.apply(void 0,n)):i=setTimeout((function(){e.apply(void 0,n)}),l)}}}])&&e(i,o),Object.defineProperty(i,"prototype",{writable:!1}),t}();function i(e){return function(e){if(Array.isArray(e))return o(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||function(e,t){if(e){if("string"==typeof e)return o(e,t);var i=Object.prototype.toString.call(e).slice(8,-1);return"Object"===i&&e.constructor&&(i=e.constructor.name),"Map"===i||"Set"===i?Array.from(e):"Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i)?o(e,t):void 0}}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function o(e,t){(null==t||t>e.length)&&(t=e.length);for(var i=0,o=new Array(t);i<t;i++)o[i]=e[i];return o}function s(e,t){for(var i=0;i<t.length;i++){var o=t[i];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}var n=function(){function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e)}var o,n;return o=e,(n=[{key:"addClass",value:function(t,o){t&&(o=o.split(" "),e.getElements(t).forEach((function(e){var t;(t=e.classList).add.apply(t,i(o))})))}},{key:"removeClass",value:function(t,o){t&&(o=o.split(" "),e.getElements(t).forEach((function(e){var t;(t=e.classList).remove.apply(t,i(o))})))}},{key:"hasClass",value:function(e,t){return!!e&&e.classList.contains(t)}},{key:"getElement",value:function(e){return e&&("string"==typeof e?e=document.querySelector(e):void 0!==e.length&&(e=e[0])),e||null}},{key:"getElements",value:function(e){if(e)return void 0===e.forEach&&(e=[e]),e}},{key:"addEvent",value:function(t,i,o){e.addOrRemoveEvent(t,i,o,"add")}},{key:"removeEvent",value:function(t,i,o){e.addOrRemoveEvent(t,i,o,"remove")}},{key:"addOrRemoveEvent",value:function(i,o,s,n){i&&(o=t.removeArrayEmpty(o.split(" "))).forEach((function(t){(i=e.getElements(i)).forEach((function(e){"add"===n?e.addEventListener(t,s):e.removeEventListener(t,s)}))}))}},{key:"getScrollableParents",value:function(e){if(!e)return[];for(var t=[window],i=e.parentElement;i;){var o=getComputedStyle(i).overflow;-1===o.indexOf("scroll")&&-1===o.indexOf("auto")||t.push(i),i=i.parentElement}return t}},{key:"convertPropToDataAttr",value:function(e){return e?"data-popover-".concat(e).replace(/([A-Z])/g,"-$1").toLowerCase():""}}])&&s(o,n),Object.defineProperty(o,"prototype",{writable:!1}),e}();function r(e,t){for(var i=0;i<t.length;i++){var o=t[i];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}var a,l={27:"onEscPress"},u=["target","position","margin","offset","enterDelay","exitDelay","showDuration","hideDuration","transitionDistance","updatePositionThrottle","zIndex","hideOnOuterClick","showOnHover","hideArrowIcon","disableManualAction","disableUpdatePosition"],p=function(){function e(t){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e);try{this.setProps(t),this.init()}catch(e){console.warn("Couldn't initiate Popover component"),console.error(e)}}var i,o,s;return i=e,s=[{key:"init",value:function(t){var i=t.ele;if(i){var o=!1;if("string"==typeof i){if(!(i=document.querySelectorAll(i)))return;1===i.length&&(o=!0)}void 0===i.length&&(i=[i],o=!0);var s=[];return i.forEach((function(i){t.ele=i,e.destroy(i),s.push(new e(t))})),o?s[0]:s}}},{key:"destroy",value:function(e){if(e){var t=e.popComp;t&&t.destroy()}}},{key:"showMethod",value:function(){this.popComp.show()}},{key:"hideMethod",value:function(){this.popComp.hide()}},{key:"updatePositionMethod",value:function(){this.popComp.popper.updatePosition()}},{key:"getAttrProps",value:function(){var e=n.convertPropToDataAttr,t={};return u.forEach((function(i){t[e(i)]=i})),t}}],(o=[{key:"init",value:function(){this.$popover&&(this.setElementProps(),this.renderArrow(),this.initPopper(),this.addEvents())}},{key:"getEvents",value:function(){var e=[{$ele:document,event:"click",method:"onDocumentClick"},{$ele:document,event:"keydown",method:"onDocumentKeyDown"}];return this.disableManualAction||(e.push({$ele:this.$ele,event:"click",method:"onTriggerEleClick"}),this.showOnHover&&(e.push({$ele:this.$ele,event:"mouseenter",method:"onTriggerEleMouseEnter"}),e.push({$ele:this.$ele,event:"mouseleave",method:"onTriggerEleMouseLeave"}))),e}},{key:"addOrRemoveEvents",value:function(e){var t=this;this.getEvents().forEach((function(i){t.addOrRemoveEvent({action:e,$ele:i.$ele,events:i.event,method:i.method})}))}},{key:"addEvents",value:function(){this.addOrRemoveEvents("add")}},{key:"removeEvents",value:function(){this.addOrRemoveEvents("remove"),this.removeScrollEventListeners()}},{key:"addOrRemoveEvent",value:function(e){var i=this,o=e.action,s=e.$ele,r=e.events,a=e.method,l=e.throttle;s&&(r=t.removeArrayEmpty(r.split(" "))).forEach((function(e){var r="".concat(a,"-").concat(e),u=i.events[r];u||(u=i[a].bind(i),l&&(u=t.throttle(u,l)),i.events[r]=u),"add"===o?n.addEvent(s,e,u):n.removeEvent(s,e,u)}))}},{key:"addScrollEventListeners",value:function(){this.$scrollableElems=n.getScrollableParents(this.$ele),this.addOrRemoveEvent({action:"add",$ele:this.$scrollableElems,events:"scroll",method:"onAnyParentScroll",throttle:this.updatePositionThrottle})}},{key:"removeScrollEventListeners",value:function(){this.$scrollableElems&&(this.addOrRemoveEvent({action:"remove",$ele:this.$scrollableElems,events:"scroll",method:"onAnyParentScroll"}),this.$scrollableElems=null)}},{key:"onAnyParentScroll",value:function(){this.popper.updatePosition()}},{key:"onDocumentClick",value:function(e){var t=e.target,i=t.closest(".pop-comp-ele"),o=t.closest(".pop-comp-wrapper");this.hideOnOuterClick&&i!==this.$ele&&o!==this.$popover&&this.hide()}},{key:"onDocumentKeyDown",value:function(e){var t=e.which||e.keyCode,i=l[t];i&&this[i](e)}},{key:"onEscPress",value:function(){this.hideOnOuterClick&&this.hide()}},{key:"onTriggerEleClick",value:function(){this.toggle()}},{key:"onTriggerEleMouseEnter",value:function(){this.show()}},{key:"onTriggerEleMouseLeave",value:function(){this.hide()}},{key:"setProps",value:function(e){e=this.setDefaultProps(e),this.setPropsFromElementAttr(e);var i=t.convertToBoolean;this.$ele=e.ele,this.target=e.target,this.position=e.position,this.margin=parseFloat(e.margin),this.offset=parseFloat(e.offset),this.enterDelay=parseFloat(e.enterDelay),this.exitDelay=parseFloat(e.exitDelay),this.showDuration=parseFloat(e.showDuration),this.hideDuration=parseFloat(e.hideDuration),this.transitionDistance=parseFloat(e.transitionDistance),this.updatePositionThrottle=parseFloat(e.updatePositionThrottle),this.zIndex=parseFloat(e.zIndex),this.hideOnOuterClick=i(e.hideOnOuterClick),this.showOnHover=i(e.showOnHover),this.hideArrowIcon=i(e.hideArrowIcon),this.disableManualAction=i(e.disableManualAction),this.disableUpdatePosition=i(e.disableUpdatePosition),this.beforeShowCallback=e.beforeShow,this.afterShowCallback=e.afterShow,this.beforeHideCallback=e.beforeHide,this.afterHideCallback=e.afterHide,this.events={},this.$popover=n.getElement(this.target)}},{key:"setDefaultProps",value:function(e){return Object.assign({position:"auto",margin:8,offset:5,enterDelay:0,exitDelay:0,showDuration:300,hideDuration:200,transitionDistance:10,updatePositionThrottle:100,zIndex:1,hideOnOuterClick:!0,showOnHover:!1,hideArrowIcon:!1,disableManualAction:!1,disableUpdatePosition:!1},e)}},{key:"setPropsFromElementAttr",value:function(e){var t=e.ele;for(var i in a){var o=t.getAttribute(i);o&&(e[a[i]]=o)}}},{key:"setElementProps",value:function(){var t=this.$ele;t.popComp=this,t.show=e.showMethod,t.hide=e.hideMethod,t.updatePosition=e.updatePositionMethod,n.addClass(this.$ele,"pop-comp-ele"),n.addClass(this.$popover,"pop-comp-wrapper")}},{key:"getOtherTriggerPopComp",value:function(){var e,t=this.$popover.popComp;return t&&t.$ele!==this.$ele&&(e=t),e}},{key:"initPopper",value:function(){var e={$popperEle:this.$popover,$triggerEle:this.$ele,$arrowEle:this.$arrowEle,position:this.position,margin:this.margin,offset:this.offset,enterDelay:this.enterDelay,exitDelay:this.exitDelay,showDuration:this.showDuration,hideDuration:this.hideDuration,transitionDistance:this.transitionDistance,zIndex:this.zIndex,afterShow:this.afterShow.bind(this),afterHide:this.afterHide.bind(this)};this.popper=new PopperComponent(e)}},{key:"beforeShow",value:function(){"function"==typeof this.beforeShowCallback&&this.beforeShowCallback(this)}},{key:"beforeHide",value:function(){"function"==typeof this.beforeHideCallback&&this.beforeHideCallback(this)}},{key:"show",value:function(){this.isShown()||(this.isShownForOtherTrigger()?this.showAfterOtherHide():(n.addClass(this.$popover,"pop-comp-disable-events"),this.$popover.popComp=this,this.beforeShow(),this.popper.show({resetPosition:!0}),n.addClass(this.$ele,"pop-comp-active")))}},{key:"hide",value:function(){this.isShown()&&(this.beforeHide(),this.popper.hide(),this.removeScrollEventListeners())}},{key:"toggle",value:function(e){void 0===e&&(e=!this.isShown()),e?this.show():this.hide()}},{key:"isShown",value:function(){return n.hasClass(this.$ele,"pop-comp-active")}},{key:"isShownForOtherTrigger",value:function(){var e=this.getOtherTriggerPopComp();return!!e&&e.isShown()}},{key:"showAfterOtherHide",value:function(){var e=this,t=this.getOtherTriggerPopComp();if(t){var i=t.exitDelay+t.hideDuration+100;setTimeout((function(){e.show()}),i)}}},{key:"afterShow",value:function(){var e=this;this.showOnHover?setTimeout((function(){n.removeClass(e.$popover,"pop-comp-disable-events")}),2e3):n.removeClass(this.$popover,"pop-comp-disable-events"),this.disableUpdatePosition||this.addScrollEventListeners(),"function"==typeof this.afterShowCallback&&this.afterShowCallback(this)}},{key:"afterHide",value:function(){n.removeClass(this.$ele,"pop-comp-active"),"function"==typeof this.afterHideCallback&&this.afterHideCallback(this)}},{key:"renderArrow",value:function(){if(!this.hideArrowIcon){var e=this.$popover.querySelector(".pop-comp-arrow");e||(this.$popover.insertAdjacentHTML("afterbegin",'<i class="pop-comp-arrow"></i>'),e=this.$popover.querySelector(".pop-comp-arrow")),this.$arrowEle=e}}},{key:"destroy",value:function(){this.removeEvents()}}])&&r(i.prototype,o),s&&r(i,s),Object.defineProperty(i,"prototype",{writable:!1}),e}();a=p.getAttrProps(),window.PopoverComponent=p}();
\ No newline at end of file