sync

app/components/alert-timer.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
-import type { MetagameWorld } from "~/utils/metagame";
-import { humanTimeAgo } from "~/utils/strings";
+import type { MetagameWorld } from "../utils/metagame";
+import { humanTimeAgo } from "../utils/strings";
 import * as styles from "./alert-timer.css";
 
 const endTime = (alert: Required<MetagameWorld["zones"][0]>["alert"]) => {
@@ -51,7 +51,7 @@ export const AlertTimer = ({
 }: {
   alert: MetagameWorld["zones"][0]["alert"];
 }) => {
-  const [timeLeft, setTimeLeft] = useState(timeLeftString(alert));
+  const [timeLeft, setTimeLeft] = useState(<>s</>);
 
   useEffect(() => {
     if (alert) {

app/components/faction-bar-sxs.css.ts

@@ -0,0 +1,15 @@
+import { style } from "@vanilla-extract/css";
+import { background100, background200 } from "../utils/theme";
+
+export const bar = style({
+  backgroundColor: background200,
+  width: "0.3em",
+  height: "1em",
+  border: `1px solid ${background100}`,
+  // margin: 2
+});
+
+export const container = style({
+  display: "flex",
+});
+

app/components/faction-bar-sxs.tsx

@@ -0,0 +1,41 @@
+import { useMemo } from "react";
+import { Population } from "../utils/saerro";
+import * as styles from "./faction-bar-sxs.css";
+import { background200, ncFaction, trFaction, vsFaction } from "../utils/theme";
+
+export const FactionBarSxS = ({
+  population: { nc, vs, tr },
+}: {
+  population: Population;
+}) => {
+  const { vsPercent, ncPercent, trPercent } = useMemo(() => {
+    const total = nc + vs + tr;
+    return {
+      vsPercent: Math.round((vs / total) * 100) || 0,
+      ncPercent: Math.round((nc / total) * 100) || 0,
+      trPercent: Math.round((tr / total) * 100) || 0,
+    };
+  }, [vs, nc, tr]);
+
+  return (
+    <div className={styles.container}>
+      <Bar percent={vsPercent} color={vsFaction} />
+      <Bar percent={ncPercent} color={ncFaction} />
+      <Bar percent={trPercent} color={trFaction} />
+    </div>
+  );
+};
+
+const Bar = (props: { percent: number; color: string }) => (
+  <div
+    className={styles.bar}
+    style={{
+      backgroundImage: `linear-gradient( to top,
+    ${props.color} 0% ${props.percent}% ,
+    ${background200} ${props.percent + 0.1}% 100% 
+  )`,
+    }}
+  >
+    &nbsp;
+  </div>
+);

app/components/faction-bar.css.ts

@@ -1,5 +1,6 @@
 import type { ComplexStyleRule } from "@vanilla-extract/css";
 import { style } from "@vanilla-extract/css";
+import { edge, ncFaction, trFaction, vsFaction } from "../utils/theme";
 
 export const bar = style({
   display: "flex",
@@ -8,7 +9,7 @@ export const bar = style({
   flexDirection: "row",
   overflow: "hidden",
   borderRadius: "0.4rem",
-  border: "2px solid #4d4d4d",
+  border: `2px solid ${edge}`,
 });
 
 export const tinyBar = style({
@@ -27,16 +28,16 @@ const shared: ComplexStyleRule = {
 
 export const left = style({
   ...shared,
-  backgroundColor: "#991cba",
+  backgroundColor: vsFaction,
 });
 export const center = style({
   ...shared,
-  backgroundColor: "#1564cc",
-  borderLeft: "1px solid #4d4d4d",
-  borderRight: "2px solid #4d4d4d",
+  backgroundColor: ncFaction,
+  borderLeft: `1px solid ${edge}`,
+  borderRight: `2px solid ${edge}`,
   boxShadow: "inset 0 0 0.5rem rgb(180 180 180 / 10%)",
 });
 export const right = style({
   ...shared,
-  backgroundColor: "#d30101",
+  backgroundColor: trFaction,
 });

app/components/faction-bar.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import type { Population } from "~/utils/saerro";
+import type { Population } from "../utils/saerro";
 import * as styles from "./faction-bar.css";
 
 export const FactionBar = ({

app/components/faction-pie.tsx

@@ -1,4 +1,5 @@
-import type { Population } from "~/utils/saerro";
+import { background200, ncFaction, trFaction, vsFaction } from "../utils/theme";
+import type { Population } from "../utils/saerro";
 import { pieRoot } from "./faction-pie.css";
 
 export const FactionPie = ({
@@ -24,10 +25,11 @@ export const FactionPie = ({
       style={
         {
           fontSize: size || "1em",
+          backgroundColor: background200,
           backgroundImage: `conic-gradient(
-          #d30101 0% ${trPct}%,
-          #991cba ${trPct}% ${trPct + vsPct}%,
-          #1564cc ${trPct + vsPct}% 100%
+          ${trFaction} 0% ${trPct}%,
+          ${vsFaction} ${trPct}% ${trPct + vsPct}%,
+          ${ncFaction} ${trPct + vsPct}% 100%
         )`,
           "--inner-margin": innerMargin ? `${innerMargin}px` : "0",
           "--inner-bg": innerBackground || "none",

app/components/footer.css.ts

@@ -1,5 +1,5 @@
 import { style } from "@vanilla-extract/css";
-import footer from "~/images/footer.jpg";
+import footer from "../images/footer.jpg";
 
 export const root = style({
   height: 300,

app/components/index-world-container.tsx

@@ -1,7 +1,7 @@
 import { IndexWorld } from "./index-world";
 import * as styles from "./index-world-container.css";
-import type { MetagameWorld } from "~/utils/metagame";
-import type { PopulationWorld } from "~/utils/population";
+import type { MetagameWorld } from "../utils/metagame";
+import type { PopulationWorld } from "../utils/population";
 
 export const WorldContainer = ({
   metagame,

app/components/index-world.tsx

@@ -1,19 +1,13 @@
 import { Link } from "@remix-run/react";
-import {
-  humanTimeAgo,
-  snakeCaseToTitleCase,
-  worlds,
-  zones,
-} from "~/utils/strings";
+import { snakeCaseToTitleCase, worlds, zones } from "../utils/strings";
 import * as styles from "./index-world.css";
-import vsLogo from "~/images/vs-100.png";
-import ncLogo from "~/images/nc-100.png";
-import trLogo from "~/images/tr-100.png";
+import vsLogo from "../images/vs-100.png";
+import ncLogo from "../images/nc-100.png";
+import trLogo from "../images/tr-100.png";
 import { FactionBar } from "./faction-bar";
-import type { MetagameWorld } from "~/utils/metagame";
-import type { PopulationWorld } from "~/utils/population";
-import { c } from "~/utils/classes";
-import { useEffect, useState } from "react";
+import type { MetagameWorld } from "../utils/metagame";
+import type { PopulationWorld } from "../utils/population";
+import { c } from "../utils/classes";
 import { AlertTimer } from "./alert-timer";
 
 export type IndexWorldProps = {

app/components/world-zone-container.css.ts

@@ -0,0 +1,58 @@
+import { style } from "@vanilla-extract/css";
+
+export const zoneContainer = style({
+  margin: "0.5em 1em",
+  backgroundColor: "#222",
+  padding: "1em",
+  boxSizing: "border-box",
+});
+
+export const zoneHeader = style({
+  display: "flex",
+});
+
+export const chartTileTotal = style({
+  textAlign: "center",
+  lineHeight: 1,
+  minWidth: "2em",
+  maxWidth: "2em",
+  fontSize: "3rem",
+  overflowY: "hidden",
+});
+
+export const chartTilePopLine = style({
+  display: "flex",
+  fontSize: "1.5rem",
+  fontWeight: "bold",
+  alignItems: "center",
+  justifyContent: "center",
+  lineHeight: 1.1,
+  margin: 0,
+});
+
+export const chartTilePopImage = style({
+  width: "1em",
+  // height: "1em",
+  marginRight: 4,
+});
+
+export const chartTile = style({
+  fontSize: "4rem",
+  flex: "0 3 33%",
+  display: "flex",
+  marginTop: "0.2em",
+});
+
+export const classesContainer = style({
+  display: "flex",
+  flex: "1 3 100%",
+  flexWrap: "wrap",
+  justifyContent: "space-evenly",
+});
+
+export const chartTileChart = style({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+});

app/components/world-zone-container.tsx

@@ -0,0 +1,98 @@
+import {
+  allClasses,
+  Population,
+  totalPopulation,
+  World,
+  Zone,
+} from "../utils/saerro";
+import { headerFont } from "./world.css";
+import {
+  chartTile,
+  chartTileChart,
+  chartTilePopImage,
+  chartTilePopLine,
+  chartTileTotal,
+  classesContainer,
+  zoneContainer,
+  zoneHeader,
+} from "./world-zone-container.css";
+import { classIconMap } from "../utils/class-icons";
+import { FactionBarSxS } from "./faction-bar-sxs";
+import { c } from "../utils/classes";
+import vsLogo from "../images/vs-100.png";
+import ncLogo from "../images/nc-100.png";
+import trLogo from "../images/tr-100.png";
+
+export type WZCProps = {
+  world: World;
+  zone: Zone;
+};
+
+export const WorldZoneContainer = (props: WZCProps) => {
+  return (
+    <section className={zoneContainer} title={props.zone.name}>
+      <div className={zoneHeader}>
+        <h3 className={headerFont}>{props.zone.name.toUpperCase()}</h3>
+        {/* TODO: metagame */}
+      </div>
+      <div>
+        <h4 className={headerFont}>CLASSES</h4>
+        <div style={{ display: "flex" }}>
+          <Classes classes={props.zone.classes} />
+          <div style={{ display: "flex", flex: "1 3 100%", flexWrap: "wrap" }}>
+            &nbsp;
+          </div>
+          <div style={{ display: "flex", flex: "1 3 100%", flexWrap: "wrap" }}>
+            &nbsp;
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+const Classes = (props: { classes: Zone["classes"] }) => {
+  if (props.classes === undefined) {
+    return null;
+  }
+
+  return (
+    <div className={classesContainer}>
+      {allClasses.map((name) => (
+        <ChartTile
+          key={name}
+          name={name}
+          pop={(props.classes as Record<string, Population>)[name]}
+        />
+      ))}
+    </div>
+  );
+};
+
+const ChartTile = (props: { name: string; pop: Population }) => (
+  <div className={chartTile}>
+    <div className={chartTileChart}>
+      <FactionBarSxS population={props.pop} />
+      <img src={(classIconMap as any)[props.name]} />
+    </div>
+    <div>
+      <div className={c(headerFont, chartTileTotal)}>
+        {totalPopulation(props.pop)}
+      </div>
+      <div>
+        <div className={chartTilePopLine}>
+          <img className={chartTilePopImage} src={vsLogo} alt="VS" />{" "}
+          {props.pop.vs}
+        </div>
+        <div className={chartTilePopLine}>
+          <img className={chartTilePopImage} src={ncLogo} alt="NC" />{" "}
+          {props.pop.nc}
+        </div>
+        <div className={chartTilePopLine}>
+          <img className={chartTilePopImage} src={trLogo} alt="TR" />{" "}
+          {props.pop.tr}
+        </div>
+      </div>
+    </div>
+  </div>
+);

app/components/world.css.ts

@@ -28,7 +28,6 @@ export const headerSub = style({
 
 export const outer = style({
   display: "flex",
-  justifyContent: "center",
   minHeight: "100vh",
   flexDirection: "column",
   maxWidth: "1920px",