From 53564310ae1a08eac675a83a0c468c6ba92781ee Mon Sep 17 00:00:00 2001 From: Powerkhan <78354069+Powerkhan@users.noreply.github.com> Date: Wed, 24 Feb 2021 14:19:53 -0500 Subject: [PATCH] Create pokemon.js Edits for sports ticker theme to show a slight bit more of information: adds in picture of held item shows overall exp the pokemon has earned since you caught it and shrinks the sprite picture a little. --- .../ticker/assets/js/components/pokemon.js | 256 ++++++++++++++++++ 1 file changed, 256 insertions(+) create mode 100644 CustomThemes/ticker/assets/js/components/pokemon.js diff --git a/CustomThemes/ticker/assets/js/components/pokemon.js b/CustomThemes/ticker/assets/js/components/pokemon.js new file mode 100644 index 0000000..31ad829 --- /dev/null +++ b/CustomThemes/ticker/assets/js/components/pokemon.js @@ -0,0 +1,256 @@ +Vue.component("Pokemon", { + template: ` +
+
+
+
+ +
+
+ +
+
+
+
Lv.{{pokemon.level}}
+
HP: {{pokemon.hp.current}} / {{ pokemon.hp.max}}
+
Exp: {{pokemon.exp}}
+
+
+ Egg +
+
+
{{pokemon.speciesName}}
{{pokemon.nickname}}
+
+
+ {{statusEffectsSlide}} + {{pokemon.hiddenpower}} +
+
+
`, + props: { + pokemon: {}, + key: {} + }, + data() { + return { + fixedSprite: false, + settings: null, + customCardArt: null, + pokeIsChanging: false, + isFresh: true, + newCardArt: null, + sets: [] + } + }, + created() { + this.settings = window.settings; + this.sets = this.settings.theme.pokemonTCGCardSets() + }, + mounted() { + this.pokeIsChanging = false + if (this.pokemonExists && this.settings.pokeImg.useCardArtBackground) this.getNewCardArt(this.pokemon) + if (this.pokemonExists === false) this.actionOnImageLoaded() + }, + computed: { + isDead() { + if (this.pokemonExists === false) { return false; } + + return parseFloat(this.healthPercent) === 0 + }, + pokemonExists() { + if (!this.pokemon || !this.pokemon.hasOwnProperty('hp')) return false + return true + }, + healthPercent() { + if (this.pokemonExists === false) { return '0%'; } + return (100 / this.pokemon.hp.max) * this.pokemon.hp.current + "%"; + }, + nickname() { + if (typeof this.pokemon === "undefined" || this.pokemon === null) { return null; } + return this.pokemon.nickname || this.pokemon.speciesName; + }, + sex() { + if (this.pokemonExists === false) { return null } + return (this.pokemon.isGenderless ? '' : (this.pokemon.isFemale ? 'female' : 'male')) + }, + ident() { + if (typeof this.pokemon === "undefined" || this.pokemon === null) { return null; } + return this.pokemon.species; + }, + opacity() { + if (typeof this.pokemon === "undefined" || this.pokemon === null) { return '1'; } + if (typeof this.fixedSprite === false) { return ''; } + return ''; + }, + hasItem() { + if (typeof this.pokemon === "undefined" || this.pokemon === null) { return false; } + if (typeof this.pokemon.heldItem === "undefined") { return false; } + return this.pokemon.heldItem.id !== 0; + }, + + type1() { + if (typeof this.pokemon === "undefined" || this.pokemon === null) { return 'rgba(255,255,255,.2)'; } + + if (settings.pokeImg.staticColor !== false) { + return normalizeColor(settings.pokeImg.staticColor, 100); + } + + return hex2rgba(getTypeColor(this.pokemon.types[0].label), 50); + }, + type2() { + if (typeof this.pokemon === "undefined" || this.pokemon === null) { return 'rgba(255,255,255,.2)'; } + + if (settings.pokeImg.staticColor !== false) { + return normalizeColor(settings.pokeImg.staticColor, 100); + } + + if (this.pokemon.types.length == 2) { + return hex2rgba(getTypeColor(this.pokemon.types[1].label), 50); + } + return hex2rgba(getTypeColor(this.pokemon.types[0].label), 50); + }, + hasItem() { + if (typeof this.pokemon === "undefined") { return false; } + if (typeof this.pokemon.heldItem === "undefined") { return false; } + return this.pokemon.heldItem.id !== 0; + }, + experienceRemaining() { + const expGroup = exp_groups_table.find(group => this.pokemon.species === group.id) + const levelExp = experience_table.filter((expRange) => { + return expRange.level === this.pokemon.level + 1 || + expRange.level === this.pokemon.level + }) + + const totalExpForThisRange = levelExp[1][expGroup['levelling_type']] - levelExp[0][expGroup['levelling_type']] + const expLeftInThisRange = this.pokemon.exp - levelExp[0][expGroup['levelling_type']] + + return (100 / totalExpForThisRange) * expLeftInThisRange + '%' + }, + backgroundGradientStyle() { + if (this.pokemonExists === false) { return false; } + // let styles = { + // 'opacity': this.opacity, + // } + + let primaryType = this.pokemon.types[0].label.toLowerCase() + styles = { 'background-image': 'linear-gradient(180deg, ' + this.settings.typeColors[primaryType] + ', black)' } + + return styles + }, + + statusEffectsSlide() { + // const titles = {'psn': 'Poisoned', 'slp': 'Sleeping', 'par': 'Paralyzed', 'fzn': 'Frozen', 'brn': 'Burned'} + // let activeEffects = ['psn', 'slp', 'par', 'frz', 'brn'] + // .filter(effect => this.pokemon.status[effect] === 1) + + if (this.isDead) return 'DEAD' + + if (this.pokemon.nature) { + return `${this.pokemon.nature} natured` + } + + return `${this.pokemon.ability}` + }, + + selectedPokemon: { + get: function() { + return this.nickname + }, + set: function() { + this.$emit("change", this.nickname) + } + }, + hideGender() { + return settings.theme.hideGender; + }, + hideLevel() { + return settings.theme.hideLevel; + }, + }, + methods: { + getNewCardArt(poke) { + let vm = this + if (!this.isFresh) { + this.pokeIsChanging = true + } + if (!this.settings.pokeImg.useCardArtBackground) { + setTimeout(() => { + this.pokeIsChanging = false + this.actionOnImageLoaded() + }, 1400) + return false + } + + let isFresh = this.customCardArt === null && this.isFresh === true + if (!this.isFresh) { + this.pokeIsChanging = true + } + this.isFresh = false + + if (!this.pokemonExists) { + this.customCardArt = null + this.pokeIsChanging = false + this.actionOnImageLoaded() + this.newCardArt = null + } + + fetch('https://api.pokemontcg.io/v1/cards?setCode=' + this.sets.join('|') + '&supertype=pokemon&nationalPokedexNumber=' + poke.species) + .then(response => response.json()) + .then(cards => { + let setOrder = this.sets + // try { + cardImages = cards + .cards + .sort((a, b) => { + return setOrder.findIndex(set => set === a.setCode) - setOrder.findIndex(set => set === b.setCode) + }) + + cardImages = cardImages.find(card => card.nationalPokedexNumber === poke.species) + this.newCardArt = cardImages.imageUrl + + if (!isFresh) { + setTimeout(() => { + this.customCardArt = this.newCardArt + this.pokeIsChanging = false + this.actionOnImageLoaded() + }, 1400) + } else { + this.customCardArt = cardImages.imageUrl + this.pokeIsChanging = false + this.actionOnImageLoaded() + } + // } catch (e) { + // console.log(e) + // // console.log(`unknown image for ${vm.pokemon.speciesName}`) + // // console.info(cards.cards) + // + }); + }, + actionOnImageLoaded() { + this.fixedSprite = true + this.$emit('loaded') + } + }, + watch: { + pokemon(newVal, oldVal) { + try { + if ((!oldVal.hasOwnProperty('hp') && newVal.hasOwnProperty('hp')) || newVal.species !== oldVal.species) { + this.getNewCardArt(newVal) + } + + if (!newVal.hasOwnProperty('hp')) { + this.customCardArt = null + } + + if (newVal.hp.current < oldVal.hp.current) { + this.justTookDamage = true + setTimeout(() => { + this.justTookDamage = false + }, 3000) + } + } catch (e) { + return + } + } + } +}); \ No newline at end of file