From 4dc2f4dfa40565d1ae1b14e406d515e1613297c5 Mon Sep 17 00:00:00 2001 From: Joseph Date: Tue, 7 Mar 2023 18:44:15 -0500 Subject: [PATCH 01/63] added type routes --- src/router.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/router.js b/src/router.js index 6a61c40..b6bb60d 100644 --- a/src/router.js +++ b/src/router.js @@ -2,6 +2,7 @@ import Vue from 'vue' import Router from 'vue-router' import Home from './views/Home.vue' import Pokemon from './views/Pokemon.vue' +import Type from './views/Type.vue' import NotFound from '@/views/NotFound.vue' Vue.use(Router) @@ -31,6 +32,16 @@ export default new Router({ name: 'pokePageAltForm', component: Pokemon }, + { + path: '/type', + name: 'typePage', + component: Type + }, + { + path: '/type/:name', + name: 'typePageDirect', + component: Type + }, { path: '/lost-in-the-tall-grass', name: 'gotLost', From c501c045d2cf7c9966265f9bba2e642fa8065e8c Mon Sep 17 00:00:00 2001 From: Joseph Date: Tue, 7 Mar 2023 18:44:17 -0500 Subject: [PATCH 02/63] Create Type.vue --- src/views/Type.vue | 895 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 895 insertions(+) create mode 100644 src/views/Type.vue diff --git a/src/views/Type.vue b/src/views/Type.vue new file mode 100644 index 0000000..a0c0eec --- /dev/null +++ b/src/views/Type.vue @@ -0,0 +1,895 @@ + + + + + From 2287ff4372d5edbcf8cef3fcc759ec3f3868ff70 Mon Sep 17 00:00:00 2001 From: Joseph Date: Fri, 31 Mar 2023 18:37:25 -0400 Subject: [PATCH 03/63] efficiency --- src/components/pokemon/TypeEffectiveness.vue | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/pokemon/TypeEffectiveness.vue b/src/components/pokemon/TypeEffectiveness.vue index 7139def..953f12d 100644 --- a/src/components/pokemon/TypeEffectiveness.vue +++ b/src/components/pokemon/TypeEffectiveness.vue @@ -52,10 +52,8 @@ export default { async fetch () { this.isLoading = true - var { data } = await pokeApi.getAllTypes() // eslint-disable-line - this.types = data.results // eslint-disable-line - - this.types = this.types.filter((item) => { + var { data } = await pokeApi.getAllTypes() + this.types = data.results.filter((item) => { // filtering out unknown and shadow types if (item.name !== 'unknown' && item.name !== 'shadow') return item }) From 3b61d890633184d17bfc84289c09c8456e642103 Mon Sep 17 00:00:00 2001 From: Joseph Date: Fri, 31 Mar 2023 18:37:28 -0400 Subject: [PATCH 04/63] Create TypeBox.vue --- src/components/types/TypeBox.vue | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 src/components/types/TypeBox.vue diff --git a/src/components/types/TypeBox.vue b/src/components/types/TypeBox.vue new file mode 100644 index 0000000..2fc3015 --- /dev/null +++ b/src/components/types/TypeBox.vue @@ -0,0 +1,22 @@ + + + + + \ No newline at end of file From 12a7efd3d1b717816d85abe3e579a9f423ba0e56 Mon Sep 17 00:00:00 2001 From: Joseph Date: Fri, 31 Mar 2023 18:37:34 -0400 Subject: [PATCH 05/63] Update router.js --- src/router.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/router.js b/src/router.js index b6bb60d..85a6ed5 100644 --- a/src/router.js +++ b/src/router.js @@ -33,12 +33,13 @@ export default new Router({ component: Pokemon }, { - path: '/type', - name: 'typePage', - component: Type + path: '/types', + redirect: '/' + // name: 'typePage', + // component: Type }, { - path: '/type/:name', + path: '/types/:name', name: 'typePageDirect', component: Type }, From 49b980296ae35033b135b564ef23e7998f235bec Mon Sep 17 00:00:00 2001 From: Joseph Date: Fri, 31 Mar 2023 18:37:40 -0400 Subject: [PATCH 06/63] Update Type.vue --- src/views/Type.vue | 847 ++++----------------------------------------- 1 file changed, 58 insertions(+), 789 deletions(-) diff --git a/src/views/Type.vue b/src/views/Type.vue index a0c0eec..590a754 100644 --- a/src/views/Type.vue +++ b/src/views/Type.vue @@ -2,127 +2,12 @@
- +
+

{{ toUpper(typeInfo.name) }}

-
- - -
- Forms: - -
-
- - - - -
- -
-
- -
-

Pokédex Data

- -

Abilities:

- -
- - {{ getAbilityName(abilityInfo, index) }} - -

- {{ getAbilityDesc(index) }} -

-
- -

Genus: {{ getGenus(speciesInfo.genera) }}

- -

- Color: - - {{ toUpper(speciesInfo.color.name) }} - -

- -

Shape: {{ toUpper(speciesInfo.shape !== null ? speciesInfo.shape.name : '(Not found)') }}

- -

- Height: {{ getHeight(pokeInfo.height) }}
- Weight: {{ getWeight(pokeInfo.weight) }} -

- -

- Japanese Name: - {{ getJapaneseName(speciesInfo.names) }} -

-
- -
-

Type Defenses

-

Effectiveness of each move typing on {{ toUpper(speciesInfo.name) }}

- -
+ Comparing {{ toUpper(typeInfo.name) }}. Add another typing to see the dual defensiveness: +
@@ -133,31 +18,31 @@ import { RepositoryFactory } from '@/repositories/repositoryFactory' import Loader from '@/components/Loader' import TypeEffectiveness from '@/components/pokemon/TypeEffectiveness' // import DexNavigation from '@/components/pokemon/DexNavigation' -import Button from '@/components/Button' +// import Button from '@/components/Button' const pokeApi = RepositoryFactory.get('pokeApi') const util = RepositoryFactory.get('util') -const statMap = { - hp: { short: 'HP', long: 'HP' }, - attack: { short: 'Atk', long: 'Attack' }, - defense: { short: 'Def', long: 'Defense' }, - special_attack: { short: 'Sp.Atk', long: 'Special Attack' }, - special_defense: { short: 'Sp.Def', long: 'Special Defense' }, - speed: { short: 'Speed', long: 'Speed' } -} +// const statMap = { +// hp: { short: 'HP', long: 'HP' }, +// attack: { short: 'Atk', long: 'Attack' }, +// defense: { short: 'Def', long: 'Defense' }, +// special_attack: { short: 'Sp.Atk', long: 'Special Attack' }, +// special_defense: { short: 'Sp.Def', long: 'Special Defense' }, +// speed: { short: 'Speed', long: 'Speed' } +// } -const StatRepo = { - get: stat => statMap[stat.replace('-', '_')] -} +// const StatRepo = { +// get: stat => statMap[stat.replace('-', '_')] +// } export default { name: 'Type', components: { Loader, - Button, - TypeEffectiveness, + // Button, + TypeEffectiveness // DexNavigation, // PokeImg }, @@ -166,6 +51,8 @@ export default { type: router.currentRoute.params.name, isLoading: true, typeInfo: null, + types: [], + allTypes: [], nextNum: null, prevNum: null, navigating: false, @@ -181,7 +68,7 @@ export default { }, updated () { if (this.navigating) { - this.formInfo = null + // this.formInfo = null this.fetch() this.navigating = false } @@ -190,66 +77,27 @@ export default { async fetch () { this.isLoading = true - var { data } = await pokeApi.getPokemonSpecies(this.pokemon) // eslint-disable-line - this.speciesInfo = data // eslint-disable-line - this.pokeName = this.getEntryForLocale(this.speciesInfo.names).name - - var { data } = await pokeApi.getPokemon(this.pokemon) // eslint-disable-line - this.pokeInfo = data // eslint-disable-line - - if (this.form) { - var formInd = this.alternateForms.findIndex(form => { - return form.id === this.form - }) + var { data } = await pokeApi.getType(this.type) + this.typeInfo = data - if (formInd >= 0) { - switch (this.formType) { - case 'form': - var { data } = await pokeApi.getPokemonForm(this.form) // eslint-disable-line - this.formInfo = data // eslint-disable-line - break - - case 'variety': - var { data } = await pokeApi.getPokemon(this.form) // eslint-disable-line - this.pokeInfo = data // eslint-disable-line - - // var { data } = await pokeApi.getPokemonForm(this.pokeInfo.forms[0]) - // this.formInfo = data - break - - default: - this.form = null - this.changeForm(null, null) - break - } - } else { - this.form = null - this.changeForm(null, null) + this.types.push({ + type: { + name: this.typeInfo.name } - } - - var { data } = await pokeApi.getCurrentTotalPokemon() // eslint-disable-line - this.totalPokemon = data.count // eslint-disable-line - - // Set the prev Pokedex num and next Pokedex num - if ((this.speciesInfo.id - 1) < 1) this.prevNum = this.totalPokemon - else this.prevNum = this.speciesInfo.id - 1 - if ((this.speciesInfo.id + 1) > this.totalPokemon) this.nextNum = 1 - else this.nextNum = this.speciesInfo.id + 1 + }) - // Get the details for abilities of Pokemon - this.abilityList = [] - for (var i = 0; i < this.pokeInfo.abilities.length; i++) { - var abilityInfo = this.pokeInfo.abilities[i] - var { data } = await pokeApi.getAbility(abilityInfo.ability.name) // eslint-disable-line - this.storeAbilityData(data) // eslint-disable-line - } + var { data } = await pokeApi.getAllTypes() // eslint-disable-line + this.allTypes = data.results.filter((item) => { // filtering out unknown and shadow types + if (item.name !== 'unknown' && item.name !== 'shadow') return item + }) - document.title = '#' + this.formatIndex(this.speciesInfo.id) + ' ' + this.pokeName + this.title // set site title to pokemon name + document.title = this.toUpper(this.typeInfo.name) + this.title // set site title to type name this.isLoading = false }, + // == Utilities ============== + toUpper (value) { var val = value.trim() if (val !== '') return util.toUpper(val) @@ -272,353 +120,36 @@ export default { return util.formatIndex(value) }, - getTyping (types) { - if (types.length > 1) { - return util.toUpper(types[0].type.name) + ' & ' + util.toUpper(types[1].type.name) - } else { - return util.toUpper(types[0].type.name) - } - }, - - getGeneration (gen) { - var split = gen.split('-') - return util.toUpper(split[0]) + ' ' + split[1].toUpperCase() - }, - - getFlavorText (data) { - return util.tryData(this.getEntryForLocale(data), 'flavor_text') - }, - - changeForm (toForm, type) { - var currentRoute = this.$router.currentRoute - - if (currentRoute.params.form !== toForm) { - if (toForm !== this.speciesInfo.id && toForm) { - this.form = toForm - this.$router.push({ name: 'pokePageAltForm', params: { name: this.pokemon, form: toForm }, query: { formType: type } }) - } else { - this.form = null - this.$router.push({ name: 'pokePageDirect', params: { name: this.pokemon } }) - } - } - }, - - storeAbilityData (data) { - var effectEntry = this.getEntryForLocale(data.effect_entries) - var flavorTextEntry = this.getEntryForLocale(data.flavor_text_entries) - - var shortDesc, longDesc, flavorText - - if (this.checkNull(effectEntry)) { - shortDesc = null - longDesc = null - } else { - shortDesc = effectEntry.short_effect - longDesc = effectEntry.effect - } - - if (this.checkNull(flavorTextEntry)) flavorText = null; else flavorText = flavorTextEntry.flavor_text - - this.abilityList.push({ - name: data.name, - names: data.names, - short_desc: shortDesc, - long_desc: longDesc, - flavor_text: flavorText - }) - }, - - getAbilityName (info, num) { - var ability = this.abilityList[num] - var name = this.getEntryForLocale(ability.names).name - if (info.is_hidden) { - return name + ' (hidden)' - } else { - return name - } - }, - - getAbilityDesc (num) { - if (this.abilityList[num].short_desc !== null) { - return this.abilityList[num].short_desc - } else { - return this.abilityList[num].flavor_text - } - }, - - getGenus (data) { - // return this.getEntryForLocale(data).genus - return util.tryData(this.getEntryForLocale(data), 'genus', '(Not found)') - }, - - getWeight (data) { - var weightMetric = data / 10 - var weightUs = Math.round(weightMetric * 2.20462262185) - return weightMetric + ' kg | ' + weightUs + ' lbs' - }, - - getHeight (data) { - var heightMetric = data / 10 - - var inches = heightMetric * 39.37007874 - var feet = Math.floor(inches / 12) - - var inchesR = Math.round(inches % 12) - - return heightMetric + ' m | ' + feet + ' ft ' + inchesR + ' in' - }, - - getJapaneseName (data) { - var japaneseName = '' - for (var i = 0; i < data.length; i++) { - var entry = data[i] - if (entry.language.name === 'ja') { - japaneseName += entry.name - } - } - for (var j = 0; j < data.length; j++) { - var entry2 = data[j] - if (entry2.language.name === 'roomaji') { - japaneseName += ' (' + entry2.name + ')' - } - } - - return japaneseName - }, - - getStats (stats) { - var statArr = [] - stats.forEach(stat => { - statArr.push({ - base_stat: stat.base_stat, - effort: stat.effort, - stat_names: StatRepo.get(stat.stat.name) - }) - }) - return statArr - }, - - getGenderRate (rate) { - if (rate >= 0) { - var femRate = (rate / 8) * 100 - var maleRate = 100 - femRate - - if (femRate === 100) { - return '100% Female' - } else if (maleRate === 100) { - return '100% Male' - } else { - return maleRate + '% Male, ' + femRate + '% Female' - } - } else { - return 'Genderless' - } - }, - - calcHatching (data) { - var eggWalkAmt = data * 256 - return data + ' egg cycles (' + eggWalkAmt + ' steps)' - }, - - getEggGroups (data) { - var groups = '' - - for (var i = 0; i < data.length; i++) { - if (i > 0 && i <= data.length) { - groups += ' & ' - } - - switch (data[i].name) { - case 'no-eggs': - groups += 'Undiscovered' - break - case 'water1': - groups += 'Water 1' - break - case 'water2': - groups += 'Water 2' - break - case 'water3': - groups += 'Water 3' - break - case 'humanshape': - groups += 'Human-Like' - break - case 'indeterminate': - groups += 'Amorphous' - break - case 'ground': - groups += 'Field' - break - default: - groups += util.toUpper(data[i].name) - break - } - } - - return groups - }, - - // navigateDex (event) { - // this.pokemon = event - // this.navigating = true - // }, - checkNull (data) { if (!data) return true else return false - }, - - imgUrlAlt (event) { - if (this.form) { - switch (this.formType) { - case 'form': - if (this.formInfo.sprites.front_default !== null) event.target.src = this.formInfo.sprites.front_default - else event.target.src = util.getPokemonImageUrl(util.formatIndex(this.speciesInfo.id)) - break - - case 'variety': - event.target.src = this.pokeInfo.sprites.front_default - break - } - } else { - event.target.src = util.getPokemonImageUrl(util.formatIndex(this.speciesInfo.id)) - } - }, - - splitName (value) { - return util.splitName(value, '-') - }, - - getId (url) { - return util.getId(url) - }, - - getEntryForLocale (data) { - var entry - - if (!entry) { - data.forEach(item => { - if (item.language.name === 'en') { - entry = item - } - }) - } - - return entry } - }, - computed: { - photoUrl () { - // if (this.form) { - if (this.form && parseInt(this.form) !== this.speciesInfo.id) { - if (this.speciesInfo.id === 351) { - // Logic for forms of specific pokemon, which don't work well for images - return this.pokeInfo.sprites.front_default - } else { - var formToFind = this.form - var formId = this.alternateForms.findIndex(form => { - return formToFind === form.id - }) - - if (formId >= 0) { - return util.getPokemonAltFormImageUrl(util.formatIndex(this.speciesInfo.id), formId + 1) - } else { - return '' - } - } - } else if (this.showShiny) { - return util.getPokemonShinyImageUrl(util.formatIndex(this.speciesInfo.id)) - } else return util.getPokemonImageUrl(util.formatIndex(this.speciesInfo.id)) - }, - alternateForms () { - var varietiesFormatted = [] - var formsFormatted = [] - - var varietyAmt = this.speciesInfo.varieties.length - var formAmt = this.pokeInfo.forms.length - - if (this.speciesInfo.id === 774 || this.speciesInfo.id === 718 || this.speciesInfo.id === 555 || - this.speciesInfo.id === 646 || this.speciesInfo.id === 849 || this.speciesInfo.id === 658 || this.speciesInfo.id === 83) { // special logic for specific Pokemon - varietiesFormatted = pokeApi.getSpecialCaseForms(this.speciesInfo.id) - return varietiesFormatted - } else if (this.speciesInfo.id === 710 || this.speciesInfo.id === 711 || this.speciesInfo.id === 716) { // special logic for only pumpkaboo, gourgeist, xernas - return [] - } else { - this.speciesInfo.varieties.forEach(variety => { - if (variety.pokemon.name.toUpperCase() === this.pokeName.toUpperCase() && varietyAmt > 1 && formAmt === 1 && !variety.pokemon.name.includes('-totem')) { - varietiesFormatted.push({ - name: variety.pokemon.name, - name_formatted: 'Base', - id: this.getId(variety.pokemon.url), - type: 'variety', - is_default: variety.is_default - }) - } else if (variety.pokemon.name.toUpperCase() !== this.pokeName.toUpperCase() && !variety.pokemon.name.includes('-totem')) { - varietiesFormatted.push({ - name: variety.pokemon.name, - name_formatted: this.splitName(variety.pokemon.name).replace(this.pokeName.toLowerCase() + ' ', ''), - id: this.getId(variety.pokemon.url), - type: 'variety', - is_default: variety.is_default - }) - } - }) - if (varietyAmt > 1 || formAmt <= 2) { - this.pokeInfo.forms.forEach(form => { - var varietyNames = [] - varietiesFormatted.forEach(variety => { - varietyNames.push(variety.name) - }) + // getEntryForLocale (data) { + // var entry - if (!varietyNames.includes(form.name) && (form.name.toUpperCase() !== this.pokeName.toUpperCase()) && !form.name.includes('-totem')) { - formsFormatted.push({ - name: form.name, - name_formatted: this.splitName(form.name).replace(this.pokeName.toLowerCase() + ' ', ''), - id: this.getId(form.url), - type: 'form', - is_default: null - }) - } - }) - } - - return varietiesFormatted.concat(formsFormatted) - } - }, - hasDefaultForm () { - var hasDefault = false - // var altForms = this.getAlternateForms(this.speciesInfo.varieties, this.pokeInfo.forms) + // if (!entry) { + // data.forEach(item => { + // if (item.language.name === 'en') { + // entry = item + // } + // }) + // } - this.alternateForms.forEach(alt => { - if (alt.is_default) hasDefault = true - }) - - return hasDefault - }, - types () { - if (this.formInfo) return this.formInfo.types - else return this.pokeInfo.types - } - }, - watch: { - $route: function (to, from) { - this.pokemon = 0 - this.form = 0 - this.formType = null - - if (to.params.form && to.query.formType) { - this.form = to.params.form - this.formType = to.query.formType - } - this.pokemon = to.params.name - - this.navigating = true - // location.reload() - } + // return entry + // } } - + // computed: { + // types () { + // var typeList = [] + // typeList.push({ + // type: { + // name: this.typeInfo.name + // } + // }) + // return typeList + // } + // } } @@ -627,269 +158,7 @@ export default { @import '../styling/types.css'; @import '../styling/colors.css'; -.poke-head { - max-width: 46.875rem; - margin: 0 auto; -} - -.pokemon-img-container { - display: flex; - flex-direction: column; - align-items: center; - padding-bottom: 1rem; -} - -.pokemon-image { - margin-top: 1rem; - height: 12rem; -} - -.shiny-slider { - display: flex; - flex-direction: row; - align-items: center; - margin-top: 1rem; -} - -.shiny-switch { - margin: 0 1rem 0 1rem; -} - -/* Type styling */ -.pokemon-types { - display: flex; - flex-direction: row; - justify-content: center; -} - -[class*="type-"] { - border-radius: 0.625rem; - - padding: 0.2rem 1rem; - margin: 0 0.5rem; - min-width: 5.625rem; - text-align: center; - - /* cursor: pointer; */ -} - -.alternateForms{ - display: flex; - flex-direction: column; - // align-items: center; -} -.alternateForms > strong { - margin-right: 0.5rem; -} -.formBtns { - display: flex; - flex-direction: row; - overflow: scroll; - margin: 0.5rem 0 0.5rem; -} -.formBtn { - margin: 0 0.5rem 0.5rem; -} - -/* Info styling */ - -/* Info boxes */ -.pokemon-desc { - text-align: left; - margin: 0 1rem; -} - -.info-box { - border-radius: 0.625rem; - padding: 0 1rem; - margin: 1rem 0; - text-align: left; - transition: 0.3s; -} -.info-box:hover { - box-shadow: 0 4px 4px 0 rgba(0,0,0,0.20); - transition: 0.3s; -} - -/* Pokedex Data */ -.poke-abilities { - cursor: pointer; -} - -/* Training info */ - -.poke-training-box { - display: flex; - flex-direction: column; -} - -.poke-evs-all { - display: flex; - flex-direction: column; -} -.poke-evs-all > h4 { - margin: 0; - margin-bottom: 0.5rem; -} - -.poke-evs-3 { - display: flex; - flex-direction: row; - justify-content: center; - flex-wrap: wrap; - margin: 0 1rem 1rem; - max-width: 15rem; -} - -.poke-evs { - display: flex; - flex-direction: column; +// @media screen and (min-width: 25.9375rem) { - align-items: center; - justify-content: center; -} - -[class*="poke-ev-"] { - min-width: 4rem; - - border-radius: 0.625rem; - - padding: 0.2rem 0; - margin: 0.5rem; - - text-align: center; -} -.poke-ev-hp { - border: 2px solid #ff5959; - background-color: rgba(255, 89, 89, 0.3); -} -.poke-ev-atk { - border: 2px solid #f5ac78; - background-color: rgba(245, 172, 120, 0.3); -} -.poke-ev-def { - border: 2px solid #fae078; - background-color: rgba(250, 224, 120, 0.3); -} -.poke-ev-spatk { - border: 2px solid #65aff7; - background-color: rgba(101, 175, 247, 0.3); -} -.poke-ev-spdef { - border: 2px solid #7ddb7d; - background-color: rgba(125, 219, 125, 0.3); -} -.poke-ev-speed { - border: 2px solid #f755c1; - background-color: rgba(247, 85, 193, 0.3); -} - -.poke-train-table { - border-collapse: separate; - border-spacing: 0 1rem; -} -.poke-train-c1 { - text-align: right; -} -.poke-train-c2 { - padding-left: 1rem; -} - -/* Base Stats & Breeding Box styling */ - -.statsAndBreeding { - display: flex; - flex-direction: column; -} - -/* Base Stats info */ -.pokemon-stats > h3 { - margin-bottom: 0; -} - -.base-stats { - display: flex; - flex-direction: column; - margin: 0.5rem 0 1rem; - border-spacing: 0 0.5rem; -} -.base-stats-c1 { - text-align: right; -} -.base-stats-c2 { - padding-left: 1rem; -} - -.base-stat-hp { - color: #ff5959; -} -.base-stat-atk { - color: #f5ac78; -} -.base-stat-def { - color: #e7cf6d; -} -.base-stat-spatk { - color: #65aff7; -} -.base-stat-spdef { - color: #7ddb7d; -} -.base-stat-speed { - color: #f755c1; -} - -@media screen and (min-width: 25.9375rem) { - .alternateForms { - flex-direction: row; - align-items: center; - } - .formBtns { - overflow: visible; - // justify-content: center; - text-align: left; - flex-wrap: wrap; - } - - .pokemon-data { - margin: 0 auto; - padding: 0; - max-width: 46.875rem; - display: flex; - flex-direction: column; - } - - .poke-training-box { - flex-direction: row; - } - - .pokemon-image { - height: 16rem; - } - - .statsAndBreeding { - flex-direction: row; - justify-content: space-between; - } - .pokemon-stats { - width: 28%; - } - .base-stats { - text-align: center; - } - .pokemon-breeding { - width: 68%; - } - - .poke-ab-black:hover { color: #323232;} - .poke-ab-blue:hover { color: #3482DE;} - .poke-ab-brown:hover { color: #AF891F;} - .poke-ab-gray:hover { color: #707070;} - .poke-ab-green:hover { color: #64A743;} - .poke-ab-pink:hover { color: #E97698;} - .poke-ab-purple:hover { color: #7C63B8;} - .poke-ab-red:hover { color: #EF4036;} - .poke-ab-white:hover { color: #aaaaaa;} - .poke-ab-yellow:hover { color: #F8D030;} -} +// } From 98742c94f0b378562517800d3a09d8fa283c4dac Mon Sep 17 00:00:00 2001 From: Joseph Date: Fri, 31 Mar 2023 19:40:31 -0400 Subject: [PATCH 07/63] added router for types --- src/components/pokemon/TypeEffectiveness.vue | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/pokemon/TypeEffectiveness.vue b/src/components/pokemon/TypeEffectiveness.vue index 953f12d..1cf8cd0 100644 --- a/src/components/pokemon/TypeEffectiveness.vue +++ b/src/components/pokemon/TypeEffectiveness.vue @@ -3,7 +3,9 @@
- {{ getAbbrType(type.name) }} + + {{ getAbbrType(type.name) }} + {{ getDamageAmount(type.name) }}
From 05b8634f238f7ff4fad181ca9b0d1187a40c840b Mon Sep 17 00:00:00 2001 From: Joseph Date: Fri, 31 Mar 2023 19:40:37 -0400 Subject: [PATCH 08/63] added router for types --- src/views/Pokemon.vue | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/views/Pokemon.vue b/src/views/Pokemon.vue index 8d21ebc..bd53918 100644 --- a/src/views/Pokemon.vue +++ b/src/views/Pokemon.vue @@ -33,7 +33,9 @@ v-for="typeInfo in types" v-bind:key="typeInfo.slot" > - {{ toUpper(typeInfo.type.name) }} + + {{ toUpper(typeInfo.type.name) }} +
From ba1caa2629b65c0e6b9cd09f3e8236f28de210dc Mon Sep 17 00:00:00 2001 From: Joseph Date: Fri, 31 Mar 2023 19:41:09 -0400 Subject: [PATCH 09/63] added type effectiveness, adding additional type --- src/views/Type.vue | 52 +++++++++++++++++++++++++++++++--------------- 1 file changed, 35 insertions(+), 17 deletions(-) diff --git a/src/views/Type.vue b/src/views/Type.vue index 590a754..a381307 100644 --- a/src/views/Type.vue +++ b/src/views/Type.vue @@ -5,9 +5,14 @@

{{ toUpper(typeInfo.name) }}

- Comparing {{ toUpper(typeInfo.name) }}. Add another typing to see the dual defensiveness: - - + Comparing {{ toUpper(typeInfo.name) }}. Add another typing to see dual typing defensiveness: + +
+ +
+
@@ -18,7 +23,7 @@ import { RepositoryFactory } from '@/repositories/repositoryFactory' import Loader from '@/components/Loader' import TypeEffectiveness from '@/components/pokemon/TypeEffectiveness' // import DexNavigation from '@/components/pokemon/DexNavigation' -// import Button from '@/components/Button' +import Button from '@/components/Button' const pokeApi = RepositoryFactory.get('pokeApi') const util = RepositoryFactory.get('util') @@ -41,7 +46,7 @@ export default { name: 'Type', components: { Loader, - // Button, + Button, TypeEffectiveness // DexNavigation, // PokeImg @@ -53,6 +58,7 @@ export default { typeInfo: null, types: [], allTypes: [], + typeEffKey: 1, nextNum: null, prevNum: null, navigating: false, @@ -88,7 +94,7 @@ export default { var { data } = await pokeApi.getAllTypes() // eslint-disable-line this.allTypes = data.results.filter((item) => { // filtering out unknown and shadow types - if (item.name !== 'unknown' && item.name !== 'shadow') return item + if (item.name !== 'unknown' && item.name !== 'shadow' && item.name !== this.typeInfo.name) return item }) document.title = this.toUpper(this.typeInfo.name) + this.title // set site title to type name @@ -123,6 +129,20 @@ export default { checkNull (data) { if (!data) return true else return false + }, + + updateTypes (type, clear = false) { + if (this.types.length > 1) { + this.types.pop() + } + if (!clear) { + this.types.push({ + type: { + name: type + } + }) + } + this.typeEffKey += 1 } // getEntryForLocale (data) { @@ -138,18 +158,16 @@ export default { // return entry // } + }, + watch: { + $route: function (to, from) { + this.type = '' + this.types = [] + this.type = to.params.name + this.navigating = true + // location.reload() + } } - // computed: { - // types () { - // var typeList = [] - // typeList.push({ - // type: { - // name: this.typeInfo.name - // } - // }) - // return typeList - // } - // } } From ff44d42720661533fe41243eab2a39c4243989c7 Mon Sep 17 00:00:00 2001 From: Joseph Date: Mon, 3 Apr 2023 18:29:05 -0400 Subject: [PATCH 10/63] added ability to see effectiveness from or to --- src/components/pokemon/TypeEffectiveness.vue | 23 ++++++++++---------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/src/components/pokemon/TypeEffectiveness.vue b/src/components/pokemon/TypeEffectiveness.vue index 1cf8cd0..ed76f5c 100644 --- a/src/components/pokemon/TypeEffectiveness.vue +++ b/src/components/pokemon/TypeEffectiveness.vue @@ -19,9 +19,9 @@ import Loader from '@/components/Loader' const pokeApi = RepositoryFactory.get('pokeApi') const damageMap = { - double_damage_from: 2, - half_damage_from: 0.5, - no_damage_from: 0 + double_damage: 2, + half_damage: 0.5, + no_damage: 0 } const DamageRepo = { @@ -34,7 +34,8 @@ export default { Loader }, props: { - typing: Array // 'typing' is passed in as an Array to the component + typing: Array, // 'typing' is passed in as an Array to the component + direction: String }, data () { return { @@ -62,7 +63,7 @@ export default { var { data } = await pokeApi.getType(this.typing[0].type.name) // eslint-disable-line this.typingData.push(data.damage_relations) // eslint-disable-line - if (this.typing.length > 1) { + if (this.typing.length > 1 && this.direction === 'from') { var { data } = await pokeApi.getType(this.typing[1].type.name) // eslint-disable-line this.typingData.push(data.damage_relations) // eslint-disable-line } @@ -78,24 +79,24 @@ export default { storeDamageRelations () { this.typingData.forEach(data => { - data.double_damage_from.forEach(type => { + data['double_damage_' + this.direction].forEach(type => { this.damageRelations = this.damageRelations.concat({ name: type.name, - damage: DamageRepo.get('double_damage_from') + damage: DamageRepo.get('double_damage') }) }) - data.half_damage_from.forEach(type => { + data['half_damage_' + this.direction].forEach(type => { this.damageRelations = this.damageRelations.concat({ name: type.name, - damage: DamageRepo.get('half_damage_from') + damage: DamageRepo.get('half_damage') }) }) - data.no_damage_from.forEach(type => { + data['no_damage_' + this.direction].forEach(type => { this.damageRelations = this.damageRelations.concat({ name: type.name, - damage: DamageRepo.get('no_damage_from') + damage: DamageRepo.get('no_damage') }) }) }) From 7d3b9fc9162ce8a97d5e307af971845997cd1a1d Mon Sep 17 00:00:00 2001 From: Joseph Date: Mon, 3 Apr 2023 18:29:26 -0400 Subject: [PATCH 11/63] updated type box to style properly --- src/components/types/TypeBox.vue | 58 +++++++++++++++++++++++++------- 1 file changed, 46 insertions(+), 12 deletions(-) diff --git a/src/components/types/TypeBox.vue b/src/components/types/TypeBox.vue index 2fc3015..6109e59 100644 --- a/src/components/types/TypeBox.vue +++ b/src/components/types/TypeBox.vue @@ -1,22 +1,56 @@ - \ No newline at end of file + From d752ebb080ded05acd3afa40e575beac87b8106b Mon Sep 17 00:00:00 2001 From: Joseph Date: Mon, 3 Apr 2023 18:29:42 -0400 Subject: [PATCH 12/63] added type box for typings; added direction for type eff chart --- src/views/Pokemon.vue | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/views/Pokemon.vue b/src/views/Pokemon.vue index bd53918..36ebebf 100644 --- a/src/views/Pokemon.vue +++ b/src/views/Pokemon.vue @@ -28,15 +28,13 @@
-
- - {{ toUpper(typeInfo.type.name) }} - -
+ :typeName="typeInfo.type.name" + size="small"> + {{ toUpper(typeInfo.type.name) }} +
@@ -122,7 +120,7 @@

Type Defenses

Effectiveness of each move typing on {{ toUpper(speciesInfo.name) }}

- +
@@ -238,6 +236,7 @@ import DexNavigation from '@/components/pokemon/DexNavigation' import EvolutionChain from '@/components/pokemon/EvolutionChain' import Button from '@/components/Button' import SliderSwitch from '@/components/SliderSwitch' +import TypeBox from '@/components/types/TypeBox' // import PokeImg from '../components/pokemon/PokeImg.vue' const pokeApi = RepositoryFactory.get('pokeApi') @@ -265,7 +264,8 @@ export default { TypeEffectiveness, DexNavigation, EvolutionChain, - SliderSwitch + SliderSwitch, + TypeBox // PokeImg }, data () { From a8f396ba56436235e3f7ab7c33e1c94f42dcf25f Mon Sep 17 00:00:00 2001 From: Joseph Date: Mon, 3 Apr 2023 18:30:08 -0400 Subject: [PATCH 13/63] Added type box; added type offensiveness chart --- src/views/Type.vue | 29 ++++++++++------------------- 1 file changed, 10 insertions(+), 19 deletions(-) diff --git a/src/views/Type.vue b/src/views/Type.vue index a381307..8c1493d 100644 --- a/src/views/Type.vue +++ b/src/views/Type.vue @@ -3,7 +3,7 @@
-

{{ toUpper(typeInfo.name) }}

+ {{ toUpper(typeInfo.name) }} Type Comparing {{ toUpper(typeInfo.name) }}. Add another typing to see dual typing defensiveness: @@ -35,7 +35,7 @@ const util = RepositoryFactory.get('util') export default { - name: 'Type', + name: 'TypeView', components: { Loader, Button, From ee059dd0bdbe47116a41e29ee04b0e01cb68c3be Mon Sep 17 00:00:00 2001 From: Joseph Date: Mon, 3 Apr 2023 22:25:45 -0400 Subject: [PATCH 15/63] added infobox to global styling --- src/App.vue | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/App.vue b/src/App.vue index 9e8addb..3dee5cb 100644 --- a/src/App.vue +++ b/src/App.vue @@ -130,6 +130,18 @@ a { color: rgb(199, 95, 95); } +.info-box { + border-radius: 0.625rem; + padding: 0 1rem; + margin: 1rem 0; + text-align: left; + transition: 0.3s; +} +.info-box:hover { + box-shadow: 0 4px 4px 0 rgba(0,0,0,0.20); + transition: 0.3s; +} + // @media screen and (min-width: 25.9375rem) { // main { // max-width: 46.875rem; From ddff5d565ec8c5413b72ce3c0c47ed7420f99d12 Mon Sep 17 00:00:00 2001 From: Joseph Date: Mon, 3 Apr 2023 22:25:56 -0400 Subject: [PATCH 16/63] styling updates --- src/components/types/TypeBox.vue | 25 +++++++++++-------------- 1 file changed, 11 insertions(+), 14 deletions(-) diff --git a/src/components/types/TypeBox.vue b/src/components/types/TypeBox.vue index 6109e59..743dff4 100644 --- a/src/components/types/TypeBox.vue +++ b/src/components/types/TypeBox.vue @@ -30,27 +30,24 @@ export default { padding: 0.2rem 1rem; margin: 0 0.5rem; + /* max-width: 25%; */ min-width: 5.625rem; text-align: center; } -.clickable { - cursor: pointer; -} -.not-clickable { - cursor: text; -} .large{ - border-radius: 0.5rem; - font-size: 1.2rem; - padding: 0.8rem 1.5rem; + border-radius: 1rem; + border-width: 4px; + font-size: 1.5rem; + padding: 1rem 1.8rem; } .medium { - border-radius: 0.4rem; - font-size: 1rem; + border-radius: 1rem; + border-width: 3px; + font-size: 1.3rem; padding: 0.5rem 0.8rem; } -.small { - /* font-size: 1rem; */ -} +/* .small { + font-size: 1rem; +} */ From 5398f6e8a2f59d562bf3ecf657a3c05caf5748e5 Mon Sep 17 00:00:00 2001 From: Joseph Date: Mon, 3 Apr 2023 22:25:59 -0400 Subject: [PATCH 17/63] Create imgRepository.js --- src/repositories/imgRepository.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 src/repositories/imgRepository.js diff --git a/src/repositories/imgRepository.js b/src/repositories/imgRepository.js new file mode 100644 index 0000000..9ce0e4c --- /dev/null +++ b/src/repositories/imgRepository.js @@ -0,0 +1,14 @@ + +export default { + getPokemonImageUrl (num) { + return `https://assets.pokemon.com/assets/cms2/img/pokedex/full/${num}.png` + }, + + getPokemonShinyImageUrl (num) { + return `https://www.serebii.net/Shiny/SV/new/${num}.png` + }, + + getPokemonAltFormImageUrl (num, formNum) { + return `https://assets.pokemon.com/assets/cms2/img/pokedex/full/${num}_f${formNum}.png` + } +} From 57f3491cec4afc5df52eae57c2bd22f0dcea7dc7 Mon Sep 17 00:00:00 2001 From: Joseph Date: Mon, 3 Apr 2023 22:26:08 -0400 Subject: [PATCH 18/63] added img repository linking --- src/repositories/repositoryFactory.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/repositories/repositoryFactory.js b/src/repositories/repositoryFactory.js index e837fd8..1e125f9 100644 --- a/src/repositories/repositoryFactory.js +++ b/src/repositories/repositoryFactory.js @@ -1,9 +1,11 @@ import PokeRepository from './pokeRepository' import UtilRepository from './utilityRepository' +import ImgRepository from './imgRepository' const repositories = { pokeApi: PokeRepository, - util: UtilRepository + util: UtilRepository, + img: ImgRepository // other repositories ... } From cd91f1f454098581f147015a41e10b84dd17e7d5 Mon Sep 17 00:00:00 2001 From: Joseph Date: Mon, 3 Apr 2023 22:26:17 -0400 Subject: [PATCH 19/63] removed img urls --- src/repositories/utilityRepository.js | 16 +++------------- 1 file changed, 3 insertions(+), 13 deletions(-) diff --git a/src/repositories/utilityRepository.js b/src/repositories/utilityRepository.js index 444e9ca..08ae7f2 100644 --- a/src/repositories/utilityRepository.js +++ b/src/repositories/utilityRepository.js @@ -3,18 +3,6 @@ export default { - getPokemonImageUrl (num) { - return `https://assets.pokemon.com/assets/cms2/img/pokedex/full/${num}.png` - }, - - getPokemonShinyImageUrl (num) { - return `https://www.serebii.net/Shiny/SV/new/${num}.png` - }, - - getPokemonAltFormImageUrl (num, formNum) { - return `https://assets.pokemon.com/assets/cms2/img/pokedex/full/${num}_f${formNum}.png` - }, - getId (url) { var splitUrl = url.split('/') return splitUrl[6] @@ -31,7 +19,9 @@ export default { }, toUpper (value) { - return value[0].toUpperCase() + value.slice(1) + if (value !== '' && value !== null) { + return value[0].toUpperCase() + value.slice(1) + } else return value }, splitName (value, delimiter, toUpper) { From 47924d189a407efde6e2507892e43bde195297c2 Mon Sep 17 00:00:00 2001 From: Joseph Date: Mon, 3 Apr 2023 22:26:26 -0400 Subject: [PATCH 20/63] added type border colors --- src/styling/types.css | 207 ++++++++++++++++++++++++++---------------- 1 file changed, 131 insertions(+), 76 deletions(-) diff --git a/src/styling/types.css b/src/styling/types.css index dbd442a..a46e188 100644 --- a/src/styling/types.css +++ b/src/styling/types.css @@ -1,78 +1,133 @@ +[class*="type-"] { + border: 2px solid #68a090; + color: #4b7468; +} - [class*="type-"] { - border: 2px solid #68a090; - color: #4b7468; - } +.type-normal { + border: 2px solid #a8a878; + color: #6d6d4e; +} +.type-fire { + border: 2px solid #f08030; + color: #9c531f; +} +.type-fighting { + border: 2px solid #c03028; + color: #7d1f1a; +} +.type-water { + border: 2px solid #6890f0; + color: #445e9c; +} +.type-flying { + border: 2px solid #a890f0; + color: #6d5e9c; +} +.type-grass { + border: 2px solid #78c850; + color: #4e8234; +} +.type-poison { + border: 2px solid #a040a0; + color: #682a68; +} +.type-electric { + border: 2px solid #f8d030; + color: #a1871f; +} +.type-ground { + border: 2px solid #e0c068; + color: #927d44; +} +.type-psychic { + border: 2px solid #f85888; + color: #a13959; +} +.type-rock { + border: 2px solid #b8a038; + color: #786824; +} +.type-ice { + border: 2px solid #98d8d8; + color: #638d8d; +} +.type-bug { + border: 2px solid #a8b820; + color: #6d7815; +} +.type-dragon { + border: 2px solid #7038f8; + color: #4924a1; +} +.type-ghost { + border: 2px solid #705898; + color: #493963; +} +.type-dark { + border: 2px solid #705848; + color: #49392f; +} +.type-steel { + border: 2px solid #b8b8d0; + color: #787887; +} +.type-fairy { + border: 2px solid #ee99ac; + color: #9b6470; +} - .type-normal { - border: 2px solid #a8a878; - color: #6d6d4e; - } - .type-fire { - border: 2px solid #f08030; - color: #9c531f; - } - .type-fighting { - border: 2px solid #c03028; - color: #7d1f1a; - } - .type-water { - border: 2px solid #6890f0; - color: #445e9c; - } - .type-flying { - border: 2px solid #a890f0; - color: #6d5e9c; - } - .type-grass { - border: 2px solid #78c850; - color: #4e8234; - } - .type-poison { - border: 2px solid #a040a0; - color: #682a68; - } - .type-electric { - border: 2px solid #f8d030; - color: #a1871f; - } - .type-ground { - border: 2px solid #e0c068; - color: #927d44; - } - .type-psychic { - border: 2px solid #f85888; - color: #a13959; - } - .type-rock { - border: 2px solid #b8a038; - color: #786824; - } - .type-ice { - border: 2px solid #98d8d8; - color: #638d8d; - } - .type-bug { - border: 2px solid #a8b820; - color: #6d7815; - } - .type-dragon { - border: 2px solid #7038f8; - color: #4924a1; - } - .type-ghost { - border: 2px solid #705898; - color: #493963; - } - .type-dark { - border: 2px solid #705848; - color: #49392f; - } - .type-steel { - border: 2px solid #b8b8d0; - color: #787887; - } - .type-fairy { - border: 2px solid #ee99ac; - color: #9b6470; - } \ No newline at end of file +/* Border type colors */ +.type-border-normal { + border: 2px solid #a8a878; +} +.type-border-fire { + border: 2px solid #f08030; +} +.type-border-fighting { + border: 2px solid #c03028; +} +.type-border-water { + border: 2px solid #6890f0; +} +.type-border-flying { + border: 2px solid #a890f0; +} +.type-border-grass { + border: 2px solid #78c850; +} +.type-border-poison { + border: 2px solid #a040a0; +} +.type-border-electric { + border: 2px solid #f8d030; +} +.type-border-ground { + border: 2px solid #e0c068; +} +.type-border-psychic { + border: 2px solid #f85888; +} +.type-border-rock { + border: 2px solid #b8a038; +} +.type-border-ice { + border: 2px solid #98d8d8; +} +.type-border-bug { + border: 2px solid #a8b820; +} +.type-border-dragon { + border: 2px solid #7038f8; +} +.type-border-ghost { + border: 2px solid #705898; +} +.type-border-dark { + border: 2px solid #705848; +} +.type-border-steel { + border: 2px solid #b8b8d0; +} +.type-border-fairy { + border: 2px solid #ee99ac; +} \ No newline at end of file From d5ebf9f71eb3c2826352ec4977de337c4f399c76 Mon Sep 17 00:00:00 2001 From: Joseph Date: Mon, 3 Apr 2023 22:33:33 -0400 Subject: [PATCH 21/63] updated img urls to img Repo; other changes --- src/views/PokemonView.vue | 32 +++++++++++++------------------- 1 file changed, 13 insertions(+), 19 deletions(-) diff --git a/src/views/PokemonView.vue b/src/views/PokemonView.vue index 3bf744c..912ab21 100644 --- a/src/views/PokemonView.vue +++ b/src/views/PokemonView.vue @@ -73,7 +73,7 @@

Pokédex Data

@@ -131,7 +131,12 @@

EV Yield

- + {{ statInfo.stat_names.short }} {{ statInfo.effort }} @@ -241,6 +246,7 @@ import TypeBox from '@/components/types/TypeBox' const pokeApi = RepositoryFactory.get('pokeApi') const util = RepositoryFactory.get('util') +const img = RepositoryFactory.get('img') const statMap = { hp: { short: 'HP', long: 'HP' }, @@ -633,7 +639,7 @@ export default { switch (this.formType) { case 'form': if (this.formInfo.sprites.front_default !== null) event.target.src = this.formInfo.sprites.front_default - else event.target.src = util.getPokemonImageUrl(util.formatIndex(this.speciesInfo.id)) + else event.target.src = img.getPokemonImageUrl(util.formatIndex(this.speciesInfo.id)) break case 'variety': @@ -641,7 +647,7 @@ export default { break } } else { - event.target.src = util.getPokemonImageUrl(util.formatIndex(this.speciesInfo.id)) + event.target.src = img.getPokemonImageUrl(util.formatIndex(this.speciesInfo.id)) } }, @@ -681,14 +687,14 @@ export default { }) if (formId >= 0) { - return util.getPokemonAltFormImageUrl(util.formatIndex(this.speciesInfo.id), formId + 1) + return img.getPokemonAltFormImageUrl(util.formatIndex(this.speciesInfo.id), formId + 1) } else { return '' } } } else if (this.showShiny) { - return util.getPokemonShinyImageUrl(util.formatIndex(this.speciesInfo.id)) - } else return util.getPokemonImageUrl(util.formatIndex(this.speciesInfo.id)) + return img.getPokemonShinyImageUrl(util.formatIndex(this.speciesInfo.id)) + } else return img.getPokemonImageUrl(util.formatIndex(this.speciesInfo.id)) }, alternateForms () { var varietiesFormatted = [] @@ -858,18 +864,6 @@ export default { margin: 0 1rem; } -.info-box { - border-radius: 0.625rem; - padding: 0 1rem; - margin: 1rem 0; - text-align: left; - transition: 0.3s; -} -.info-box:hover { - box-shadow: 0 4px 4px 0 rgba(0,0,0,0.20); - transition: 0.3s; -} - /* Pokedex Data */ .poke-abilities { cursor: pointer; From 581fcd16c0f2e647928f9721a4b464a640f167dc Mon Sep 17 00:00:00 2001 From: Joseph Date: Mon, 3 Apr 2023 22:33:38 -0400 Subject: [PATCH 22/63] updated naming --- src/styling/types.css | 54 +++++++++++++++---------------------------- 1 file changed, 18 insertions(+), 36 deletions(-) diff --git a/src/styling/types.css b/src/styling/types.css index a46e188..c18baf4 100644 --- a/src/styling/types.css +++ b/src/styling/types.css @@ -3,76 +3,58 @@ color: #4b7468; } -.type-normal { - border: 2px solid #a8a878; +.type-color-normal { color: #6d6d4e; } -.type-fire { - border: 2px solid #f08030; +.type-color-fire { color: #9c531f; } -.type-fighting { - border: 2px solid #c03028; +.type-color-fighting { color: #7d1f1a; } -.type-water { - border: 2px solid #6890f0; +.type-color-water { color: #445e9c; } -.type-flying { - border: 2px solid #a890f0; +.type-color-flying { color: #6d5e9c; } -.type-grass { - border: 2px solid #78c850; +.type-color-grass { color: #4e8234; } -.type-poison { - border: 2px solid #a040a0; +.type-color-poison { color: #682a68; } -.type-electric { - border: 2px solid #f8d030; +.type-color-electric { color: #a1871f; } -.type-ground { - border: 2px solid #e0c068; +.type-color-ground { color: #927d44; } -.type-psychic { - border: 2px solid #f85888; +.type-color-psychic { color: #a13959; } -.type-rock { - border: 2px solid #b8a038; +.type-color-rock { color: #786824; } -.type-ice { - border: 2px solid #98d8d8; +.type-color-ice { color: #638d8d; } -.type-bug { - border: 2px solid #a8b820; +.type-color-bug { color: #6d7815; } -.type-dragon { - border: 2px solid #7038f8; +.type-color-dragon { color: #4924a1; } -.type-ghost { - border: 2px solid #705898; +.type-color-ghost { color: #493963; } -.type-dark { - border: 2px solid #705848; +.type-color-dark { color: #49392f; } -.type-steel { - border: 2px solid #b8b8d0; +.type-color-steel { color: #787887; } -.type-fairy { - border: 2px solid #ee99ac; +.type-color-fairy { color: #9b6470; } From 66ac0aa3aa539fabde8580266b1a068242688878 Mon Sep 17 00:00:00 2001 From: Joseph Date: Mon, 3 Apr 2023 22:34:18 -0400 Subject: [PATCH 23/63] added basic data; styling --- src/views/TypeView.vue | 57 +++++++++++++++++++++++++++++++----------- 1 file changed, 43 insertions(+), 14 deletions(-) diff --git a/src/views/TypeView.vue b/src/views/TypeView.vue index 6c0bef4..c95af28 100644 --- a/src/views/TypeView.vue +++ b/src/views/TypeView.vue @@ -3,21 +3,33 @@
- {{ toUpper(typeInfo.name) }} Type - - Comparing {{ toUpper(typeInfo.name) }}. Add another typing to see dual typing defensiveness: - -
- +
+ + {{ toUpper(typeInfo.name) }} Type +
- Defensiveness: - +
+

Type Data

+

Introduced in {{ getGeneration(typeInfo.generation.name) }}

+

Damage class: {{ toUpper(typeInfo.move_damage_class.name) }}

+
+ +
+ Comparing {{ toUpper(typeInfo.name) }}. Add another typing to see dual typing defensiveness: + +
+ +
+ + Defensiveness: + - Offensiveness: - + Offensiveness: + +
@@ -96,8 +108,7 @@ export default { // == Utilities ============== toUpper (value) { - var val = value.trim() - if (val !== '') return util.toUpper(val) + return util.toUpper(value) }, toUpperEachWord (value) { @@ -134,6 +145,11 @@ export default { }) } this.typeEffKey += 1 + }, + + getGeneration (gen) { + var split = gen.split('-') + return util.toUpper(split[0]) + ' ' + split[1].toUpperCase() } // getEntryForLocale (data) { @@ -167,6 +183,19 @@ export default { @import '../styling/types.css'; @import '../styling/colors.css'; +.typePage { + display: flex; + flex-direction: column; + justify-content: center; +} + +.typeHeader { + display: flex; + flex-direction: row; + justify-content: center; + margin: 2rem 1rem; +} + // @media screen and (min-width: 25.9375rem) { // } From 258e243b1e8557fc83c7a64633c271bd0cf78e64 Mon Sep 17 00:00:00 2001 From: Joseph Date: Mon, 3 Apr 2023 22:34:28 -0400 Subject: [PATCH 24/63] updated styling --- src/components/types/TypeBox.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/types/TypeBox.vue b/src/components/types/TypeBox.vue index 743dff4..2271e5a 100644 --- a/src/components/types/TypeBox.vue +++ b/src/components/types/TypeBox.vue @@ -1,6 +1,6 @@ @@ -36,4 +44,10 @@ footer { color: $color-error; font-weight: bold; } + +.footer-version { + margin: 0 0 $space-xs; + font-size: 0.85rem; + opacity: 0.7; +} diff --git a/version b/version index a602fc9..3eefcb9 100644 --- a/version +++ b/version @@ -1 +1 @@ -0.9.4 +1.0.0