|
| 1 | +import { DialogCard } from "@/components/cards/dialog-card"; |
| 2 | +import { usePlayers } from "@/contexts/players-context"; |
| 3 | +import upgrades from "@/data/island_upgrades.json"; |
| 4 | +import { Inter } from "next/font/google"; |
| 5 | +import Head from "next/head"; |
| 6 | +import Image from "next/image"; |
| 7 | +import { useEffect, useState } from "react"; |
| 8 | + |
| 9 | +const inter = Inter({ subsets: ["latin"] }); |
| 10 | + |
| 11 | +export default function IslandUpgrades() { |
| 12 | + const { activePlayer } = usePlayers(); |
| 13 | + const [islandUpgrades, setIslandUpgrades] = useState<Set<String>>(new Set()); |
| 14 | + |
| 15 | + useEffect(() => { |
| 16 | + if ( |
| 17 | + activePlayer && |
| 18 | + activePlayer.general && |
| 19 | + activePlayer.general.islandUpgrades |
| 20 | + ) { |
| 21 | + setIslandUpgrades(new Set(activePlayer.general.islandUpgrades)); |
| 22 | + } |
| 23 | + }, [activePlayer]); |
| 24 | + |
| 25 | + let upgradeCards: JSX.Element[] = []; |
| 26 | + Object.entries(upgrades).forEach(([id, upgrade]) => { |
| 27 | + upgradeCards.push( |
| 28 | + <DialogCard |
| 29 | + key={id} |
| 30 | + title={upgrade.name} |
| 31 | + description={ |
| 32 | + <div className="space-y-6 text-white"> |
| 33 | + <section className="space-y-1"> |
| 34 | + <h3 className="font-semibold text-white">Cost</h3> |
| 35 | + <span className="text-white flex items-center gap-1"> |
| 36 | + <span |
| 37 | + className="align-middle" |
| 38 | + style={{ imageRendering: "pixelated" }} |
| 39 | + > |
| 40 | + {upgrade.cost} |
| 41 | + </span> |
| 42 | + <span |
| 43 | + className="w-5 h-5 align-middle relative flex items-center" |
| 44 | + style={{ imageRendering: "pixelated" }} |
| 45 | + > |
| 46 | + <Image |
| 47 | + src="https://stardewvalleywiki.com/mediawiki/images/5/54/Golden_Walnut.png" |
| 48 | + alt="Golden Walnut" |
| 49 | + fill |
| 50 | + className="object-contain" |
| 51 | + style={{ imageRendering: "pixelated" }} |
| 52 | + unoptimized |
| 53 | + /> |
| 54 | + </span> |
| 55 | + </span> |
| 56 | + </section> |
| 57 | + <section className="space-y-1"> |
| 58 | + <h3 className="font-semibold text-white">Description</h3> |
| 59 | + <span className="block text-white">{upgrade.description}</span> |
| 60 | + </section> |
| 61 | + <section className="space-y-1"> |
| 62 | + <h3 className="font-semibold text-white">Location</h3> |
| 63 | + <span className="block text-white">{upgrade.location}</span> |
| 64 | + </section> |
| 65 | + </div> |
| 66 | + } |
| 67 | + iconURL="https://stardewvalleywiki.com/mediawiki/images/5/54/Golden_Walnut.png" |
| 68 | + completed={activePlayer ? islandUpgrades.has(id) : false} |
| 69 | + _id={id} |
| 70 | + _type="island_upgrade" |
| 71 | + />, |
| 72 | + ); |
| 73 | + }); |
| 74 | + |
| 75 | + return ( |
| 76 | + <> |
| 77 | + <Head> |
| 78 | + <meta |
| 79 | + name="title" |
| 80 | + content="Stardew Valley Ginger Island Upgrades Tracker | stardew.app" |
| 81 | + /> |
| 82 | + <title> |
| 83 | + Stardew Valley Ginger Island Upgrades Tracker | stardew.app |
| 84 | + </title> |
| 85 | + <meta |
| 86 | + name="description" |
| 87 | + content="Track and discover Ginger Island Upgrades in Stardew Valley. Keep tabs on the upgrades you've discovered and monitor your progress towards completing them all. Discover the locations and secrets of each upgrade and unlock valuable rewards on the island." |
| 88 | + /> |
| 89 | + <meta |
| 90 | + name="og:description" |
| 91 | + content="Track and discover Ginger Island Upgrades in Stardew Valley." |
| 92 | + /> |
| 93 | + <meta |
| 94 | + name="twitter:description" |
| 95 | + content="Track and discover Ginger Island Upgrades in Stardew Valley," |
| 96 | + /> |
| 97 | + <meta name="keywords" content="stardew valley Ginger Island" /> |
| 98 | + </Head> |
| 99 | + <main |
| 100 | + className={`flex min-h-screen border-neutral-200 dark:border-neutral-800 md:border-l ${inter.className} px-8 py-2`} |
| 101 | + > |
| 102 | + <div className="mx-auto mt-4 w-full space-y-4"> |
| 103 | + <h1 className="ml-1 text-2xl font-semibold text-gray-900 dark:text-white"> |
| 104 | + Island Upgrades Tracker{" "} |
| 105 | + {activePlayer |
| 106 | + ? `(${islandUpgrades.size}/${upgradeCards.length})` |
| 107 | + : `(0/${upgradeCards.length})`} |
| 108 | + </h1> |
| 109 | + <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4"> |
| 110 | + {upgradeCards} |
| 111 | + </div> |
| 112 | + </div> |
| 113 | + </main> |
| 114 | + </> |
| 115 | + ); |
| 116 | +} |
0 commit comments