init: Initial Commit

src/.prettierrc

@@ -0,0 +1,4 @@
+{
+  "tabWidth": 2,
+  "useTabs": false
+}

src/App.vue

@@ -0,0 +1,44 @@
+<script setup>
+
+import { ref } from 'vue'
+
+import Pokedex from './components/Pokedex.vue'
+import About from './components/About.vue'
+import Page404 from './components/404.vue'
+
+const pokemonId = ref(null)
+
+const isPokemon = ref(false)
+const isAbout = ref(false)
+const is404 = ref(false)
+
+
+function getPage() {
+    const url = window.location.href;
+    const page = url.split("/").slice(-1)[0];
+
+    if (page > 0 && page < 1006) {
+        isPokemon.value = true
+        pokemonId.value = parseInt(page)
+    } else if (page === 'about') {
+        isAbout.value = true;
+    } else {
+        is404.value = true
+    }
+}
+
+getPage()
+
+</script>
+
+<template>
+    <div v-if="isPokemon">
+        <Pokedex :pokemonId="pokemonId" />
+    </div>
+    <div v-if="isAbout">
+        <About />
+    </div>
+    <div v-if="is404">
+        <Page404 />
+    </div>
+</template>

src/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

src/components/404.vue

@@ -0,0 +1,20 @@
+<script setup>
+import Footer from './Footer.vue'
+</script>
+
+<template>
+    <div class="w-screen h-screen bg-red-500 text-red-100 flex flex-col items-center justify-between p-12">
+        <div></div>
+        <div class="space-y-3 text-center w-[50rem]">
+            <div class="text-7xl font-semibold">
+                404
+            </div>
+            <div class="text-3xl">
+                Page not found
+            </div>
+        </div>
+        <Footer />
+    </div>
+</template>
+
+

src/components/About.vue

@@ -0,0 +1,20 @@
+<script setup>
+import Footer from './Footer.vue'
+</script>
+
+<template>
+    <div class="w-screen h-screen bg-neutral-950 text-neutral-50 flex flex-col items-center justify-between p-12">
+        <div></div>
+        <div class="space-y-8 text-center w-[50rem]">
+            <div class="text-5xl font-semibold">
+                About
+            </div>
+            <div class="text-lg">
+                Sit quis aut ipsum minima pariatur Totam laboriosam totam qui modi a Aliquam tenetur impedit quisquam nemo
+                assumenda repudiandae sed Eligendi facere rem sequi voluptas vel? Fugit laudantium vero officia.
+            </div>
+        </div>
+        <Footer />
+    </div>
+</template>
+

src/components/Description.vue

@@ -0,0 +1,18 @@
+<script setup>
+import { defineProps } from 'vue'
+
+const props = defineProps({
+    pokemonData: Object,
+});
+</script>
+
+<template>
+    <div class="space-y-2 lg:w-96">
+        <div class="text-xl lg:text-2xl font-semibold">
+            Description
+        </div>
+        <div class="text-sm lg:text-base font-semibold">
+            {{ pokemonData?.flavor_text_entries[0].flavor_text }}
+        </div>
+    </div>
+</template>

src/components/Footer.vue

@@ -0,0 +1,13 @@
+<template>
+    <div class="flex flex-col lg:flex-row items-center justify-center w-full gap-2">
+        <div class="flex gap-4 justify-center items-center">
+            <a href="/1">Pokedex</a>
+            <a href="/about">About</a>
+            <a href="https://dribbble.com/shots/2859891--025-Pikachu" target="_blank">Inspiration</a>
+            <a href="https://dribbble.com/shots/2859891--025-Pikachu" target="_blank">Source Code</a>
+        </div>
+        <div class="hidden lg:block">-</div>
+        <a href="https://github.com/xyvs" class="text-center font-semibold" target="_blank">Made by xyvs</a>
+    </div>
+</template>
+

src/components/Information.vue

@@ -0,0 +1,22 @@
+<script setup>
+import { defineProps } from 'vue'
+
+const props = defineProps({
+    pokemonData: Object,
+});
+</script>
+
+<template>
+    <div class="space-y-2 text-sm lg:text-base">
+        <div class="text-xl lg:text-2xl font-semibold">
+            Information
+        </div>
+        <div class="">
+            <span class="font-semibold">Height:</span> {{ pokemonData.height * 10 }}cm
+        </div>
+        <div class="">
+            <span class="font-semibold">Height:</span> {{ pokemonData.weight / 10 }}kg
+        </div>
+    </div>
+</template>
+

src/components/Pages.vue

@@ -0,0 +1,63 @@
+<script setup>
+
+import { ref, defineProps } from 'vue'
+
+const props = defineProps({
+    numberPadding: Number,
+});
+
+const activeId = ref(null)
+const pokedexNumbers = ref(null)
+
+function calculatePageNumbers() {
+
+    const createArray = n => Array.from({ length: n }, (_, i) => i + 1);
+
+    const url = window.location.href;
+    const pokemonId = parseInt(url.split("/").slice(-1)[0]);
+
+    const highestPokemon = 1005;
+    const numberPadding = props.numberPadding;
+    const numberSize = numberPadding / 2;
+
+    let lowerNumbers = numberSize;
+    let upperNumbers = numberSize;
+
+    if (pokemonId < (numberSize + 1)) {
+        lowerNumbers = pokemonId - 1;
+        upperNumbers = numberPadding - lowerNumbers;
+    } else if (pokemonId > (highestPokemon - (numberSize + 1))) {
+        upperNumbers = highestPokemon - pokemonId;
+        lowerNumbers = numberPadding - upperNumbers;
+    }
+
+    let lowestNumbers = createArray(lowerNumbers)
+    lowestNumbers = lowestNumbers.map((x, index) => {
+        return pokemonId - (lowerNumbers - index)
+    })
+
+    let highestNumbers = createArray(upperNumbers)
+    highestNumbers = highestNumbers.map((x, index) => {
+        return pokemonId + (index + 1)
+    })
+
+    pokedexNumbers.value = [
+        ...lowestNumbers,
+        pokemonId,
+        ...highestNumbers
+    ]
+    activeId.value = pokemonId
+}
+
+calculatePageNumbers()
+
+</script>
+
+<template>
+    <div v-for="number in pokedexNumbers" class="cursor-pointer">
+        <a :href="'/' + number">
+            <span v-if="number === activeId" class="font-bold text-lg">{{ number }}</span>
+            <span v-else>{{ number }}</span>
+        </a>
+    </div>
+</template>

src/components/Pokedex.vue

@@ -0,0 +1,137 @@
+<script setup>
+
+import { ref, computed } from 'vue'
+
+import Pages from './Pages.vue'
+import Description from './Description.vue'
+import Information from './Information.vue'
+import Pokemon from './Pokemon.vue'
+import PokedexIndex from './PokemonIndex.vue'
+import Footer from './Footer.vue'
+
+
+import ColorThief from 'colorthief'
+import tinycolor from 'tinycolor2'
+
+const props = defineProps({
+    pokemonId: Number,
+});
+
+const pokemon = ref(null)
+const pokemonImage = ref(null)
+const pokemonSpecies = ref(null)
+const pokemonId = ref(null)
+
+const darkColor = ref(null)
+const lightColor = ref(null)
+
+const isDark = ref(true)
+
+function getPokemonColors(image) {
+    const colorThief = new ColorThief()
+
+    const img = new Image();
+    img.crossOrigin = 'anonymous';
+    img.src = image
+
+    img.onload = () => {
+        const color = colorThief.getColor(img)
+        const rgbColor = `rgb (${color[0]}, ${color[1]}, ${color[2]})`
+
+        let originalColor = tinycolor(rgbColor);
+
+        let light = originalColor.brighten(10).toString();
+        let dark = originalColor.darken(30).toString();
+
+
+        darkColor.value = dark
+        lightColor.value = light
+
+    }
+}
+
+function getPokemonData() {
+    fetch(`https://pokeapi.co/api/v2/pokemon/${props.pokemonId}`)
+        .then((response) => response.json())
+        .then((json) => pokemon.value = json)
+        .then(() => {
+            pokemonImage.value = pokemon.value.sprites.other['official-artwork'].front_default
+            getPokemonColors(pokemonImage.value)
+        })
+
+    fetch(`https://pokeapi.co/api/v2/pokemon-species/${props.pokemonId}`)
+        .then((response) => response.json())
+        .then((json) => pokemonSpecies.value = json);
+
+}
+
+function changeTheme() {
+    isDark.value = !isDark.value
+}
+
+const pokemonColors = computed(() => {
+    if (isDark.value) {
+        return {
+            backgroundColor: darkColor.value,
+            color: lightColor.value
+        }
+    } else {
+        return {
+            backgroundColor: lightColor.value,
+            color: darkColor.value
+        }
+    }
+});
+
+getPokemonData()
+
+</script>
+
+<template>
+    <div v-if="pokemon && pokemonSpecies && pokemonColors">
+        <div class="w-screen min-h-screen text-white p-8 lg:p-12 font-sans flex flex-col" :style="pokemonColors">
+            <div class="flex flex-col items-center justify-between flex-grow">
+
+                <PokedexIndex :pokemon="pokemon" :pokemonData="pokemonSpecies" />
+
+                <div class="flex justify-between items-center w-full lg:gap-24 flex-grow">
+
+                    <div class="relative text-center hidden lg:block">
+                        <div @click="changeTheme"
+                            class="lg:absolute top-0 left-0 -rotate-90 w-72 -translate-x-36 font-semibold">
+                            Change Theme
+                        </div>
+                    </div>
+
+                    <div class="w-full space-y-24 flex flex-col items-center justify-center" @click="changeTheme">
+
+                        <Pokemon :pokemonData="pokemonSpecies" :pokemonImage="pokemonImage" />
+
+                        <div class="flex flex-col lg:flex-row justify-between gap-6 w-full">
+                            <Information :pokemonData="pokemon" />
+                            <Description :pokemonData="pokemonSpecies" />
+                        </div>
+
+                    </div>
+
+                    <div class="hidden lg:block space-y-4 text-center">
+                        <Pages :numberPadding="16" />
+                    </div>
+
+                </div>
+
+                <div class="space-y-8">
+
+                    <div class="flex items-center justify-center text-center lg:hidden space-x-4">
+                        <Pages :numberPadding="6" />
+                    </div>
+
+                    <Footer />
+
+                </div>
+
+            </div>
+        </div>
+    </div>
+</template>
+

src/components/Pokemon.vue

@@ -0,0 +1,25 @@
+<script setup>
+import { defineProps } from 'vue'
+
+const props = defineProps({
+    pokemonData: Object,
+    pokemonImage: String,
+});
+</script>
+
+<template>
+    <div class="lg-translate-x-24 relative">
+        <div class="text-7xl lg:text-[15rem] font-semibold tracking-tighter text-center">
+            {{ pokemonData.names[0].name }}
+        </div>
+        <div class="text-4xl lg:text-9xl font-semibold tracking-tighter text-center">
+            ({{ pokemonData.names[1].name }})
+        </div>
+        <div class="absolute top-0 left-0 w-full h-full flex items-center justify-center">
+            <div class="w-64 h-64 lg:w-auto lg:h-auto">
+                <img :src="pokemonImage" :alt="pokemonData.names[1].name">
+            </div>
+        </div>
+    </div>
+</template>
+

src/components/PokemonIndex.vue

@@ -0,0 +1,29 @@
+<script setup>
+import { defineProps } from 'vue'
+
+const props = defineProps({
+  pokemon: Object,
+  pokemonData: Object,
+});
+</script>
+
+<template>
+  <div class="flex items-center justify-between w-full">
+
+    <div class="space-y-1">
+      <div class="text-sm lg:text-lg font-semibold">
+        #{{ pokemon.id }}
+      </div>
+      <div class="text-lg lg:text-3xl font-semibold">
+        {{ pokemonData.name.charAt(0).toUpperCase() + pokemonData.name.slice(1).toLowerCase() }}
+      </div>
+
+    </div>
+
+    <div class=" text-lg lg:text-4xl font-bold">
+      Pokedex
+    </div>
+
+  </div>
+</template>
+

src/main.js

@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+
+createApp(App).mount('#app')

src/style.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;