reset
This commit is contained in:
parent
9dd0c78850
commit
49fffc20a3
19 changed files with 2551 additions and 12482 deletions
38
app/routes/_index.tsx
Normal file
38
app/routes/_index.tsx
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
import type { V2_MetaFunction } from "@remix-run/cloudflare";
|
||||
|
||||
export const meta: V2_MetaFunction = () => {
|
||||
return [{ title: "New Remix App" }];
|
||||
};
|
||||
|
||||
export default function Index() {
|
||||
return (
|
||||
<div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4" }}>
|
||||
<h1>Welcome to Remix</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://remix.run/tutorials/blog"
|
||||
rel="noreferrer"
|
||||
>
|
||||
15m Quickstart Blog Tutorial
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://remix.run/tutorials/jokes"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Deep Dive Jokes App Tutorial
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a target="_blank" href="https://remix.run/docs" rel="noreferrer">
|
||||
Remix Docs
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,112 +0,0 @@
|
|||
import { CardBase, CardHeader } from "~/components/Card";
|
||||
import { HiChevronRight } from "react-icons/hi2";
|
||||
import type { IndexResponse, World } from "~/utils/saerro";
|
||||
import { indexQuery } from "~/utils/saerro";
|
||||
import { useLoaderData } from "@remix-run/react";
|
||||
import { json } from "@remix-run/cloudflare";
|
||||
import { FactionBar } from "~/components/FactionBar";
|
||||
import { WorldCard } from "~/components/IndexWorldCard";
|
||||
import { styled } from "styletron-react";
|
||||
import React, { ReactNode } from "react";
|
||||
|
||||
export const loader = async () => {
|
||||
return json(await indexQuery());
|
||||
};
|
||||
|
||||
export default function Index() {
|
||||
const { allWorlds } = useLoaderData<typeof loader>();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Header />
|
||||
<div>
|
||||
{allWorlds.map((world) => (
|
||||
<WorldCard world={world} key={world.id} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const HeaderBase = styled("div", {
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
borderColor: "#fff",
|
||||
backgroundColor: "#fff",
|
||||
color: "#fff",
|
||||
borderLeftWidth: "0.5rem",
|
||||
borderTopWidth: "0.5rem",
|
||||
borderRightWidth: "0",
|
||||
borderBottomWidth: "0.5rem",
|
||||
borderStyle: "solid",
|
||||
borderTopLeftRadius: "0.5rem",
|
||||
position: "relative",
|
||||
});
|
||||
|
||||
const Header = () => (
|
||||
<HeaderBase>
|
||||
<QuoteUnquoteLogo>
|
||||
<b>PS2.LIVE</b>
|
||||
<br />
|
||||
Realtime tools for PlanetSide 2
|
||||
</QuoteUnquoteLogo>
|
||||
<TheList>
|
||||
<ListLink href="https://saerro.ps2.live" color="gold">
|
||||
Saerro Live Pop API
|
||||
</ListLink>
|
||||
<ListLink href="https://try.ps2.live" color="#3333ff">
|
||||
Census API Playground
|
||||
</ListLink>
|
||||
<ListLink href="https://agg.ps2.live/population" color="limegreen">
|
||||
Population API
|
||||
</ListLink>
|
||||
<ListLink href="https://agg.ps2.live/continents" color="#44aadd">
|
||||
Continents API
|
||||
</ListLink>
|
||||
<ListLink href="https://discord.ps2.live" color="#aa77dd">
|
||||
Discord Character Link
|
||||
</ListLink>
|
||||
<ListLink href="https://metagame.ps2.live" color="#ff3333">
|
||||
Metagame Webhooks
|
||||
</ListLink>
|
||||
</TheList>
|
||||
</HeaderBase>
|
||||
);
|
||||
|
||||
const QuoteUnquoteLogo = styled("div", {
|
||||
width: "8rem",
|
||||
backgroundColor: "#fff",
|
||||
color: "#000",
|
||||
textAlign: "right",
|
||||
padding: "0.5rem",
|
||||
borderRight: "0.5rem solid #fff",
|
||||
});
|
||||
|
||||
const TheList = styled("div", {
|
||||
backgroundColor: "#000",
|
||||
borderRadius: "0.5rem",
|
||||
position: "relative",
|
||||
left: "-0.5rem",
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
padding: "0.5rem",
|
||||
gap: "0.5rem",
|
||||
flexDirection: "column",
|
||||
maxHeight: "8rem",
|
||||
alignContent: "flex-start",
|
||||
justifyContent: "center",
|
||||
flex: 1,
|
||||
});
|
||||
|
||||
const ListLink = styled("a", ({ color }: { color: string }) => ({
|
||||
display: "block",
|
||||
padding: "0.5rem",
|
||||
color,
|
||||
textDecoration: "none",
|
||||
borderRadius: "0.4rem",
|
||||
transition: "all 0.2s ease-in-out",
|
||||
":hover": {
|
||||
backgroundColor: color,
|
||||
color: "#000",
|
||||
},
|
||||
}));
|
||||
71
app/routes/worlds.$id.tsx
Normal file
71
app/routes/worlds.$id.tsx
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
import type { LoaderArgs } from "@remix-run/cloudflare";
|
||||
import { json } from "@remix-run/cloudflare";
|
||||
import { useLoaderData } from "@remix-run/react";
|
||||
import {
|
||||
WorldResponse,
|
||||
Zone,
|
||||
allClasses,
|
||||
allVehicles,
|
||||
worldQuery,
|
||||
} from "~/utils/saerro";
|
||||
import { pascalCaseToTitleCase, toTitleCase } from "~/utils/strings";
|
||||
|
||||
export const loader = async ({ params }: LoaderArgs) => {
|
||||
return json(await worldQuery(params.id as string));
|
||||
};
|
||||
|
||||
export default function Index() {
|
||||
const { world } = useLoaderData<WorldResponse>();
|
||||
|
||||
return (
|
||||
<div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.6" }}>
|
||||
<h1>{world.name}</h1>
|
||||
<h2>Total Population</h2>
|
||||
<p>
|
||||
{world.population.total} players ({world.population.vs} VS,{" "}
|
||||
{world.population.nc} NC, {world.population.tr} TR)
|
||||
</p>
|
||||
<div>
|
||||
<h2>Continents</h2>
|
||||
{world.zones.all.map((zone) => (
|
||||
<ZoneInfo zone={zone} key={zone.id} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const ZoneInfo = ({ zone }: { zone: Zone }) => {
|
||||
return (
|
||||
<section>
|
||||
<h3>{zone.name}</h3>
|
||||
<p>
|
||||
{zone.population.total} players ({zone.population.vs} VS,{" "}
|
||||
{zone.population.nc} NC, {zone.population.tr} TR)
|
||||
</p>
|
||||
<p>
|
||||
<ul>
|
||||
{allClasses.map((cls, idx) => (
|
||||
<li key={idx}>
|
||||
<b>{pascalCaseToTitleCase(cls)}</b>: {zone.classes?.[cls].total}{" "}
|
||||
total, {zone.classes?.[cls].vs} VS, {zone.classes?.[cls].nc} NC,{" "}
|
||||
{zone.classes?.[cls].tr} TR
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
{zone.vehicles?.total} vehicles...
|
||||
<ul>
|
||||
{allVehicles.map((vehicle, idx) => (
|
||||
<li key={idx}>
|
||||
<b>{toTitleCase(vehicle)}</b>: {zone.vehicles?.[vehicle].total}{" "}
|
||||
total, {zone.vehicles?.[vehicle].vs} VS,{" "}
|
||||
{zone.vehicles?.[vehicle].nc} NC, {zone.vehicles?.[vehicle].tr} TR
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</p>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue