feat: add computed free block count

README-zh.md

@@ -61,10 +61,10 @@ Periotris.js 支持多种自定义方式，如：
 
 1. 游戏地图文件是一个 JSON 文件，以一个对象作为根元素。
 2. 游戏地图对象应当包含以下属性：
+   - `id`：一个字符串，存储该地图的唯一标识符。
    - `map`：一个二维数组，以行优先形式存储地图的所有方格，包括可以填充的和无法填充的。每个元素为包含以下属性的对象：
      - `atomicNumber`：一个整数，表示该方格所代表的元素。
-     - `filledBy`：一个整数，表示该方格是否被填充，`7`代表可被填充，`8`代表不可被填充。
-   - `totalAvailableBlocksCount`：一个整数，表示地图中可以填充的方格数量(即所有`filledBy`属性为`7`的方格数量)。
+     - `filled`：一个布尔值，表示该方格是否被填充。
    - `playAreaSize`：具有两个属性的对象，描述地图的全部可见区域的尺寸：
      - `width`：一个整数，宽度。
      - `height`：一个整数，高度。
@@ -79,6 +79,7 @@ Periotris.js 支持多种自定义方式，如：
 
 1. 颜色主题文件是一个 JSON 文件，以一个对象作为根元素。
 2. 颜色主题对象应包含以下属性：
+   - `id`：一个字符串，存储该主题的唯一标识符。
    - `rules`：一个一维数组。每个元素表示一条颜色渲染规则。每个元素为一个对象，包含以下属性：
      - `range`：一个对象，表示该规则所适用的元素范围，从`from`到`to`，且包含两个端点。
      - `color`：字符串，表示该规则渲染的颜色。应为一个合法的 CSS 颜色。

README.md

@@ -65,10 +65,10 @@ A game map is represented in a text file in the format named [JavaScript Object
 
 1. The map file (designated as "map") is a JSON file containing an object as its root (designated as "map object").
 2. The map object should contain following properties:
+   - `id`: A string used as the unique identifier for this map.
    - `map`: A row-major 2D array containing all blocks. Each block is represented by an object with these properties:
      - `atomicNumber`: An integer indicating the element the cell represents
-     - `filledBy`: An integer. `7` for a free block, `8` for an unavailable block.
-   - `totalAvailableBlocksCount`: An integer representing the total number of blocks that can be filled in the map, that is, the number of blocks where `filledBy` equals `7`.
+     - `filled`: A boolean value indicating whether the cell is filled.
    - `playAreaSize`: An object It representing the visible size of the map with two properties:
      - `width`: An integer.
      - `height`: An integer.
@@ -85,6 +85,7 @@ A color theme file is also represented in JSON. You will need to write your own
 
 1. The color theme file (designated as "color theme") is a JSON file containing an object as its root (designated as "color theme object").
 2. The color theme object should contain the following properties:
+   - `id`: A string used as the unique identifier for this theme.
    - `rules`: An array of objects. Each object represents a rule. Each rule is represented by an object with these properties:
      - `range`: An object indicating the range of elements the rule applies to from `from` to `to` (both inclusive).
      - `color`: A valid CSS color.

src/customization/index.ts

@@ -16,9 +16,10 @@
  */
 
 import { CustomizationFacade, customizationFacade } from "./CustomizationFacade"
+import { countFreeBlocks } from "./map"
 
-import type { IMapCell, TMapRow, IMap } from "./map"
 import type { IColorScheme } from "./color_scheme"
+import type { IMap, IMapCell, TMapRow } from "./map"
 
+export { CustomizationFacade, customizationFacade, countFreeBlocks }
 export type { IMapCell, TMapRow, IMap, IColorScheme }
-export { CustomizationFacade, customizationFacade }

src/customization/map/IMap.ts

@@ -15,17 +15,28 @@
  * along with this program.  If not, see https://www.gnu.org/licenses/ .
  */
 
+import { memoize } from "lodash"
+
 import type { ISize } from "../../common"
 
 export interface IMapCell {
   readonly atomicNumber: number
-  readonly filledBy: number
+  readonly filled: boolean
 }
 
 export type TMapRow = IMapCell[]
 
 export interface IMap {
+  readonly id: string
   readonly map: TMapRow[]
-  readonly totalAvailableBlocksCount: number
   readonly playAreaSize: ISize
 }
+
+export const countFreeBlocks = memoize(
+  (map: IMap): number =>
+    map.map
+      .flat()
+      .map((c) => !c.filled)
+      .reduce((acc, current) => (current ? acc + 1 : acc), 0),
+  (map) => map.id
+)

src/customization/map/index.ts

@@ -15,6 +15,10 @@
  * along with this program.  If not, see https://www.gnu.org/licenses/ .
  */
 
+import { countFreeBlocks } from "./IMap"
+
 import type { IMapCell, TMapRow, IMap } from "./IMap"
 
+export { countFreeBlocks }
+
 export type { IMapCell, TMapRow, IMap }

src/json/DefaultColorScheme.json

@@ -1,4 +1,5 @@
 {
+  "id": "http://csharpermantle.github.io/periotris/default/DefaultColorScheme.json/0",
   "rules": [
     {
       "range": {