Merge pull request #15 from Lin064/label_display

[14] Add label display of animation

Author: nirlipo

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" }}>