[16] Fix the animation issue when domain with action cost

1. Show the cost label in the page from visual stage data
2. Add css for action cost label changed
3. Slow down the action when cost increasing

Resolves #16

	modified:   Dockerfile // Change the node version
	modified:   package.json
	modified:   src/pages/PageFour/dataUtils.js // Add variables to represent the max cost and all cost
	modified:   src/pages/PageFour/index.js
	modified:   src/pages/PageFour/index.less
	modified:   src/pages/PageFour/screenComponents.jsx

Author: Lin064

.gitmessage

@@ -0,0 +1,40 @@
+[1234] Fix issue of bad commit messages
+
+#
+# Please provide your commit's subject above this line.
+#
+# Guidelines
+#
+#   1. Separate subject from body with a blank line
+#   2. Limit the subject line to 50 characters
+#   3. Add [ISSUE NUMBER] at the beginning of the subject line, e.g. [1234].
+#   3. Capitalize the first letter subject line
+#   4. Do not end the subject line with a period
+#   5. Use the imperative mood in the subject line
+#   6. Wrap the body at 72 characters
+#   7. Use the body to explain what and why vs. how
+#
+# Description of your commit should go below. Make sure to leave
+# one empty line after your description.
+#
+
+
+#
+# Finally, please add a reference to other issues or pull
+# request on GitHub here below.
+#
+# Example
+# -------
+#
+#   Resolves #1
+#   Resolves #2
+#   Closes #3
+#
+# Accepted keywords are:
+#
+#   * Resolves
+#   * Closes
+#   * See also
+#
+
+Resolves #1234

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:14.18-alpine AS build
+FROM node:18.12-alpine AS build
 
 WORKDIR /app
 COPY package.json package-lock.json ./

package.json

@@ -80,8 +80,8 @@
     "workbox-webpack-plugin": "5.1.4"
   },
   "scripts": {
-    "start": "node scripts/start.js",
-    "build": "node scripts/build.js",
+    "start": "NODE_OPTIONS=--openssl-legacy-provider node scripts/start.js ",
+    "build": "NODE_OPTIONS=--openssl-legacy-provider node scripts/build.js",
     "test": "jest"
   },
   "eslintConfig": {

src/pages/PageFour/dataUtils.js

@@ -41,7 +41,7 @@ export function getSubGoal() {
                 }
             }
             map.set(currentStep, vidualSteps)
-         }
+        }
     })
     return map;
 }
@@ -78,5 +78,22 @@ export const subGoal = getSubGoal();
 export const stepSubgoalMap = getStepSubgoalMap();
 export const vfg = contentObject;
 export const textContent = content
+
+const visualStages = contentObject["visualStages"]?contentObject["visualStages"]: []
+
+export const stepCosts = Array.from(
+  new Set(
+    visualStages.map((item,index, arr)=>{
+        if (index === 0) {
+            return 0;
+        } else {
+            return (item.cost - arr[index - 1].cost)? (item.cost - arr[index - 1].cost):0 ;
+        }
+    })
+  )
+)
+
+export const maxStepCost = [...stepCosts].sort((a, b) => a - b)[stepCosts.length - 1];
+
 //export const initialPos = getInitialBlocksPos();
 //export default null;