Usernames are now displayed in different colors

src/components/MessageComponent.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { getDaysOffset, isToday } from 'src/utils';
-
+  import { getDaysOffset } from 'src/utils';
 
   const props =  defineProps({
     ownMessage: Boolean,
@@ -11,6 +10,7 @@ import { getDaysOffset, isToday } from 'src/utils';
     link: Boolean,
     url: String,
     showSender: Boolean,
+    nametagColor: String,
   })
 
   const options: Intl.DateTimeFormatOptions = {
@@ -25,24 +25,24 @@ import { getDaysOffset, isToday } from 'src/utils';
   let timestampFormatted = date.toLocaleString('de-DE', options);
   const daysOffset = getDaysOffset(date, new Date());
 
-  if(daysOffset <= 1) {
-    const descriptions = ['Heute', 'Gestern'];
+  if(daysOffset <= 2) {
+    const descriptions = ['Heute', 'Gestern', 'Vorgestern'];
     timestampFormatted = descriptions[daysOffset] + ', ' + date.toLocaleTimeString('de-DE', {hour: '2-digit', minute: '2-digit'});
   }
 </script>
 
 <template>
   <div class="message" :class="{'sent' : props.ownMessage, 'received' : !props.ownMessage}">
-    <div v-if="props.showSender" style="display: flex; justify-content: space-between;">
-      <div class="text-body">{{ props.sender!.firstName }} {{ props.sender!.lastName }}</div>
-      <div class="text-body">@{{ props.sender!.username }}</div>
+    <div v-if="props.showSender && !props.ownMessage" style="display: flex; justify-content: space-between;">
+      <div class="text-body" style="font-weight: bold;" :style="{'color' : props.nametagColor }">{{ props.sender!.firstName }} {{ props.sender!.lastName }}</div>
+      <div class="text-body" style="color: #505050"><small>@{{ props.sender!.username }}</small></div>
     </div>
     <p v-if="!props.gif && !props.link" style="margin-bottom: 0;">{{props.message}}</p>
     <img v-if="props.gif" :src="props.url" alt="GIF" style="width: 100%;border-radius: 10px;" />
     <a v-if="props.link" :href="props.url" target="_blank">{{props.url}}</a>
 
     <div style="text-align: right;">
-      <small style="margin-top: 0;">{{timestampFormatted}}</small>
+      <small style="margin-top: 0;color: #505050;">{{timestampFormatted}}</small>
     </div>
   </div>
 </template>
@@ -50,7 +50,8 @@ import { getDaysOffset, isToday } from 'src/utils';
 <style scoped>
   .message {
     border-radius: 10px;
-    width: 15rem;
+    max-width: 20rem;
+    width: auto;
     padding: 7px;
     margin:3px;
     box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.15);

src/utils.ts

@@ -27,3 +27,30 @@ export const getDaysOffset = (date1: Date, date2: Date) => {
   // Berechne die Differenz in vollen Tagen und runde ab
   return Math.floor(diffInMillis / millisInDay);
 }
+
+export const getRandomHexColor2 = () => {
+  const hexChars = '0123456789ABCDEF';
+  let color = '#';
+  for (let i = 0; i < 6; i++) {
+      color += hexChars[Math.floor(Math.random() * 16)];
+  }
+  return color;
+}
+
+export const hslToHex = (h : number, s: number, l : number) => {
+  l /= 100;
+  const a = s * Math.min(l, 1 - l) / 100;
+  const f = (n : number) => {
+      const k = (n + h / 30) % 12;
+      const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+      return Math.round(255 * color).toString(16).padStart(2, '0'); // Convert to Hex and pad with zeroes if necessary
+  };
+  return `#${f(0)}${f(8)}${f(4)}`;
+}
+
+export const getRandomHexColor = () => {
+  const hue = Math.floor(Math.random() * 360); // Random hue (0-360)
+  const saturation = 100; // Full saturation
+  const lightness = 30; // Adjust this value to set the desired lightness (0-100)
+  return hslToHex(hue, saturation, lightness);
+}