524 lines
14 KiB
HTML
524 lines
14 KiB
HTML
<head>
|
|
<script src="js/jquery.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="preview-label" class="preview">
|
|
<h2 id="locale-preview">PREVIEW</h2>
|
|
</div>
|
|
<div class="outfit-bag">
|
|
<span id="amount" class="amount"></span>
|
|
<div class="main-container">
|
|
<div id="outfits" class="bag-container">
|
|
|
|
</div>
|
|
<div class="bag-buttons">
|
|
<div id="save-outfit" class="btn">
|
|
<span id="locale-save-outfit">SAVE CURRENT OUTFIT</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="public-toggle" class="public-toggle">
|
|
<div id="make-public" class="public-toggle-icon">
|
|
<img src="img/lock.png">
|
|
</div>
|
|
<div id="make-private" class="public-toggle-icon">
|
|
<img src="img/unlock.png">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
<script>
|
|
$(document).ready(function () {
|
|
let amount = 0;
|
|
let maxAmount = 10;
|
|
let owned = true;
|
|
let isPublic = false;
|
|
let allowSharing = false;
|
|
|
|
let currentModel = 0;
|
|
|
|
$('body').hide();
|
|
|
|
window.addEventListener('message', ({data}) => {
|
|
if (data.event === 'show') {
|
|
owned = data.owned;
|
|
|
|
if (data.state) {
|
|
currentModel = data.currentModel;
|
|
setOutfits(data.outfits);
|
|
refreshAmount();
|
|
updatePublicState(data.isPublic);
|
|
|
|
if (owned && allowSharing) {
|
|
$('#public-toggle').show();
|
|
} else {
|
|
$('#public-toggle').hide();
|
|
}
|
|
|
|
$('body').fadeIn(150);
|
|
} else {
|
|
$('body').fadeOut(150);
|
|
}
|
|
}
|
|
|
|
if (data.event === 'set') {
|
|
setOutfits(data.outfits);
|
|
}
|
|
|
|
if (data.event === 'update-public') {
|
|
updatePublicState(data.isPublic);
|
|
}
|
|
|
|
if (data.event === 'config') {
|
|
maxAmount = data.maxAmount;
|
|
allowSharing = data.allowSharing;
|
|
|
|
defineHoverColors(data.colors);
|
|
setLocale(data.locale);
|
|
|
|
if (!data.previewEnabled) {
|
|
$('#preview-label').hide();
|
|
}
|
|
}
|
|
|
|
if (data.event === 'clear') {
|
|
$('#outfits').html('');
|
|
amount = 0;
|
|
|
|
refreshAmount();
|
|
}
|
|
});
|
|
|
|
function setLocale(localeData) {
|
|
$('#locale-save-outfit').html(localeData.save);
|
|
$('#locale-preview').html(localeData.preview);
|
|
}
|
|
|
|
function updatePublicState(newState) {
|
|
isPublic = newState;
|
|
|
|
$('.public-toggle-icon').hide();
|
|
|
|
if (isPublic) {
|
|
$('#make-private').show();
|
|
} else {
|
|
$('#make-public').show();
|
|
}
|
|
}
|
|
|
|
function defineHoverColors(colors) {
|
|
const primary = colors.primary;
|
|
const secondary = colors.secondary;
|
|
const colorString = 'rgb(' + primary.r + ', ' + primary.g + ', ' + primary.b + ')';
|
|
const colorStringAlt = 'rgb(' + secondary.r + ', ' + secondary.g + ', ' + secondary.b + ')';
|
|
$(document).on('mouseover', '.btn', (function() {
|
|
$(this).find('span').css('text-shadow', colorStringAlt + ' 0 0 30px, ' + colorString + ' 0 0 20px, ' + colorStringAlt + ' 40px 0 30px, ' + colorString + ' -40px 0 50px');
|
|
}));
|
|
|
|
$(document).on('mouseout', '.btn', (function() {
|
|
$(this).find('span').css('text-shadow', 'none');
|
|
}));
|
|
}
|
|
|
|
function setOutfits(outfits) {
|
|
$('#outfits').html('');
|
|
amount = 0;
|
|
|
|
if (outfits && outfits.length) {
|
|
outfits.forEach((outfit) => {
|
|
appendOutfit(outfit);
|
|
})
|
|
}
|
|
}
|
|
|
|
function appendOutfit(data) {
|
|
amount++;
|
|
|
|
let extraOptions = '';
|
|
if (owned) {
|
|
extraOptions = `
|
|
<div class="options">
|
|
<div class="option delete-btn"></div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
const html = `
|
|
<div class="outfit ` + (currentModel !== data.model ? 'disabled' : '') + `" outfitId="` + data.id + `">
|
|
<div class="btn open-outfit">
|
|
<span>` + data.name + `</span>
|
|
</div>
|
|
<div class="inner">
|
|
<div class="options">
|
|
<div class="option apply style-full" option="full"></div>
|
|
<div class="option apply style-bottom" option="bottom"></div>
|
|
<div class="option apply style-torso" option="top"></div>
|
|
<div class="option apply style-head" option="head"></div>
|
|
</div>
|
|
` + extraOptions + `
|
|
</div>
|
|
</div>`;
|
|
|
|
$('#outfits').append(html);
|
|
|
|
refreshAmount();
|
|
}
|
|
|
|
function refreshAmount() {
|
|
if (owned) {
|
|
$('#amount').html(amount + '/' + maxAmount);
|
|
} else {
|
|
$('#amount').html('');
|
|
}
|
|
|
|
if (amount < maxAmount && owned) {
|
|
$('#save-outfit').show();
|
|
$('.bag-container').css('height', '53vh');
|
|
} else {
|
|
$('#save-outfit').hide();
|
|
$('.bag-container').css('height', '63vh');
|
|
}
|
|
}
|
|
|
|
$(document).on('click', '.open-outfit', function () {
|
|
const $parent = $(this).parent();
|
|
const id = $parent.attr('outfitId');
|
|
|
|
if ($parent.hasClass('disabled')) {
|
|
console.log('disabled');
|
|
fetch(`https://${GetParentResourceName()}/PreviewOutfit`, {
|
|
method: 'POST',
|
|
body: JSON.stringify({
|
|
id,
|
|
})
|
|
});
|
|
return;
|
|
}
|
|
|
|
playUnfold();
|
|
|
|
$('.outfit').each(function () {
|
|
if (!$(this).is($parent)) {
|
|
$(this).removeClass('open');
|
|
}
|
|
});
|
|
|
|
if ($parent.hasClass('open')) {
|
|
$parent.removeClass('open');
|
|
} else {
|
|
$parent.addClass('open');
|
|
|
|
|
|
fetch(`https://${GetParentResourceName()}/PreviewOutfit`, {
|
|
method: 'POST',
|
|
body: JSON.stringify({
|
|
id,
|
|
})
|
|
});
|
|
}
|
|
});
|
|
|
|
|
|
$(document).on('click', '.apply', function () {
|
|
playClick();
|
|
|
|
const id = $(this).closest('.outfit').attr('outfitId');
|
|
|
|
fetch(`https://${GetParentResourceName()}/ApplyOutfit`, {
|
|
method: 'POST',
|
|
body: JSON.stringify({
|
|
id,
|
|
type: $(this).attr('option'),
|
|
})
|
|
});
|
|
});
|
|
|
|
$(document).on('click', '#save-outfit', function () {
|
|
playClick();
|
|
fetch(`https://${GetParentResourceName()}/SaveOutfit`, {
|
|
method: 'POST',
|
|
});
|
|
});
|
|
|
|
$(document).on('click', '.delete-btn', function () {
|
|
playClick();
|
|
|
|
const $outfit = $(this).closest('.outfit');
|
|
const id = $outfit.attr('outfitId');
|
|
$outfit.css('opacity', '1%');
|
|
|
|
fetch(`https://${GetParentResourceName()}/DeleteOutfit`, {
|
|
method: 'POST',
|
|
body: JSON.stringify({
|
|
id
|
|
})
|
|
})
|
|
})
|
|
|
|
|
|
$(document).on('click', '#public-toggle', function () {
|
|
playClick();
|
|
|
|
fetch(`https://${GetParentResourceName()}/TogglePublicState`, {
|
|
method: 'POST',
|
|
body: JSON.stringify({
|
|
newState: !isPublic,
|
|
})
|
|
})
|
|
})
|
|
|
|
|
|
document.addEventListener('keyup', logKey);
|
|
function logKey(e) {
|
|
if (e.key === 'Escape' || e.key === 'Backspace' || e.key === 'e' || e.key === ' ') {
|
|
fetch(`https://${GetParentResourceName()}/CloseBag`, {
|
|
method: 'POST',
|
|
})
|
|
}
|
|
}
|
|
|
|
fetch(`https://${GetParentResourceName()}/UILoaded`, {
|
|
method: 'POST',
|
|
});
|
|
|
|
const clickSound = new Audio('sounds/click.mp3');
|
|
clickSound.volume = 0.5;
|
|
function playClick() {
|
|
clickSound.play();
|
|
}
|
|
|
|
const unfoldSound = new Audio('sounds/unfold.mp3');
|
|
unfoldSound.volume = 0.3;
|
|
|
|
function playUnfold() {
|
|
unfoldSound.play();
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
@font-face {
|
|
font-family: Barlow;
|
|
src: url('fonts/barlow.ttf') format('truetype');
|
|
}
|
|
|
|
body {
|
|
font-family: Barlow, sans-serif !important;
|
|
font-weight: bold;
|
|
user-select: none;
|
|
display: none;
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.preview {
|
|
position: absolute;
|
|
color: white;
|
|
font-size: 2rem;
|
|
top: 15vh;
|
|
left: 4.5vw;
|
|
width: 23vw;
|
|
text-align: center;
|
|
}
|
|
|
|
.outfit-bag {
|
|
background-image: url('img/outfitbag.png');
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: 4vh;
|
|
width: 58vh;
|
|
height: 88vh;
|
|
right: 5vh;
|
|
top: 5vh;
|
|
position: absolute;
|
|
}
|
|
|
|
.outfit {
|
|
position: relative;
|
|
transition-duration: 0.25s;
|
|
}
|
|
|
|
.outfit.open .inner {
|
|
height: 4vh;
|
|
padding: 0.5vh;
|
|
}
|
|
|
|
.outfit .inner {
|
|
display: flex;
|
|
height: 0;
|
|
background-color: rgba(255, 255, 255, 0.3);
|
|
justify-content: space-between;
|
|
padding: 0;
|
|
transition-duration: 0.2s;
|
|
backdrop-filter: blur(4px);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.outfit .inner .options {
|
|
display: flex;
|
|
gap: 1vh;
|
|
align-items: center;
|
|
}
|
|
|
|
.outfit.disabled {
|
|
opacity: 40%;
|
|
}
|
|
|
|
.options .option {
|
|
width: 4vh;
|
|
height: 4vh;
|
|
}
|
|
|
|
.main-container {
|
|
padding: 15vh 11vh 2vh 17.5vh;
|
|
}
|
|
|
|
.bag-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
color: white;
|
|
gap: 4px;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.bag-buttons {
|
|
margin-top: 1vh;
|
|
width: 100%;
|
|
}
|
|
|
|
.btn {
|
|
color: white;
|
|
height: 2.5vh;
|
|
background: rgb(193, 193, 193);
|
|
background: linear-gradient(90deg, rgba(119, 119, 119, 0.25) 0%, rgba(255, 255, 255, 0.25) 50%, rgba(119, 119, 119, 0.25) 100%);
|
|
padding: 1.5vh;
|
|
transition-duration: 0.2s;
|
|
cursor: pointer;
|
|
line-height: 2.5vh;
|
|
text-align: center;
|
|
font-size: 2.5vh;
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
|
|
.btn span {
|
|
transition-duration: 0.2s;
|
|
text-transform: uppercase;
|
|
font-weight: lighter;
|
|
}
|
|
|
|
.public-toggle {
|
|
opacity: 60%;
|
|
position: absolute;
|
|
bottom: 15vh;
|
|
left: 14vh;
|
|
transition-duration: 0.2s;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.public-toggle:hover {
|
|
opacity: 90%;
|
|
}
|
|
|
|
.public-toggle img {
|
|
width: 2.5vh;
|
|
height: 2.5vh;
|
|
}
|
|
.outfit.open .btn {
|
|
box-shadow: black 0 1px 2px;
|
|
}
|
|
|
|
.outfit .btn {
|
|
height: 1.5vh;
|
|
line-height: 1.5vh;
|
|
}
|
|
|
|
.delete-btn {
|
|
float: right;
|
|
color: white;
|
|
|
|
filter: saturate(0%) brightness(500%);
|
|
background-image: url('img/trash.png');
|
|
height: 2.5vh !important;
|
|
width: 2.5vh !important;
|
|
transition-duration: 0.2s;
|
|
}
|
|
|
|
.delete-btn:hover {
|
|
filter: saturate(100%);
|
|
}
|
|
|
|
.option.style-full {
|
|
background-image: url('img/full.png');
|
|
}
|
|
|
|
.option.style-torso {
|
|
background-image: url('img/torso.png');
|
|
}
|
|
|
|
.option.style-bottom {
|
|
background-image: url('img/bottom.png');
|
|
}
|
|
|
|
.option.style-head {
|
|
background-image: url('img/head.png');
|
|
}
|
|
|
|
.option {
|
|
cursor: pointer;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
transition-duration: 0.15s;
|
|
}
|
|
|
|
.option:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.btn:hover {
|
|
background-color: rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.btn:active {
|
|
background-color: rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
.amount {
|
|
color: #606060;
|
|
position: absolute;
|
|
right: 24vh;
|
|
top: 13vh;
|
|
font-size: 1.4vh;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.model-span {
|
|
position: absolute;
|
|
left: 2vh;
|
|
top: 1.4vh;
|
|
color: #606060;
|
|
line-height: 2.5vh;
|
|
font-size: 1.25vh;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* width */
|
|
::-webkit-scrollbar {
|
|
width: 0;
|
|
}
|
|
|
|
/* Track */
|
|
::-webkit-scrollbar-track {
|
|
display: none;
|
|
}
|
|
|
|
/* Handle */
|
|
::-webkit-scrollbar-thumb {
|
|
display: none;
|
|
}
|
|
</style>
|