259 lines
9.0 KiB
TypeScript
259 lines
9.0 KiB
TypeScript
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import {
|
|
ArrowRight,
|
|
Compass,
|
|
MapPin,
|
|
Timer,
|
|
Blocks,
|
|
Upload,
|
|
} 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";
|
|
export const dynamic = "force-dynamic";
|
|
export default async function Home() {
|
|
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">A MINECRAFT GUESSING GAME</div>
|
|
<h1>
|
|
Guess where you are
|
|
<br />
|
|
in a <span>blocky world.</span>
|
|
</h1>
|
|
<p>
|
|
Drop into a random corner of a Minecraft world.
|
|
<br className="desktop" /> Look around, spot the landmarks, and
|
|
place your pin
|
|
<br className="desktop" /> before the clock runs out.
|
|
</p>
|
|
<div className="hero-actions">
|
|
<Link href="/servers" className="button primary">
|
|
Start exploring <ArrowRight size={18} />
|
|
</Link>
|
|
<Link href="/leaderboard" className="text-link">
|
|
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>Five rounds. No roads. Just your instincts.</span>
|
|
</div>
|
|
</div>
|
|
<div className="hero-art" aria-label="Minecraft surface map">
|
|
<div className="map-art-frame minecraft-paper">
|
|
<Image
|
|
src={maps[0]?.mapImage || "/images/example-map.webp"}
|
|
alt="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>Overworld</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<div className="grass-divider" aria-hidden="true">
|
|
<span />
|
|
</div>
|
|
<section className="world-stats" aria-label="Community statistics">
|
|
<div>
|
|
<i className="stat-cube green-cube" />
|
|
<div>
|
|
<strong>{servers.toLocaleString()}</strong>
|
|
<span>COMMUNITY SERVERS</span>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<i className="stat-cube gold-cube" />
|
|
<div>
|
|
<strong>{maps.length.toLocaleString()}</strong>
|
|
<span>PUBLISHED MAPS</span>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<i className="stat-cube cyan-cube" />
|
|
<div>
|
|
<strong>{locations.toLocaleString()}</strong>
|
|
<span>PLACES TO DISCOVER</span>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<i className="stat-cube red-cube" />
|
|
<div>
|
|
<strong>5 rounds</strong>
|
|
<span>EVERY EXPEDITION</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section className="section catalog-section">
|
|
<div className="section-heading">
|
|
<div>
|
|
<span className="eyebrow">COMMUNITY MAPS</span>
|
|
<h2>Where will you go today?</h2>
|
|
</div>
|
|
<Link className="text-link" href="/servers">
|
|
All {maps.length} maps <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>YOUR WORLD HERE</span>
|
|
</div>
|
|
<div>
|
|
<span className="eyebrow">
|
|
THE FIRST EXPEDITION STARTS WITH YOU
|
|
</span>
|
|
<h3>Put your server on the map.</h3>
|
|
<p>
|
|
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} /> Get the capture tools
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</section>
|
|
<LeaderboardPreview data={rankings} />
|
|
<section className="section home-panels">
|
|
<article className="home-panel">
|
|
<span className="eyebrow">HOW TO PLAY</span>
|
|
<h2>Know your blocks?</h2>
|
|
<ol className="play-steps">
|
|
<li>
|
|
<span>01</span>
|
|
<div>
|
|
<h3>Pick your world</h3>
|
|
<p>Choose a community server, map, and difficulty.</p>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<span>02</span>
|
|
<div>
|
|
<h3>Look for the clues</h3>
|
|
<p>
|
|
Rotate the panorama. Find builds, biomes, and landmarks.
|
|
</p>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<span>03</span>
|
|
<div>
|
|
<h3>Make your guess</h3>
|
|
<p>Drop a pin on the map. Closer guesses earn more points.</p>
|
|
</div>
|
|
</li>
|
|
</ol>
|
|
<Link className="text-link" href="/about">
|
|
Read the field guide <ArrowRight size={14} />
|
|
</Link>
|
|
</article>
|
|
<article className="home-panel">
|
|
<span className="eyebrow">CHOOSE YOUR CHALLENGE</span>
|
|
<h2>One world. Three ways.</h2>
|
|
<div className="mode-list">
|
|
{[
|
|
{
|
|
name: "Easy",
|
|
time: "180 seconds",
|
|
detail: "Take your time. Rotate and zoom.",
|
|
color: "green",
|
|
},
|
|
{
|
|
name: "Normal",
|
|
time: "90 seconds",
|
|
detail: "Trust your eye. Rotate and zoom.",
|
|
color: "gold",
|
|
},
|
|
{
|
|
name: "Hard",
|
|
time: "30 seconds",
|
|
detail: "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>
|
|
{mode.name}
|
|
<span>
|
|
<Timer size={12} />
|
|
{mode.time}
|
|
</span>
|
|
</h3>
|
|
<p>{mode.detail}</p>
|
|
</div>
|
|
<ArrowRight size={15} />
|
|
</Link>
|
|
))}
|
|
</div>
|
|
<p className="mode-footnote">
|
|
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">BUILT BY THE COMMUNITY</span>
|
|
<h2>Your world deserves to be explored.</h2>
|
|
<p>Share your builds and your favorite corners of Minecraft.</p>
|
|
</div>
|
|
<Link href="/downloads" className="button">
|
|
Create a map <ArrowRight size={16} />
|
|
</Link>
|
|
</section>
|
|
</main>
|
|
<Footer />
|
|
</>
|
|
);
|
|
}
|