From 954f10868f4d447a5de5b422fa098e6b78eb95da Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sat, 7 Sep 2024 21:57:23 +1200
Subject: [PATCH] ensure light background uses dark text

---
 src/public/index.html               | 18 ++++++++++++++++--
 src/public/text-messages-embed.html | 16 +++++++++++++++-
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/src/public/index.html b/src/public/index.html
index 1569279..a2a7042 100644
--- a/src/public/index.html
+++ b/src/public/index.html
@@ -204,7 +204,7 @@
                         <template v-if="searchedNodes.length > 0">
                             <div @click="onSearchResultNodeClick(node)" class="flex space-x-2 p-2 hover:bg-gray-100 cursor-pointer" v-for="node of searchedNodes">
                                 <div>
-                                    <div class="flex rounded-full h-12 w-12 text-white shadow" :class="[ `bg-[${getNodeColour(node.node_id)}]` ]">
+                                    <div class="flex rounded-full h-12 w-12 text-white shadow" :class="[ `bg-[${getNodeColour(node.node_id)}]`, `text-[${getNodeTextColour(node.node_id)}]` ]">
                                         <div class="mx-auto my-auto drop-shadow-sm">{{ node.short_name }}</div>
                                     </div>
                                 </div>
@@ -590,7 +590,7 @@
                         <div class="p-2 border-b border-gray-200 shadow">
                             <div class="flex">
                                 <div class="my-auto mr-2">
-                                    <div class="flex rounded-full h-12 w-12 text-white shadow" :class="[ `bg-[${getNodeColour(selectedNode.node_id)}]` ]">
+                                    <div class="flex rounded-full h-12 w-12 text-white shadow" :class="[ `bg-[${getNodeColour(selectedNode.node_id)}]`, `text-[${getNodeTextColour(selectedNode.node_id)}]` ]">
                                         <div class="mx-auto my-auto drop-shadow-sm">{{ selectedNode.short_name }}</div>
                                     </div>
                                 </div>
@@ -2576,6 +2576,20 @@
                 // convert node id to a hex colour
                 return "#" + (nodeId & 0x00FFFFFF).toString(16).padStart(6, '0');
             },
+            getNodeTextColour(nodeId) {
+
+                // extract rgb components
+                const r = (nodeId & 0xFF0000) >> 16;
+                const g = (nodeId & 0x00FF00) >> 8;
+                const b = nodeId & 0x0000FF;
+
+                // calculate brightness
+                const brightness = ((r * 0.299) + (g * 0.587) + (b * 0.114)) / 255;
+
+                // determine text color based on brightness
+                return brightness > 0.5 ? "#000000" : "#FFFFFF";
+
+            },
         },
         computed: {
             searchedNodes() {
diff --git a/src/public/text-messages-embed.html b/src/public/text-messages-embed.html
index 150d8e3..f00020c 100644
--- a/src/public/text-messages-embed.html
+++ b/src/public/text-messages-embed.html
@@ -54,7 +54,7 @@
 
                     <div class="mr-2 mt-2">
                         <a target="_blank" :href="`/?node_id=${message.from}`">
-                            <div class="flex rounded-full h-12 w-12 text-white shadow" :class="[ `bg-[${getNodeColour(message.from)}]` ]">
+                            <div class="flex rounded-full h-12 w-12 text-white shadow" :class="[ `bg-[${getNodeColour(message.from)}]`, `text-[${getNodeTextColour(message.from)}]` ]">
                                 <div class="mx-auto my-auto drop-shadow-sm">{{ getNodeShortName(message.from) }}</div>
                             </div>
                         </a>
@@ -326,6 +326,20 @@
                 // convert node id to a hex colour
                 return "#" + (nodeId & 0x00FFFFFF).toString(16).padStart(6, '0');
             },
+            getNodeTextColour(nodeId) {
+
+                // extract rgb components
+                const r = (nodeId & 0xFF0000) >> 16;
+                const g = (nodeId & 0x00FF00) >> 8;
+                const b = nodeId & 0x0000FF;
+
+                // calculate brightness
+                const brightness = ((r * 0.299) + (g * 0.587) + (b * 0.114)) / 255;
+
+                // determine text color based on brightness
+                return brightness > 0.5 ? "#000000" : "#FFFFFF";
+
+            },
             escapeMessageText(text) {
                 return text.replaceAll('<', '&lt;')
                     .replaceAll('>', '&gt;')