feat: increase element sizing and color contrast for better accessibi…

…lity
GamesDoneQuick · Jan 21, 2024 · 4960459 · 4960459
1 parent 461f46a
commit 4960459
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 17 deletions.
diff --git a/src/channels/minesweeper/Face.tsx b/src/channels/minesweeper/Face.tsx
@@ -5,6 +5,9 @@ import type { FaceType } from './types';
 
 import faces from './assets/faces.png';
 
+const SPRITES_PER_ROW = 5;
+const SPRITESHEET_ROWS = 1;
+
 function getFaceOffset(face: FaceType) {
 	const faceIndex = FACE_ORDER.indexOf(face);
 	return faceIndex * FACE_DIMENSION;
@@ -18,11 +21,11 @@ export function Face({ face }: FaceProps) {
 	return (
 		<div
 			css={css`
-				transform: scale(1.25);
 				width: ${FACE_DIMENSION}px;
 				height: ${FACE_DIMENSION}px;
 				background: url(${faces}) no-repeat;
 				background-position: -${getFaceOffset(face)}px;
+				background-size: ${FACE_DIMENSION * SPRITES_PER_ROW}px ${FACE_DIMENSION * SPRITESHEET_ROWS}px;
 			`}
 		/>
 	);

diff --git a/src/channels/minesweeper/Tile.tsx b/src/channels/minesweeper/Tile.tsx
@@ -5,16 +5,20 @@ import type { TileData } from './types';
 
 import tiles from './assets/tiles.png';
 
+const SPRITES_PER_ROW = 8;
+const SPRITESHEET_ROWS = 2;
+
 export function Tile({ tileType }: TileData) {
 	const [x, y] = tileType;
 
 	return (
 		<div
 			css={css`
-				width: 16px;
-				height: 16px;
+				width: ${TILE_DIMENSION}px;
+				height: ${TILE_DIMENSION}px;
 				background: url(${tiles}) no-repeat;
 				background-position: -${x * TILE_DIMENSION}px -${y * TILE_DIMENSION}px;
+				background-size: ${TILE_DIMENSION * SPRITES_PER_ROW}px ${TILE_DIMENSION * SPRITESHEET_ROWS}px;
 			`}
 		/>
 	);

diff --git a/src/channels/minesweeper/constants.ts b/src/channels/minesweeper/constants.ts
@@ -1,12 +1,14 @@
-export const FACE_DIMENSION = 24;
+import type { TileData } from './types';
+
+export const FACE_DIMENSION = 36;
 export const FACE_ORDER = ['smile', 'smile_pressed', 'open_mouth', 'sunglasses', 'heart_eyes'] as const;
 
 export const MINE_CHANCE = 0.17;
 
 export const GRID_ROWS = 16;
-export const GRID_COLUMNS = 67;
+export const GRID_COLUMNS = 66;
 
-export const TILE_DIMENSION = 16;
+export const TILE_DIMENSION = 16.24;
 
 export const TILE_MAP = {
 	HIDDEN: [0, 0],
@@ -21,7 +23,7 @@ export const TILE_MAP = {
 	EMPTY: [1, 0],
 	FLAGGED: [2, 0],
 	QUESTION_MARK: [3, 0],
-} as const;
+} satisfies Record<string, TileData['tileType']>;
 
 export const mineNumberTiles = [
 	TILE_MAP.EMPTY,
@@ -35,8 +37,8 @@ export const mineNumberTiles = [
 	TILE_MAP.EIGHT,
 ];
 
-export const MIN_REVEAL_DONATION = 20;
+export const MIN_REVEAL_DONATION = 25;
 /** maximum donation amount for determining reveal threshold */
 export const REVEAL_DONATION_CAP = 500;
 export const MIN_REVEALED_TILES = 1;
-export const MAX_REVEALED_TILES = 25;
+export const MAX_REVEALED_TILES = 15;
diff --git a/src/channels/minesweeper/index.tsx b/src/channels/minesweeper/index.tsx
@@ -177,8 +177,8 @@ export function Minesweeper(props: ChannelProps) {
 	const flagTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
 	useEffect(() => {
 		function flagTiles(timeoutMS: number) {
-			// Add a question mark every 5-10 seconds
-			const newTimeout = random(5_000, 10_000);
+			// Add a question mark every 10-20 seconds
+			const newTimeout = random(10_000, 20_000);
 			flagTimeoutRef.current = setTimeout(() => {
 				dispatch({ type: actions.QUESTION_TILE });
 				flagTiles(newTimeout);
@@ -243,11 +243,11 @@ const Container = styled.div`
 const Wrapper = styled.div`
 	position: relative;
 	display: flex;
-	gap: 5px;
+	gap: 4px;
 	flex-direction: column;
 	height: 100%;
 	background-color: #bdbdbd;
-	padding: 5px;
+	padding: 4px 5px;
 	border-left: 3px solid #fff;
 	border-top: 3px solid #fff;
 `;
@@ -256,7 +256,7 @@ const Header = styled.header`
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	padding: 0 5px;
+	padding: 0 4px;
 	height: 50px;
 	border: 2px solid;
 	border-color: #7d7d7d #fff #fff #7d7d7d;
@@ -279,11 +279,13 @@ const LCDContainer = styled.div`
 
 const LCDText = styled.div`
 	font-family: minesweeper;
-	font-size: 32px;
+	font-size: 38px;
 	text-transform: uppercase;
-	color: #ea3323;
+	color: hsl(4.82deg 82.57% 58%);
 	background: #000;
 	border: 1px solid;
 	border-color: #808080 #fff #fff #808080;
-	padding: 1px;
+	padding: 4px;
+	line-height: 0.8;
+	letter-spacing: 0.025rem;
 `;