[14] Add label display of animation

.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

src/pages/PageFour/screenComponents.jsx

@@ -56,6 +56,9 @@ export default function Screen({ canvasWidth, canvasHeight, sprites, vfg }) {
               ((sprite.maxX - sprite.minX) * canvasHeight) / 2;
             y = canvasHeight - sprite.minY * canvasHeight;
           }
+          const spriteWidth = (sprite.maxX - sprite.minX) * canvasHeight;
+          const spriteHeight = (sprite.maxY - sprite.minY) * canvasHeight;
+          const centerY = y + spriteHeight / 2;
           // Draw the sprite with a text
           return (
             <React.Fragment key={i}>
@@ -65,7 +68,7 @@ export default function Screen({ canvasWidth, canvasHeight, sprites, vfg }) {
                   "data:image/png;base64," +
                   vfg.imageTable.m_values[
                     vfg.imageTable.m_keys.indexOf(sprite.prefabimage)
-                  ]
+                    ]
                 }
                 name={sprite.name}
                 anchor={anchor}
@@ -77,22 +80,40 @@ export default function Screen({ canvasWidth, canvasHeight, sprites, vfg }) {
                 tint={
                   "color" in sprite
                     ? utils.rgb2hex([
-                        sprite.color.r,
-                        sprite.color.g,
-                        sprite.color.b,
-                      ])
+                      sprite.color.r,
+                      sprite.color.g,
+                      sprite.color.b,
+                    ])
                     : null
                 }
                 alpha={sprite.color.a}
               />
-              <Text
-                // text on the sprite
-                text={sprite.showname ? sprite.name : ""}
-                style={{ fontFamily: "Arial", fontSize: 16, fill: 0x000000 }}
-                anchor={(0.5, 0.5)}
-                x={x + ((sprite.maxX - sprite.minX) * canvasHeight) / 2}
-                y={y + ((sprite.maxY - sprite.minY) * canvasHeight) / 2}
-              />
+              {sprite.showlabel ? (
+                <>
+                  <Text
+                    text={sprite.label}
+                    style={{ fontFamily: "Arial", fontSize: 16, fill: 0xe65c00 }}
+                    anchor={(0.5, 0.5)}
+                    x={x + spriteWidth / 2}
+                    y={centerY}  // Label in the middle
+                  />
+                  <Text
+                    text={sprite.showname ? sprite.name : ""}
+                    style={{ fontFamily: "Arial", fontSize: 16, fill: 0x000000 }}
+                    anchor={(0.5, 0.5)}
+                    x={x + spriteWidth / 2}
+                    y={y - 10}  // Name above the sprite
+                  />
+                </>
+              ) : (
+                <Text
+                  text={sprite.showname ? sprite.name : ""}
+                  style={{ fontFamily: "Arial", fontSize: 16, fill: 0x000000 }}
+                  anchor={(0.5, 0.5)}
+                  x={x + spriteWidth / 2}
+                  y={centerY}  // Name in the middle if no label
+                />
+              )}
             </React.Fragment>
           );
         })}
@@ -116,16 +137,16 @@ export default function Screen({ canvasWidth, canvasHeight, sprites, vfg }) {
  * @returns Control panel
  */
 export function ControlPanel({
-  playButtonColor,
-  pauseButtonColor,
-  stepInfoIndex,
-  onPreviousClick,
-  onStartClick,
-  onPauseClick,
-  onNextClick,
-  onResetClick,
-  onSpeedControllor,
-}) {
+                               playButtonColor,
+                               pauseButtonColor,
+                               stepInfoIndex,
+                               onPreviousClick,
+                               onStartClick,
+                               onPauseClick,
+                               onNextClick,
+                               onResetClick,
+                               onSpeedControllor,
+                             }) {
   return (
     <React.Fragment>
       <IconButton
@@ -242,13 +263,13 @@ export function StepScreen({ stepInfoIndex, stepItem, stepInfo, onStepClick }) {
  * @returns
  */
 export function GoalScreen({
-  sprites,
-  subGoal,
-  selectedSubGoals,
-  showKey,
-  onSubItemClick,
-  onSubgoalStepItemClick,
-}) {
+                             sprites,
+                             subGoal,
+                             selectedSubGoals,
+                             showKey,
+                             onSubItemClick,
+                             onSubgoalStepItemClick,
+                           }) {
   return (
     <React.Fragment>
       <div className={styles.sub_title} style={{ position: "relative" }}>