kind of added enemy images
This commit is contained in:
parent
19e4c4199f
commit
c42469abb0
@ -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;
|
||||
}
|
||||
|
||||
BIN
web/static/images/7th-saga-enemies-transparent.png
Normal file
BIN
web/static/images/7th-saga-enemies-transparent.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 666 KiB |
@ -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;
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user