parent
2a85305e36
commit
15ed5412dc
@ -1,7 +1,149 @@ |
||||
import Head from 'next/head' |
||||
import Image from 'next/image' |
||||
import styles from '../styles/Home.module.css' |
||||
import axios from 'axios' |
||||
import { useEffect, useState } from 'react' |
||||
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() { |
||||
return <>Hello Bun</> |
||||
import 'bootstrap/dist/css/bootstrap.min.css'; |
||||
|
||||
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
|
||||
} |
||||
} |
||||
|
||||
Loading…
Reference in new issue