Better support for more than two users.

.gitignore

@@ -1,4 +1,4 @@
 .parcel-cache/
 dist/
 node_modules/
-
+yarn-error.log

package.json

@@ -19,7 +19,9 @@
     "@types/bootstrap": "^5.2.3",
     "bootstrap": "^5.2",
     "bootstrap-icons": "^1.10.3",
+    "cash-dom": "^8.1.4",
     "dexie": "^3.2.2",
-    "jsx-dom": "^8.0.3"
+    "jsx-dom": "^8.0.3",
+    "string-to-color": "^2.2.2"
   }
 }

src/scss/index.scss

@@ -8,6 +8,10 @@ table {
 th, td {
 }
 
+tr.session-stripe {
+    background-color: #f4f4f4;
+}
+
 .message-from-user {
     max-width: 400px;
     white-space: nowrap;
@@ -58,10 +62,8 @@ th, td {
 }
 
 @include media-breakpoint-down(lg) {
-    /*
+    //Remove padding from container, but keep it on stuff that isn't
-      Remove padding from container, but keep it on stuff that isn't
+    //navbar or chat messages.
-      navbar or chat messages.
-   */
     .container-lg {
 	padding-left: 0px;
 	padding-right: 0px;

src/ts/db.ts

@@ -1,8 +1,7 @@
 import Dexie from 'dexie';
 
 export class MsnDatabase extends Dexie {
-    entries!: Dexie.Table<BackupEntry, string>; // number = type of the primkey
+    entries!: Dexie.Table<BackupEntry, string>;
-    //...other tables goes here...
 
     constructor() {
         super("MsnDatabase");

src/ts/index.tsx

@@ -1,5 +1,7 @@
 import * as bootstrap from 'bootstrap';
+import stc from 'string-to-color';
 
+import $ from 'cash-dom';
 import xslContent from 'bundle-text:../xsl/MessageLog.xsl';
 import * as ui from './ui';
 import { db } from './db';
@@ -38,6 +40,7 @@ function displayError(errorDiv: HTMLElement, category: string, ex: Error) {
     console.error(ex);
     const errorHeading = errorDiv.querySelector('.alert-heading') as HTMLElement | null;
 
+
     //clear all error text, but not heading
     const errorMessages = errorDiv.querySelectorAll('span');
     errorMessages.forEach(message => errorDiv.removeChild(message));
@@ -94,15 +97,26 @@ function checkOverflow(elem: HTMLElement) {
 }
 
 function processFragment() {
+    // add username popover
     document
         .querySelectorAll('[data-bs-toggle="popover"]')
         .forEach(popover => new bootstrap.Popover(popover, { trigger: 'focus' }));
 
+    // indicate overflow on mobile
     document.querySelectorAll('.message-content div').forEach(div => {
         if (checkOverflow(div as HTMLElement)) {
             div.parentElement?.classList.add('overflow-icon');
         }
     });
+
+    const colorMap = new Map(
+        Array.from($('.message-from-user'))
+            .map(el => el?.textContent || '')
+            .map((username) => [username, stc(username)])
+    );
+
+    $('.message-from-user')
+        .each((_, el) => el.style.color = colorMap.get(el.textContent!)!)
 }
 
 async function saveToDatabase(filename: string, xml: string) {

src/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
     "strict": true,
+    "noImplicitAny": false,
     "experimentalDecorators": true,
     "target": "es6",
     "module": "es6",

src/xsl/MessageLog.xsl

@@ -21,11 +21,11 @@ https://github.com/jerecui/MSNChatHistoryCombiner
 
   <!-- variables -->
   <xsl:variable name='UseZebraStripe'>1</xsl:variable>
-  <xsl:variable name='ZebraStripeStyle'>background-color:#e0edff</xsl:variable>
+  <xsl:variable name='ZebraStripeClass'>session-stripe</xsl:variable>
   <xsl:variable name='MostRecentSessionFirst'>0</xsl:variable>
 
   <xsl:template match="Log">
-    <table id='BodyTable' class="table">
+    <table id='BodyTable' class="table border">
       <thead>
         <tr>
 	  <th class="d-lg-none message-mobile-date-time">
@@ -34,10 +34,10 @@ https://github.com/jerecui/MSNChatHistoryCombiner
 	  <th class="d-none d-lg-table-cell">
             <xsl:value-of select="$ColumnHeader_Date"/>
           </th>
-	  <th class="d-none d-lg-table-cell">
+	  <th class="d-none d-lg-table-cell border-end">
             <xsl:value-of select="$ColumnHeader_Time"/>
           </th>
-	  <th class="message-from-user">
+	  <th>
             <xsl:value-of select="$ColumnHeader_From"/>
           </th>
 	  <th>
@@ -73,7 +73,7 @@ https://github.com/jerecui/MSNChatHistoryCombiner
     <tr>
       <xsl:call-template name="CommonMessageProcessing" />
 
-      <td class="message-from-user"><xsl:apply-templates select="From/User"/> </td>
+      <td class="message-from-user" ><xsl:apply-templates select="From/User"/> </td>
       <td class="message-content">
         <div class="overflow-auto">
           <xsl:value-of select="Text"/>
@@ -111,8 +111,8 @@ https://github.com/jerecui/MSNChatHistoryCombiner
     <!-- zebra-stripe the sessions -->
     <xsl:if test="$UseZebraStripe = 1">
       <xsl:if test="(@SessionID mod 2) = 1">
-        <xsl:attribute name="style">
+        <xsl:attribute name="class">
-          <xsl:value-of select="$ZebraStripeStyle"/>
+          <xsl:value-of select="$ZebraStripeClass"/>
         </xsl:attribute>
       </xsl:if>
     </xsl:if>
@@ -130,7 +130,7 @@ https://github.com/jerecui/MSNChatHistoryCombiner
       </a>
     </td>
     <td class="d-none d-lg-table-cell message-date"> <xsl:value-of select="@Date"/> </td>
-    <td class="d-none d-lg-table-cell message-time"> <xsl:value-of select="@Time"/> </td>
+    <td class="d-none d-lg-table-cell message-time border-end"> <xsl:value-of select="@Time"/> </td>
   </xsl:template>
 
 

yarn.lock

@@ -866,6 +866,11 @@ caniuse-lite@^1.0.30001400:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001441.tgz#987437b266260b640a23cd18fbddb509d7f69f3e"
   integrity sha512-OyxRR4Vof59I3yGWXws6i908EtGbMzVUi3ganaZQHmydk1iwDhRnvaPG2WaR0KcqrDFKrxVZHULT396LEPhXfg==
 
+cash-dom@^8.1.4:
+  version "8.1.4"
+  resolved "https://registry.yarnpkg.com/cash-dom/-/cash-dom-8.1.4.tgz#445c2a509cffa8b1c99094634418b4b439d57718"
+  integrity sha512-bFLMk+r3lv+sDwxlAFfRlMxpRls7zMnSQePVpNouwnpm9G4MbLYZZtIUG2urUgfmIaKlc/hqG8o7yZg3+nFKRA==
+
 chalk@^2.0.0:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
@@ -932,6 +937,11 @@ color-name@~1.1.4:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
+colornames@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/colornames/-/colornames-1.1.1.tgz#f8889030685c7c4ff9e2a559f5077eb76a816f96"
+  integrity sha512-/pyV40IrsdulWv+wFPmERh9k/mjsPZ64yUMDmWrtj/k1nmgrzzIENWKdaVKyBbvFdQWqkcaRxr+polCo3VMe7A==
+
 commander@^2.20.0:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
@@ -1112,6 +1122,11 @@ has-flag@^4.0.0:
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
   integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
 
+hex-rgb@^4.1.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/hex-rgb/-/hex-rgb-4.3.0.tgz#af5e974e83bb2fefe44d55182b004ec818c07776"
+  integrity sha512-Ox1pJVrDCyGHMG9CFg1tmrRUMRPRsAWYc/PinY0XzJU4K7y7vjNoLKIQ7BR5UJMCxNN8EM1MNDmHWA/B3aZUuw==
+
 htmlnano@^2.0.0:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/htmlnano/-/htmlnano-2.0.3.tgz#50ee639ed63357d4a6c01309f52a35892e4edc2e"
@@ -1279,6 +1294,21 @@ lmdb@2.5.2:
     "@lmdb/lmdb-linux-x64" "2.5.2"
     "@lmdb/lmdb-win32-x64" "2.5.2"
 
+lodash.padend@^4.6.1:
+  version "4.6.1"
+  resolved "https://registry.yarnpkg.com/lodash.padend/-/lodash.padend-4.6.1.tgz#53ccba047d06e158d311f45da625f4e49e6f166e"
+  integrity sha512-sOQs2aqGpbl27tmCS1QNZA09Uqp01ZzWfDUoD+xzTii0E7dSQfRKcRetFwa+uXaxaqL+TKm7CgD2JdKP7aZBSw==
+
+lodash.trimstart@^4.5.1:
+  version "4.5.1"
+  resolved "https://registry.yarnpkg.com/lodash.trimstart/-/lodash.trimstart-4.5.1.tgz#8ff4dec532d82486af59573c39445914e944a7f1"
+  integrity sha512-b/+D6La8tU76L/61/aN0jULWHkT0EeJCmVstPBn/K9MtD2qBW83AsBNrr63dKuWYwVMO7ucv13QNO/Ek/2RKaQ==
+
+lodash.words@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/lodash.words/-/lodash.words-4.2.0.tgz#5ecfeaf8ecf8acaa8e0c8386295f1993c9cf4036"
+  integrity sha512-mXxqd8Yx9BGPij3lZKFSdOsjOTbL4krbCCp9slEozaN4EMppA2dFmK/f8HeohodprY6W0vOdiQ5WFgPaTI75xQ==
+
 mdn-data@2.0.14:
   version "2.0.14"
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
@@ -1465,6 +1495,11 @@ resolve-from@^4.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
   integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
 
+rgb-hex@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/rgb-hex/-/rgb-hex-3.0.0.tgz#eab0168cc1279563b18a14605315389142e2e487"
+  integrity sha512-8h7ZcwxCBDKvchSWbWngJuSCqJGQ6nDuLLg+QcRyQDbX9jMWt+PpPeXAhSla0GOooEomk3lCprUpGkMdsLjKyg==
+
 safe-buffer@^5.0.1:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
@@ -1507,6 +1542,18 @@ stable@^0.1.8:
   resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"
   integrity sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==
 
+string-to-color@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/string-to-color/-/string-to-color-2.2.2.tgz#46210bf7777dc9198dcdf997bd18ae6749cc9a73"
+  integrity sha512-XeA2goP7PNsSlz8RRn6KhYswnMf5Tl+38ajfy8n4oZJyMGC4qqKgHNHsZ/3qwvr42NRIjf9eSr721SyetDeMkA==
+  dependencies:
+    colornames "^1.1.1"
+    hex-rgb "^4.1.0"
+    lodash.padend "^4.6.1"
+    lodash.trimstart "^4.5.1"
+    lodash.words "^4.2.0"
+    rgb-hex "^3.0.0"
+
 supports-color@^5.3.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"