swap to ultra-fast APIs on homepage, finish continents

app/components/faction-bar.tsx

@@ -1,15 +1,16 @@
 import { useMemo } from "react";
 import type { Population } from "~/utils/saerro";
-import { totalPopulation } from "~/utils/saerro";
 import * as styles from "./faction-bar.css";
 
 export const FactionBar = ({
   population: { vs, nc, tr },
+  tiny,
 }: {
   population: Population;
+  tiny?: boolean;
 }) => {
   const { vsPercent, ncPercent, trPercent } = useMemo(() => {
-    const total = totalPopulation({ vs, nc, tr, total: 0 });
+    const total = nc + vs + tr;
     return {
       vsPercent: Math.round((vs / total) * 100) || 0,
       ncPercent: Math.round((nc / total) * 100) || 0,
@@ -17,15 +18,15 @@ export const FactionBar = ({
     };
   }, [vs, nc, tr]);
   return (
-    <div className={styles.bar}>
+    <div className={tiny ? styles.tinyBar : styles.bar}>
       <div className={styles.left} style={{ flexGrow: vs + 1 }}>
-        {vsPercent}%
+        {tiny ? <>&nbsp;</> : `${vsPercent}%`}
       </div>
       <div className={styles.center} style={{ flexGrow: nc + 1 }}>
-        {ncPercent}%
+        {tiny ? <>&nbsp;</> : `${ncPercent}%`}
       </div>
       <div className={styles.right} style={{ flexGrow: tr + 1 }}>
-        {trPercent}%
+        {tiny ? <>&nbsp;</> : `${trPercent}%`}
       </div>
     </div>
   );