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 {
|
table.row-clickable tbody.data td {
|
||||||
cursor: pointer;
|
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();
|
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');
|
const $enemyInfoModal = $('#enemy-info-modal');
|
||||||
if ($enemyInfoModal.length) {
|
if ($enemyInfoModal.length) {
|
||||||
let rowData;
|
let rowData;
|
||||||
|
|||||||
@ -9,7 +9,7 @@ block tab-content
|
|||||||
th(colspan="5").text-center.bg-dark.text-light Resistance
|
th(colspan="5").text-center.bg-dark.text-light Resistance
|
||||||
th(colspan="2")
|
th(colspan="2")
|
||||||
tr.header
|
tr.header
|
||||||
th.align-middle Img
|
th.align-middle.text-center Img
|
||||||
+sortHeader('Name', 'name')
|
+sortHeader('Name', 'name')
|
||||||
+sortHeader('Gold', 'gold')
|
+sortHeader('Gold', 'gold')
|
||||||
+sortHeader('Exp', 'exp')
|
+sortHeader('Exp', 'exp')
|
||||||
@ -45,7 +45,7 @@ block tab-content
|
|||||||
data-spells=((enemy.spells || []).join(','))
|
data-spells=((enemy.spells || []).join(','))
|
||||||
data-cls=enemy.cls
|
data-cls=enemy.cls
|
||||||
)
|
)
|
||||||
td
|
td: div.enemy-sprite-container: div.enemy-sprite(class=(enemy.name.replace('.', '_')))
|
||||||
td: strong= enemy.name
|
td: strong= enemy.name
|
||||||
td.text-right: code= enemy.gold
|
td.text-right: code= enemy.gold
|
||||||
td.text-right: code= enemy.exp
|
td.text-right: code= enemy.exp
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user