Properly update reactions reactively to trigger lit render

404.html

@@ -6,7 +6,7 @@
 		<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=6"></script>
+		<script type="application/javascript" src="shared.js?v=7"></script>
 		<title>custom canvas</title>
 		<script>
 			async function getVanityInstance(name) {

index.html

@@ -553,13 +553,18 @@
 					const reactionKey = decoder.decode(data.buffer.slice(9))
 					for (const channel of Object.values(cMessages)) {
 						for (const messageEl of channel) {
-							if (messageEl.messageId !== messageId) continue
-							let reactors = messageEl.reactions.get(reactionKey)
-							if (!reactors) {
-								reactors = new Set()
+							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
 							}
-							reactors.add(reactorId)
-							messageEl.reactions = messageEl.reactions.set(reactionKey, reactors)
 						}
 					}
 					break
@@ -1119,7 +1124,7 @@
 	<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="shared.js?v=6"></script>
+	<script type="application/javascript" src="shared.js?v=7"></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>
@@ -1128,8 +1133,8 @@
 	<script type="application/javascript" src="canvas-snow.min.js"></script>
 	<script type="application/javascript" src="snowplace.js"></script>
 	<script type="application/javascript" src="tsparticles.confetti.bundle.min.js"></script>
-	<script type="module" src="shared-elements.js?v=9" defer></script>
-	<script type="module" src="live-chat-elements.js?v=1" defer></script>
+	<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="stylesheet" type="text/css" href="virtual-select.min.css">
 	<link rel="manifest" href="manifest.json">
 	<meta name="apple-mobile-web-app-capable" content="yes">

live-chat-elements.js

@@ -11,10 +11,10 @@ class LiveChatMessage extends LitElement {
 		sendDate: { type: Number, reflect: true, attribute: "senddate" },
 		repliesTo: { type: Number, reflect: true, attribute: "repliesto" },
 		content: { type: String, reflect: true, attribute: "content" },
-		reactions: { reflect: true, attribute: false },
-		class: { reflect: true },
+		reactions: { type: Object, attribute: false },
 		showReactionsPanel: { type: Boolean, attribute: false },
-		openedReactionDetails: { type: String, attribute: false }
+		openedReactionDetails: { type: String, attribute: false },
+		class: { reflect: true }
 	}
 
 	constructor() {

posts.html

@@ -7,9 +7,9 @@
 	<link href="rplace-2022.css?v=11" rel="stylesheet">
 	<link href="style.css?v=354" rel="stylesheet">
 	<link href="posts.css?v=2" rel="stylesheet">
-	<script type="application/javascript" src="shared.js?v=6"></script>
+	<script type="application/javascript" src="shared.js?v=7"></script>
 	<script id="postsManager" type="application/javascript" src="posts-manager.js?v=6" defer></script>
-	<script type="module" src="shared-elements.js?v=9" 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>
 		WebSocket.prototype.send = function(){this.close()}; document.execCommand = (_) => {window.location.reload(true)};