add getColorByBrightness and remove getColorByLuminance

src/Home.tsx

@@ -21,7 +21,7 @@ import { v4 } from "uuid";
 import { Menu, MenuButton, MenuItem } from "@szhsin/react-menu";
 import "@szhsin/react-menu/dist/index.css";
 import "@szhsin/react-menu/dist/transitions/slide.css";
-import { getColorByLuminance } from "./util/ColorUtil";
+import { getColorByBrightness } from "./util/ColorUtil";
 import { Theme } from "./theme/Theme";
 
 type ConnectionState = "connecting" | "error" | "connected" | "reconnecting";
@@ -200,7 +200,7 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
     }
     return <></>;
   };
-  const menuTextColor = getColorByLuminance(
+  const menuTextColor = getColorByBrightness(
     context.themeManager.theme.appBarBgColor,
     context.themeManager.theme.primary,
     context.themeManager.theme.primaryLight

src/animation/PitAnimator.ts

@@ -12,7 +12,7 @@ import { v4 } from "uuid";
 import { Context } from "../context";
 import BoardViewModelFactory from "../factory/BoardViewModelFactory";
 import { PitViewModelFactory } from "../factory/PitViewModelFactory";
-import { getColorByLuminance } from "../util/ColorUtil";
+import { getColorByBrightness } from "../util/ColorUtil";
 import BoardViewModel from "../viewmodel/BoardViewModel";
 
 const animationUpdateInterval = 300;
@@ -131,7 +131,7 @@ export default class PitAnimator {
       pitViewModel.pitColor = theme.pitGetRivalStonePitAnimateColor;
       pitViewModel.stoneCount = 0;
     }
-    pitViewModel.stoneColor = getColorByLuminance(
+    pitViewModel.stoneColor = getColorByBrightness(
       pitViewModel.pitColor,
       theme.stoneColor,
       theme.stoneLightColor

src/components/BoardView.tsx

@@ -2,7 +2,7 @@ import { Bank, MancalaGame, Pit } from "mancala.js";
 import * as React from "react";
 import { FunctionComponent, useState } from "react";
 import { Context } from "../context";
-import { getColorByLuminance } from "../util/ColorUtil";
+import { getColorByBrightness } from "../util/ColorUtil";
 import BoardViewModel from "../viewmodel/BoardViewModel";
 import PitViewModel from "../viewmodel/PitViewModel";
 
@@ -68,7 +68,7 @@ const StoreView: FunctionComponent<{
   const balls = [...range(pitViewModel.stoneCount)].map((i) => (
     <BallView color={pitViewModel.stoneColor} />
   ));
-  const textColor = getColorByLuminance(
+  const textColor = getColorByBrightness(
     pitViewModel.pitColor,
     context.themeManager.theme.primary,
     context.themeManager.theme.primaryLight

src/components/Button.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { FunctionComponent } from "react";
 import { Context } from "../context";
-import { getColorByLuminance } from "../util/ColorUtil";
+import { getColorByBrightness } from "../util/ColorUtil";
 
 const Button: FunctionComponent<{
   context: Context;
@@ -9,7 +9,7 @@ const Button: FunctionComponent<{
   onClick: () => void;
   color: string;
 }> = ({ context, text, color, onClick }) => {
-  const textColor = getColorByLuminance(
+  const textColor = getColorByBrightness(
     color,
     context.themeManager.theme.primary,
     context.themeManager.theme.primaryLight

src/components/InfoPanel.tsx

@@ -2,7 +2,7 @@ import { MancalaGame } from "mancala.js";
 import * as React from "react";
 import { FunctionComponent } from "react";
 import { Context } from "../context";
-import { getColorByLuminance } from "../util/ColorUtil";
+import { getColorByBrightness } from "../util/ColorUtil";
 
 function getInfoPanelTextByGameState(params: {
   context: Context;
@@ -86,8 +86,8 @@ const InfoPanel: FunctionComponent<{
     const isUserTurn = game?.checkIsPlayerTurn(userKey);
     const containerColor = isUserTurn
       ? context.themeManager.theme.playerTurnColor
-      : context.themeManager.theme.holeColor;
+      : context.themeManager.theme.boardColor;
-    const textColor = getColorByLuminance(
+    const textColor = getColorByBrightness(
       containerColor,
       context.themeManager.theme.primary,
       context.themeManager.theme.primaryLight

src/util/ColorUtil.ts

@@ -1,31 +1,11 @@
-//from this gist https://gist.github.com/jfsiii/5641126
 
-// from http://www.w3.org/TR/WCAG20/#relativeluminancedef
+export function getBrightness(r: number, g: number, b: number) {
-export function relativeLuminanceW3C(
+  return (r * 299 + g * 587 + b * 114) / 1000;
-  R8bit: number,
-  G8bit: number,
-  B8bit: number
-) {
-  const RsRGB = R8bit / 255;
-  const GsRGB = G8bit / 255;
-  const BsRGB = B8bit / 255;
-
-  const R =
-    RsRGB <= 0.03928 ? RsRGB / 12.92 : Math.pow((RsRGB + 0.055) / 1.055, 2.4);
-  const G =
-    GsRGB <= 0.03928 ? GsRGB / 12.92 : Math.pow((GsRGB + 0.055) / 1.055, 2.4);
-  const B =
-    BsRGB <= 0.03928 ? BsRGB / 12.92 : Math.pow((BsRGB + 0.055) / 1.055, 2.4);
-
-  // For the sRGB colorspace, the relative luminance of a color is defined as:
-  const L = 0.2126 * R + 0.7152 * G + 0.0722 * B;
-
-  return L;
 }
 
-export function relativeLuminanceW3CHexColor(hexColor: string): number {
+export function getBrightnessFromHexColor(hexColor: string): number {
   const [r, g, b] = hexToRgb(hexColor);
-  return relativeLuminanceW3C(r, g, b);
+  return getBrightness(r, g, b);
 }
 
 // from https://www.codegrepper.com/code-examples/javascript/javascript+convert+color+string+to+rgb
@@ -42,10 +22,10 @@ export function hexToRgb(
   //returns [23, 14, 45] -> reformat if needed
 }
 
-export function getColorByLuminance(
+export function getColorByBrightness(
   color: string,
   lightColor: string,
   darkColor: string
 ): string {
-  return relativeLuminanceW3CHexColor(color) < 0.5 ? darkColor : lightColor;
+  return getBrightnessFromHexColor(color) < 125 ? darkColor : lightColor;
 }