Add other version pages

src/ProgressPane.jsx

@@ -16,8 +16,10 @@ const csvVersions = {
 }
 
 const colors = {
-    yellow: { stroke: "#e3ac34", fill: "#edc97e" },
     green: { stroke: "#40e334", fill: "#91eb7f" },
+    yellow: { stroke: "#e3ac34", fill: "#edc97e" },
+    blue: { stroke: "#3d76da", fill: "#1e3b6d" },
+    orange: { stroke: "#cc8400", fill: "#ffa500" },
 }
 
 async function fetchData(version) {

src/index.css

@@ -139,8 +139,24 @@ button.green, .tab.green {
     border-right-color: #2a791e;
 }
 
+button.blue, .tab.blue {
+    border-top-color: #51eeff;
+    border-left-color: #51eeff;
+    background: #00b3ff;
+    border-bottom-color: #0050c9;
+    border-right-color: #0050c9;
+}
+
+button.orange, .tab.orange {
+    border-top-color: #ffa66f;
+    border-left-color: #ffa66f;
+    background: #ff6f00;
+    border-bottom-color: #894701;
+    border-right-color: #894701;
+}
+
 button.inactive, .tab.inactive {
-    filter: brightness(0.6);
+    filter: brightness(0.7);
 }
 
 button:hover, .tab:hover {
@@ -247,6 +263,16 @@ main.green {
     background-image: url(bg/green-checker.png);
 }
 
+main.blue {
+    background-color: #518bff;
+    background-image: url(bg/teal-checker.png);
+}
+
+main.orange {
+    background-color: #ffd651;
+    background-image: url(bg/yellow-checker.png);
+}
+
 main > * {
     image-rendering: initial;
 }

src/main.jsx

@@ -29,7 +29,7 @@ const tabs = [
                 </ul>
                 <h3>How completed is it?</h3>
                 <p>
-                    We are currently focusing on decompiling the US release of the game, because it is the version that has had the most reverse-engineering work put into it. The Japanese version has preliminary support, and focus will move to that once US is done.
+                    We are currently focusing on decompiling the US release of the game, because it is the version that has had the most reverse-engineering work put into it. Other versions have preliminary support, and focus will move to those once US is done.
                 </p>
                 <p>
                     <a href="/progress-us">View the progress chart ›</a>
@@ -92,6 +92,12 @@ const tabs = [
             </div>
         </div>
     },
+    {
+        slug: "/progress-jp",
+        name: "Progress (JP)",
+        color: "green",
+        pane: (props) => <ProgressPane version="jp" color="green" {...props}/>
+    },
     {
         slug: "/progress-us",
         name: "Progress (US)",
@@ -99,10 +105,16 @@ const tabs = [
         pane: (props) => <ProgressPane version="us" color="yellow" {...props}/>
     },
     {
-        slug: "/progress-jp",
+        slug: "/progress-pal",
-        name: "Progress (JP)",
+        name: "Progress (PAL)",
-        color: "green",
+        color: "blue",
-        pane: (props) => <ProgressPane version="jp" color="green" {...props}/>
+        pane: (props) => <ProgressPane version="pal" color="blue" {...props}/>
+    },
+    {
+        slug: "/progress-ique",
+        name: "Progress (iQue)",
+        color: "orange",
+        pane: (props) => <ProgressPane version="ique" color="orange" {...props}/>
     },
 ]