feat(avatar): add custom avatar color by player name

packages/unoenty/src/components/Avatar/index.tsx

@@ -1,9 +1,12 @@
-import React from "react"
+import React, { useCallback } from "react"
 import { Container, Typography } from "@material-ui/core"
 import { fade } from "@material-ui/core/styles/colorManipulator"
 
+import { stringToColor } from "@/utils/color"
 import Device from "@/utils/device"
 
+import theme from "@/styles/theme"
+
 import useStyles from "@/components/Avatar/styles"
 
 type AvatarProps = {
@@ -17,15 +20,15 @@ const Avatar: React.FC<AvatarProps> = (props) => {
 
 	const classes = useStyles()
 
-	const getNameMainLetter = () => {
+	const getNameMainLetter = useCallback(() => {
 		const firstLetter = name[0]
 
 		const upperCasedFirstLetter = firstLetter.toUpperCase()
 
 		return upperCasedFirstLetter
-	}
+	}, [name])
 
-	const getFontSize = () => {
+	const getFontSize = useCallback(() => {
 		let fontSize: number | undefined
 
 		if (size === "large") {
@@ -37,20 +40,11 @@ const Avatar: React.FC<AvatarProps> = (props) => {
 		}
 
 		return fontSize
-	}
-
-	const getAvatarColor = () => {
-		const colors = [
-			"#E0CE2D",
-			"#35EA88",
-			"#35EAC9",
-			"#9E3EFF",
-		]
+	}, [size])
 
-		return colors[name.length % colors.length]
-	}
+	const getAvatarColor = useCallback(() => stringToColor(name), [name])
 
-	const getAvatarSize = () => {
+	const getAvatarSize = useCallback(() => {
 		let avatarSize: number | undefined
 
 		if (size === "large") {
@@ -62,7 +56,7 @@ const Avatar: React.FC<AvatarProps> = (props) => {
 		}
 
 		return avatarSize
-	}
+	}, [size])
 
 	return (
 		<Container
@@ -88,6 +82,7 @@ const Avatar: React.FC<AvatarProps> = (props) => {
 					className={classes.avatarTypography}
 					style={{
 						fontSize: getFontSize(),
+						color: theme.palette.getContrastText(getAvatarColor())
 					}}
 				>
 					{getNameMainLetter()}

packages/unoenty/src/components/Divider/index.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 
-import theme from "../../styles/theme"
+import theme from "@/styles/theme"
 
 type DividerProps = {
 	size: number

packages/unoenty/src/utils/color.ts

@@ -0,0 +1,19 @@
+export const stringToColor = (string) => {
+  let hash = 0
+  let i
+
+  /* eslint-disable no-bitwise */
+  for (i = 0; i < string.length; i += 1) {
+    hash = string.charCodeAt(i) + ((hash << 5) - hash)
+  }
+
+  let color = '#';
+
+  for (i = 0; i < 3; i += 1) {
+    const value = (hash >> (i * 8)) & 0xff;
+    color += `00${value.toString(16)}`.substr(-2)
+  }
+  /* eslint-enable no-bitwise */
+
+  return color
+}