Bitwise cells

Author: Roman Babaev

src/Arena/index.js

@@ -1,6 +1,6 @@
-import React, { memo } from "react";
+import React from "react";
 import b_ from "b_";
-import { ArenaCell } from '../ArenaCell';
+import { PureArenaCell } from '../ArenaCell';
 import "./styles.css";
 
 const b = b_.lock("Arena");
@@ -51,7 +51,7 @@ export class Arena extends React.Component {
       width,
       height
     } = this.state;
-  
+
     return (
       <div
         className={b()}
@@ -70,7 +70,7 @@ export class Arena extends React.Component {
           >
             {cells.map((cell, i) => {
               return (
-                <ArenaCell
+                <PureArenaCell
                   cell={cell}
                   cellSize={cellSize}
                   i={i}
@@ -87,5 +87,3 @@ export class Arena extends React.Component {
     );
   }
 }
-
-export const PureArena = memo(Arena);

src/ArenaCell/index.js

@@ -1,5 +1,6 @@
-import React, { useState } from "react";
+import React, { memo, useState } from "react";
 import b_ from "b_";
+import { getCellNeighborMines, CELL_FLAGGED, CELL_OPENED, CELL_MINED } from '../core/helpers';
 import "./styles.css";
 
 const b = b_.lock("ArenaCell");
@@ -14,28 +15,35 @@ export const ArenaCell = ({
 }) => {
   const [pressed, setPressed] = useState(false);
 
-  const opened = cell.opened || (gameState === "lost" && ((cell.mined && !cell.flagged) || (!cell.mined && cell.flagged)));
+  const opened =
+    (cell & CELL_OPENED)
+    || (
+      gameState === "lost" && (
+        ((cell & CELL_MINED) && !(cell & CELL_FLAGGED))
+        || (!(cell & CELL_MINED) && (cell & CELL_FLAGGED))
+      )
+    );
 
   const content = opened
-    ? cell.mined
+    ? (cell & CELL_MINED)
       ? '🦠'
-      : cell.flagged && gameState === "lost"
+      : (cell & CELL_FLAGGED) && gameState === "lost"
         ? "❌"
-        : cell.neighborMines
-    : cell.flagged || gameState === "won"
+        : getCellNeighborMines(cell) || ''
+    : (cell & CELL_FLAGGED) || gameState === "won"
       ? "🚩"
       : null;
 
   return (
     <div
       className={b({
-        opened: opened,
+        opened: !!opened,
         closed: !opened,
         pressed: pressed && !opened
       })}
       style={{ width: cellSize, height: cellSize }}
       key={i}
-      data-neighbor-mines={cell.neighborMines}
+      data-neighbor-mines={getCellNeighborMines(cell)}
       onClick={() => onCellOpen(i)}
       onMouseDown={e => !pressed && (e.buttons & 1) && setPressed(true)}
       onMouseUp={() => pressed && setPressed(false)}
@@ -51,3 +59,5 @@ export const ArenaCell = ({
     </div>
   );
 };
+
+export const PureArenaCell = memo(ArenaCell);

src/core/helpers.js

@@ -1,5 +1,38 @@
 import { times } from "ramda";
 
+/*
+     mines  opened
+     near   | mined
+    |.....| | | flagged
+  0 0 0 0 0 0 0 0
+*/
+
+// const toIntCell = ({
+//   flagged = false,
+//   mined = false,
+//   opened = false,
+//   neighborMines = 0
+// }) => {
+//   if (neighborMines < 0 || neighborMines > 8)
+//     throw new Error('neighborMines is out of range');
+
+//   return (neighborMines << 3) + (+opened << 2) + (+mined << 1) + +flagged;
+// }
+
+export const CELL_FLAGGED = 1;
+export const CELL_MINED = 2;
+export const CELL_OPENED = 4;
+
+export const isCellMined = (cell = 0) => !!(cell & CELL_MINED);
+export const isCellOpened = (cell = 0) => !!(cell & CELL_OPENED);
+export const isCellFlagged = (cell = 0) => !!(cell & CELL_FLAGGED);
+export const getCellNeighborMines = (cell = 0) => cell >> 3;
+// export const openCell = (cell = 0) => cell | CELL_OPENED;
+// export const flagCell = (cell = 0) => cell | CELL_FLAGGED;
+// export const unflagCell = (cell = 0) => cell & (~CELL_FLAGGED);
+export const toggleCellFlag = (cell = 0) => cell ^ CELL_FLAGGED;
+
+
 export function getFreeRandomCell([width, height], flatBusyCells) {
   const sortedBusyCells = flatBusyCells
     .slice(0)
@@ -25,7 +58,7 @@ export function getFreeRandomCellXY(arena, busyCells) {
 export const getMines = (arena, minesCount, safeCell) => {
   const mines = [safeCell];
   times(() => mines.push(getFreeRandomCell(arena, mines)), minesCount);
-  return mines.slice(1);
+  return mines.slice(1).sort((a, b) => (a > b ? 1 : -1));
 };
 
 const enlargeMapValue = (map, cell) => (map[cell] = (map[cell] || 0) + 1);
@@ -80,15 +113,12 @@ export function genCells(arena, minesCount, clicked) {
   const mines = getMines(arena, minesCount, clicked);
   const heatMap = calcHeatMap(arena, mines);
 
-  return times(
-    i => ({
-      mined: mines.includes(i),
-      neighborMines: heatMap[i],
-      flagged: false,
-      opened: false
-    }),
+  const cells = times(
+    i => (heatMap[i] << 3) + (+mines.includes(i) << 1),
     arena[0] * arena[1]
   );
+
+  return [cells, mines];
 }
 
 export function arraysCompare(a, b) {

src/core/index.js

@@ -1,4 +1,13 @@
-import { arraysCompare, genCells, getNeighborCells } from './helpers';
+import {
+  arraysCompare,
+  genCells,
+  getNeighborCells,
+  CELL_FLAGGED,
+  CELL_MINED,
+  CELL_OPENED,
+  getCellNeighborMines,
+  toggleCellFlag
+} from './helpers';
 
 export class Minesweeper {
   constructor(arena, minesCount, redrawFn) {
@@ -29,14 +38,14 @@ export class Minesweeper {
 
     const cell = this.cells[i];
 
-    if (this.flaggingMode && !cell.opened) {
+    if (this.flaggingMode && !(cell & CELL_OPENED)) {
       this.flagCell(i);
       return;
     }
 
-    if (cell.flagged) return;
+    if (cell & CELL_FLAGGED) return;
 
-    if (cell.opened) this._openNeighborCells(i);
+    if (cell & CELL_OPENED) this._openNeighborCells(i);
     else this._openCell(i);
     this._render();
   };
@@ -58,17 +67,18 @@ export class Minesweeper {
     const cell = this.cells[i];
 
     if (this.openedCells === 0) {
-      this.cells = genCells(this.arena, this.minesCountTotal, i);
-      this.minedCells = this.cells.filter(({ mined }) => mined);
+      const [cells, minedCells] = genCells(this.arena, this.minesCountTotal, i);
+      this.cells = cells;
+      this.minedCells = minedCells;
       this.startTimer();
     }
-    if (cell.mined) {
+    if (cell & CELL_MINED) {
       this._explode(i);
-    } else if (!cell.opened) {
+    } else if (!(cell & CELL_OPENED)) {
       let cellsToOpen = [i];
 
       for (let x = 0; x < cellsToOpen.length; x++) {
-        if (!this.cells[cellsToOpen[x]].neighborMines) {
+        if (!getCellNeighborMines(this.cells[cellsToOpen[x]])) {
           const neighborCells = getNeighborCells(
             this.arena,
             cellsToOpen[x]
@@ -79,13 +89,16 @@ export class Minesweeper {
       }
 
       cellsToOpen.forEach(i => {
-        this.cells[i].opened = true;
+        this.cells[i] = (this.cells[i] | CELL_OPENED)
         this.openedCells++;
       });
 
-      const openedCells = this.cells.filter(({ opened }) => !opened);
+      const restCells = this.cells
+        .map((cell, i) => (cell & CELL_OPENED) ? null : i)
+        .filter(cell => cell !== null);
 
-      if (arraysCompare(this.minedCells, openedCells)) {
+      if (arraysCompare(this.minedCells, restCells)) {
+        
         this.gameState = 'won';
         this.flaggingMode = false;
         this.stopTimer();
@@ -95,16 +108,16 @@ export class Minesweeper {
 
   _openNeighborCells = i => {
     const cell = this.cells[i];
-    if (!cell.mined) {
+    if (!(cell & CELL_MINED)) {
       const neighborCells = getNeighborCells(this.arena, i);
       const flaggedNeighborsCount = neighborCells
         .map(i => this.cells[i])
-        .filter(({ flagged }) => !!flagged).length;
+        .filter(cell => !!(cell & CELL_FLAGGED)).length;
 
-      if (flaggedNeighborsCount === cell.neighborMines) {
+      if (flaggedNeighborsCount === getCellNeighborMines(cell)) {
         neighborCells
           .map(i => [i, this.cells[i]])
-          .filter(([i, cell]) => !cell.flagged)
+          .filter(([i, cell]) => !(cell & CELL_FLAGGED))
           .forEach(([i]) => this._openCell(i));
       }
     }
@@ -114,9 +127,9 @@ export class Minesweeper {
     if (this.gameState !== 'playing') return;
 
     const cell = this.cells[i];
-    if (!cell.opened) {
-      cell.flagged = !cell.flagged;
-      cell.flagged ? this.flaggedCells++ : this.flaggedCells--;
+    if (!(cell & CELL_OPENED)) {
+      this.cells[i] = toggleCellFlag(cell);
+      (this.cells[i] & CELL_FLAGGED) ? this.flaggedCells++ : this.flaggedCells--;
     }
     this._render();
   };
@@ -126,11 +139,11 @@ export class Minesweeper {
   }
 
   _countFlaggedCells() {
-    return this.cells.filter(({ flagged }) => flagged === true).length;
+    return this.cells.filter(cell => !!(cell & CELL_FLAGGED)).length;
   }
 
   _countOpenedCells() {
-    return this.cells.filter(({ opened }) => opened === true).length;
+    return this.cells.filter(cell => !!(cell & CELL_OPENED)).length;
   }
 
   getStats() {
@@ -147,12 +160,13 @@ export class Minesweeper {
   }
 
   reset = () => {
+    const [cells, minedCells] = genCells(this.arena, 0, 0);
     this.stopTimer();
     this.openedCells = 0;
     this.flaggedCells = 0;
     this.gameState = 'playing';
-    this.cells = genCells(this.arena, 0, 0);
-    this.minedCells = [];
+    this.cells = cells;
+    this.minedCells = minedCells;
     this.startTime = null;
     this.endTime = null;
     this.flaggingMode = false;