many things

src/ProgressPane.jsx

@@ -19,8 +19,13 @@ const csvVersions = {
     },
 }
 
-async function fetchData() {
-    const csv = await fetch("https://papermar.io/reports/progress.csv")
+const colors = {
+    yellow: { stroke: "#e3ac34", fill: "#edc97e" },
+    green: { stroke: "#40e334", fill: "#91eb7f" },
+}
+
+async function fetchData(version) {
+    const csv = await fetch(`https://papermar.io/reports/progress_${version}.csv`)
         .then(response => response.text())
 
     return csv
@@ -41,23 +46,18 @@ async function fetchData() {
         })
 }
 
-let cachedData = null
-
-export default function ProgressPane({ captionPortal, nonce }) {
-    const [data, setData] = useState(cachedData)
+export default function ProgressPane({ captionPortal, nonce, color, version }) {
+    const [data, setData] = useState([])
 
     useEffect(() => {
-        fetchData()
+        fetchData(version)
             .then(data => {
-                cachedData = data
-                setData(cachedData)
+                setData(data)
             })
-    }, [])
-
-    // TODO: cute spin animation when data loads
+    }, [version])
 
     return <div style={{ display: "flex", flexDirection: "column", width: "100%" }}>
-        {data && <DataView data={data} nonce={nonce} captionPortal={captionPortal}/>}
+        {data && <DataView data={data} nonce={nonce} captionPortal={captionPortal} color={color}/>}
         {!data && "Loading..."}
     </div>
 }
@@ -73,9 +73,10 @@ const monthDates = []
     }
 }
 
-function DataView({ data, captionPortal, nonce }) {
+function DataView({ data, captionPortal, nonce, color }) {
     const latest = data[data.length - 1]
     const oldest = data[0]
+    const { stroke, fill } = colors[color]
 
     const [selectedEntry, setSelectedEntry] = useState(latest)
 
@@ -89,7 +90,7 @@ function DataView({ data, captionPortal, nonce }) {
         return <span/>
     }
 
-    const maxPercent = Math.ceil(latest.percentBytes / 25) * 25
+    const maxPercent = latest ? Math.ceil(latest.percentBytes / 25) * 25 : 25
 
     return <>
         {/*<table width="250" className="outline-invert">
@@ -115,8 +116,8 @@ function DataView({ data, captionPortal, nonce }) {
                                 type="linear"
                                 dataKey="percentBytes"
                                 unit="%"
-                                stroke="#e3ac34" strokeWidth={2}
-                                fill="#edc97e"
+                                stroke={stroke} strokeWidth={2}
+                                fill={fill}
                                 dot={true}
                                 isAnimationActive={false}
                             />
@@ -127,7 +128,7 @@ function DataView({ data, captionPortal, nonce }) {
                 </div>
             </div>
 
-            <button className="shadow-box-title yellow">
+            <button className={"shadow-box-title " + color}>
                 {selectedEntry ? formatTimestamp(selectedEntry.timestamp, {
                     dateStyle: "long",
                     timeStyle: "short",

src/index.css

@@ -15,7 +15,10 @@ html {
     color: var(--light);
     --text-outline: var(--dark);
 
-    background: rgb(51 51 53); /* TODO: dynamic star bg */
+    background-color: #002c02;
+    background-image: url(bg/mrn-toad-town.png);
+    background-size: cover;
+    background-repeat: no-repeat;
 
     overflow: hidden;
 }
@@ -98,6 +101,14 @@ button.teal {
     border-right-color: #076d5a;
 }
 
+button.green {
+    border-top-color: #68ff51;
+    border-left-color: #68ff51;
+    background: #47b836;
+    border-bottom-color: #2a791e;
+    border-right-color: #2a791e;
+}
+
 button.inactive {
     filter: brightness(0.6);
 }
@@ -151,7 +162,7 @@ main {
     border-radius: 1rem;
 
     padding: 1em;
-    padding-bottom: 2.5em;
+    /*padding-bottom: 2.5em;*/
 
     overflow-y: auto;
 
@@ -163,6 +174,10 @@ main {
     box-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
 }
 
+main > :last-child {
+    padding-bottom: 1.5em;
+}
+
 main.red {
     background-color: #e2b6b3;
     background-image: url(bg/red-checker.png);
@@ -178,6 +193,11 @@ main.teal {
     background-image: url(bg/teal-checker.png);
 }
 
+main.green {
+    background-color: #68ff51;
+    background-image: url(bg/green-checker.png);
+}
+
 main > * {
     image-rendering: initial;
 }
@@ -251,6 +271,10 @@ button.shadow-box-title {
     background-repeat: repeat;
     background-size: 48px;
     background-position: center;
+
+    -ms-interpolation-mode: nearest-neighbor;
+    image-rendering: optimizespeed;
+    image-rendering: crisp-edges;
     image-rendering: pixelated;
 
     border-radius: 1rem;

src/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
     <head>
         <meta charset="utf-8"/>
-        <title>Paper Mario Reverse Engineering</title>
+        <title>Paper Mario Decompilation</title>
 
         <link rel="stylesheet" href="index.css"/>
         <script async defer src="main.jsx"></script>

src/main.jsx

@@ -12,22 +12,28 @@ const tabs = [
         color: "red",
         pane: () => <div>
             <p className="outline-invert">
-                Welcome to the Paper Mario Reverse-Engineering website!
+                Welcome to the Paper Mario decompilation site!
             </p>
         </div>,
     },
     {
-        slug: "/progress",
-        name: "Progress",
+        slug: "/progress-us",
+        name: "Progress (US)",
         color: "yellow",
-        pane: (props) => <ProgressPane {...props}/>
+        pane: (props) => <ProgressPane version="us" color="yellow" {...props}/>
     },
     {
-        slug: "/party",
-        name: "Party",
+        slug: "/progress-jp",
+        name: "Progress (JP)",
+        color: "green",
+        pane: (props) => <ProgressPane version="jp" color="green" {...props}/>
+    },
+    /*{
+        slug: "/contributors",
+        name: "Contributors",
         color: "teal",
         pane: (props) => <Contributors {...props}/>
-    },
+    },*/
 ]
 
 let routedTabIndex = tabs.findIndex(tab => tab.slug === document.location.pathname)
@@ -40,7 +46,7 @@ function App() {
     const [flip, setFlip] = useState(false)
     const pane = useRef()
 
-    function switchToTab(index) {
+    function switchToTab(index, pushState) {
         if (index === paneIndex || index === tabIndex) return
 
         console.info("switching to tab", index)
@@ -48,7 +54,8 @@ function App() {
         setRotation(rotation - 180)
         setTabIndex(index)
 
-        history.pushState(null, tabs[index].name, tabs[index].slug)
+        if (pushState)
+            history.pushState(null, tabs[index].name, tabs[index].slug)
 
         setTimeout(() => {
             setPaneIndex(index)
@@ -58,7 +65,7 @@ function App() {
 
     useEffect(() => {
         function listener() {
-            switchToTab(tabs.findIndex(tab => tab.slug === document.location.pathname))
+            switchToTab(tabs.findIndex(tab => tab.slug === window.location.pathname), false)
         }
 
         window.addEventListener("popstate", listener)
@@ -74,7 +81,7 @@ function App() {
                     key={tab.name}
                     className={clsx("tab", tab.color, { "inactive": index !== tabIndex })}
                     onClick={() => {
-                        switchToTab(index)
+                        switchToTab(index, true)
                     }}
                 >
                     {tab.name}