Index/polyplus
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: avatar sandbox change body part colors feature

Browse source
This commit is contained in:
Index 2024-07-04 04:45:45 -05:00
parent ca5eb0829d
commit 2d6e5bd947
2 changed files with 98 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
js/account/avatar-sandbox.js
View file

@ -70,6 +70,9 @@ let Order = "desc"
let ShowOffsale = true
let TabSelected = "hat"
/* Customization */
let SelectedBodyPart
!(async () => {
Utilities = await import(chrome.runtime.getURL('resources/utils.js'));
Utilities = Utilities.default;
@ -118,6 +121,24 @@ async function PageLoad() {
});
});
const BodyColorsModal = document.getElementById('p+body_colors')
const BodyParts = Array.from(document.getElementsByClassName('bodypart'))
BodyParts.forEach(part => {
part.addEventListener('click', function(){
SelectedBodyPart = part.id
BodyColorsModal.showModal()
})
})
const BodyColors = Array.from(document.getElementsByClassName('colorpicker-color'))
BodyColors.forEach(color => {
color.addEventListener('click', function(){
Avatar[SelectedBodyPart+'Color'] = color.style.backgroundColor
BodyColorsModal.close()
UpdateAvatar()
})
})
const ItemSearch = document.getElementById('search-btn')
ItemSearch.addEventListener('click', function(){
Search = ItemSearch.previousElementSibling.value

77
resources/avatar-sandbox.html
View file

@ -35,6 +35,83 @@
margin-bottom: 3.5px;
}
</style>
<dialog id="p+body_colors" class="polyplus-modal" style="width: 375px; border: 1px solid #484848; background-color: #181818; border-radius: 20px; overflow: hidden;">
<div class="row text-muted mb-4" style="font-size: 0.8rem;">
<div class="col">
<h5 class="mb-0" style="color: #fff;">Modify Body Colors</h5>
Selected Body Part: <i id="p+selected-bodypart">none</i>
</div>
<div class="col-md-2">
<button class="btn btn-info w-100 mx-auto" onclick="this.parentElement.parentElement.parentElement.close();">X</button>
</div>
</div>
<div class="modal-body wrapper">
<div class="colorpicker-color" style="background-color: #f8f8f8" data-color="#f8f8f8"></div>
<div class="colorpicker-color" style="background-color: #cdcdcd" data-color="#cdcdcd"></div>
<div class="colorpicker-color" style="background-color: #111111" data-color="#111111"></div>
<div class="colorpicker-color" style="background-color: #ff0000" data-color="#ff0000"></div>
<div class="colorpicker-color" style="background-color: #a34b4b" data-color="#a34b4b"></div>
<div class="colorpicker-color" style="background-color: #ffc9c9" data-color="#ffc9c9"></div>
<div class="colorpicker-color" style="background-color: #957977" data-color="#957977"></div>
<div class="colorpicker-color" style="background-color: #c4281c" data-color="#c4281c"></div>
<div class="colorpicker-color" style="background-color: #da867a" data-color="#da867a"></div>
<div class="colorpicker-color" style="background-color: #694028" data-color="#694028"></div>
<div class="colorpicker-color" style="background-color: #cc8e69" data-color="#cc8e69"></div>
<div class="colorpicker-color" style="background-color: #a05f35" data-color="#a05f35"></div>
<div class="colorpicker-color" style="background-color: #7c5c46" data-color="#7c5c46"></div>
<div class="colorpicker-color" style="background-color: #eab892" data-color="#eab892"></div>
<div class="colorpicker-color" style="background-color: #da8541" data-color="#da8541"></div>
<div class="colorpicker-color" style="background-color: #aa5500" data-color="#aa5500"></div>
<div class="colorpicker-color" style="background-color: #ffcc99" data-color="#ffcc99"></div>
<div class="colorpicker-color" style="background-color: #e29b40" data-color="#e29b40"></div>
<div class="colorpicker-color" style="background-color: #ffaf00" data-color="#ffaf00"></div>
<div class="colorpicker-color" style="background-color: #ffb000" data-color="#ffb000"></div>
<div class="colorpicker-color" style="background-color: #d7c59a" data-color="#d7c59a"></div>
<div class="colorpicker-color" style="background-color: #f5cd30" data-color="#f5cd30"></div>
<div class="colorpicker-color" style="background-color: #fdea8d" data-color="#fdea8d"></div>
<div class="colorpicker-color" style="background-color: #e5e4df" data-color="#e5e4df"></div>
<div class="colorpicker-color" style="background-color: #c1be42" data-color="#c1be42"></div>
<div class="colorpicker-color" style="background-color: #ffff00" data-color="#ffff00"></div>
<div class="colorpicker-color" style="background-color: #ffffcc" data-color="#ffffcc"></div>
<div class="colorpicker-color" style="background-color: #a4bd47" data-color="#a4bd47"></div>
<div class="colorpicker-color" style="background-color: #7f8e64" data-color="#7f8e64"></div>
<div class="colorpicker-color" style="background-color: #a1c48c" data-color="#a1c48c"></div>
<div class="colorpicker-color" style="background-color: #3a7d15" data-color="#3a7d15"></div>
<div class="colorpicker-color" style="background-color: #4b974b" data-color="#4b974b"></div>
<div class="colorpicker-color" style="background-color: #00ff00" data-color="#00ff00"></div>
<div class="colorpicker-color" style="background-color: #ccffcc" data-color="#ccffcc"></div>
<div class="colorpicker-color" style="background-color: #27462d" data-color="#27462d"></div>
<div class="colorpicker-color" style="background-color: #287f47" data-color="#287f47"></div>
<div class="colorpicker-color" style="background-color: #789082" data-color="#789082"></div>
<div class="colorpicker-color" style="background-color: #9ff3e9" data-color="#9ff3e9"></div>
<div class="colorpicker-color" style="background-color: #12eed4" data-color="#12eed4"></div>
<div class="colorpicker-color" style="background-color: #f2f3f3" data-color="#f2f3f3"></div>
<div class="colorpicker-color" style="background-color: #00ffff" data-color="#00ffff"></div>
<div class="colorpicker-color" style="background-color: #008f9c" data-color="#008f9c"></div>
<div class="colorpicker-color" style="background-color: #04afec" data-color="#04afec"></div>
<div class="colorpicker-color" style="background-color: #80bbdb" data-color="#80bbdb"></div>
<div class="colorpicker-color" style="background-color: #b4d2e4" data-color="#b4d2e4"></div>
<div class="colorpicker-color" style="background-color: #0d69ac" data-color="#0d69ac"></div>
<div class="colorpicker-color" style="background-color: #1b2a35" data-color="#1b2a35"></div>
<div class="colorpicker-color" style="background-color: #afddff" data-color="#afddff"></div>
<div class="colorpicker-color" style="background-color: #6e99ca" data-color="#6e99ca"></div>
<div class="colorpicker-color" style="background-color: #74869d" data-color="#74869d"></div>
<div class="colorpicker-color" style="background-color: #2154b9" data-color="#2154b9"></div>
<div class="colorpicker-color" style="background-color: #002060" data-color="#002060"></div>
<div class="colorpicker-color" style="background-color: #0000ff" data-color="#0000ff"></div>
<div class="colorpicker-color" style="background-color: #b1a7ff" data-color="#b1a7ff"></div>
<div class="colorpicker-color" style="background-color: #a3a2a5" data-color="#a3a2a5"></div>
<div class="colorpicker-color" style="background-color: #6225d1" data-color="#6225d1"></div>
<div class="colorpicker-color" style="background-color: #b480ff" data-color="#b480ff"></div>
<div class="colorpicker-color" style="background-color: #8c5b9f" data-color="#8c5b9f"></div>
<div class="colorpicker-color" style="background-color: #6b327c" data-color="#6b327c"></div>
<div class="colorpicker-color" style="background-color: #aa00aa" data-color="#aa00aa"></div>
<div class="colorpicker-color" style="background-color: #635f62" data-color="#635f62"></div>
<div class="colorpicker-color" style="background-color: #ff00bf" data-color="#ff00bf"></div>
<div class="colorpicker-color" style="background-color: #ff66cc" data-color="#ff66cc"></div>
<div class="colorpicker-color" style="background-color: #e8bac8" data-color="#e8bac8"></div>
</div>
</dialog>
<div class="row">
<div class="col-12 col-lg-3">
<div class="card mcard mb-3">