Add random avatar colors

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"] {

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>

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([

src/store.ts

@@ -14,13 +14,18 @@ const client = createClient({
 export type Presence = {
   name: string;
   id: number;
+  avatarColor: string;
 };
 
 export type Storage = {
   rolls: LiveList<Roll>;
   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>,