chore: Add maplit dependency, display type images and update window dimensions in tauri.conf.json

infinitel8p · infinitel8p · commit 945df5e141f7 · 2024-08-25T00:29:24.000+02:00
diff --git a/LICENSE b/LICENSE
diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
@@ -16,6 +16,7 @@ serde = { version = "1", features = ["derive"] }
 serde_json = "1"
 reqwest = { version = "0.11", features = ["json", "blocking"] }
 tokio = { version = "1", features = ["full"] }
+maplit = "1.0"
 
 
 [features]
diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs
@@ -1,15 +1,100 @@
 // Prevents additional console window on Windows in release, DO NOT REMOVE!!
 #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
 use reqwest::get;
-use serde_json::Value; 
+use serde_json::{Value, json};
+use std::collections::HashMap;
+
+#[macro_use]
+extern crate maplit;
 
 // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
 #[tauri::command]
 fn greet(name: &str) -> String {
     format!("{} does not exist yet!", name)
 }
 
-// fetch input from pokeapi
+// Function to fetch type effectiveness
+async fn fetch_type_data(url: &str) -> Result<Value, String> {
+    match get(url).await {
+        Ok(response) => {
+            if response.status().is_success() {
+                let json: Value = response.json().await.unwrap();
+                Ok(json)
+            } else {
+                Err("Failed to fetch type data".to_string())
+            }
+        }
+        Err(_) => Err("Failed to connect to PokéAPI".to_string()),
+    }
+}
+
+// Function to calculate weaknesses based on Pokémon types
+async fn calculate_weaknesses(types: &Vec<Value>) -> Result<HashMap<String, Vec<HashMap<String, String>>>, String> {
+    let mut weaknesses: HashMap<String, Vec<HashMap<String, String>>> = HashMap::new();
+
+    for pokemon_type in types {
+        let type_name = pokemon_type["type"]["name"].as_str().unwrap();
+        let type_url = pokemon_type["type"]["url"].as_str().unwrap();
+        let type_id = type_url.split('/').filter(|&s| !s.is_empty()).last().unwrap(); // Extract the type ID
+
+        let icon_url = format!("https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/sword-shield/{}.png", type_id);
+
+        if let Ok(type_data) = fetch_type_data(type_url).await {
+            let damage_relations = &type_data["damage_relations"];
+
+            // Group by 2x effectiveness
+            if let Some(double_damage_from) = damage_relations["double_damage_from"].as_array() {
+                for damage_type in double_damage_from {
+                    let type_name = damage_type["name"].as_str().unwrap().to_string();
+                    let type_id = damage_type["url"].as_str().unwrap().split('/').filter(|&s| !s.is_empty()).last().unwrap();
+                    let icon_url = format!("https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/sword-shield/{}.png", type_id);
+                    weaknesses.entry("2x".to_string()).or_default().push(
+                        hashmap!{
+                            "type".to_string() => type_name,
+                            "icon".to_string() => icon_url
+                        }
+                    );
+                }
+            }
+
+            // Group by 0.5x effectiveness
+            if let Some(half_damage_from) = damage_relations["half_damage_from"].as_array() {
+                for damage_type in half_damage_from {
+                    let type_name = damage_type["name"].as_str().unwrap().to_string();
+                    let type_id = damage_type["url"].as_str().unwrap().split('/').filter(|&s| !s.is_empty()).last().unwrap();
+                    let icon_url = format!("https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/sword-shield/{}.png", type_id);
+                    weaknesses.entry("0.5x".to_string()).or_default().push(
+                        hashmap!{
+                            "type".to_string() => type_name,
+                            "icon".to_string() => icon_url
+                        }
+                    );
+                }
+            }
+
+            // Group by 0x effectiveness
+            if let Some(no_damage_from) = damage_relations["no_damage_from"].as_array() {
+                for damage_type in no_damage_from {
+                    let type_name = damage_type["name"].as_str().unwrap().to_string();
+                    let type_id = damage_type["url"].as_str().unwrap().split('/').filter(|&s| !s.is_empty()).last().unwrap();
+                    let icon_url = format!("https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/sword-shield/{}.png", type_id);
+                    weaknesses.entry("0x".to_string()).or_default().push(
+                        hashmap!{
+                            "type".to_string() => type_name,
+                            "icon".to_string() => icon_url
+                        }
+                    );
+                }
+            }
+        } else {
+            return Err("Failed to fetch type data".to_string());
+        }
+    }
+
+    Ok(weaknesses)
+}
+
+// Fetch input from PokéAPI and include weaknesses
 #[tauri::command]
 async fn search_pokemon(name: &str) -> Result<String, String> {
     let url = format!("https://pokeapi.co/api/v2/pokemon/{}", name.to_lowercase());
@@ -18,7 +103,16 @@ async fn search_pokemon(name: &str) -> Result<String, String> {
         Ok(response) => {
             if response.status().is_success() {
                 let json: Value = response.json().await.unwrap();
-                Ok(json.to_string())
+                let types = json["types"].as_array().unwrap();
+
+                // Calculate weaknesses
+                let weaknesses = calculate_weaknesses(types).await?;
+
+                // Add weaknesses to the Pokémon data
+                let mut result = json.clone();
+                result["weaknesses"] = json!(weaknesses);
+
+                Ok(result.to_string())
             } else {
                 Err(format!("Error: Pokémon {} not found!", name))
             }
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
@@ -19,9 +19,9 @@
     },
     "windows": [
       {
-        "title": "pokedex",
-        "width": 800,
-        "height": 600
+        "title": "PokeDex",
+        "width": 550,
+        "height": 950
       }
     ],
     "security": {
@@ -40,4 +40,4 @@
       ]
     }
   }
-}
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,17 +1,17 @@
 import { useState } from "react";
 import { invoke } from "@tauri-apps/api/tauri";
 import "./App.css";
+import CollapsibleSection from "./components/CollapsibleSection";
 
 function App() {
-  const [pokemonData, setPokemonData] = useState(null);
+  const [pokemonData, setPokemonData] = useState<any>(null);
   const [error, setError] = useState("");
   const [name, setName] = useState("");
 
   async function searchPokemon() {
     try {
-      // Invoke the Tauri command to search for the Pokémon
       const result = await invoke("search_pokemon", { name });
-      const data = JSON.parse(result);
+      const data = JSON.parse(result as string) as any;
       setPokemonData(data);
       setError("");
     } catch (err) {
@@ -20,46 +20,85 @@ function App() {
     }
   }
 
-  return (
-    <div className="m-0	pt-[10vh] flex flex-col justify-center text-center">
-      <h1 className="text-3xl font-bold">
-        Welcome to PokeDex!
-      </h1>
+  function capitalize(word: string) {
+    return word.charAt(0).toUpperCase() + word.slice(1);
+  }
 
-      <div className="flex justify-center">
-        <img src="/image.png" className="h-64" alt="Pokedex logo" />
+  return (
+    <div className="m-0 pt-[5vh] flex flex-col justify-between h-screen text-center">
+      <div>
+        {pokemonData ? (
+          <div>
+            <h1 className="text-3xl font-bold capitalize">{capitalize(pokemonData?.name)}</h1>
+            <img
+              src={pokemonData?.sprites?.other?.['official-artwork']?.front_default}
+              alt={pokemonData?.name}
+              className="h-64 mx-auto"
+            />
+            <p className="mt-2">
+              <strong>Type:</strong> {pokemonData?.types?.map((type: any) => capitalize(type.type.name)).join(", ")}
+            </p>
+            <div className="mt-10">
+              {pokemonData?.weaknesses ? (
+                <>
+                  <CollapsibleSection title="2x Weaknesses">
+                    {pokemonData.weaknesses['2x']?.map((weakness: any) => (
+                      <div key={weakness.type} className="inline-block m-2">
+                        <img src={weakness.icon} alt={weakness.type} className="h-8 inline-block mr-2" />
+                      </div>
+                    )) || "None"}
+                  </CollapsibleSection>
+                  <CollapsibleSection title="0.5x Resistances">
+                    {pokemonData.weaknesses['0.5x']?.map((resistance: any) => (
+                      <div key={resistance.type} className="inline-block m-2">
+                        <img src={resistance.icon} alt={resistance.type} className="h-8 inline-block mr-2" />
+                      </div>
+                    )) || "None"}
+                  </CollapsibleSection>
+                  <CollapsibleSection title="0x Immunities">
+                    {pokemonData.weaknesses['0x']?.map((immunity: any) => (
+                      <div key={immunity.type} className="inline-block m-2">
+                        <img src={immunity.icon} alt={immunity.type} className="h-8 inline-block mr-2" />
+                      </div>
+                    )) || "None"}
+                  </CollapsibleSection>
+                </>
+              ) : (
+                "No weaknesses found"
+              )}
+            </div>
+          </div>
+        ) : (
+          <div>
+            <h1 className="text-3xl font-bold capitalize">Welcome to PokeDex!</h1>
+            <img
+              src="/image.png"
+              alt="Default Pokémon"
+              className="h-64 mx-auto"
+            />
+          </div>
+        )}
       </div>
 
+      {error && <p className="text-red-500">{error}</p>}
+
       <form
-        className="flex	justify-center gap-2"
+        className="flex flex-col justify-center gap-2 mt-2"
         onSubmit={(e) => {
           e.preventDefault();
           searchPokemon();
         }}
       >
-        <input
-          id="pokemon-input"
-          onChange={(e) => setName(e.currentTarget.value)}
-          placeholder="Enter a Pokémon name..."
-        />
-        <button type="submit" className="cursor-pointer">Find</button>
-      </form>
-
-      {error && <p className="mt-2 text-red-500">{error}</p>}
-
-      {pokemonData && (
-        <div className="mt-4">
-          <h2 className="text-2xl font-bold capitalize">{pokemonData.name}</h2>
-          <img
-            src={pokemonData.sprites.front_default}
-            alt={pokemonData.name}
-            className="mx-auto"
+        <div className="flex justify-center gap-2 mt-2">
+          <input
+            id="pokemon-input"
+            onChange={(e) => setName(e.currentTarget.value.toLowerCase())}
+            placeholder="Enter a Pokémon name..."
           />
-          <p className="mt-2">
-            Type: {pokemonData.types.map((type) => type.type.name).join(", ")}
-          </p>
+          <button type="submit" className="cursor-pointer">Find</button>
         </div>
-      )}
+        <p className="text-xs italic">Note: Type effectiveness multipliers may vary in other games outside the core series.</p>
+      </form>
     </div>
   );
 }
diff --git a/src/components/CollapsibleSection.tsx b/src/components/CollapsibleSection.tsx
@@ -0,0 +1,24 @@
+import React, { useState } from "react";
+
+interface CollapsibleSectionProps {
+    title: string;
+    children: React.ReactNode;
+}
+
+const CollapsibleSection: React.FC<CollapsibleSectionProps> = ({ title, children }) => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+        <div className="mb-2">
+            <button
+                className="text-lg font-bold w-64 mt-5"
+                onClick={() => setIsOpen(!isOpen)}
+            >
+                {title} {isOpen ? "▲" : "▼"}
+            </button>
+            {isOpen && <div className="ml-4 mt-2">{children}</div>}
+        </div>
+    );
+};
+
+export default CollapsibleSection;

Original file line number	Diff line number	Diff line change
`@@ -19,9 +19,9 @@`
`19`	`19`	`},`
`20`	`20`	`"windows": [`
`21`	`21`	`{`
`22`		`- "title": "pokedex",`
`23`		`- "width": 800,`
`24`		`- "height": 600`
	`22`	`+ "title": "PokeDex",`
	`23`	`+ "width": 550,`
	`24`	`+ "height": 950`
`25`	`25`	`}`
`26`	`26`	`],`
`27`	`27`	`"security": {`
`@@ -40,4 +40,4 @@`
`40`	`40`	`]`
`41`	`41`	`}`
`42`	`42`	`}`
`43`		`-}`
	`43`	`+}`