feat: add Minesweeper channel (#23)

* feat:add Minesweeper channel

* refactor createTileCluster to simplify logic

* Add credit, store grid state in persistent replicant, grab event name from currentEvent object

* Add question marks at random intervals

* Change to heart eyes face on donation event

* remove tile reveal decay in favor of minimum tile reveal threshold to make tile revealing a bit more realistic

src/assets/fonts.css

@@ -67,4 +67,9 @@
 @font-face {
 	font-family: Reactor7;
 	src: url('fonts/Reactor7.ttf') format('truetype');
-}
+}
+
+@font-face {
+	font-family: minesweeper;
+	src: url('fonts/Minesweeper.woff2') format('woff2');
+}

src/channels/index.ts

@@ -15,5 +15,6 @@ import './dragon-warrior';
 import './ff-shop';
 import './template';
 import './papers-please';
+import './minesweeper';
 
 export * from './channels';

src/channels/minesweeper/Face.tsx

@@ -0,0 +1,29 @@
+import { css } from '@emotion/react';
+import { FACE_DIMENSION, FACE_ORDER } from './constants';
+
+import faces from './assets/faces.png';
+
+export type FaceType = (typeof FACE_ORDER)[number];
+
+function getFaceOffset(face: FaceType) {
+	const faceIndex = FACE_ORDER.indexOf(face);
+	return faceIndex * FACE_DIMENSION;
+}
+
+type FaceProps = {
+	face: FaceType;
+};
+
+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;
+			`}
+		/>
+	);
+}

src/channels/minesweeper/Tile.tsx

@@ -0,0 +1,25 @@
+import { css } from '@emotion/react';
+import { TILE_DIMENSION } from './constants';
+
+import tiles from './assets/tiles.png';
+
+export type TileData = {
+	id: string;
+	tileType: readonly [number, number];
+	isMine: boolean;
+};
+
+export function Tile({ tileType }: TileData) {
+	const [x, y] = tileType;
+
+	return (
+		<div
+			css={css`
+				width: 16px;
+				height: 16px;
+				background: url(${tiles}) no-repeat;
+				background-position: -${x * TILE_DIMENSION}px -${y * TILE_DIMENSION}px;
+			`}
+		/>
+	);
+}

src/channels/minesweeper/constants.ts

@@ -0,0 +1,42 @@
+export const FACE_DIMENSION = 24;
+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 TILE_DIMENSION = 16;
+
+export const TILE_MAP = {
+	HIDDEN: [0, 0],
+	ONE: [0, 1],
+	TWO: [1, 1],
+	THREE: [2, 1],
+	FOUR: [3, 1],
+	FIVE: [4, 1],
+	SIX: [5, 1],
+	SEVEN: [6, 1],
+	EIGHT: [7, 1],
+	EMPTY: [1, 0],
+	FLAGGED: [2, 0],
+	QUESTION_MARK: [3, 0],
+} as const;
+
+export const mineNumberTiles = [
+	TILE_MAP.EMPTY,
+	TILE_MAP.ONE,
+	TILE_MAP.TWO,
+	TILE_MAP.THREE,
+	TILE_MAP.FOUR,
+	TILE_MAP.FIVE,
+	TILE_MAP.SIX,
+	TILE_MAP.SEVEN,
+	TILE_MAP.EIGHT,
+];
+
+export const MIN_REVEAL_DONATION = 20;
+/** 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;