fix(frontend): use act1/pal.pl2 and BIGMENU/radiobutton.dc6 for Battle.net Lobby per D2WinPalette.cpp & D2Multi.dll

public/ui/frontend/manifest.json

@@ -1,6 +1,6 @@
 {
   "version": "1.13c",
-  "decodedDc6Count": 90,
+  "decodedDc6Count": 92,
   "animStrips": {
     "logoMainBlack": {
       "file": "logo-main-black.png",

scripts/pack-frontend-ui.ts

@@ -344,6 +344,7 @@ async function main(): Promise<void> {
 
   const skyPl2 = decodePl2(await archives.read('data\\global\\palette\\sky\\pal.pl2'))
   const fecharPl2 = decodePl2(await archives.read('data\\global\\palette\\fechar\\pal.pl2'))
+  const act1Pl2 = decodePl2(await archives.read('data\\global\\palette\\act1\\pal.pl2'))
   const loadingPl2Bytes = await archives.read('data\\global\\palette\\loading\\pal.pl2')
   const loadingRgb = new Uint8Array(256 * 3)
   for (let i = 0; i < 256; i++) {
@@ -411,7 +412,7 @@ async function main(): Promise<void> {
 
   const waitingRoomBgDc6 = await decodeUiDc6('data\\global\\ui\\BIGMENU\\waitingroombkgd.dc6')
   const waitingRoomBgPixels = stitch800x600Background(waitingRoomBgDc6)
-  savePng('bg-waiting-room.png', 800, 600, waitingRoomBgPixels, skyPl2.rgb, false)
+  savePng('bg-waiting-room.png', 800, 600, waitingRoomBgPixels, act1Pl2.rgb, false)
 
   // ============================================================================
   // 2. Dialogs, Popups & Selection Boxes
@@ -433,7 +434,7 @@ async function main(): Promise<void> {
     { frame: cgf[2]!, x: 0, y: 256 },
     { frame: cgf[3]!, x: 256, y: 256 },
   ], false)
-  savePng('create-game-bg.png', 373, 373, createGameBgPixels, skyPl2.rgb, false)
+  savePng('create-game-bg.png', 373, 373, createGameBgPixels, act1Pl2.rgb, false)
 
   const charSelectBoxDc6 = await decodeUiDc6('data\\global\\ui\\CharSelect\\charselectbox.dc6')
   const csbf = charSelectBoxDc6.groups[0]!.frames
@@ -486,45 +487,53 @@ async function main(): Promise<void> {
   ], false)
   savePng('popup-okcancel.png', 264, 176, popupOkCancelPixels, skyPl2.rgb, false)
 
-  const textboxDc6 = await decodeUiDc6('data\\global\\ui\\FrontEnd\\textbox.dc6')
+  const textboxDc6 = await decodeUiDc6('data\\global\\ui\\FrontEnd\\textbox2.dc6')
   const tbFrame = textboxDc6.groups[0]!.frames[0]!
   savePng('textbox.png', tbFrame.width, tbFrame.height, tbFrame.indices, skyPl2.rgb, true)
 
   const clickboxDc6 = await decodeUiDc6('data\\global\\ui\\FrontEnd\\clickbox.dc6')
   const clickboxStrip = stitchButtonStates(clickboxDc6, 1) // 15x16 x 2 states = 30x16
-  savePng('clickbox.png', clickboxStrip.width, clickboxStrip.height, clickboxStrip.pixels, skyPl2.rgb, true)
+  savePng('clickbox.png', clickboxStrip.width, clickboxStrip.height, clickboxStrip.pixels, fecharPl2.rgb, true)
 
   const joinClickboxDc6 = await decodeUiDc6('data\\global\\ui\\BIGMENU\\joingameclickbox.dc6')
   const joinClickboxStrip = stitchButtonStates(joinClickboxDc6, 1)
-  savePng('joingameclickbox.png', joinClickboxStrip.width, joinClickboxStrip.height, joinClickboxStrip.pixels, skyPl2.rgb, true)
+  savePng('joingameclickbox.png', joinClickboxStrip.width, joinClickboxStrip.height, joinClickboxStrip.pixels, act1Pl2.rgb, true)
 
-  const radioDc6 = await decodeUiDc6('data\\global\\ui\\FrontEnd\\radiobutton.dc6')
+  const radioDc6 = await decodeUiDc6('data\\global\\ui\\BIGMENU\\radiobutton.dc6')
   const radioStrip = stitchButtonStates(radioDc6, 1) // 16x16 x 2 states = 32x16
-  savePng('radiobutton.png', radioStrip.width, radioStrip.height, radioStrip.pixels, skyPl2.rgb, true)
+  savePng('radiobutton.png', radioStrip.width, radioStrip.height, radioStrip.pixels, act1Pl2.rgb, true)
 
   const gemBtnDc6 = await decodeUiDc6('data\\global\\ui\\BIGMENU\\gembutton.dc6')
   const gemBtnStrip = stitchButtonStates(gemBtnDc6, 1) // 2 states
-  savePng('gembutton.png', gemBtnStrip.width, gemBtnStrip.height, gemBtnStrip.pixels, skyPl2.rgb, true)
+  savePng('gembutton.png', gemBtnStrip.width, gemBtnStrip.height, gemBtnStrip.pixels, act1Pl2.rgb, true)
 
   const chatLeftBtnsDc6 = await decodeUiDc6('data\\global\\ui\\BIGMENU\\chatleftbuttons.dc6')
-  const chatLeftBtnsStrip = stitchButtonStates(chatLeftBtnsDc6, 1) // 78x20 x 2 states
+  const chatLeftBtnsStrip = stitchButtonStates(chatLeftBtnsDc6, 1) // 80x20 x 2 states
-  savePng('btn-chatleft.png', chatLeftBtnsStrip.width, chatLeftBtnsStrip.height, chatLeftBtnsStrip.pixels, skyPl2.rgb, true)
+  savePng('btn-chatleft.png', chatLeftBtnsStrip.width, chatLeftBtnsStrip.height, chatLeftBtnsStrip.pixels, act1Pl2.rgb, true)
+
+  const chatRightTopBtnsDc6 = await decodeUiDc6('data\\global\\ui\\BIGMENU\\chatrighttopbuttons.dc6')
+  const chatRightTopBtnsStrip = stitchButtonStates(chatRightTopBtnsDc6, 1) // 119x20 x 2 states
+  savePng('btn-chatrighttop.png', chatRightTopBtnsStrip.width, chatRightTopBtnsStrip.height, chatRightTopBtnsStrip.pixels, act1Pl2.rgb, true)
+
+  const chatRightBtnsDc6 = await decodeUiDc6('data\\global\\ui\\BIGMENU\\chatrightbuttons.dc6')
+  const chatRightBtnsStrip = stitchButtonStates(chatRightBtnsDc6, 1) // 79x20 x 2 states
+  savePng('btn-chatright.png', chatRightBtnsStrip.width, chatRightBtnsStrip.height, chatRightBtnsStrip.pixels, act1Pl2.rgb, true)
 
   const gameBtnDc6 = await decodeUiDc6('data\\global\\ui\\BIGMENU\\GameButtonBlank.dc6')
-  const gameBtnStrip = stitchButtonStates(gameBtnDc6, 1) // 118x32 x 2 states
+  const gameBtnStrip = stitchButtonStates(gameBtnDc6, 1) // 172x32 x 2 states
-  savePng('btn-game.png', gameBtnStrip.width, gameBtnStrip.height, gameBtnStrip.pixels, skyPl2.rgb, true)
+  savePng('btn-game.png', gameBtnStrip.width, gameBtnStrip.height, gameBtnStrip.pixels, act1Pl2.rgb, true)
 
   const btnCancelDc6 = await decodeUiDc6('data\\global\\ui\\BIGMENU\\CancelButtonBlank.dc6')
   const btnCancelStrip = stitchButtonStates(btnCancelDc6, 1) // 96x32 x 2 states
-  savePng('btn-create-cancel.png', btnCancelStrip.width, btnCancelStrip.height, btnCancelStrip.pixels, skyPl2.rgb, true)
+  savePng('btn-create-cancel.png', btnCancelStrip.width, btnCancelStrip.height, btnCancelStrip.pixels, act1Pl2.rgb, true)
 
   const btnCreateGameDc6 = await decodeUiDc6('data\\global\\ui\\BIGMENU\\creategamebutton.dc6')
-  const btnCreateGameStrip = stitchButtonStates(btnCreateGameDc6, 1) // 172x32 x 2 states
+  const btnCreateGameStrip = stitchButtonStates(btnCreateGameDc6, 1) // 144x36 x 2 states
-  savePng('btn-create-game.png', btnCreateGameStrip.width, btnCreateGameStrip.height, btnCreateGameStrip.pixels, skyPl2.rgb, true)
+  savePng('btn-create-game.png', btnCreateGameStrip.width, btnCreateGameStrip.height, btnCreateGameStrip.pixels, act1Pl2.rgb, true)
 
   const greyLevelBoxDc6 = await decodeUiDc6('data\\global\\ui\\BIGMENU\\GreyLevelBox.dc6')
   const glbFrame = greyLevelBoxDc6.groups[0]!.frames[0]!
-  savePng('grey-level-box.png', glbFrame.width, glbFrame.height, glbFrame.indices, skyPl2.rgb, true)
+  savePng('grey-level-box.png', glbFrame.width, glbFrame.height, glbFrame.indices, act1Pl2.rgb, true)
 
   // ============================================================================
   // 4. Burning Diablo II Logos (Main Menu & Battle.net Lobby) + Campfire Flames

src/frontend/frontend-renderer.ts

@@ -171,6 +171,8 @@ const STATIC_UI_IMAGES = [
   'radiobutton.png',
   'gembutton.png',
   'btn-chatleft.png',
+  'btn-chatrighttop.png',
+  'btn-chatright.png',
   'btn-game.png',
   'btn-create-cancel.png',
   'btn-create-game.png',
@@ -904,9 +906,9 @@ export class FrontendRenderer {
             id: 'lobby_tab_create',
             x: 533,
             y: 449,
-            w: 118,
+            w: 119,
             h: 20,
-            sprite: 'btn-game.png',
+            sprite: 'btn-chatrighttop.png',
             label: L.create,
             onClick: () => {
               this.state.lobbySubPanel = 'create'
@@ -917,9 +919,9 @@ export class FrontendRenderer {
             id: 'lobby_tab_join',
             x: 653,
             y: 449,
-            w: 118,
+            w: 119,
             h: 20,
-            sprite: 'btn-game.png',
+            sprite: 'btn-chatrighttop.png',
             label: L.join,
             onClick: () => {
               this.state.lobbySubPanel = 'create'
@@ -929,9 +931,9 @@ export class FrontendRenderer {
             id: 'lobby_tab_channel',
             x: 535,
             y: 470,
-            w: 78,
+            w: 79,
             h: 20,
-            sprite: 'btn-chatleft.png',
+            sprite: 'btn-chatright.png',
             label: L.channel,
             onClick: () => {},
           },
@@ -939,9 +941,9 @@ export class FrontendRenderer {
             id: 'lobby_tab_ladder',
             x: 614,
             y: 470,
-            w: 78,
+            w: 79,
             h: 20,
-            sprite: 'btn-chatleft.png',
+            sprite: 'btn-chatright.png',
             label: L.ladder,
             onClick: () => {},
           },
@@ -949,9 +951,9 @@ export class FrontendRenderer {
             id: 'lobby_tab_quit',
             x: 693,
             y: 470,
-            w: 78,
+            w: 79,
             h: 20,
-            sprite: 'btn-chatleft.png',
+            sprite: 'btn-chatright.png',
             label: L.quit,
             onClick: () => {
               this.state.stage = 'char_select'
@@ -1248,8 +1250,9 @@ export class FrontendRenderer {
     checked: boolean,
     label: string,
     labelColor: FrontendColorIndex = 4,
+    sprite = 'clickbox.png',
   ): void {
-    const cbImg = this.images.get('clickbox.png')
+    const cbImg = this.images.get(sprite)
     if (cbImg) {
       const w = Math.floor(cbImg.width / 2)
       const h = cbImg.height
@@ -1447,7 +1450,14 @@ export class FrontendRenderer {
     })
 
     // 5. Character Difference (`x = 655, y = 315, w = 42, h = 29` per create-game-bg.png box & D2Multi.dll 0x6f9eaa50)
-    this.drawCheckbox(431, 323, this.state.charDifferenceEnabled, L.charDifference, 4)
+    this.drawCheckbox(
+      431,
+      323,
+      this.state.charDifferenceEnabled,
+      L.charDifference,
+      4,
+      'joingameclickbox.png',
+    )
     this.drawBitmapText(this.state.charDifference, 676, 329, {
       font: 'fontformal12',
       color: this.state.charDifferenceEnabled ? 0 : 5,