merge: prepare for release v2.4.0

.github/workflows/deploy.yml

@@ -24,7 +24,7 @@ jobs:
           yarn run build --prefix-paths
           yarn run check
       - name: Deploy
-        uses: JamesIves/github-pages-deploy-action@v4.4.1
+        uses: JamesIves/github-pages-deploy-action@v4.4.2
         with:
           branch: gh-pages
           folder: public

.github/workflows/gatsby.yml

@@ -45,7 +45,7 @@ jobs:
         run: |
           yarn install --immutable
       - name: Coverage
-        uses: paambaati/codeclimate-action@v3.2.0
+        uses: paambaati/codeclimate-action@v4.0.0
         env:
           CC_TEST_REPORTER_ID: ${{ secrets.CC_TEST_REPORTER_ID }}
         with:

.vscode/settings.json

@@ -1,5 +1,6 @@
 {
   "cSpell.words": [
+    "autoplay",
     "bindgen",
     "blks",
     "blockchanged",

.yarn/sdks/eslint/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint",
-  "version": "8.41.0-sdk",
+  "version": "8.44.0-sdk",
   "main": "./lib/api.js",
   "type": "commonjs"
 }

.yarn/sdks/prettier/index.js

@@ -11,10 +11,10 @@ const absRequire = createRequire(absPnpApiPath);
 
 if (existsSync(absPnpApiPath)) {
   if (!process.versions.pnp) {
-    // Setup the environment to be able to require prettier/index.js
+    // Setup the environment to be able to require prettier
     require(absPnpApiPath).setup();
   }
 }
 
-// Defer to the real prettier/index.js your application uses
-module.exports = absRequire(`prettier/index.js`);
+// Defer to the real prettier your application uses
+module.exports = absRequire(`prettier`);

.yarn/sdks/typescript/package.json

@@ -1,6 +1,6 @@
 {
   "name": "typescript",
-  "version": "5.0.4-sdk",
+  "version": "5.1.6-sdk",
   "main": "./lib/typescript.js",
   "type": "commonjs"
 }

.yarnrc.yml

@@ -6,4 +6,4 @@ plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
     spec: "https://raw.fastgit.org/yarnpkg/berry/@yarnpkg/cli/3.1.1/packages/plugin-interactive-tools/bin/%40yarnpkg/plugin-interactive-tools.js"
 
-yarnPath: .yarn/releases/yarn-3.5.0.cjs
+yarnPath: .yarn/releases/yarn-3.6.1.cjs

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,8 +79,9 @@ Periotris.js 支持多种自定义方式，如：
 
 1. 颜色主题文件是一个 JSON 文件，以一个对象作为根元素。
 2. 颜色主题对象应包含以下属性：
+   - `id`：一个字符串，存储该主题的唯一标识符。
    - `rules`：一个一维数组。每个元素表示一条颜色渲染规则。每个元素为一个对象，包含以下属性：
-     - `atomicNumberRange`：一个对象，表示该规则所适用的元素范围，从`from`到`to`，且包含两个端点。
+     - `range`：一个对象，表示该规则所适用的元素范围，从`from`到`to`，且包含两个端点。
      - `color`：字符串，表示该规则渲染的颜色。应为一个合法的 CSS 颜色。
 
 参阅[DefaultColorScheme.json](src/json/DefaultColorScheme.json)以获得样例。

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,8 +85,9 @@ 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:
-     - `atomicNumberRange`: An object indicating the range of elements the rule applies to from `from` to `to` (both inclusive).
+     - `range`: An object indicating the range of elements the rule applies to from `from` to `to` (both inclusive).
      - `color`: A valid CSS color.
 
 For an example file, which is also the default color theme in the game, see [DefaultColorScheme.json](src/json/DefaultColorScheme.json).

gatsby-browser.tsx

@@ -20,19 +20,19 @@ import "./RootLayoutStyles.css"
 
 import React from "react"
 
-import { CommonLayout, CommonProviders } from "./src/components"
+import { CommonPageLayout, CommonRootLayout } from "./src/components"
 
 import type { GatsbyBrowser } from "gatsby"
 
 export const wrapPageElement: GatsbyBrowser["wrapPageElement"] = ({
   element,
   props,
 }) => {
-  return <CommonLayout {...props}>{element}</CommonLayout>
+  return <CommonPageLayout {...props}>{element}</CommonPageLayout>
 }
 
 export const wrapRootElement: GatsbyBrowser["wrapRootElement"] = ({
   element,
 }) => {
-  return <CommonProviders>{element}</CommonProviders>
+  return <CommonRootLayout>{element}</CommonRootLayout>
 }

gatsby-config.ts

@@ -81,6 +81,10 @@ const config: GatsbyConfig = {
         id: PageID.PAGE_GAME,
         path: "/game",
       },
+      {
+        id: PageID.PAGE_AUTOPLAY,
+        path: "/autoplay",
+      },
       {
         id: PageID.PAGE_SETTINGS,
         path: "/settings",

gatsby-ssr.tsx

@@ -20,19 +20,19 @@ import "./RootLayoutStyles.css"
 
 import React from "react"
 
-import { CommonLayout, CommonProviders } from "./src/components"
+import { CommonPageLayout, CommonRootLayout } from "./src/components"
 
 import type { GatsbyBrowser } from "gatsby"
 
 export const wrapPageElement: GatsbyBrowser["wrapPageElement"] = ({
   element,
   props,
 }) => {
-  return <CommonLayout {...props}>{element}</CommonLayout>
+  return <CommonPageLayout {...props}>{element}</CommonPageLayout>
 }
 
 export const wrapRootElement: GatsbyBrowser["wrapRootElement"] = ({
   element,
 }) => {
-  return <CommonProviders>{element}</CommonProviders>
+  return <CommonRootLayout>{element}</CommonRootLayout>
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "periotrisjs",
-  "version": "2.3.2",
+  "version": "2.4.0",
   "description": "Get familiar with the Periodic Table of Elements in a fun way, directly in your browsers.",
   "scripts": {
     "clean": "yarn run -B rimraf build coverage public && yarn run -B gatsby clean",
@@ -25,68 +25,69 @@
   },
   "homepage": "https://github.com/CSharperMantle/periotrisjs#readme",
   "dependencies": {
-    "@emotion/react": "^11.11.0",
+    "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@fontsource-variable/roboto-flex": "^5.0.0",
-    "@mui/icons-material": "^5.11.16",
-    "@mui/material": "^5.13.2",
-    "@mui/system": "^5.13.2",
+    "@fontsource-variable/roboto-flex": "^5.0.5",
+    "@mui/icons-material": "^5.13.7",
+    "@mui/material": "^5.13.7",
+    "@mui/system": "^5.13.7",
     "@reduxjs/toolkit": "^1.9.5",
     "@use-gesture/react": "^10.2.27",
     "ajv": "^8.12.0",
-    "canvas-confetti": "^1.6.0",
+    "core-js": "^3.31.1",
     "events": "^3.3.0",
     "file-saver": "^2.0.5",
-    "gatsby": "^5.10.0",
-    "gatsby-plugin-manifest": "^5.10.0",
-    "gatsby-plugin-offline": "^6.10.0",
+    "gatsby": "^5.11.0",
+    "gatsby-plugin-manifest": "^5.11.0",
+    "gatsby-plugin-offline": "^6.11.0",
     "gatsby-plugin-react-i18next": "^3.0.1",
-    "gatsby-plugin-typescript": "^5.10.0",
-    "gatsby-source-filesystem": "^5.10.0",
+    "gatsby-plugin-typescript": "^5.11.0",
+    "gatsby-source-filesystem": "^5.11.0",
     "gatsby-source-local-git": "^1.3.0",
     "gatsby-source-package": "^1.0.1",
-    "i18next": "^22.5.0",
+    "i18next": "^23.2.8",
     "is-in-browser": "^2.0.0",
     "lodash": "^4.17.21",
     "notistack": "^3.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-i18next": "^12.3.1",
-    "react-redux": "^8.0.5",
+    "react-i18next": "^13.0.1",
+    "react-redux": "^8.1.1",
     "toposort": "^2.0.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.21.8",
-    "@babel/preset-react": "^7.18.6",
+    "@babel/core": "^7.22.8",
+    "@babel/preset-react": "^7.22.5",
     "@testing-library/react": "^14.0.0",
     "@types/canvas-confetti": "^1.6.0",
     "@types/events": "^3.0.0",
     "@types/file-saver": "^2.0.5",
-    "@types/jest": "^29.5.1",
+    "@types/jest": "^29.5.2",
     "@types/jsdom": "^21.1.1",
-    "@types/lodash": "^4.14.194",
-    "@types/react": "^18.2.6",
-    "@types/react-dom": "^18.2.4",
+    "@types/lodash": "^4.14.195",
+    "@types/react": "^18.2.14",
+    "@types/react-dom": "^18.2.6",
     "@types/react-redux": "^7.1.25",
     "@types/toposort": "^2.0.3",
     "@types/webpack-bundle-analyzer": "^4.6.0",
-    "@typescript-eslint/eslint-plugin": "^5.59.7",
-    "@typescript-eslint/parser": "^5.59.7",
+    "@typescript-eslint/eslint-plugin": "^5.61.0",
+    "@typescript-eslint/parser": "^5.61.0",
+    "@yarnpkg/sdks": "^3.0.0-rc.48",
     "ajv-json-loader": "^0.2.0",
-    "babel-jest": "^29.5.0",
-    "babel-preset-gatsby": "^3.10.0",
-    "eslint": "^8.41.0",
+    "babel-jest": "^29.6.1",
+    "babel-preset-gatsby": "^3.11.0",
+    "eslint": "^8.44.0",
     "eslint-plugin-react": "^7.32.2",
-    "gatsby-cli": "5.10.0",
+    "gatsby-cli": "5.11.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.5.0",
-    "jest-environment-jsdom": "^29.5.0",
-    "jsdom": "^22.0.0",
+    "jest": "^29.6.1",
+    "jest-environment-jsdom": "^29.6.1",
+    "jsdom": "^22.1.0",
     "prettier": "^2.8.8",
     "rimraf": "^5.0.1",
-    "ts-jest": "^29.1.0",
-    "typescript": "~5.0.4",
-    "webpack-bundle-analyzer": "^4.8.0"
+    "ts-jest": "^29.1.1",
+    "typescript": "~5.1.6",
+    "webpack-bundle-analyzer": "^4.9.0"
   },
-  "packageManager": "yarn@3.5.0"
+  "packageManager": "yarn@3.6.1"
 }

src/PageID.ts

@@ -1,6 +1,24 @@
+/*
+ * Copyright (C) 2021-present Rong "Mantle" Bao
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see https://www.gnu.org/licenses/ .
+ */
+
 export const enum PageID {
   PAGE_HOME,
   PAGE_GAME,
+  PAGE_AUTOPLAY,
   PAGE_SETTINGS,
   PAGE_ABOUT,
 }

src/common/AutoplaySentinel.ts

@@ -0,0 +1,18 @@
+/*
+ * Copyright (C) 2021-present Rong "Mantle" Bao
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see https://www.gnu.org/licenses/ .
+ */
+
+export const AutoplaySentinel = "!AUTOPLAY_SENTINEL!"

src/common/PeriotrisConst.ts

@@ -15,9 +15,15 @@
  * along with this program.  If not, see https://www.gnu.org/licenses/ .
  */
 
+export const DefaultShowGridLines = true
 export const DefaultGameUpdateIntervalMilliseconds = 1000
 export const StopwatchUpdateIntervalMilliseconds = 500
 export const HistoryLocalStorageKey = "history"
 export const SettingsLocalStorageKey = "settings"
-export const DefaultBorderThickness = 1
+export const DefaultGridLineThickness = 1
 export const DefaultConcurrency = 0
+export const DefaultSwipeThreshold = 500
+export const DefaultSwipeDeltaX = 15
+export const DefaultSwipeDeltaY = 15
+export const DefaultPressThreshold = 300
+export const DefaultColorEnabled = true

src/common/__tests__/formatDuration.test.ts

@@ -15,6 +15,7 @@
  * along with this program.  If not, see https://www.gnu.org/licenses/ .
  */
 
+import { AutoplaySentinel } from "../AutoplaySentinel"
 import { formatDuration } from "../formatDuration"
 
 describe("formatDuration", () => {
@@ -63,4 +64,8 @@ describe("formatDuration", () => {
       expect(formatDuration(datum.input)).toEqual(datum.expected)
     }
   })
+
+  it("should handle sentinel values properly", () => {
+    expect(formatDuration(AutoplaySentinel)).toEqual("AUTOPLAY")
+  })
 })