From 7b7bc26271335b5107830e54059fc31eb12b2a9e Mon Sep 17 00:00:00 2001
From: sanborn <amadeus.hilland@gmail.com>
Date: Sun, 25 Dec 2022 14:58:21 -0500
Subject: [PATCH] Add random avatar colors

---
 components/avatar.module.css |  6 +++++-
 components/avatar.tsx        | 11 +++++++++--
 pages/[roomId].tsx           |  4 ++++
 src/store.ts                 |  9 +++++++++
 4 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/components/avatar.module.css b/components/avatar.module.css
index d662067..7e45176 100644
--- a/components/avatar.module.css
+++ b/components/avatar.module.css
@@ -1,11 +1,13 @@
 .avatar {
   --opacity: 50%;
   --size: var(--size-8);
+  --background-color: var(--green-5-hsl);
+  --background: hsl(var(--background-color) / var(--opacity));
 
   width: var(--size);
   height: var(--size);
   border-radius: var(--radius-round);
-  background: hsl(var(--green-5-hsl) / var(--opacity));
+  background: var(--background);
   box-shadow: var(--shadow-1);
   display: flex;
   align-items: center;
@@ -14,6 +16,8 @@
   font-size: var(--font-size-4);
 
   transition: background 0.5s, transform 0.5s, box-shadow 0.5s;
+
+  color: white;
 }
 
 .avatar[data-is-rolling="true"] {
diff --git a/components/avatar.tsx b/components/avatar.tsx
index 501dc7c..b0ef3ed 100644
--- a/components/avatar.tsx
+++ b/components/avatar.tsx
@@ -3,12 +3,19 @@ import styles from "./avatar.module.css";
 export type AvatarProps = {
   name: string;
   isRolling: boolean;
+  color: string;
 };
 
-export function Avatar({ name, isRolling }: AvatarProps) {
+export function Avatar({ name, isRolling, color }: AvatarProps) {
   return (
     <div className={styles.avatarWrapper} title={name}>
-      <div className={styles.avatar} data-is-rolling={isRolling}>
+      <div
+        className={styles.avatar}
+        style={{
+          ["--background-color" as any]: color,
+        }}
+        data-is-rolling={isRolling}
+      >
         {name.charAt(0).toUpperCase()}
       </div>
     </div>
diff --git a/pages/[roomId].tsx b/pages/[roomId].tsx
index cfba096..074c2bf 100644
--- a/pages/[roomId].tsx
+++ b/pages/[roomId].tsx
@@ -5,6 +5,7 @@ import avatarStyles from "../components/avatar.module.css";
 import globalStyles from "../styles/global.module.css";
 import { Die } from "../components/die";
 import {
+  getRandomHsl,
   getRoll,
   getRollerName,
   RoomProvider,
@@ -74,6 +75,7 @@ function Main() {
               <Avatar
                 name={self.presence.name}
                 isRolling={self.presence.id === roller}
+                color={self.presence.avatarColor}
               ></Avatar>
             </li>
             {others.map((other) => {
@@ -82,6 +84,7 @@ function Main() {
                   <Avatar
                     name={other.presence.name}
                     isRolling={other.presence.id === roller}
+                    color={other.presence.avatarColor}
                   ></Avatar>
                 </li>
               );
@@ -174,6 +177,7 @@ export default function Home(props: HomeProps) {
         initialPresence={{
           name: props.name,
           id: Math.floor(Math.random() * 1000),
+          avatarColor: getRandomHsl(),
         }}
         initialStorage={{
           rolls: new LiveList([
diff --git a/src/store.ts b/src/store.ts
index e141d5b..8dad637 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -14,6 +14,7 @@ const client = createClient({
 export type Presence = {
   name: string;
   id: number;
+  avatarColor: string;
 };
 
 export type Storage = {
@@ -21,6 +22,10 @@ export type Storage = {
   roller: number | null;
 };
 
+export function rand(max: number, min: number) {
+  return Math.floor(Math.random() * (max - min)) + min;
+}
+
 export function getRandom(max = 24, min = 1) {
   return (Math.floor(Math.random() * (max - min)) + min) * 90;
 }
@@ -31,6 +36,10 @@ export function getRoll(): Roll {
   return [getRandom(), getRandom()];
 }
 
+export function getRandomHsl() {
+  return `${rand(365, 0)} ${rand(100, 0)}% ${rand(100, 0)}%`;
+}
+
 export function getRollerName(
   id: number,
   self: User<Presence, BaseUserMeta>,