Importing from Github

2023-07-23 03:14:28 +02:00
21 changed files with 21703 additions and 0 deletions
--- a/.browserslistrc
+++ b/.browserslistrc
@ -0,0 +1,4 @@
 > 1%
 last 2 versions
 not dead
 not ie 11
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -0,0 +1,18 @@
 module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/typescript/recommended'
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
 }
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,23 @@
 .DS_Store
 node_modules
 /dist
 # local env files
 .env.local
 .env.*.local
 # Log files
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 # Editor directories and files
 .idea
 .vscode
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?
--- a/24
+++ b/24
@ -0,0 +1,24 @@
 This is free and unencumbered software released into the public domain.
 Anyone is free to copy, modify, publish, use, compile, sell, or
 distribute this software, either in source code form or as a compiled
 binary, for any purpose, commercial or non-commercial, and by any
 means.
 In jurisdictions that recognize copyright laws, the author or authors
 of this software dedicate any and all copyright interest in the
 software to the public domain. We make this dedication for the benefit
 of the public at large and to the detriment of our heirs and
 successors. We intend this dedication to be an overt act of
 relinquishment in perpetuity of all present and future rights to this
 software under copyright law.
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
 EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
 MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
 IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
 OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
 ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
 OTHER DEALINGS IN THE SOFTWARE.
 For more information, please refer to <https://unlicense.org>
--- a/babel.config.js
+++ b/babel.config.js
@ -0,0 +1,5 @@
 module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
 }
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,32 @@
 {
  "name": "pokemon-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "autoprefixer": "^10",
    "core-js": "^3.8.3",
    "postcss": "^8",
    "tailwindcss": "^3",
    "vue": "^3.2.13",
    "vue-router": "^4.0.3"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-typescript": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/eslint-config-typescript": "^9.1.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "typescript": "~4.5.5",
    "vue-cli-plugin-tailwind": "~3.0.0"
  }
 }
--- a/postcss.config.js
+++ b/postcss.config.js
@ -0,0 +1,6 @@
 module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
 }
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@ -0,0 +1,17 @@
 <!DOCTYPE html>
 <html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
 </html>
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,12 @@
 <template>
  <div class="pt-14">
    <router-link class="flex justify-center text-5xl text-yellow-600" to="/">Pokémon Picker</router-link>
  </div>
  <router-view/>
 </template>
 <style>
  body{
    background-color: #ddd;
  }
 </style>
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/assets/tailwind.css
+++ b/src/assets/tailwind.css
@ -0,0 +1,5 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
--- a/src/main.ts
+++ b/src/main.ts
@ -0,0 +1,6 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 import './assets/tailwind.css'
 createApp(App).use(router).mount('#app')
--- a/src/router/index.ts
+++ b/src/router/index.ts
@ -0,0 +1,25 @@
 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
 const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about/:slug',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
 ]
 const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
 })
 export default router
--- a/src/shims-vue.d.ts
+++ b/src/shims-vue.d.ts
@ -0,0 +1,6 @@
 /* eslint-disable */
 declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
 }
--- a/src/views/AboutView.vue
+++ b/src/views/AboutView.vue
@ -0,0 +1,41 @@
 <template>
  <div class="about">
    <div v-if="pokemon" class=" w-3/12 m-auto bg-purple-100 mt-4 p-4 rounded-lg shadow-2xl flex justify-center flex-col items-center">
      <h3 class="text-3xl text-green-700 uppercase">
        {{pokemon.name}}
      </h3>
      <div class="flex justify-center">
        <img :src="pokemon.sprites.front_shiny" class="w-48">
        <img :src="pokemon.sprites.back_shiny" class="w-48">
      </div>
      <h3 class="text-yellow-400">Types</h3>
      <div v-for="(type, idx) in pokemon.types" :key="idx">
        <h5 class="text-blue-900">{{type.type.name}}</h5>
      </div>
    </div>
  </div>
 </template>
 <script lang="ts">
 import { defineComponent, reactive, toRefs} from 'vue';
 import { useRoute } from 'vue-router';
 export default defineComponent({
  name: 'AboutView',
  setup(){
    const route = useRoute();
    const state = reactive({
      pokemon: Object
    })
    fetch(`https://pokeapi.co/api/v2/pokemon/${route.params.slug}/`)
    .then(res => res.json())
    .then(data => {
      state.pokemon = data;
    });
    return {...toRefs(state)}
  }
 });
 </script>
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@ -0,0 +1,48 @@
 <template>
  <div class="w-full flex justify-center">
    <input type="text" placeholder="Enter Pokémon here" class="mt-10 p-2 border-blue-500 border-2" v-model="text">
  </div>
  <div class="mt-10 p-4 flex flex-wrap justify-center">
    <div class="ml-4 text-2x text-blue-500" v-for="(pokemon, idx) in filteredPokemon" :key="idx">
      <router-link :to="`/about/${urlIdLookup[pokemon.name]}`">
        {{pokemon.name}}
      </router-link>
    </div>
  </div>
 </template>
 <script lang="ts">
 import { defineComponent, reactive, toRefs, computed } from 'vue';
 export default defineComponent({
  name: 'HomeView',
  setup(){
    const state:any = reactive({
      pokemons: Array<any>(),
      urlIdLookup: {},
      text: '',
      filteredPokemon: computed(()=> updatePokemon()),
    });
    function updatePokemon(){
      if(!state.text){
       return [] 
      }
      return state.pokemons.filter((pokemon:any) => pokemon.name.toLowerCase().includes(state.text.toLowerCase()))
    }
    fetch('https://pokeapi.co/api/v2/pokemon?offset=0&limit=1000')
    .then(res => res.json())
    .then(data => {
      console.log(data)
      state.pokemons = data.results;
      state.urlIdLookup = data.results.reduce((acc:any, cur:any, idx:any) => 
        acc = {...acc, [cur.name]:idx+1}
      ,{});
    });
    return {...toRefs(state)}
  }
 });
 </script>
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -0,0 +1,7 @@
 module.exports = {
  content: ['./public/**/*.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
 }
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,40 @@
 {
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "useDefineForClassFields": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
 }
--- a/vue.config.js
+++ b/vue.config.js
@ -0,0 +1,4 @@
 const { defineConfig } = require('@vue/cli-service')
 module.exports = defineConfig({
  transpileDependencies: true
 })