@almadar/ui 5.68.0 → 5.69.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/avl/index.cjs +30 -4
  2. package/dist/avl/index.js +30 -4
  3. package/dist/components/index.cjs +22 -4
  4. package/dist/components/index.js +22 -4
  5. package/dist/providers/index.cjs +30 -4
  6. package/dist/providers/index.js +30 -4
  7. package/dist/runtime/index.cjs +30 -4
  8. package/dist/runtime/index.js +30 -4
  9. package/package.json +1 -1
package/dist/avl/index.cjs CHANGED
@@ -10916,6 +10916,14 @@ var init_ControlButton = __esm({
10916
10916
  }
10917
10917
  });
10918
10918
 
10919
+ // components/game/organisms/utils/spriteSheetConstants.ts
10920
+ var SHEET_COLUMNS;
10921
+ var init_spriteSheetConstants = __esm({
10922
+ "components/game/organisms/utils/spriteSheetConstants.ts"() {
10923
+ SHEET_COLUMNS = 8;
10924
+ }
10925
+ });
10926
+
10919
10927
  // components/game/organisms/utils/spriteAnimation.ts
10920
10928
  function inferDirection(dx, dy) {
10921
10929
  if (dx === 0 && dy === 0) return "se";
@@ -15239,7 +15247,13 @@ function IsometricCanvas({
15239
15247
  const img = unitSpriteUrl ? getImage(unitSpriteUrl) : null;
15240
15248
  const unitDrawH = scaledFloorHeight * spriteHeightRatio * unitScale;
15241
15249
  const maxUnitW = scaledTileWidth * spriteMaxWidthRatio * unitScale;
15242
- const ar = img ? img.naturalWidth / img.naturalHeight : 0.5;
15250
+ const SHEET_ROWS = 5;
15251
+ const sheetFrameW = img ? img.naturalWidth / SHEET_COLUMNS : 0;
15252
+ const sheetFrameH = img ? img.naturalHeight / SHEET_ROWS : 0;
15253
+ const imgIsSheet = img ? img.naturalWidth % SHEET_COLUMNS === 0 && img.naturalHeight % SHEET_ROWS === 0 && Math.abs(sheetFrameW - sheetFrameH) < 2 : false;
15254
+ const frameW = imgIsSheet ? sheetFrameW : img?.naturalWidth ?? 1;
15255
+ const frameH = imgIsSheet ? sheetFrameH : img?.naturalHeight ?? 1;
15256
+ const ar = frameW / (frameH || 1);
15243
15257
  let drawH = unitDrawH;
15244
15258
  let drawW = unitDrawH * ar;
15245
15259
  if (drawW > maxUnitW) {
@@ -15253,7 +15267,11 @@ function IsometricCanvas({
15253
15267
  ctx.save();
15254
15268
  ctx.globalAlpha = 0.25;
15255
15269
  if (img) {
15256
- ctx.drawImage(img, ghostCenterX - drawW / 2, ghostGroundY - drawH, drawW, drawH);
15270
+ if (imgIsSheet) {
15271
+ ctx.drawImage(img, 0, 0, sheetFrameW, sheetFrameH, ghostCenterX - drawW / 2, ghostGroundY - drawH, drawW, drawH);
15272
+ } else {
15273
+ ctx.drawImage(img, ghostCenterX - drawW / 2, ghostGroundY - drawH, drawW, drawH);
15274
+ }
15257
15275
  } else {
15258
15276
  const color = unit.team === "player" ? "#3b82f6" : unit.team === "enemy" ? "#ef4444" : "#6b7280";
15259
15277
  ctx.beginPath();
@@ -15297,14 +15315,21 @@ function IsometricCanvas({
15297
15315
  ctx.restore();
15298
15316
  } else if (img) {
15299
15317
  const spriteY = groundY - drawH - breatheOffset;
15318
+ const drawUnit = (x) => {
15319
+ if (imgIsSheet) {
15320
+ ctx.drawImage(img, 0, 0, sheetFrameW, sheetFrameH, x, spriteY, drawW, drawH);
15321
+ } else {
15322
+ ctx.drawImage(img, x, spriteY, drawW, drawH);
15323
+ }
15324
+ };
15300
15325
  if (unit.team) {
15301
15326
  ctx.save();
15302
15327
  ctx.shadowColor = unit.team === "player" ? "rgba(0, 150, 255, 0.6)" : "rgba(255, 50, 50, 0.6)";
15303
15328
  ctx.shadowBlur = 12 * scale;
15304
- ctx.drawImage(img, centerX - drawW / 2, spriteY, drawW, drawH);
15329
+ drawUnit(centerX - drawW / 2);
15305
15330
  ctx.restore();
15306
15331
  } else {
15307
- ctx.drawImage(img, centerX - drawW / 2, spriteY, drawW, drawH);
15332
+ drawUnit(centerX - drawW / 2);
15308
15333
  }
15309
15334
  } else {
15310
15335
  const color = unit.team === "player" ? "#3b82f6" : unit.team === "enemy" ? "#ef4444" : "#6b7280";
@@ -15597,6 +15622,7 @@ var init_IsometricCanvas = __esm({
15597
15622
  init_useUnitSpriteAtlas();
15598
15623
  init_verificationRegistry();
15599
15624
  init_isometric();
15625
+ init_spriteSheetConstants();
15600
15626
  IsometricCanvas.displayName = "IsometricCanvas";
15601
15627
  IsometricCanvas_default = IsometricCanvas;
15602
15628
  }
package/dist/avl/index.js CHANGED
@@ -10869,6 +10869,14 @@ var init_ControlButton = __esm({
10869
10869
  }
10870
10870
  });
10871
10871
 
10872
+ // components/game/organisms/utils/spriteSheetConstants.ts
10873
+ var SHEET_COLUMNS;
10874
+ var init_spriteSheetConstants = __esm({
10875
+ "components/game/organisms/utils/spriteSheetConstants.ts"() {
10876
+ SHEET_COLUMNS = 8;
10877
+ }
10878
+ });
10879
+
10872
10880
  // components/game/organisms/utils/spriteAnimation.ts
10873
10881
  function inferDirection(dx, dy) {
10874
10882
  if (dx === 0 && dy === 0) return "se";
@@ -15192,7 +15200,13 @@ function IsometricCanvas({
15192
15200
  const img = unitSpriteUrl ? getImage(unitSpriteUrl) : null;
15193
15201
  const unitDrawH = scaledFloorHeight * spriteHeightRatio * unitScale;
15194
15202
  const maxUnitW = scaledTileWidth * spriteMaxWidthRatio * unitScale;
15195
- const ar = img ? img.naturalWidth / img.naturalHeight : 0.5;
15203
+ const SHEET_ROWS = 5;
15204
+ const sheetFrameW = img ? img.naturalWidth / SHEET_COLUMNS : 0;
15205
+ const sheetFrameH = img ? img.naturalHeight / SHEET_ROWS : 0;
15206
+ const imgIsSheet = img ? img.naturalWidth % SHEET_COLUMNS === 0 && img.naturalHeight % SHEET_ROWS === 0 && Math.abs(sheetFrameW - sheetFrameH) < 2 : false;
15207
+ const frameW = imgIsSheet ? sheetFrameW : img?.naturalWidth ?? 1;
15208
+ const frameH = imgIsSheet ? sheetFrameH : img?.naturalHeight ?? 1;
15209
+ const ar = frameW / (frameH || 1);
15196
15210
  let drawH = unitDrawH;
15197
15211
  let drawW = unitDrawH * ar;
15198
15212
  if (drawW > maxUnitW) {
@@ -15206,7 +15220,11 @@ function IsometricCanvas({
15206
15220
  ctx.save();
15207
15221
  ctx.globalAlpha = 0.25;
15208
15222
  if (img) {
15209
- ctx.drawImage(img, ghostCenterX - drawW / 2, ghostGroundY - drawH, drawW, drawH);
15223
+ if (imgIsSheet) {
15224
+ ctx.drawImage(img, 0, 0, sheetFrameW, sheetFrameH, ghostCenterX - drawW / 2, ghostGroundY - drawH, drawW, drawH);
15225
+ } else {
15226
+ ctx.drawImage(img, ghostCenterX - drawW / 2, ghostGroundY - drawH, drawW, drawH);
15227
+ }
15210
15228
  } else {
15211
15229
  const color = unit.team === "player" ? "#3b82f6" : unit.team === "enemy" ? "#ef4444" : "#6b7280";
15212
15230
  ctx.beginPath();
@@ -15250,14 +15268,21 @@ function IsometricCanvas({
15250
15268
  ctx.restore();
15251
15269
  } else if (img) {
15252
15270
  const spriteY = groundY - drawH - breatheOffset;
15271
+ const drawUnit = (x) => {
15272
+ if (imgIsSheet) {
15273
+ ctx.drawImage(img, 0, 0, sheetFrameW, sheetFrameH, x, spriteY, drawW, drawH);
15274
+ } else {
15275
+ ctx.drawImage(img, x, spriteY, drawW, drawH);
15276
+ }
15277
+ };
15253
15278
  if (unit.team) {
15254
15279
  ctx.save();
15255
15280
  ctx.shadowColor = unit.team === "player" ? "rgba(0, 150, 255, 0.6)" : "rgba(255, 50, 50, 0.6)";
15256
15281
  ctx.shadowBlur = 12 * scale;
15257
- ctx.drawImage(img, centerX - drawW / 2, spriteY, drawW, drawH);
15282
+ drawUnit(centerX - drawW / 2);
15258
15283
  ctx.restore();
15259
15284
  } else {
15260
- ctx.drawImage(img, centerX - drawW / 2, spriteY, drawW, drawH);
15285
+ drawUnit(centerX - drawW / 2);
15261
15286
  }
15262
15287
  } else {
15263
15288
  const color = unit.team === "player" ? "#3b82f6" : unit.team === "enemy" ? "#ef4444" : "#6b7280";
@@ -15550,6 +15575,7 @@ var init_IsometricCanvas = __esm({
15550
15575
  init_useUnitSpriteAtlas();
15551
15576
  init_verificationRegistry();
15552
15577
  init_isometric();
15578
+ init_spriteSheetConstants();
15553
15579
  IsometricCanvas.displayName = "IsometricCanvas";
15554
15580
  IsometricCanvas_default = IsometricCanvas;
15555
15581
  }
package/dist/components/index.cjs CHANGED
@@ -10419,7 +10419,13 @@ function IsometricCanvas({
10419
10419
  const img = unitSpriteUrl ? getImage(unitSpriteUrl) : null;
10420
10420
  const unitDrawH = scaledFloorHeight * spriteHeightRatio * unitScale;
10421
10421
  const maxUnitW = scaledTileWidth * spriteMaxWidthRatio * unitScale;
10422
- const ar = img ? img.naturalWidth / img.naturalHeight : 0.5;
10422
+ const SHEET_ROWS = 5;
10423
+ const sheetFrameW = img ? img.naturalWidth / exports.SHEET_COLUMNS : 0;
10424
+ const sheetFrameH = img ? img.naturalHeight / SHEET_ROWS : 0;
10425
+ const imgIsSheet = img ? img.naturalWidth % exports.SHEET_COLUMNS === 0 && img.naturalHeight % SHEET_ROWS === 0 && Math.abs(sheetFrameW - sheetFrameH) < 2 : false;
10426
+ const frameW = imgIsSheet ? sheetFrameW : img?.naturalWidth ?? 1;
10427
+ const frameH = imgIsSheet ? sheetFrameH : img?.naturalHeight ?? 1;
10428
+ const ar = frameW / (frameH || 1);
10423
10429
  let drawH = unitDrawH;
10424
10430
  let drawW = unitDrawH * ar;
10425
10431
  if (drawW > maxUnitW) {
@@ -10433,7 +10439,11 @@ function IsometricCanvas({
10433
10439
  ctx.save();
10434
10440
  ctx.globalAlpha = 0.25;
10435
10441
  if (img) {
10436
- ctx.drawImage(img, ghostCenterX - drawW / 2, ghostGroundY - drawH, drawW, drawH);
10442
+ if (imgIsSheet) {
10443
+ ctx.drawImage(img, 0, 0, sheetFrameW, sheetFrameH, ghostCenterX - drawW / 2, ghostGroundY - drawH, drawW, drawH);
10444
+ } else {
10445
+ ctx.drawImage(img, ghostCenterX - drawW / 2, ghostGroundY - drawH, drawW, drawH);
10446
+ }
10437
10447
  } else {
10438
10448
  const color = unit.team === "player" ? "#3b82f6" : unit.team === "enemy" ? "#ef4444" : "#6b7280";
10439
10449
  ctx.beginPath();
@@ -10477,14 +10487,21 @@ function IsometricCanvas({
10477
10487
  ctx.restore();
10478
10488
  } else if (img) {
10479
10489
  const spriteY = groundY - drawH - breatheOffset;
10490
+ const drawUnit = (x) => {
10491
+ if (imgIsSheet) {
10492
+ ctx.drawImage(img, 0, 0, sheetFrameW, sheetFrameH, x, spriteY, drawW, drawH);
10493
+ } else {
10494
+ ctx.drawImage(img, x, spriteY, drawW, drawH);
10495
+ }
10496
+ };
10480
10497
  if (unit.team) {
10481
10498
  ctx.save();
10482
10499
  ctx.shadowColor = unit.team === "player" ? "rgba(0, 150, 255, 0.6)" : "rgba(255, 50, 50, 0.6)";
10483
10500
  ctx.shadowBlur = 12 * scale;
10484
- ctx.drawImage(img, centerX - drawW / 2, spriteY, drawW, drawH);
10501
+ drawUnit(centerX - drawW / 2);
10485
10502
  ctx.restore();
10486
10503
  } else {
10487
- ctx.drawImage(img, centerX - drawW / 2, spriteY, drawW, drawH);
10504
+ drawUnit(centerX - drawW / 2);
10488
10505
  }
10489
10506
  } else {
10490
10507
  const color = unit.team === "player" ? "#3b82f6" : unit.team === "enemy" ? "#ef4444" : "#6b7280";
@@ -10777,6 +10794,7 @@ var init_IsometricCanvas = __esm({
10777
10794
  init_useUnitSpriteAtlas();
10778
10795
  init_verificationRegistry();
10779
10796
  init_isometric();
10797
+ init_spriteSheetConstants();
10780
10798
  IsometricCanvas.displayName = "IsometricCanvas";
10781
10799
  IsometricCanvas_default = IsometricCanvas;
10782
10800
  }
package/dist/components/index.js CHANGED
@@ -10373,7 +10373,13 @@ function IsometricCanvas({
10373
10373
  const img = unitSpriteUrl ? getImage(unitSpriteUrl) : null;
10374
10374
  const unitDrawH = scaledFloorHeight * spriteHeightRatio * unitScale;
10375
10375
  const maxUnitW = scaledTileWidth * spriteMaxWidthRatio * unitScale;
10376
- const ar = img ? img.naturalWidth / img.naturalHeight : 0.5;
10376
+ const SHEET_ROWS = 5;
10377
+ const sheetFrameW = img ? img.naturalWidth / SHEET_COLUMNS : 0;
10378
+ const sheetFrameH = img ? img.naturalHeight / SHEET_ROWS : 0;
10379
+ const imgIsSheet = img ? img.naturalWidth % SHEET_COLUMNS === 0 && img.naturalHeight % SHEET_ROWS === 0 && Math.abs(sheetFrameW - sheetFrameH) < 2 : false;
10380
+ const frameW = imgIsSheet ? sheetFrameW : img?.naturalWidth ?? 1;
10381
+ const frameH = imgIsSheet ? sheetFrameH : img?.naturalHeight ?? 1;
10382
+ const ar = frameW / (frameH || 1);
10377
10383
  let drawH = unitDrawH;
10378
10384
  let drawW = unitDrawH * ar;
10379
10385
  if (drawW > maxUnitW) {
@@ -10387,7 +10393,11 @@ function IsometricCanvas({
10387
10393
  ctx.save();
10388
10394
  ctx.globalAlpha = 0.25;
10389
10395
  if (img) {
10390
- ctx.drawImage(img, ghostCenterX - drawW / 2, ghostGroundY - drawH, drawW, drawH);
10396
+ if (imgIsSheet) {
10397
+ ctx.drawImage(img, 0, 0, sheetFrameW, sheetFrameH, ghostCenterX - drawW / 2, ghostGroundY - drawH, drawW, drawH);
10398
+ } else {
10399
+ ctx.drawImage(img, ghostCenterX - drawW / 2, ghostGroundY - drawH, drawW, drawH);
10400
+ }
10391
10401
  } else {
10392
10402
  const color = unit.team === "player" ? "#3b82f6" : unit.team === "enemy" ? "#ef4444" : "#6b7280";
10393
10403
  ctx.beginPath();
@@ -10431,14 +10441,21 @@ function IsometricCanvas({
10431
10441
  ctx.restore();
10432
10442
  } else if (img) {
10433
10443
  const spriteY = groundY - drawH - breatheOffset;
10444
+ const drawUnit = (x) => {
10445
+ if (imgIsSheet) {
10446
+ ctx.drawImage(img, 0, 0, sheetFrameW, sheetFrameH, x, spriteY, drawW, drawH);
10447
+ } else {
10448
+ ctx.drawImage(img, x, spriteY, drawW, drawH);
10449
+ }
10450
+ };
10434
10451
  if (unit.team) {
10435
10452
  ctx.save();
10436
10453
  ctx.shadowColor = unit.team === "player" ? "rgba(0, 150, 255, 0.6)" : "rgba(255, 50, 50, 0.6)";
10437
10454
  ctx.shadowBlur = 12 * scale;
10438
- ctx.drawImage(img, centerX - drawW / 2, spriteY, drawW, drawH);
10455
+ drawUnit(centerX - drawW / 2);
10439
10456
  ctx.restore();
10440
10457
  } else {
10441
- ctx.drawImage(img, centerX - drawW / 2, spriteY, drawW, drawH);
10458
+ drawUnit(centerX - drawW / 2);
10442
10459
  }
10443
10460
  } else {
10444
10461
  const color = unit.team === "player" ? "#3b82f6" : unit.team === "enemy" ? "#ef4444" : "#6b7280";
@@ -10731,6 +10748,7 @@ var init_IsometricCanvas = __esm({
10731
10748
  init_useUnitSpriteAtlas();
10732
10749
  init_verificationRegistry();
10733
10750
  init_isometric();
10751
+ init_spriteSheetConstants();
10734
10752
  IsometricCanvas.displayName = "IsometricCanvas";
10735
10753
  IsometricCanvas_default = IsometricCanvas;
10736
10754
  }
package/dist/providers/index.cjs CHANGED
@@ -7135,6 +7135,14 @@ var init_ControlButton = __esm({
7135
7135
  }
7136
7136
  });
7137
7137
 
7138
+ // components/game/organisms/utils/spriteSheetConstants.ts
7139
+ var SHEET_COLUMNS;
7140
+ var init_spriteSheetConstants = __esm({
7141
+ "components/game/organisms/utils/spriteSheetConstants.ts"() {
7142
+ SHEET_COLUMNS = 8;
7143
+ }
7144
+ });
7145
+
7138
7146
  // components/game/organisms/utils/spriteAnimation.ts
7139
7147
  function inferDirection(dx, dy) {
7140
7148
  if (dx === 0 && dy === 0) return "se";
@@ -11802,7 +11810,13 @@ function IsometricCanvas({
11802
11810
  const img = unitSpriteUrl ? getImage(unitSpriteUrl) : null;
11803
11811
  const unitDrawH = scaledFloorHeight * spriteHeightRatio * unitScale;
11804
11812
  const maxUnitW = scaledTileWidth * spriteMaxWidthRatio * unitScale;
11805
- const ar = img ? img.naturalWidth / img.naturalHeight : 0.5;
11813
+ const SHEET_ROWS = 5;
11814
+ const sheetFrameW = img ? img.naturalWidth / SHEET_COLUMNS : 0;
11815
+ const sheetFrameH = img ? img.naturalHeight / SHEET_ROWS : 0;
11816
+ const imgIsSheet = img ? img.naturalWidth % SHEET_COLUMNS === 0 && img.naturalHeight % SHEET_ROWS === 0 && Math.abs(sheetFrameW - sheetFrameH) < 2 : false;
11817
+ const frameW = imgIsSheet ? sheetFrameW : img?.naturalWidth ?? 1;
11818
+ const frameH = imgIsSheet ? sheetFrameH : img?.naturalHeight ?? 1;
11819
+ const ar = frameW / (frameH || 1);
11806
11820
  let drawH = unitDrawH;
11807
11821
  let drawW = unitDrawH * ar;
11808
11822
  if (drawW > maxUnitW) {
@@ -11816,7 +11830,11 @@ function IsometricCanvas({
11816
11830
  ctx.save();
11817
11831
  ctx.globalAlpha = 0.25;
11818
11832
  if (img) {
11819
- ctx.drawImage(img, ghostCenterX - drawW / 2, ghostGroundY - drawH, drawW, drawH);
11833
+ if (imgIsSheet) {
11834
+ ctx.drawImage(img, 0, 0, sheetFrameW, sheetFrameH, ghostCenterX - drawW / 2, ghostGroundY - drawH, drawW, drawH);
11835
+ } else {
11836
+ ctx.drawImage(img, ghostCenterX - drawW / 2, ghostGroundY - drawH, drawW, drawH);
11837
+ }
11820
11838
  } else {
11821
11839
  const color = unit.team === "player" ? "#3b82f6" : unit.team === "enemy" ? "#ef4444" : "#6b7280";
11822
11840
  ctx.beginPath();
@@ -11860,14 +11878,21 @@ function IsometricCanvas({
11860
11878
  ctx.restore();
11861
11879
  } else if (img) {
11862
11880
  const spriteY = groundY - drawH - breatheOffset;
11881
+ const drawUnit = (x) => {
11882
+ if (imgIsSheet) {
11883
+ ctx.drawImage(img, 0, 0, sheetFrameW, sheetFrameH, x, spriteY, drawW, drawH);
11884
+ } else {
11885
+ ctx.drawImage(img, x, spriteY, drawW, drawH);
11886
+ }
11887
+ };
11863
11888
  if (unit.team) {
11864
11889
  ctx.save();
11865
11890
  ctx.shadowColor = unit.team === "player" ? "rgba(0, 150, 255, 0.6)" : "rgba(255, 50, 50, 0.6)";
11866
11891
  ctx.shadowBlur = 12 * scale;
11867
- ctx.drawImage(img, centerX - drawW / 2, spriteY, drawW, drawH);
11892
+ drawUnit(centerX - drawW / 2);
11868
11893
  ctx.restore();
11869
11894
  } else {
11870
- ctx.drawImage(img, centerX - drawW / 2, spriteY, drawW, drawH);
11895
+ drawUnit(centerX - drawW / 2);
11871
11896
  }
11872
11897
  } else {
11873
11898
  const color = unit.team === "player" ? "#3b82f6" : unit.team === "enemy" ? "#ef4444" : "#6b7280";
@@ -12160,6 +12185,7 @@ var init_IsometricCanvas = __esm({
12160
12185
  init_useUnitSpriteAtlas();
12161
12186
  init_verificationRegistry();
12162
12187
  init_isometric();
12188
+ init_spriteSheetConstants();
12163
12189
  IsometricCanvas.displayName = "IsometricCanvas";
12164
12190
  IsometricCanvas_default = IsometricCanvas;
12165
12191
  }
package/dist/providers/index.js CHANGED
@@ -7088,6 +7088,14 @@ var init_ControlButton = __esm({
7088
7088
  }
7089
7089
  });
7090
7090
 
7091
+ // components/game/organisms/utils/spriteSheetConstants.ts
7092
+ var SHEET_COLUMNS;
7093
+ var init_spriteSheetConstants = __esm({
7094
+ "components/game/organisms/utils/spriteSheetConstants.ts"() {
7095
+ SHEET_COLUMNS = 8;
7096
+ }
7097
+ });
7098
+
7091
7099
  // components/game/organisms/utils/spriteAnimation.ts
7092
7100
  function inferDirection(dx, dy) {
7093
7101
  if (dx === 0 && dy === 0) return "se";
@@ -11755,7 +11763,13 @@ function IsometricCanvas({
11755
11763
  const img = unitSpriteUrl ? getImage(unitSpriteUrl) : null;
11756
11764
  const unitDrawH = scaledFloorHeight * spriteHeightRatio * unitScale;
11757
11765
  const maxUnitW = scaledTileWidth * spriteMaxWidthRatio * unitScale;
11758
- const ar = img ? img.naturalWidth / img.naturalHeight : 0.5;
11766
+ const SHEET_ROWS = 5;
11767
+ const sheetFrameW = img ? img.naturalWidth / SHEET_COLUMNS : 0;
11768
+ const sheetFrameH = img ? img.naturalHeight / SHEET_ROWS : 0;
11769
+ const imgIsSheet = img ? img.naturalWidth % SHEET_COLUMNS === 0 && img.naturalHeight % SHEET_ROWS === 0 && Math.abs(sheetFrameW - sheetFrameH) < 2 : false;
11770
+ const frameW = imgIsSheet ? sheetFrameW : img?.naturalWidth ?? 1;
11771
+ const frameH = imgIsSheet ? sheetFrameH : img?.naturalHeight ?? 1;
11772
+ const ar = frameW / (frameH || 1);
11759
11773
  let drawH = unitDrawH;
11760
11774
  let drawW = unitDrawH * ar;
11761
11775
  if (drawW > maxUnitW) {
@@ -11769,7 +11783,11 @@ function IsometricCanvas({
11769
11783
  ctx.save();
11770
11784
  ctx.globalAlpha = 0.25;
11771
11785
  if (img) {
11772
- ctx.drawImage(img, ghostCenterX - drawW / 2, ghostGroundY - drawH, drawW, drawH);
11786
+ if (imgIsSheet) {
11787
+ ctx.drawImage(img, 0, 0, sheetFrameW, sheetFrameH, ghostCenterX - drawW / 2, ghostGroundY - drawH, drawW, drawH);
11788
+ } else {
11789
+ ctx.drawImage(img, ghostCenterX - drawW / 2, ghostGroundY - drawH, drawW, drawH);
11790
+ }
11773
11791
  } else {
11774
11792
  const color = unit.team === "player" ? "#3b82f6" : unit.team === "enemy" ? "#ef4444" : "#6b7280";
11775
11793
  ctx.beginPath();
@@ -11813,14 +11831,21 @@ function IsometricCanvas({
11813
11831
  ctx.restore();
11814
11832
  } else if (img) {
11815
11833
  const spriteY = groundY - drawH - breatheOffset;
11834
+ const drawUnit = (x) => {
11835
+ if (imgIsSheet) {
11836
+ ctx.drawImage(img, 0, 0, sheetFrameW, sheetFrameH, x, spriteY, drawW, drawH);
11837
+ } else {
11838
+ ctx.drawImage(img, x, spriteY, drawW, drawH);
11839
+ }
11840
+ };
11816
11841
  if (unit.team) {
11817
11842
  ctx.save();
11818
11843
  ctx.shadowColor = unit.team === "player" ? "rgba(0, 150, 255, 0.6)" : "rgba(255, 50, 50, 0.6)";
11819
11844
  ctx.shadowBlur = 12 * scale;
11820
- ctx.drawImage(img, centerX - drawW / 2, spriteY, drawW, drawH);
11845
+ drawUnit(centerX - drawW / 2);
11821
11846
  ctx.restore();
11822
11847
  } else {
11823
- ctx.drawImage(img, centerX - drawW / 2, spriteY, drawW, drawH);
11848
+ drawUnit(centerX - drawW / 2);
11824
11849
  }
11825
11850
  } else {
11826
11851
  const color = unit.team === "player" ? "#3b82f6" : unit.team === "enemy" ? "#ef4444" : "#6b7280";
@@ -12113,6 +12138,7 @@ var init_IsometricCanvas = __esm({
12113
12138
  init_useUnitSpriteAtlas();
12114
12139
  init_verificationRegistry();
12115
12140
  init_isometric();
12141
+ init_spriteSheetConstants();
12116
12142
  IsometricCanvas.displayName = "IsometricCanvas";
12117
12143
  IsometricCanvas_default = IsometricCanvas;
12118
12144
  }
package/dist/runtime/index.cjs CHANGED
@@ -7177,6 +7177,14 @@ var init_ControlButton = __esm({
7177
7177
  }
7178
7178
  });
7179
7179
 
7180
+ // components/game/organisms/utils/spriteSheetConstants.ts
7181
+ var SHEET_COLUMNS;
7182
+ var init_spriteSheetConstants = __esm({
7183
+ "components/game/organisms/utils/spriteSheetConstants.ts"() {
7184
+ SHEET_COLUMNS = 8;
7185
+ }
7186
+ });
7187
+
7180
7188
  // components/game/organisms/utils/spriteAnimation.ts
7181
7189
  function inferDirection(dx, dy) {
7182
7190
  if (dx === 0 && dy === 0) return "se";
@@ -11500,7 +11508,13 @@ function IsometricCanvas({
11500
11508
  const img = unitSpriteUrl ? getImage(unitSpriteUrl) : null;
11501
11509
  const unitDrawH = scaledFloorHeight * spriteHeightRatio * unitScale;
11502
11510
  const maxUnitW = scaledTileWidth * spriteMaxWidthRatio * unitScale;
11503
- const ar = img ? img.naturalWidth / img.naturalHeight : 0.5;
11511
+ const SHEET_ROWS = 5;
11512
+ const sheetFrameW = img ? img.naturalWidth / SHEET_COLUMNS : 0;
11513
+ const sheetFrameH = img ? img.naturalHeight / SHEET_ROWS : 0;
11514
+ const imgIsSheet = img ? img.naturalWidth % SHEET_COLUMNS === 0 && img.naturalHeight % SHEET_ROWS === 0 && Math.abs(sheetFrameW - sheetFrameH) < 2 : false;
11515
+ const frameW = imgIsSheet ? sheetFrameW : img?.naturalWidth ?? 1;
11516
+ const frameH = imgIsSheet ? sheetFrameH : img?.naturalHeight ?? 1;
11517
+ const ar = frameW / (frameH || 1);
11504
11518
  let drawH = unitDrawH;
11505
11519
  let drawW = unitDrawH * ar;
11506
11520
  if (drawW > maxUnitW) {
@@ -11514,7 +11528,11 @@ function IsometricCanvas({
11514
11528
  ctx.save();
11515
11529
  ctx.globalAlpha = 0.25;
11516
11530
  if (img) {
11517
- ctx.drawImage(img, ghostCenterX - drawW / 2, ghostGroundY - drawH, drawW, drawH);
11531
+ if (imgIsSheet) {
11532
+ ctx.drawImage(img, 0, 0, sheetFrameW, sheetFrameH, ghostCenterX - drawW / 2, ghostGroundY - drawH, drawW, drawH);
11533
+ } else {
11534
+ ctx.drawImage(img, ghostCenterX - drawW / 2, ghostGroundY - drawH, drawW, drawH);
11535
+ }
11518
11536
  } else {
11519
11537
  const color = unit.team === "player" ? "#3b82f6" : unit.team === "enemy" ? "#ef4444" : "#6b7280";
11520
11538
  ctx.beginPath();
@@ -11558,14 +11576,21 @@ function IsometricCanvas({
11558
11576
  ctx.restore();
11559
11577
  } else if (img) {
11560
11578
  const spriteY = groundY - drawH - breatheOffset;
11579
+ const drawUnit = (x) => {
11580
+ if (imgIsSheet) {
11581
+ ctx.drawImage(img, 0, 0, sheetFrameW, sheetFrameH, x, spriteY, drawW, drawH);
11582
+ } else {
11583
+ ctx.drawImage(img, x, spriteY, drawW, drawH);
11584
+ }
11585
+ };
11561
11586
  if (unit.team) {
11562
11587
  ctx.save();
11563
11588
  ctx.shadowColor = unit.team === "player" ? "rgba(0, 150, 255, 0.6)" : "rgba(255, 50, 50, 0.6)";
11564
11589
  ctx.shadowBlur = 12 * scale;
11565
- ctx.drawImage(img, centerX - drawW / 2, spriteY, drawW, drawH);
11590
+ drawUnit(centerX - drawW / 2);
11566
11591
  ctx.restore();
11567
11592
  } else {
11568
- ctx.drawImage(img, centerX - drawW / 2, spriteY, drawW, drawH);
11593
+ drawUnit(centerX - drawW / 2);
11569
11594
  }
11570
11595
  } else {
11571
11596
  const color = unit.team === "player" ? "#3b82f6" : unit.team === "enemy" ? "#ef4444" : "#6b7280";
@@ -11858,6 +11883,7 @@ var init_IsometricCanvas = __esm({
11858
11883
  init_useUnitSpriteAtlas();
11859
11884
  init_verificationRegistry();
11860
11885
  init_isometric();
11886
+ init_spriteSheetConstants();
11861
11887
  IsometricCanvas.displayName = "IsometricCanvas";
11862
11888
  IsometricCanvas_default = IsometricCanvas;
11863
11889
  }
package/dist/runtime/index.js CHANGED
@@ -7130,6 +7130,14 @@ var init_ControlButton = __esm({
7130
7130
  }
7131
7131
  });
7132
7132
 
7133
+ // components/game/organisms/utils/spriteSheetConstants.ts
7134
+ var SHEET_COLUMNS;
7135
+ var init_spriteSheetConstants = __esm({
7136
+ "components/game/organisms/utils/spriteSheetConstants.ts"() {
7137
+ SHEET_COLUMNS = 8;
7138
+ }
7139
+ });
7140
+
7133
7141
  // components/game/organisms/utils/spriteAnimation.ts
7134
7142
  function inferDirection(dx, dy) {
7135
7143
  if (dx === 0 && dy === 0) return "se";
@@ -11453,7 +11461,13 @@ function IsometricCanvas({
11453
11461
  const img = unitSpriteUrl ? getImage(unitSpriteUrl) : null;
11454
11462
  const unitDrawH = scaledFloorHeight * spriteHeightRatio * unitScale;
11455
11463
  const maxUnitW = scaledTileWidth * spriteMaxWidthRatio * unitScale;
11456
- const ar = img ? img.naturalWidth / img.naturalHeight : 0.5;
11464
+ const SHEET_ROWS = 5;
11465
+ const sheetFrameW = img ? img.naturalWidth / SHEET_COLUMNS : 0;
11466
+ const sheetFrameH = img ? img.naturalHeight / SHEET_ROWS : 0;
11467
+ const imgIsSheet = img ? img.naturalWidth % SHEET_COLUMNS === 0 && img.naturalHeight % SHEET_ROWS === 0 && Math.abs(sheetFrameW - sheetFrameH) < 2 : false;
11468
+ const frameW = imgIsSheet ? sheetFrameW : img?.naturalWidth ?? 1;
11469
+ const frameH = imgIsSheet ? sheetFrameH : img?.naturalHeight ?? 1;
11470
+ const ar = frameW / (frameH || 1);
11457
11471
  let drawH = unitDrawH;
11458
11472
  let drawW = unitDrawH * ar;
11459
11473
  if (drawW > maxUnitW) {
@@ -11467,7 +11481,11 @@ function IsometricCanvas({
11467
11481
  ctx.save();
11468
11482
  ctx.globalAlpha = 0.25;
11469
11483
  if (img) {
11470
- ctx.drawImage(img, ghostCenterX - drawW / 2, ghostGroundY - drawH, drawW, drawH);
11484
+ if (imgIsSheet) {
11485
+ ctx.drawImage(img, 0, 0, sheetFrameW, sheetFrameH, ghostCenterX - drawW / 2, ghostGroundY - drawH, drawW, drawH);
11486
+ } else {
11487
+ ctx.drawImage(img, ghostCenterX - drawW / 2, ghostGroundY - drawH, drawW, drawH);
11488
+ }
11471
11489
  } else {
11472
11490
  const color = unit.team === "player" ? "#3b82f6" : unit.team === "enemy" ? "#ef4444" : "#6b7280";
11473
11491
  ctx.beginPath();
@@ -11511,14 +11529,21 @@ function IsometricCanvas({
11511
11529
  ctx.restore();
11512
11530
  } else if (img) {
11513
11531
  const spriteY = groundY - drawH - breatheOffset;
11532
+ const drawUnit = (x) => {
11533
+ if (imgIsSheet) {
11534
+ ctx.drawImage(img, 0, 0, sheetFrameW, sheetFrameH, x, spriteY, drawW, drawH);
11535
+ } else {
11536
+ ctx.drawImage(img, x, spriteY, drawW, drawH);
11537
+ }
11538
+ };
11514
11539
  if (unit.team) {
11515
11540
  ctx.save();
11516
11541
  ctx.shadowColor = unit.team === "player" ? "rgba(0, 150, 255, 0.6)" : "rgba(255, 50, 50, 0.6)";
11517
11542
  ctx.shadowBlur = 12 * scale;
11518
- ctx.drawImage(img, centerX - drawW / 2, spriteY, drawW, drawH);
11543
+ drawUnit(centerX - drawW / 2);
11519
11544
  ctx.restore();
11520
11545
  } else {
11521
- ctx.drawImage(img, centerX - drawW / 2, spriteY, drawW, drawH);
11546
+ drawUnit(centerX - drawW / 2);
11522
11547
  }
11523
11548
  } else {
11524
11549
  const color = unit.team === "player" ? "#3b82f6" : unit.team === "enemy" ? "#ef4444" : "#6b7280";
@@ -11811,6 +11836,7 @@ var init_IsometricCanvas = __esm({
11811
11836
  init_useUnitSpriteAtlas();
11812
11837
  init_verificationRegistry();
11813
11838
  init_isometric();
11839
+ init_spriteSheetConstants();
11814
11840
  IsometricCanvas.displayName = "IsometricCanvas";
11815
11841
  IsometricCanvas_default = IsometricCanvas;
11816
11842
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@almadar/ui",
3
- "version": "5.68.0",
3
+ "version": "5.69.0",
4
4
  "description": "React UI components, hooks, and providers for Almadar",
5
5
  "type": "module",
6
6
  "sideEffects": [