css bs
目前為
// ==UserScript==
// @name oogadex
// @match *://idle-pixel.com/login/play*
// @grant none
// @version 1.2
// @author ooga booga
// @description css bs
// @require https://greasyfork.org/scripts/441206-idlepixel/code/IdlePixel+.js
// @namespace https://greasyfork.org/users/826975
// ==/UserScript==
class OogaDex extends IdlePixelPlusPlugin {
constructor() {
super("oogadex", {
about: {
name: GM_info.script.name,
version: GM_info.script.version,
author: GM_info.script.author,
description: GM_info.script.description
}
});
}
onLogin() {
let css = document.createElement('style');
css.innerHTML = `
/* https://stackoverflow.com/a/43965099 */
.collapsible-wrapper {
display: flex;
overflow: hidden;
}
.collapsible-wrapper:after {
content: '';
height: 280px;
transition: height 0.2s cubic-bezier(0.5, 0, 0.5, 1), max-height 0s 0.2s cubic-bezier(0.5, 0, 0.5, 1);
max-height: 0px;
}
.collapsible {
transition: margin-bottom 0.2s cubic-bezier(0.5, 0, 0.5, 1);
margin-bottom: 0;
max-height: 1000000px;
border-radius: 0 0 10pt 10pt;
margin-bottom: 15px;
padding-top: 20px;
width: 100%;
}
.collapsible-wrapper.collapsed > .collapsible {
margin-bottom: -5000px;
transition: margin-bottom 0.2s cubic-bezier(0.5, 0, 0.5, 1),
visibility 0s 0.2s, max-height 0s 0.2s;
visibility: hidden;
max-height: 0;
}
.collapsible-wrapper.collapsed:after {
height: 0;
transition: height 0.2s linear;
max-height: 280px;
}
.tcg-card-type-container {
overflow: hidden;
transition: 0.5s;
/* max-height: 5000px; */
margin-bottom: 0px;
max-height: 10000000px;
}
.tcg-card-container {
width: 250px;
display: inline-flex;
}
.tiny {
/* max-height: 0px; */
margin-bottom: -2000px;
max-height: 0px;
}
.tcg-card {
min-width: 200px;
transition: 0.5s;
position: relative;
z-index: 1;
}
.tcg-card:hover {
translate: 0px -20px;
}
.tcg-holo {
position: relative;
/* need to offset an entire card backwards */
translate: calc(-100% - 20px) -20px;
z-index: 0;
}
.tcg-holo:hover {
translate: calc(-100% - 20px) -60px;
}
.tcg-tab {
height: 40px;
padding: 20px;
-webkit-font-smoothing: antialiased;
color: white;
text-shadow: black 0px 0px 1px, black 0px 0px 1px, black 0px 0px 1px, black 0px 0px 1px, black 0px 0px 1px, black 0px 0px 1px, black 0px 0px 1px, black 0px 0px 1px;
display: flex;
align-items: center;
}
.tcg-tab > * {
margin-right: 15px;
transition: 0.2s;
}
.tcg-tab.collapsed .tcg-chevron {
transform: rotate(-90deg);
}
.tcg-category-title {
width: 100px;
}
.tcg-normal-count {
width: 80px;
}
.tcg-holo-count {
color: purple;
}
.tcg-complete {
color: #89ff89;
}
.tcg-incomplete {
color: #ffb9b9;
}
`;
document.head.appendChild(css);
CToe.loadCards = (raw) => {
if(raw == "NONE") return;
let fields = raw.split('~');
let cards = [];
for(let i=0; i<fields.length;){
cards.push({
id: fields[i++],
...CardData.data[fields[i]],
name: fields[i++],
isHolo: fields[i++] == 'true',
});
}
console.log(cards);
let tcgContext = document.getElementById("tcg-area-context");
tcgContext.innerHTML = "";
let categories = [...new Set(Object.entries(CardData.data).map(x => x[1].description_title))];
for(let category of categories){
let entries = Object.entries(CardData.data).filter(x => x[1].description_title == category).map(x => x[1]);
console.log(entries);
let box = document.createElement('div');
box.id = `tcg-type-category-${category}`;
box.className = `tcg-type-category`;
let tab = document.createElement('div');
let normalCount = [...new Set(cards.filter(x => !x.isHolo).map(x => x.label))].filter(x => entries.map(x => x.label).includes(x)).length;
let holoCount = [...new Set(cards.filter(x => x.isHolo).map(x => x.label))].filter(x => entries.map(x => x.label).includes(x)).length;
tab.innerHTML = `
<div class='tcg-chevron'>V</div>
<div class='tcg-category-title'>${category}</div>
<div class='tcg-normal-count ${normalCount >= entries.length ? 'tcg-complete' : 'tcg-incomplete'}'>(${normalCount}/${entries.length})</div>
<div class='tcg-holo-count ${holoCount >= entries.length ? 'tcg-complete' : 'tcg-incomplete'}'>(${holoCount}/${entries.length})</div>
`;
tab.classList.add('hover');
tab.classList.add('tcg-tab');
tab.onclick = function(){
this.classList.toggle('collapsed');
this.nextElementSibling.classList.toggle('collapsed');
};
box.appendChild(tab);
let wrapper = document.createElement('div');
wrapper.className = 'collapsible-wrapper';
let boxEntries = document.createElement('div');
boxEntries.id = `tcg-${category}-entries`;
// boxEntries.className = 'tcg-card-type-container';
boxEntries.className = 'collapsible';
wrapper.appendChild(boxEntries);
box.appendChild(wrapper);
boxEntries.style.backgroundColor = entries[0].background_css.match(/linear-gradient\((.+), [r# ]/)[1];
if(!boxEntries.style.backgroundColor) boxEntries.style.backgroundColor = '#ffd700';
if(boxEntries.style.backgroundColor.startsWith('rgb(')){
tab.style.backgroundColor = 'rgba(' + boxEntries.style.backgroundColor.match(/[\d, ]+/) + ')';
boxEntries.style.backgroundColor = 'rgba(' + boxEntries.style.backgroundColor.match(/[\d, ]+/) + ', 0.5)';
}
for(let entry of entries){
let cardData = cards.filter(x => x.label == entry.label);
if(cardData.length) console.log(entry, cardData);
let name = Object.keys(CardData.data).find(key => CardData.data[key].label == entry.label);
let cardContainer = document.createElement('div');
cardContainer.className = 'tcg-card-container';
boxEntries.appendChild(cardContainer);
// normal
let card = document.createElement('div');
cardContainer.appendChild(card);
card.outerHTML = CardData.getCardHTML(cardData.find(x => !x.isHolo)?.id, name, false);
card = cardContainer.children[cardContainer.children.length-1];
card.style.filter = cardData.find(x => !x.isHolo) ? 'contrast(1)' : 'contrast(0.05) saturate(0) brightness(1.5)';
// holo
card = document.createElement('div');
cardContainer.appendChild(card);
card.outerHTML = CardData.getCardHTML(cardData.find(x => x.isHolo)?.id, name, true);
card = cardContainer.children[cardContainer.children.length-1];
card.classList.add('tcg-holo');
card.style.filter = cardData.find(x => x.isHolo) ? 'contrast(1)' : 'contrast(0.05) saturate(0) brightness(1.5)';
}
tcgContext.appendChild(box);
}
}
}
}
const plugin = new OogaDex();
IdlePixelPlus.registerPlugin(plugin);