diff --git a/web/static/7th-saga.css b/web/static/7th-saga.css index ed50f93..beea56e 100644 --- a/web/static/7th-saga.css +++ b/web/static/7th-saga.css @@ -62,3 +62,352 @@ th.sorted, td.sorted { table.row-clickable tbody.data td { cursor: pointer; } + +.enemy-sprite { + background-image: url("/static/images/7th-saga-enemies-transparent.png"); + background-repeat: no-repeat; + position: absolute; +} + +.enemy-sprite-container { + height: 64px; + min-width: 64px; + overflow: hidden; + position: relative; +} + +.Flame { + background-position: -249px -6px; + width: 28px; + height: 97px; +} +.F_Night { + background-position: -351px -6px; + width: 28px; + height: 97px; +} +.K_Moon { + background-position: -300px -6px; + width: 28px; + height: 97px; +} +.Soidiek { + background-position: -405px -6px; + width: 31px; + height: 92px; +} +.Manrot { + background-position: 19.983% 0.414%; + width: 48px; + height: 91px; +} +.Soidiek { + background-position: -405px -6px; + width: 31px; + height: 92px; +} +.Orc { + background-position: -538px -7px; + width: 46px; + height: 56px; +} +.Pison { + background-position: -600px -3px; + width: 61px; + height: 95px; +} +.Hermit { + background-position: -686px -4px; + width: 32px; + height: 64px; +} +.Wyvern { + background-position: -741px -17px; + width: 59px; + height: 65px; +} +.Demon { + background-position: -818px -14px; + width: 48px; + height: 52px; +} +.S_Demon { + background-position: -872px -14px; + width: 48px; + height: 52px; +} +.B_Demon { + background-position: -924px -14px; + width: 48px; + height: 52px; +} +.R_Demon { + background-position: -975px -14px; + width: 48px; + height: 52px; +} +.K_Trick { + background-position: -1049px -5px; + width: 26px; + height: 87px; +} +.Trick { + background-position: -1105px -6px; + width: 26px; + height: 87px; +} +.R_Trick { + background-position: -1148px -4px; + width: 26px; + height: 87px; +} +.Android { + background-position: -1192px -5px; + width: 32px; + height: 94px; +} +.Chimera { + background-position: -1241px -6px; + width: 28px; + height: 80px; +} +.Chimere { + background-position: -1285px -6px; + width: 28px; + height: 80px; +} +.Brain { + background-position: -1329px -6px; + width: 31px; + height: 57px; +} +.N_Brain { + background-position: -1372px -6px; + width: 31px; + height: 57px; +} +.Titan { + background-position: -1429px -4px; + width: 63px; + height: 64px; +} +.Crab { + background-position: -1515px -3px; + width: 60px; + height: 64px; +} +.Romus { + background-position: -1590px -4px; + width: 112px; + height: 127px; +} +.Goron { + background-position: -1713px -4px; + width: 112px; + height: 127px; +} +.Serpent { + background-position: -1830px -1px; + width: 128px; + height: 115px; +} +.Griffan { + background-position: -1975px -3px; + width: 127px; + height: 116px; +} +.Gariso { + background-position: -2108px -362px; + width: 96px; + height: 118px; +} +.Foma { + background-position: -2207px -5px; + width: 128px; + height: 87px; +} +.Gorsia { + background-position: -2130px -484px; + width: 191px; + height: 152px; +} +.Undead { + background-position: -2287px -641px; + width: 55px; + height: 63px; +} +.Unded { + background-position: -2220px -643px; + width: 55px; + height: 63px; +} +.Undeed { + background-position: -2149px -642px; + width: 57px; + height: 64px; +} +.Reaper { + background-position: -2048px -585px; + width: 80px; + height: 85px; +} +.Despair { + background-position: -1953px -584px; + width: 80px; + height: 85px; +} +.Doom { + background-position: -1856px -584px; + width: 80px; + height: 85px; +} +.B_Night { + background-position: -1599px -466px; + width: 37px; + height: 94px; +} +.K_Night { + background-position: -1784px -466px; + width: 38px; + height: 94px; +} +.V_Night { + background-position: -1722px -467px; + width: 38px; + height: 94px; +} +.D_Night { + background-position: -1722px -467px; + width: 38px; + height: 94px; +} +.Ghoul { + background-position: -1534px -275px; + width: 59px; + height: 95px; +} +.Sage { + background-position: -1545px -728px; + width: 35px; + height: 81px; +} +.F_Witch { + background-position: -1484px -279px; + width: 32px; + height: 103px; +} +.S_Witch { + background-position: -1438px -280px; + width: 32px; + height: 103px; +} +.Serpant { + background-position: -1303px -281px; + width: 64px; + height: 83px; +} +.Serpint { + background-position: -1371px -281px; + width: 61px; + height: 83px; +} +.Griffin { + background-position: -1234px -281px; + width: 64px; + height: 83px; +} +.Sword { + background-position: -1357px -650px; + width: 35px; + height: 95px; +} +.P_Moon { + background-position: -1297px -651px; + width: 54px; + height: 86px; +} +.Spidek { + background-position: -1234px -651px; + width: 54px; + height: 86px; +} +.Doros { + background-position: -1171px -478px; + width: 47px; + height: 115px; +} +.Spirit { + background-position: -1103px -475px; + width: 52px; + height: 95px; +} +.Falock { + background-position: -976px -307px; + width: 48px; + height: 66px; +} +.Plater { + background-position: -905px -306px; + width: 48px; + height: 67px; +} +.Statue { + background-position: -836px -306px; + width: 48px; + height: 67px; +} +.Manta { + background-position: -746px -517px; + width: 64px; + height: 67px; +} +.Cocoon { + background-position: -688px -243px; + width: 28px; + height: 56px; +} +.Wyrock { + background-position: -689px -511px; + width: 35px; + height: 96px; +} +.R-Pison { + background-position: -608px -523px; + width: 61px; + height: 96px; +} +.M-Pison { + background-position: -529px -515px; + width: 61px; + height: 96px; +} +.Defeat { + background-position: -470px -635px; + width: 54px; + height: 94px; +} +.Dragon { + background-position: -835px -762px; + width: 63px; + height: 91px; +} +.Dogun { + background-position: -900px -762px; + width: 63px; + height: 91px; +} +.Monmo { + background-position: -966px -762px; + width: 63px; + height: 91px; +} +.Dergun { + background-position: -1033px -762px; + width: 63px; + height: 91px; +} +.Mutant { + background-position: -760px -827px; + width: 44px; + height: 71px; +} diff --git a/web/static/images/7th-saga-enemies-transparent.png b/web/static/images/7th-saga-enemies-transparent.png new file mode 100644 index 0000000..f41a9af Binary files /dev/null and b/web/static/images/7th-saga-enemies-transparent.png differ diff --git a/web/static/saga.js b/web/static/saga.js index 81d4f33..19d1eda 100644 --- a/web/static/saga.js +++ b/web/static/saga.js @@ -315,6 +315,36 @@ update(); + // scale all enemy images to fit in a 64x64 square + $('.enemy-sprite').each((i, el) => { + const $el = $(el); + const width = $el.width(); + const height = $el.height(); + + const maxDimension = 64; + + const scaleFactor = width < maxDimension && height < maxDimension ? 1 : + (width > height ? + maxDimension / width : + maxDimension / height + ); + + const newWidth = width * scaleFactor; + const newHeight = height * scaleFactor; + + let translateX = ((newWidth - width) / 2); + let translateY = ((newHeight - height) / 2); + + translateY -= (newHeight - maxDimension) / 2; + translateX -= (newWidth - maxDimension) / 2; + + $el.css({ + transform: `scaleX(${scaleFactor}) scaleY(${scaleFactor})`, + top: translateY + 'px', + left: translateX + 'px', + }); + }); + const $enemyInfoModal = $('#enemy-info-modal'); if ($enemyInfoModal.length) { let rowData; diff --git a/web/views/enemies.pug b/web/views/enemies.pug index d4b2039..820e643 100644 --- a/web/views/enemies.pug +++ b/web/views/enemies.pug @@ -9,7 +9,7 @@ block tab-content th(colspan="5").text-center.bg-dark.text-light Resistance th(colspan="2") tr.header - th.align-middle Img + th.align-middle.text-center Img +sortHeader('Name', 'name') +sortHeader('Gold', 'gold') +sortHeader('Exp', 'exp') @@ -45,7 +45,7 @@ block tab-content data-spells=((enemy.spells || []).join(',')) data-cls=enemy.cls ) - td + td: div.enemy-sprite-container: div.enemy-sprite(class=(enemy.name.replace('.', '_'))) td: strong= enemy.name td.text-right: code= enemy.gold td.text-right: code= enemy.exp