Provide bun leaderboard displaying

package-lock.json

@@ -333,12 +333,70 @@
         "fastq": "^1.6.0"
       }
     },
+    "@popperjs/core": {
+      "version": "2.10.2",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.10.2.tgz",
+      "integrity": "sha512-IXf3XA7+XyN7CP9gGh/XB0UxVMlvARGEgGXLubFICsUMGz6Q+DU+i4gGlpOxTjKvXjkJDJC8YdqdKkDj9qZHEQ=="
+    },
+    "@react-aria/ssr": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.1.0.tgz",
+      "integrity": "sha512-RxqQKmE8sO7TGdrcSlHTcVzMP450hqowtBSd2bBS9oPlcokVkaGq28c3Rwa8ty5ctw4EBCjXqjP7xdcKMGDzug==",
+      "requires": {
+        "@babel/runtime": "^7.6.2"
+      }
+    },
+    "@restart/context": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz",
+      "integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q=="
+    },
+    "@restart/hooks": {
+      "version": "0.3.27",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.3.27.tgz",
+      "integrity": "sha512-s984xV/EapUIfkjlf8wz9weP2O9TNKR96C68FfMEy2bE69+H4cNv3RD4Mf97lW7Htt7PjZrYTjSC8f3SB9VCXw==",
+      "requires": {
+        "dequal": "^2.0.2"
+      }
+    },
+    "@restart/ui": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-0.2.3.tgz",
+      "integrity": "sha512-FDhtjIR9QvUfMwvFsgVurRA1qdYxM0F0S07acywjG7gNI2YmQo78rtCYIe553V/pyBjEjaKAg3fzBFCocFTqyQ==",
+      "requires": {
+        "@babel/runtime": "^7.13.16",
+        "@popperjs/core": "^2.10.1",
+        "@react-aria/ssr": "^3.0.1",
+        "@restart/hooks": "^0.4.0",
+        "@types/warning": "^3.0.0",
+        "dequal": "^2.0.2",
+        "dom-helpers": "^5.2.0",
+        "prop-types": "^15.7.2",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      },
+      "dependencies": {
+        "@restart/hooks": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.1.tgz",
+          "integrity": "sha512-87UMGZcFwbj0Gr+8eEBAzL6H8xF5pMwq/S3LWeFK9cg4+lTqLFMsiVQFT4ncMJzqgpdD7T6ktF8PsEHeN2O+MQ==",
+          "requires": {
+            "dequal": "^2.0.2"
+          }
+        }
+      }
+    },
     "@rushstack/eslint-patch": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.0.8.tgz",
       "integrity": "sha512-ZK5v4bJwgXldAUA8r3q9YKfCwOqoHTK/ZqRjSeRXQrBXWouoPnS4MQtgC4AXGiiBuUu5wxrRgTlv0ktmM4P1Aw==",
       "dev": true
     },
+    "@types/invariant": {
+      "version": "2.2.35",
+      "resolved": "https://registry.npmjs.org/@types/invariant/-/invariant-2.2.35.tgz",
+      "integrity": "sha512-DxX1V9P8zdJPYQat1gHyY0xj3efl8gnMVjiM9iCY6y27lj+PoQWkgjt8jDqmovPqULkKVpKRg8J36iQiA+EtEg=="
+    },
     "@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
@@ -350,6 +408,39 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.4.tgz",
       "integrity": "sha512-TMgXmy0v2xWyuCSCJM6NCna2snndD8yvQF67J29ipdzMcsPa9u+o0tjF5+EQNdhcuZplYuouYqpc4zcd5I6amQ=="
     },
+    "@types/prop-types": {
+      "version": "15.7.4",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
+      "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ=="
+    },
+    "@types/react": {
+      "version": "17.0.32",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.32.tgz",
+      "integrity": "sha512-hAm1pmwA3oZWbkB985RFwNvBRMG0F3KWSiC4/hNmanigKZMiKQoH5Q6etNw8HIDztTGfvXyOjPvdNnvBUCuaPg==",
+      "requires": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "@types/react-transition-group": {
+      "version": "4.4.4",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.4.tgz",
+      "integrity": "sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
+    "@types/scheduler": {
+      "version": "0.16.2",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
+      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
+    },
+    "@types/warning": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
+      "integrity": "sha1-DSUBJorY+ZYrdA04fEZU9fjiPlI="
+    },
     "@typescript-eslint/parser": {
       "version": "4.33.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.33.0.tgz",
@@ -622,6 +713,14 @@
       "integrity": "sha512-/lqqLAmuIPi79WYfRpy2i8z+x+vxU3zX2uAm0gs1q52qTuKwolOj1P8XbufpXcsydrpKx2yGn2wzAnxCMV86QA==",
       "dev": true
     },
+    "axios": {
+      "version": "0.23.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.23.0.tgz",
+      "integrity": "sha512-NmvAE4i0YAv5cKq8zlDoPd1VLKAqX5oLuZKs8xkJa4qi6RGn0uhCYFjWtHHC9EM/MwOwYWOs53W+V0aqEXq1sg==",
+      "requires": {
+        "follow-redirects": "^1.14.4"
+      }
+    },
     "axobject-query": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
@@ -654,6 +753,11 @@
       "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-5.2.0.tgz",
       "integrity": "sha512-D7iWRBvnZE8ecXiLj/9wbxH7Tk79fAh8IHaTNq1RWRixsS02W+5qS+iE9yq6RYl0asXx5tw0bLhmT5pIfbSquw=="
     },
+    "bootstrap": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
+      "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -995,6 +1099,11 @@
         "cssnano-preset-simple": "^3.0.0"
       }
     },
+    "csstype": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.9.tgz",
+      "integrity": "sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw=="
+    },
     "damerau-levenshtein": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.7.tgz",
@@ -1033,6 +1142,11 @@
       "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
       "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
     },
+    "dequal": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.2.tgz",
+      "integrity": "sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug=="
+    },
     "des.js": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/des.js/-/des.js-1.0.1.tgz",
@@ -1077,6 +1191,15 @@
         "esutils": "^2.0.2"
       }
     },
+    "dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "requires": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "domain-browser": {
       "version": "4.19.0",
       "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-4.19.0.tgz",
@@ -1775,6 +1898,11 @@
       "integrity": "sha512-JaTY/wtrcSyvXJl4IMFHPKyFur1sE9AUqc0QnhOaJ0CxHtAoIV8pYDzeEfAaNEtGkOfq4gr3LBFmdXW5mOQFnA==",
       "dev": true
     },
+    "follow-redirects": {
+      "version": "1.14.4",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.4.tgz",
+      "integrity": "sha512-zwGkiSXC1MUJG/qmeIFH2HBJx9u0V46QGUe3YR1fXG8bXQxq7fLj0RjLZQ5nubr9qNJUZrH+xUcwXEoXNpfS+g=="
+    },
     "foreach": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/foreach/-/foreach-2.0.5.tgz",
@@ -2051,6 +2179,14 @@
         "side-channel": "^1.0.4"
       }
     },
+    "invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "is-arguments": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
@@ -2985,7 +3121,6 @@
       "version": "15.7.2",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
       "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
-      "dev": true,
       "requires": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -2995,8 +3130,23 @@
         "react-is": {
           "version": "16.13.1",
           "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-          "dev": true
+        }
+      }
+    },
+    "prop-types-extra": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
+      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
+      "requires": {
+        "react-is": "^16.3.2",
+        "warning": "^4.0.0"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "16.13.1",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
         }
       }
     },
@@ -3096,6 +3246,37 @@
         "object-assign": "^4.1.1"
       }
     },
+    "react-bootstrap": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.0.0.tgz",
+      "integrity": "sha512-6nIIPxv36tvyL9T+7x167qTv9oU+wEwxxNgqcQSsbuMuwvXfg2Frt2mRMX3O/f0HCQmBu5Syy6UdClRS4fGqQA==",
+      "requires": {
+        "@babel/runtime": "^7.14.0",
+        "@restart/context": "^2.1.4",
+        "@restart/hooks": "^0.3.26",
+        "@restart/ui": "^0.2.3",
+        "@types/invariant": "^2.2.33",
+        "@types/prop-types": "^15.7.3",
+        "@types/react": ">=16.14.8",
+        "@types/react-transition-group": "^4.4.1",
+        "@types/warning": "^3.0.0",
+        "classnames": "^2.3.1",
+        "dom-helpers": "^5.2.1",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.7.2",
+        "prop-types-extra": "^1.1.0",
+        "react-transition-group": "^4.4.1",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      },
+      "dependencies": {
+        "classnames": {
+          "version": "2.3.1",
+          "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+          "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+        }
+      }
+    },
     "react-dom": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
@@ -3111,11 +3292,27 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
     "react-refresh": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
       "integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg=="
     },
+    "react-transition-group": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
+      "integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      }
+    },
     "readable-stream": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
@@ -3445,6 +3642,14 @@
         "has-flag": "^3.0.0"
       }
     },
+    "swr": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-1.0.1.tgz",
+      "integrity": "sha512-EPQAxSjoD4IaM49rpRHK0q+/NzcwoT8c0/Ylu/u3/6mFj/CWnQVjNJ0MV2Iuw/U+EJSd2TX5czdAwKPYZIG0YA==",
+      "requires": {
+        "dequal": "2.0.2"
+      }
+    },
     "text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -3552,6 +3757,17 @@
         "which-boxed-primitive": "^1.0.2"
       }
     },
+    "uncontrollable": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
+      "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
+      "requires": {
+        "@babel/runtime": "^7.6.3",
+        "@types/react": ">=16.9.11",
+        "invariant": "^2.2.4",
+        "react-lifecycles-compat": "^3.0.4"
+      }
+    },
     "unpipe": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
@@ -3624,6 +3840,14 @@
       "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
       "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ=="
     },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "watchpack": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.1.1.tgz",

package.json

@@ -5,14 +5,17 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start",
+    "start": "node server.js",
-    "lint": "next lint",
+    "lint": "next lint"
-	"start": "node server.js"
   },
   "dependencies": {
+    "axios": "^0.23.0",
+    "bootstrap": "^5.1.3",
     "next": "11.1.2",
     "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react-bootstrap": "^2.0.0",
+    "react-dom": "17.0.2",
+    "swr": "^1.0.1"
   },
   "devDependencies": {
     "eslint": "8.1.0",

pages/index.js

@@ -1,7 +1,149 @@
-import Head from 'next/head'
+import axios from 'axios'
-import Image from 'next/image'
+import { useEffect, useState } from 'react'
-import styles from '../styles/Home.module.css'
+import Tabs from 'react-bootstrap/Tabs'
+import Tab from 'react-bootstrap/Tab'
+import ToggleButtonGroup from 'react-bootstrap/ButtonGroup'
+import ToggleButton from 'react-bootstrap/Button'
+import useSWR from 'swr'
+import Table from 'react-bootstrap/Table'
 
-export default function Home() {
+import 'bootstrap/dist/css/bootstrap.min.css';
-  return <>Hello Bun</>
+
+const fetcher = url => axios.get(url).then(res => res.data)
+
+var RABI_RIBI_GAME_ID = "o6g0o8d2"
+
+function VariableSelector(p) {
+
+  const {values} = p
+
+  const displayValues = Object.keys(values.values.values).map((key)=>[values.values.values[key],key])
+  const [selected,setSelected] = useState(Object.keys(values.values.values)[0])
+
+  const handleChange=(e)=>{
+    setSelected(e.target.id)
+    var arr = {...p.selectionValues}
+    arr[p.category.id][p.selectionID]=values.id+","+e.target.id
+    p.setSelectionValues(arr)
+  }
+
+  return <>
+    <ToggleButtonGroup type="radio" className="mb-2">
+      {displayValues.map((value,i)=><ToggleButton key={i} variant={selected===value[1]?"primary":"outline-primary"} onClick={handleChange} id={value[1]}>{value[0].label}</ToggleButton>)}
+    </ToggleButtonGroup><br/>
+  </>
+}
+
+function getLeaderboard(categoryID,variables) {
+  const { data,error } = useSWR("https://www.speedrun.com/api/v1/leaderboards/"+RABI_RIBI_GAME_ID+"/category/"+categoryID+variables,fetcher)
+
+  return {
+    data: data,
+    isLoading: !error && !data,
+    isError: error
+  }
+}
+
+function Leaderboard(p) {
+  const {data} = p
+  return <Table striped bordered hover size="sm">
+    <thead>
+      <tr>
+        <th>#</th>
+        <th>Player</th>
+        <th>Time without loads</th>
+        <th>Time with loads</th>
+        <th>Platform</th>
+        <th>Version</th>
+        <th>Date</th>
+        <th>Video</th>
+      </tr>
+    </thead>
+    <tbody>
+    {data?.data.runs.map((run)=><tr key={run.run.id}>
+      <td>{run.place}</td>{/*#*/}
+      <td>{run.run.players[0].id??run.run.players[0]?.name}</td>{/*Player*/}
+      <td>{run.run.times.realtime_noloads_t??""}</td>{/*Time without loads*/}
+      <td>{run.run.times.realtime_t}</td>{/*Time with loads*/}
+      <td>{run.run.system.platform}</td>{/*Platform*/}
+      <td>{run.run.values.p85me3lg}</td>{/*Version*/}
+      <td>{run.run.date}</td>{/*Date*/}
+      <td>{run.run.videos?.links[0].uri}</td>{/*Video*/}
+    </tr>)}
+    </tbody>
+  </Table>
+}
+
+export default function Home(p) {
+  var {CATEGORIES,VARIABLES}= p
+
+  const [selectedTab,setSelectedTab] = useState("")
+  const [selectionValues,setSelectionValues] = useState({})
+  const [appendStr,setAppendStr] = useState("")
+
+  const {data} = getLeaderboard(selectedTab,appendStr)
+
+  useEffect(()=>{
+    var arr = {...p.selectionValues}
+    CATEGORIES.forEach((cat,i)=>{
+      if (i==0) {
+        setSelectedTab(cat.id)
+      }
+      arr[cat.id]={}
+      VARIABLES.filter((v)=>(v.category===cat.id||v.category===null)&&v["is-subcategory"]).forEach((v,i)=>{
+        arr[cat.id][i]=(v.id+","+Object.keys(v.values.values)[0])
+      })
+    })
+    setSelectionValues(arr)
+  },[])
+
+  useEffect(()=>{
+    var appendStr = ""
+    //console.log(selectionValues[selectedTab])
+    for (var val in selectionValues[selectedTab]) {
+      //console.log(selectionValues[selectedTab][val])
+        var split = selectionValues[selectedTab][val].split(",")
+      if (appendStr.length===0) {
+        appendStr="?"
+      } else {
+        appendStr+="&"
+      }
+      appendStr+="var-"+split[0]+"="+split[1]
+    }
+    setAppendStr(appendStr)
+  },[selectedTab,selectionValues])
+
+  return <><Tabs className="mb-3" onSelect={(e)=>{setSelectedTab(e)}}>
+    {CATEGORIES.map((cat)=><Tab key={cat.id} eventKey={cat.id} title={cat.name} id={cat.name}>
+      {/*cat.rules*/}
+      {VARIABLES.filter((v)=>(v.category===cat.id||v.category===null)&&v["is-subcategory"]).map((v,i)=><VariableSelector key={v.id} category={cat} selectionID={i} selectionValues={selectionValues} setSelectionValues={setSelectionValues} values={v}/>)}
+    </Tab>)}
+  </Tabs>
+  {<Leaderboard data={data}/>}
+  </>
+}
+
+export async function getStaticProps() {
+  var CATEGORIES = {}
+  var RUN_DATA = {}
+  var VARIABLES = {}
+
+  await axios.get("https://www.speedrun.com/api/v1/games/"+RABI_RIBI_GAME_ID+"/categories").then((data)=>{
+    CATEGORIES = data.data.data
+  })
+  await axios.get("https://www.speedrun.com/api/v1/games/"+RABI_RIBI_GAME_ID+"/variables").then((data)=>{
+    VARIABLES = data.data.data
+  })
+
+  return {
+    props: {
+      RUN_DATA,
+      CATEGORIES,
+      VARIABLES
+    },
+    // Next.js will attempt to re-generate the page:
+    // - When a request comes in
+    // - At most once every 10 seconds
+    revalidate: 10, // In seconds
+  }
 }