jhalitaksoy/mancala
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add getColorByBrightness and remove getColorByLuminance

Browse Source
This commit is contained in:
Halit Aksoy 2022-07-13 15:18:13 +03:00
parent 5bdc09a81b
commit fb6045c229
6 changed files with 17 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/Home.tsx
View File

@ -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

4
src/animation/PitAnimator.ts
View File

@ -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

4
src/components/BoardView.tsx
View File

@ -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

4
src/components/Button.tsx
View File

@ -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

6
src/components/InfoPanel.tsx
View File

@ -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;
const textColor = getColorByLuminance(
: context.themeManager.theme.boardColor;
const textColor = getColorByBrightness(
containerColor,
context.themeManager.theme.primary,
context.themeManager.theme.primaryLight

32
src/util/ColorUtil.ts
View File

@ -1,31 +1,11 @@
//from this gist https://gist.github.com/jfsiii/5641126
// from http://www.w3.org/TR/WCAG20/#relativeluminancedef
export function relativeLuminanceW3C(
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 getBrightness(r: number, g: number, b: number) {
return (r * 299 + g * 587 + b * 114) / 1000;
}
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;
}