Update AdventureCard component to include regionId and visited properties, and add country flag support

src/lib/components/AdventureCard.svelte

@@ -2,6 +2,7 @@
   import { createEventDispatcher } from "svelte";
   import locationDot from "$lib/assets/locationDot.svg";
   import calendar from "$lib/assets/calendar.svg";
+  import { goto } from "$app/navigation";
   const dispatch = createEventDispatcher();
 
   export let type: String;
@@ -12,6 +13,7 @@
   export let id: Number | undefined = undefined;
   export let regionId: String | undefined = undefined;
   export let visited: Boolean | undefined = undefined;
+  export let countryCode: String | undefined = undefined;
 
   function remove() {
     dispatch("remove", id);
@@ -30,6 +32,10 @@
     dispatch("removeVisit", regionId);
     visited = false;
   }
+
+  function moreInfo() {
+    goto(`/worldtravel/${countryCode}/${regionId}`);
+  }
 </script>
 
 {#if type === "mylog"}
@@ -122,6 +128,7 @@
       <h2 class="card-title overflow-ellipsis">{name}</h2>
       <p>{regionId}</p>
       <div class="card-actions justify-end">
+        <button class="btn btn-info" on:click={moreInfo}>More Info</button>
         {#if !visited}
           <button class="btn btn-primary" on:click={markVisited}
             >Mark Visited</button

src/lib/db/schema.ts

@@ -66,6 +66,7 @@ export const worldTravelCountryRegions = pgTable("worldTravelCountryRegions", {
   country_code: text("country_code")
     .notNull()
     .references(() => worldTravelCountries.country_code),
+  info: json("info"),
 });
 
 export const userVisitedWorldTravel = pgTable("userVisitedWorldTravel", {

src/lib/utils/types.ts

@@ -4,3 +4,36 @@ export interface Adventure {
   location: string;
   created: string;
 }
+
+export interface RegionInfo {
+  name: string;
+  abbreviation: string;
+  description: string;
+  capital: string;
+  largest_city: string;
+  area: {
+    total: number;
+    units: string;
+  };
+  population: {
+    estimate: number;
+    year: number;
+  };
+  state_flower: string;
+  state_bird: string;
+  state_tree: string;
+  climate: {
+    description: string;
+    summer_highs: string;
+    winter_lows: string;
+    precipitation: string;
+  };
+  economy: {
+    industries: string[];
+    agricultural_products: string[];
+  };
+  tourism: {
+    attractions: string[];
+  };
+  major_sports_teams: string[];
+};

src/routes/worldtravel/[countrycode]/+page.svelte

@@ -89,6 +89,7 @@
         {#each data.regions as region (region.id)}
             <AdventureCard
                 type="worldtravelregion"
+                countryCode={data.countrycode}
                 regionId={region.id}
                 name={region.name}
                 on:markVisited={markVisited}

src/routes/worldtravel/[countrycode]/[regioncode]/+page.server.ts

@@ -0,0 +1,34 @@
+import { db } from '$lib/db/db.server.js';
+import { userVisitedWorldTravel, worldTravelCountryRegions } from '$lib/db/schema.js';
+import { and, eq } from 'drizzle-orm';
+import type { PageServerLoad } from './$types';
+import InfoModal from '$lib/components/InfoModal.svelte';
+
+export const load: PageServerLoad  = async ({ params, locals })  => {
+  const { regioncode } = params;
+  
+    let info = await db
+    .select({data: worldTravelCountryRegions})
+    .from(worldTravelCountryRegions)
+    .where(eq(worldTravelCountryRegions.id, regioncode))
+    .limit(1)
+    .execute();
+
+    let visited = false;
+    if (locals.user) {
+      let userVisited = await db
+      .select({data: userVisitedWorldTravel})
+      .from(userVisitedWorldTravel)
+      .where(and(eq(userVisitedWorldTravel.userId, locals.user.id), eq(userVisitedWorldTravel.region_id, regioncode)))
+      .limit(1)
+      .execute();
+      if (userVisited.length !== 0) {
+      visited = true;
+      }
+    }
+
+  return {
+      info : info[0],
+      visited : visited,
+  };
+}

src/routes/worldtravel/[countrycode]/[regioncode]/+page.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+    import { countryCodeToName } from "$lib";
+    import type { RegionInfo } from "$lib/utils/types.js";
+
+    export let data;
+    let info = data.info.data.info as RegionInfo;
+    let country = countryCodeToName(data.info.data.country_code);
+    let regionName = data.info.data.name;
+    let visited = data.visited;
+</script>
+
+<h1>Info About {regionName} in {country}</h1>
+{#if visited}
+    <p>You have visited this region!</p>
+{/if}
+
+<h2>Region Info</h2>
+{#if info.description}
+    <p>{info.description}</p>
+{/if}