[Webkit-unassigned] [Bug 266934] Progress (Percentage) is not centered in loading bar in HTML5 game

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=266934

--- Comment #3 from Karl Dubost <karlcow at apple.com> ---
The initial html, basically contains only this:

```
<canvas 
   id="canvas" 
   width="1120" height="768" 
   style="left: 113px; top: 11px; position: absolute; cursor: default;"></canvas>
```

This is initiated at the beginning by:

```
function init() {
    var a = getScreenSize();
    screenX1 = a.x;
    screenY1 = a.y;
    canvasReSize();
    createStage();
    setBackground();
    initAutoDemoRnd();
    loadStoreVariable();
    initMenuVariable();
    getLastPlayInfo();
    initDemoData();
    getEditLevelInfo();
    showLoadingPage()
}
```

This function seems to have a promising name:
    showLoadingPage()

Indeed typing it in the console and it restarts the loading screen.

the definition is inside
https://loderunnerwebgame.com/game/lodeRunner.preload.min.js?060821142151

```
function showLoadingPage() {
  var a = [
    {
      src: "image/cover.png" + noCache,
      id: "cover",
    },
    {
      src: themeImagePath + THEME_APPLE2 + "/runner.png" + noCache,
      id: "runner",
    },
  ];
  coverPageLoad = new createjs.LoadQueue(!0);
  coverPageLoad.on("error", function (c) {
    console.log("error", c);
  });
  coverPageLoad.on("fileload", function (c) {
    switch (c.item.id) {
      case "cover":
        coverBitmap = new createjs.Bitmap(c.result);
        coverBitmap.setTransform(0, 0, tileScale, tileScale);
        c = (coverBitmap.getBounds().width * tileScale) | 0;
        var f = (coverBitmap.getBounds().height * tileScale) | 0;
        titleBackground = new createjs.Shape();
        titleBackground.graphics.beginFill("white").drawRect(0, 0, c, f);
        mainStage.addChild(titleBackground);
        mainStage.addChild(coverBitmap);
        mainStage.update();
        break;
      case "runner":
        createRunnerSpriteSheet(c.result);
    }
  });
  coverPageLoad.on("complete", function (c) {
    preloadResource();
  });
  coverPageLoad.loadManifest(a);
}
```

https://loderunnerwebgame.com/game/image/cover.png
is just all the text without the loading bar. 

The progress bar is drawn by 

```
    preload.on("progress", function(b) {
        g.graphics.clear();
        g.graphics.beginFill("gold").drawRect(0, 0, b.loaded /
        b.total * l, k);
        d.text = (b.loaded / b.total * 100 | 0) + "%";
        d.x = (canvas.width - d.getBounds().width) / 2 | 0
    }
```

there's a function for LineHeight, but if I change the value manually it doesn't affect the position. 

```
    b.getMeasuredLineHeight = function() {
        return 1.2 * this._prepContext(a._workingContext).measureText("M").width
    },
    b.getMeasuredHeight = function() {
        return this._drawText(null, {}).height
    },
```

The value is: 26.65625

The font used for the progress bar is 
font: "32px Arial"


So I wonder if it's a simple difference in between browsers. 

Ah! on Firefox this is 
font: "30.4px Arial"

The computation of the size is made in:

        d = new createjs.Text("0", COVER_PROGRESS_BAR_H * tileScale + "px Arial", "#FF0000"),


with 
    COVER_PROGRESS_BAR_H = 32,

so the changing parameter is tileScale

1    in Safari
0.95 in Firefox


tileScale seems to be defined in

```
  for (
    var a, d = 100 * MAX_SCALE;
    d >= 100 * MIN_SCALE &&
    !((tileScale = d / 100),
    (canvasX = BASE_SCREEN_X * tileScale),
    (canvasY = BASE_SCREEN_Y * tileScale),
    (a = 2 * BASE_ICON_X * tileScale),
    (canvasX + a <= screenX1 && canvasY <= screenY1) || tileScale <= MIN_SCALE);
    d -= 5
  );
  debug("SCALE=" + tileScale);
  screenBorder = (screenX1 - (canvasX + a)) / 2;
  screenBorder > 2 * ICON_BORDER
    ? (screenBorder = 2 * ICON_BORDER)
    : 0 > screenBorder && (screenBorder = 0);
  screenBorder = (screenBorder * tileScale) | 0;
  canvas = document.getElementById("canvas");
  canvas.width = canvasX;
  canvas.height = canvasY;
  a = ((screenX1 - canvasX) / 2) | 0;
  d = ((screenY1 - canvasY) / 2) | 0;
  canvas.style.left = (0 < a ? a : 0) + "px";
  canvas.style.top = (0 < d ? d : 0) + "px";
  canvas.style.position = "absolute";
  canvas.style.cursor = "default";
  tileW = BASE_TILE_X;
  tileH = BASE_TILE_Y;
  tileWScale = BASE_TILE_X * tileScale;
  tileHScale = BASE_TILE_Y * tileScale;
  W2 = (tileW / 2) | 0;
  H2 = (tileH / 2) | 0;
  W4 = (tileW / 4) | 0;
  H4 = (tileH / 4) | 0;
}

```


aka 

    var a, d = 100 * MAX_SCALE;
    d >= 100 * MIN_SCALE &&
    !((tileScale = d / 100),

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20240726/d8875529/attachment.htm>