277 lines
9.8 KiB
TypeScript
277 lines
9.8 KiB
TypeScript
import { getI18n } from "@/lib/i18n";
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import {
|
|
ArrowRight,
|
|
Compass,
|
|
MapPin,
|
|
Timer,
|
|
Blocks,
|
|
Upload,
|
|
Download,
|
|
} from "lucide-react";
|
|
import { Header, Footer } from "@/components/Shell";
|
|
import { MapCard } from "@/components/MapCard";
|
|
import { catalog } from "@/lib/catalog";
|
|
import { leaderboard } from "@/lib/leaderboard";
|
|
import { LeaderboardPreview } from "@/components/Leaderboard";
|
|
import desktopRelease from "@/shared/desktop-release.json";
|
|
export const dynamic = "force-dynamic";
|
|
export default async function Home() {
|
|
const { t, formatNumber } = await getI18n();
|
|
const [maps, rankings] = await Promise.all([
|
|
catalog(),
|
|
leaderboard({ limit: 5 }),
|
|
]);
|
|
const servers = new Set(maps.map((map) => map.server_id)).size;
|
|
const locations = maps.reduce((total, map) => total + map.panorama_count, 0);
|
|
return (
|
|
<>
|
|
<Header />
|
|
<main className="home-page" id="main-content">
|
|
<section className="hero">
|
|
<div className="hero-copy">
|
|
<div className="status-label">{t("A MINECRAFT GUESSING GAME")}</div>
|
|
<h1>
|
|
{t("Guess where you are")}
|
|
<br />
|
|
{t("in a")} <span>{t("blocky world.")}</span>
|
|
</h1>
|
|
<p>
|
|
{t("Drop into a random corner of a Minecraft world.")}
|
|
<br className="desktop" />{" "}
|
|
{t("Look around, spot the landmarks, and place your pin")}
|
|
<br className="desktop" /> {t("before the clock runs out.")}
|
|
</p>
|
|
<div className="hero-actions">
|
|
<Link href="/servers" className="button primary">
|
|
{t("Start exploring")} <ArrowRight size={18} />
|
|
</Link>
|
|
<a href={desktopRelease.file} className="button" download>
|
|
<Download size={18} /> {t("Download for Windows")}
|
|
</a>
|
|
<Link href="/leaderboard" className="text-link">
|
|
{t("Meet the top explorers")} <ArrowRight size={14} />
|
|
</Link>
|
|
</div>
|
|
<div className="hero-notes">
|
|
<span className="round-blocks" aria-hidden="true">
|
|
<i />
|
|
<i />
|
|
<i />
|
|
<i />
|
|
<i />
|
|
</span>
|
|
<span>{t("Five rounds. No roads. Just your instincts.")}</span>
|
|
</div>
|
|
</div>
|
|
<div className="hero-art" aria-label={t("Minecraft surface map")}>
|
|
<div className="map-art-frame minecraft-paper">
|
|
<Image
|
|
src={maps[0]?.mapImage || "/images/example-map.webp"}
|
|
alt={t(
|
|
"A Minecraft surface map on the original Minecraft parchment texture",
|
|
)}
|
|
width={1024}
|
|
height={1024}
|
|
loading="eager"
|
|
unoptimized
|
|
/>
|
|
<span className="square-pin pin-green" />
|
|
<span className="square-pin pin-red" />
|
|
<span className="square-pin pin-gold" />
|
|
</div>
|
|
<span className="compass-art" aria-hidden="true">
|
|
<Compass size={43} />
|
|
<small>N</small>
|
|
</span>
|
|
<div className="floating-tag">
|
|
<MapPin size={14} />
|
|
<strong>X: ??? Z: ???</strong>
|
|
<span>{t("Overworld")}</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<div className="grass-divider" aria-hidden="true">
|
|
<span />
|
|
</div>
|
|
<section className="world-stats" aria-label={t("Community statistics")}>
|
|
<div>
|
|
<i className="stat-cube green-cube" />
|
|
<div>
|
|
<strong>{formatNumber(servers)}</strong>
|
|
<span>{t("COMMUNITY SERVERS")}</span>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<i className="stat-cube gold-cube" />
|
|
<div>
|
|
<strong>{formatNumber(maps.length)}</strong>
|
|
<span>{t("PUBLISHED MAPS")}</span>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<i className="stat-cube cyan-cube" />
|
|
<div>
|
|
<strong>{formatNumber(locations)}</strong>
|
|
<span>{t("PLACES TO DISCOVER")}</span>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<i className="stat-cube red-cube" />
|
|
<div>
|
|
<strong>{t("5 rounds")}</strong>
|
|
<span>{t("EVERY EXPEDITION")}</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section className="section catalog-section">
|
|
<div className="section-heading">
|
|
<div>
|
|
<span className="eyebrow">{t("COMMUNITY MAPS")}</span>
|
|
<h2>{t("Where will you go today?")}</h2>
|
|
</div>
|
|
<Link className="text-link" href="/servers">
|
|
{t("All maps ({count})", { count: maps.length })}{" "}
|
|
<ArrowRight size={15} />
|
|
</Link>
|
|
</div>
|
|
{maps.length ? (
|
|
<div className="cards-grid">
|
|
{maps.slice(0, 4).map((map, index) => (
|
|
<MapCard map={map} index={index} key={map.id} minecraftPaper />
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="first-map-panel">
|
|
<div className="empty-map-art minecraft-paper" aria-hidden="true">
|
|
<Image
|
|
src="/images/example-map.webp"
|
|
alt=""
|
|
width={180}
|
|
height={180}
|
|
unoptimized
|
|
/>
|
|
<span>{t("YOUR WORLD HERE")}</span>
|
|
</div>
|
|
<div>
|
|
<span className="eyebrow">
|
|
{t("THE FIRST EXPEDITION STARTS WITH YOU")}
|
|
</span>
|
|
<h3>{t("Put your server on the map.")}</h3>
|
|
<p>
|
|
{t(
|
|
"No community maps have been published yet. Export your world with the server plugin, or capture five locations with the Fabric mod. Preview your map and submit it for review.",
|
|
)}
|
|
</p>
|
|
<Link className="button primary" href="/downloads">
|
|
<Upload size={16} /> {t("Get the capture tools")}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</section>
|
|
<LeaderboardPreview data={rankings} />
|
|
<section className="section home-panels">
|
|
<article className="home-panel">
|
|
<span className="eyebrow">{t("HOW TO PLAY")}</span>
|
|
<h2>{t("Know your blocks?")}</h2>
|
|
<ol className="play-steps">
|
|
<li>
|
|
<span>01</span>
|
|
<div>
|
|
<h3>{t("Pick your world")}</h3>
|
|
<p>{t("Choose a community server, map, and difficulty.")}</p>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<span>02</span>
|
|
<div>
|
|
<h3>{t("Look for the clues")}</h3>
|
|
<p>
|
|
{t(
|
|
"Rotate the panorama. Find builds, biomes, and landmarks.",
|
|
)}
|
|
</p>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<span>03</span>
|
|
<div>
|
|
<h3>{t("Make your guess")}</h3>
|
|
<p>
|
|
{t(
|
|
"Drop a pin on the map. Closer guesses earn more points.",
|
|
)}
|
|
</p>
|
|
</div>
|
|
</li>
|
|
</ol>
|
|
<Link className="text-link" href="/about">
|
|
{t("Read the field guide")} <ArrowRight size={14} />
|
|
</Link>
|
|
</article>
|
|
<article className="home-panel">
|
|
<span className="eyebrow">{t("CHOOSE YOUR CHALLENGE")}</span>
|
|
<h2>{t("One world. Three ways.")}</h2>
|
|
<div className="mode-list">
|
|
{[
|
|
{
|
|
name: t("Easy"),
|
|
time: t("180 seconds"),
|
|
detail: t("Take your time. Rotate and zoom."),
|
|
color: "green",
|
|
},
|
|
{
|
|
name: t("Normal"),
|
|
time: t("90 seconds"),
|
|
detail: t("Trust your eye. Rotate and zoom."),
|
|
color: "gold",
|
|
},
|
|
{
|
|
name: t("Hard"),
|
|
time: t("30 seconds"),
|
|
detail: t("Think fast. No zoom allowed."),
|
|
color: "red",
|
|
},
|
|
].map((mode) => (
|
|
<Link href="/servers" className="mode-row" key={mode.name}>
|
|
<i className={`stat-cube ${mode.color}-cube`} />
|
|
<div>
|
|
<h3>
|
|
{t(mode.name)}
|
|
<span>
|
|
<Timer size={12} />
|
|
{t(mode.time)}
|
|
</span>
|
|
</h3>
|
|
<p>{t(mode.detail)}</p>
|
|
</div>
|
|
<ArrowRight size={15} />
|
|
</Link>
|
|
))}
|
|
</div>
|
|
<p className="mode-footnote">
|
|
{t("Up to 5,000 points per round. How close can you get?")}
|
|
</p>
|
|
</article>
|
|
</section>
|
|
<section className="section contribute-banner">
|
|
<Blocks size={38} />
|
|
<div>
|
|
<span className="eyebrow">{t("BUILT BY THE COMMUNITY")}</span>
|
|
<h2>{t("Your world deserves to be explored.")}</h2>
|
|
<p>
|
|
{t("Share your builds and your favorite corners of Minecraft.")}
|
|
</p>
|
|
</div>
|
|
<Link href="/downloads" className="button">
|
|
{t("Create a map")} <ArrowRight size={16} />
|
|
</Link>
|
|
</section>
|
|
</main>
|
|
<Footer />
|
|
</>
|
|
);
|
|
}
|