mirror of
https://github.com/marcrobledo/savegame-editors.git
synced 2025-04-24 16:35:10 +00:00
Added cats to the breed selection.
This commit is contained in:
magiczocker10
GitHub
parent
67b6819a8f
commit
c8706807e2
@ -12,6 +12,17 @@
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
#menu .menu-sidebar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#menu[data-type="dog"] #menu-sidebar-dog {
|
||||
display: unset;
|
||||
}
|
||||
#menu[data-type="cat"] #menu-sidebar-cat {
|
||||
display: unset;
|
||||
}
|
||||
|
||||
#menu-close {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
@ -29,7 +40,7 @@
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
#menu-sidebar {
|
||||
.menu-sidebar {
|
||||
background: #e6e6e7;
|
||||
font-family: 'Open Sans',sans-serif;
|
||||
grid-area: a;
|
||||
@ -40,27 +51,27 @@
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#menu-sidebar div {
|
||||
.menu-sidebar div {
|
||||
padding: 5px;
|
||||
}
|
||||
#menu-sidebar .header {
|
||||
.menu-sidebar .header {
|
||||
color: gray;
|
||||
font-size:small;
|
||||
font-weight: bold;
|
||||
}
|
||||
#menu-sidebar .header:not(:first-of-type) {
|
||||
.menu-sidebar .header:not(:first-of-type) {
|
||||
padding-top: 10px;
|
||||
}
|
||||
#menu-sidebar > div[class^="page-"] {
|
||||
.menu-sidebar > div[class^="page-"] {
|
||||
text-indent: 1em;
|
||||
}
|
||||
#menu-sidebar > div[class^="page-"]:hover {
|
||||
.menu-sidebar > div[class^="page-"]:hover {
|
||||
background: #cececf;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#menu-sidebar > div[open] {
|
||||
.menu-sidebar > div[open] {
|
||||
background: #cececf;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
@ -1,39 +1,44 @@
|
||||
var spriteBaseURL = 'https://www.spriters-resource.com/resources/sheets/112/%0.png';
|
||||
var spriteData = {
|
||||
// Dogs
|
||||
basset_hound: {sprite_id: '114733', row: 6},
|
||||
beagle: {sprite_id: '114732', row: 6},
|
||||
golden_retriever: {sprite_id: '114737', row: 6},
|
||||
yorkshire_terrier: {sprite_id: '114736', row: 6},
|
||||
miniature_dachshund: {sprite_id: '114902', row: 5},
|
||||
miniature_dachshund1: {sprite_id: '114902', row: 1},
|
||||
boxer: {sprite_id: '114888', row: 6},
|
||||
bull_terrier: {sprite_id: '114889', row: 6},
|
||||
chihuahua: {sprite_id: '114890', row: 6},
|
||||
chihuahua1: {sprite_id: '114890', row: 2},
|
||||
toy_poodle: {sprite_id: '114905', row: 5},
|
||||
toy_poodle1: {sprite_id: '114905', row: 1},
|
||||
shiba: {sprite_id: '114908', row: 5},
|
||||
cocker_spaniel: {sprite_id: '114893', row: 5},
|
||||
dalmatian: {sprite_id: '114891', row: 6},
|
||||
french_bulldog: {sprite_id: '114892', row: 5},
|
||||
german_shepherd_dog: {sprite_id: '114896', row: 6},
|
||||
golden_retriever: {sprite_id: '114737', row: 6},
|
||||
great_dane: {sprite_id: '114895', row: 6},
|
||||
jack_russell_terrier: {sprite_id: '114898', row: 6},
|
||||
labrador_retriever: {sprite_id: '114900', row: 5},
|
||||
labrador_retriever1: {sprite_id: '114900', row: 1},
|
||||
spaniel: {sprite_id: '114901', row: 5},
|
||||
pug: {sprite_id: '114906', row: 5},
|
||||
shih_tzu: {sprite_id: '114909', row: 5},
|
||||
shetland_sheepdog: {sprite_id: '114912', row: 6},
|
||||
maltese: {sprite_id: '114734', row: 6},
|
||||
miniature_dachshund: {sprite_id: '114902', row: 5},
|
||||
miniature_dachshund1: {sprite_id: '114902', row: 1},
|
||||
miniature_pinscher: {sprite_id: '114903', row: 5},
|
||||
miniature_schnauzer: {sprite_id: '114904', row: 5},
|
||||
miniature_schnauzer1: {sprite_id: '114904', row: 1},
|
||||
pembroke_welsh_corgi: {sprite_id: '114899', row: 6},
|
||||
miniature_pinscher: {sprite_id: '114903', row: 5},
|
||||
german_shepherd_dog: {sprite_id: '114896', row: 6},
|
||||
jack_russell_terrier: {sprite_id: '114898', row: 6},
|
||||
siberian_husky: {sprite_id: '114897', row: 6},
|
||||
boxer: {sprite_id: '114888', row: 6},
|
||||
dalmatian: {sprite_id: '114891', row: 6},
|
||||
pomeranian: {sprite_id: '114907', row: 6},
|
||||
pomeranian1: {sprite_id: '114907', row: 1},
|
||||
french_bulldog: {sprite_id: '114892', row: 5},
|
||||
cocker_spaniel: {sprite_id: '114893', row: 5},
|
||||
maltese: {sprite_id: '114734', row: 6},
|
||||
great_dane: {sprite_id: '114895', row: 6},
|
||||
bull_terrier: {sprite_id: '114889', row: 6},
|
||||
basset_hound: {sprite_id: '114733', row: 6},
|
||||
robo_pup: {sprite_id: '114735', row: 5}
|
||||
pug: {sprite_id: '114906', row: 5},
|
||||
robo_pup: {sprite_id: '114735', row: 5},
|
||||
shetland_sheepdog: {sprite_id: '114912', row: 6},
|
||||
shiba: {sprite_id: '114908', row: 5},
|
||||
shih_tzu: {sprite_id: '114909', row: 5},
|
||||
siberian_husky: {sprite_id: '114897', row: 6},
|
||||
spaniel: {sprite_id: '114901', row: 5},
|
||||
toy_poodle: {sprite_id: '114905', row: 5},
|
||||
toy_poodle1: {sprite_id: '114905', row: 1},
|
||||
yorkshire_terrier: {sprite_id: '114736', row: 6},
|
||||
// Cats
|
||||
standard: {sprite_id: '114911', row: 6},
|
||||
oriental: {sprite_id: '114910', row: 6},
|
||||
longhair: {sprite_id: '114894', row: 18}
|
||||
}
|
||||
window.spriteData = spriteData;
|
||||
|
||||
@ -48,16 +53,28 @@ window.addEventListener('load', function() {
|
||||
'use strict';
|
||||
const btnClose = document.getElementById('menu-close'),
|
||||
menu = document.getElementById('menu'),
|
||||
sidebar = document.getElementById('menu-sidebar'),
|
||||
sidebar_dog = document.getElementById('menu-sidebar-dog'),
|
||||
sidebar_cat = document.getElementById('menu-sidebar-cat'),
|
||||
content = document.getElementById('menu-content');
|
||||
|
||||
var sidebar_event = function(e) {
|
||||
if (!e.target.className.startsWith('page-')) {return;}
|
||||
var old = sidebar.querySelector('div[open]');
|
||||
var old = sidebar_dog.querySelector('div[open]');
|
||||
if (old) {
|
||||
old.removeAttribute('open');
|
||||
content.querySelector('.' + old.className).style.display = 'none';
|
||||
}
|
||||
old = sidebar_cat.querySelector('div[open]');
|
||||
if (old) {
|
||||
old.removeAttribute('open');
|
||||
content.querySelector('.' + old.className).style.display = 'none';
|
||||
}
|
||||
var tmp = e.target.className.match(/\d+/g);
|
||||
if (tmp[0] >= 29 && tmp[0] <= 31) {
|
||||
menu.dataset.type = 'cat';
|
||||
} else {
|
||||
menu.dataset.type = 'dog';
|
||||
}
|
||||
e.target.setAttribute('open', true);
|
||||
var newContent = content.querySelector('.' + e.target.className);
|
||||
if (!newContent) {
|
||||
@ -66,7 +83,7 @@ window.addEventListener('load', function() {
|
||||
var offset = Number(e.target.getAttribute('image-offset'));
|
||||
var sD = spriteData[e.target.getAttribute('breed')];
|
||||
var offX = -4;
|
||||
var offY = -4 - 68*Math.ceil(offset / sD.row);
|
||||
var offY = -4 - 68 * Math.ceil(offset / sD.row);
|
||||
var color = 0;
|
||||
var style = 0;
|
||||
for (var i = offset; i<offset+Number(e.target.getAttribute('image-items')); i++) {
|
||||
@ -79,14 +96,16 @@ window.addEventListener('load', function() {
|
||||
newContent.appendChild(ele);
|
||||
offX -= 68;
|
||||
style++;
|
||||
if (((i-offset) > 0 || sD.row === 1) && (i-offset) % sD.row == sD.row-1) {
|
||||
offX = -4;
|
||||
offY -= 68;
|
||||
if (style >= (e.target.dataset.percolor || sD.row)) {
|
||||
color++;
|
||||
style=0;
|
||||
}
|
||||
if (((i-offset) > 0 || sD.row === 1) && (i-offset) % sD.row == sD.row-1) {
|
||||
offX = -4;
|
||||
offY -= 68;
|
||||
}
|
||||
}
|
||||
newContent.style.width = 74 * sD.row;
|
||||
newContent.style.width = 74 * (e.target.dataset.percolor || sD.row) + 'px';
|
||||
content.appendChild(newContent);
|
||||
} else {
|
||||
newContent.style.removeProperty('display');
|
||||
@ -95,7 +114,8 @@ window.addEventListener('load', function() {
|
||||
|
||||
};
|
||||
window._sidebar_event = sidebar_event;
|
||||
sidebar.addEventListener('click', sidebar_event, false);
|
||||
sidebar_dog.addEventListener('click', sidebar_event, false);
|
||||
sidebar_cat.addEventListener('click', sidebar_event, false);
|
||||
content.addEventListener('click', function(e) {
|
||||
if (!e.target.className.includes('sprite')) {return;}
|
||||
var tmp = e.target.parentElement.className.match(/\d+/g);
|
||||
|
||||
@ -44,12 +44,12 @@
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<dialog id="menu">
|
||||
<div id="menu-sidebar">
|
||||
<dialog id="menu" data-type="dog">
|
||||
<div class="menu-sidebar" id="menu-sidebar-dog">
|
||||
<div class="header">Beagle</div>
|
||||
<div breed='beagle' image-offset="0" image-items="30" class="page-0-0">Tricolour</div>
|
||||
<div breed='beagle' image-offset="30" image-items="30" class="page-0-1">Lemon & White</div>
|
||||
<div breed='beagle' image-offset="60" image-items="31" class="page-0-2">Surprise me!</div>
|
||||
<div breed='beagle' image-offset="60" image-items="31" class="page-0-12">Surprise me!</div>
|
||||
<div class="header">Golden Retriever</div>
|
||||
<div breed="golden_retriever" image-offset="0" image-items="10" class="page-1-0">Golden</div>
|
||||
<div breed="golden_retriever" image-offset="12" image-items="31" class="page-1-12">Surprise me!</div>
|
||||
@ -70,24 +70,24 @@
|
||||
<div breed='toy_poodle1' image-offset="6" image-items="5" class="page-7-0">Clipped Muzzle</div>
|
||||
<div breed='toy_poodle' image-offset="55" image-items="31" class="page-7-12">Surprise me!</div>
|
||||
<div class="header">Shiba</div>
|
||||
<div breed='shiba' image-offset="0" image-items="30" class="page-8-0">Red & White</div>
|
||||
<div breed='shiba' image-offset="30" image-items="30" class="page-8-1">Black & Tan</div>
|
||||
<div breed='shiba' image-offset="60" image-items="61" class="page-8-12">Surprise me!</div>
|
||||
<div breed='shiba' image-offset="0" image-items="30" class="page-8-0" data-percolor="6">Red & White</div>
|
||||
<div breed='shiba' image-offset="30" image-items="30" class="page-8-1" data-percolor="6">Black & Tan</div>
|
||||
<div breed='shiba' image-offset="60" image-items="61" class="page-8-12" data-percolor="6">Surprise me!</div>
|
||||
<div class="header">Labrador Retriever</div>
|
||||
<div breed='labrador_retriever1' image-offset="0" image-items="5" class="page-9-0">Yellow</div>
|
||||
<div breed='labrador_retriever1' image-offset="5" image-items="6" class="page-9-1">Black</div>
|
||||
<div breed='labrador_retriever1' image-offset="11" image-items="5" class="page-9-2">Chocolate</div>
|
||||
<div breed='labrador_retriever' image-offset="80" image-items="31" class="page-9-12">Surprise me!</div>
|
||||
<div breed='labrador_retriever' image-offset="80" image-items="31" class="page-9-12" data-percolor="6">Surprise me!</div>
|
||||
<div class="header">Spaniel</div>
|
||||
<div breed='spaniel' image-offset="0" image-items="30" class="page-10-0">Blentheim</div>
|
||||
<div breed='spaniel' image-offset="0" image-items="30" class="page-10-1">Tricolour</div>
|
||||
<div breed='spaniel' image-offset="0" image-items="30" class="page-10-2">Ruby</div>
|
||||
<div breed='spaniel' image-offset="0" image-items="30" class="page-10-12">Surprise me!</div>
|
||||
<div breed='spaniel' image-offset="0" image-items="30" class="page-10-0" data-percolor="6">Blentheim</div>
|
||||
<div breed='spaniel' image-offset="30" image-items="30" class="page-10-1" data-percolor="6">Tricolour</div>
|
||||
<div breed='spaniel' image-offset="60" image-items="5" class="page-10-2" data-percolor="6">Ruby</div>
|
||||
<div breed='spaniel' image-offset="65" image-items="31" class="page-10-12" data-percolor="6">Surprise me!</div>
|
||||
<div class="header">Pug</div>
|
||||
<div breed='pug' image-offset="0" image-items="30" class="page-11-0">Silver</div>
|
||||
<div breed='pug' image-offset="30" image-items="5" class="page-11-1">Black</div>
|
||||
<div breed='pug' image-offset="35" image-items="30" class="page-11-2">Apricot</div>
|
||||
<div breed='pug' image-offset="65" image-items="31" class="page-11-12">Surprise me!</div>
|
||||
<div breed='pug' image-offset="0" image-items="30" class="page-11-0" data-percolor="6">Silver</div>
|
||||
<div breed='pug' image-offset="30" image-items="5" class="page-11-1" data-percolor="6">Black</div>
|
||||
<div breed='pug' image-offset="35" image-items="30" class="page-11-2" data-percolor="6">Apricot</div>
|
||||
<div breed='pug' image-offset="65" image-items="31" class="page-11-12" data-percolor="6">Surprise me!</div>
|
||||
<div class="header">Shih Tzu</div>
|
||||
<div breed='shih_tzu' image-offset="0" image-items="30" class="page-12-0">Brown & White</div>
|
||||
<div breed='shih_tzu' image-offset="30" image-items="30" class="page-12-1">Brindle & White</div>
|
||||
@ -161,6 +161,21 @@
|
||||
<div class="header">Robo Pup</div>
|
||||
<div breed='robo_pup' image-offset="0" image-items="21" class="page-32-0">Untitled</div>
|
||||
</div>
|
||||
<div class="menu-sidebar" id="menu-sidebar-cat">
|
||||
<div class="header">Standard Cat</div>
|
||||
<div breed='standard' image-offset="390" image-items="180" class="page-29-2" data-percolor="18">Solid</div>
|
||||
<div breed='standard' image-offset="0" image-items="180" class="page-29-0" data-percolor="18">Tabby</div>
|
||||
<div breed='standard' image-offset="570" image-items="201" class="page-29-12" data-percolor="18">Spotted Tabby</div>
|
||||
<div breed='standard' image-offset="180" image-items="210" class="page-29-1" data-percolor="21">Calico</div>
|
||||
<div class="header">Oriental Cat</div>
|
||||
<div breed='oriental' image-offset="0" image-items="180" class="page-30-0" data-percolor="18">Pointed</div>
|
||||
<div breed='oriental' image-offset="180" image-items="180" class="page-30-1" data-percolor="18">Smoke</div>
|
||||
<div breed='oriental' image-offset="360" image-items="33" class="page-30-12" data-percolor="3">Surprise me!</div>
|
||||
<div class="header">Longhaired Cat</div>
|
||||
<div breed='longhair' image-offset="0" image-items="180" class="page-31-0" data-percolor="18">Pointed</div>
|
||||
<div breed='longhair' image-offset="180" image-items="363" class="page-31-1" data-percolor="18">Bicolour</div>
|
||||
<!--<div breed='longhair' image-offset="540" image-items="200" class="page-31-12">Surprise me!</div>-->
|
||||
</div>
|
||||
<div id="menu-content">
|
||||
</div>
|
||||
<button id="menu-close">OK</button>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user