diff --git a/public/ui/frontend/bg-waiting-room.png b/public/ui/frontend/bg-waiting-room.png index 5ebbee6..0a1a836 100644 Binary files a/public/ui/frontend/bg-waiting-room.png and b/public/ui/frontend/bg-waiting-room.png differ diff --git a/public/ui/frontend/btn-chatleft.png b/public/ui/frontend/btn-chatleft.png index 854bd6e..1be4ac2 100644 Binary files a/public/ui/frontend/btn-chatleft.png and b/public/ui/frontend/btn-chatleft.png differ diff --git a/public/ui/frontend/btn-chatright.png b/public/ui/frontend/btn-chatright.png new file mode 100644 index 0000000..ef55319 Binary files /dev/null and b/public/ui/frontend/btn-chatright.png differ diff --git a/public/ui/frontend/btn-chatrighttop.png b/public/ui/frontend/btn-chatrighttop.png new file mode 100644 index 0000000..1adb12a Binary files /dev/null and b/public/ui/frontend/btn-chatrighttop.png differ diff --git a/public/ui/frontend/btn-create-cancel.png b/public/ui/frontend/btn-create-cancel.png index 9bd5a75..323b70b 100644 Binary files a/public/ui/frontend/btn-create-cancel.png and b/public/ui/frontend/btn-create-cancel.png differ diff --git a/public/ui/frontend/btn-create-game.png b/public/ui/frontend/btn-create-game.png index 9a0a0b7..59928a8 100644 Binary files a/public/ui/frontend/btn-create-game.png and b/public/ui/frontend/btn-create-game.png differ diff --git a/public/ui/frontend/btn-game.png b/public/ui/frontend/btn-game.png index 76d7fab..52d2433 100644 Binary files a/public/ui/frontend/btn-game.png and b/public/ui/frontend/btn-game.png differ diff --git a/public/ui/frontend/clickbox.png b/public/ui/frontend/clickbox.png index 6eb4a2e..f76708c 100644 Binary files a/public/ui/frontend/clickbox.png and b/public/ui/frontend/clickbox.png differ diff --git a/public/ui/frontend/create-game-bg.png b/public/ui/frontend/create-game-bg.png index 32679a4..6f8f8e1 100644 Binary files a/public/ui/frontend/create-game-bg.png and b/public/ui/frontend/create-game-bg.png differ diff --git a/public/ui/frontend/gembutton.png b/public/ui/frontend/gembutton.png index 60c7133..773a51f 100644 Binary files a/public/ui/frontend/gembutton.png and b/public/ui/frontend/gembutton.png differ diff --git a/public/ui/frontend/grey-level-box.png b/public/ui/frontend/grey-level-box.png index 927a032..a0bc0ec 100644 Binary files a/public/ui/frontend/grey-level-box.png and b/public/ui/frontend/grey-level-box.png differ diff --git a/public/ui/frontend/joingameclickbox.png b/public/ui/frontend/joingameclickbox.png index 3d22056..761431e 100644 Binary files a/public/ui/frontend/joingameclickbox.png and b/public/ui/frontend/joingameclickbox.png differ diff --git a/public/ui/frontend/manifest.json b/public/ui/frontend/manifest.json index f6c14e9..c6b457b 100644 --- a/public/ui/frontend/manifest.json +++ b/public/ui/frontend/manifest.json @@ -1,6 +1,6 @@ { "version": "1.13c", - "decodedDc6Count": 90, + "decodedDc6Count": 92, "animStrips": { "logoMainBlack": { "file": "logo-main-black.png", diff --git a/public/ui/frontend/radiobutton.png b/public/ui/frontend/radiobutton.png index fe2f8b9..aeecb4c 100644 Binary files a/public/ui/frontend/radiobutton.png and b/public/ui/frontend/radiobutton.png differ diff --git a/public/ui/frontend/textbox.png b/public/ui/frontend/textbox.png index 1985639..fb43487 100644 Binary files a/public/ui/frontend/textbox.png and b/public/ui/frontend/textbox.png differ diff --git a/scripts/pack-frontend-ui.ts b/scripts/pack-frontend-ui.ts index 4faf9d6..0ef2dd0 100644 --- a/scripts/pack-frontend-ui.ts +++ b/scripts/pack-frontend-ui.ts @@ -344,6 +344,7 @@ async function main(): Promise { 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 { 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 { { 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 { ], 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 - savePng('btn-chatleft.png', chatLeftBtnsStrip.width, chatLeftBtnsStrip.height, chatLeftBtnsStrip.pixels, skyPl2.rgb, true) + const chatLeftBtnsStrip = stitchButtonStates(chatLeftBtnsDc6, 1) // 80x20 x 2 states + 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 - savePng('btn-game.png', gameBtnStrip.width, gameBtnStrip.height, gameBtnStrip.pixels, skyPl2.rgb, true) + const gameBtnStrip = stitchButtonStates(gameBtnDc6, 1) // 172x32 x 2 states + 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 - savePng('btn-create-game.png', btnCreateGameStrip.width, btnCreateGameStrip.height, btnCreateGameStrip.pixels, skyPl2.rgb, true) + const btnCreateGameStrip = stitchButtonStates(btnCreateGameDc6, 1) // 144x36 x 2 states + 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 diff --git a/src/frontend/frontend-renderer.ts b/src/frontend/frontend-renderer.ts index d3cf1b9..25a1715 100644 --- a/src/frontend/frontend-renderer.ts +++ b/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,