Add score inspector

This commit is contained in:
Marco van Dijk 2022-04-16 22:52:47 +02:00
parent 584346951a
commit 8b103d3a05
2 changed files with 139 additions and 8 deletions

View File

@ -1,8 +1,11 @@
import React, { useState, useEffect } from 'react' import React, { useState, useEffect } from 'react'
import Address from '../components/OrchAddressViewer'; import Address from '../components/OrchAddressViewer';
import { Popover } from '@mantine/core';
import ScoreView from './scoreViewer';
const Winner = (obj) => { const Winner = (obj) => {
const [thisScore, setThisScore] = useState(0); const [thisScore, setThisScore] = useState(0);
const [opened, setOpened] = useState(false);
useEffect(() => { useEffect(() => {
// Get score of this Orch // Get score of this Orch
@ -22,7 +25,12 @@ const Winner = (obj) => {
let scoreObj = null; let scoreObj = null;
if (thisScore) { if (thisScore) {
scoreObj = <div className="strokeSmollLeft" style={{ minWidth: '100px' }} > scoreObj =
<Popover className="strokeSmollLeft" style={{ minWidth: '100px', cursor: 'pointer' }}
opened={opened}
onClose={() => setOpened(false)}
target={
<div className="strokeSmollLeft" onClick={() => setOpened((o) => !o)} >
<div className="rowAlignLeft" > <div className="rowAlignLeft" >
<h4>Global Score</h4> <h4>Global Score</h4>
</div> </div>
@ -31,6 +39,13 @@ const Winner = (obj) => {
</div> </div>
</div> </div>
} }
width={260}
position="bottom"
withArrow
>
<ScoreView score={obj.stats.scores[obj.address]} />
</Popover>
}
return ( return (
<div className="row"> <div className="row">

View File

@ -0,0 +1,116 @@
import React from "react";
const ScoreView = (obj) => {
console.log(obj.score);
return (
<div className="row">
<div className="stroke">
<div className="row">
<h4>x</h4>
</div>
<div className="row">
<h4>FRA</h4>
</div>
<div className="row">
<h4>LAX</h4>
</div>
<div className="row">
<h4>LON</h4>
</div>
<div className="row">
<h4>MDW</h4>
</div>
<div className="row">
<h4>NYC</h4>
</div>
<div className="row">
<h4>PRG</h4>
</div>
<div className="row">
<h4>SIN</h4>
</div>
</div>
<div className="stroke">
<div className="row">
<h4>Success</h4>
</div>
<div className="row">
{(obj.score["FRA"].success_rate * 10).toFixed(1)}
</div>
<div className="row">
{(obj.score["LAX"].success_rate * 10).toFixed(1)}
</div>
<div className="row">
{(obj.score["LON"].success_rate * 10).toFixed(1)}
</div>
<div className="row">
{(obj.score["MDW"].success_rate * 10).toFixed(1)}
</div>
<div className="row">
{(obj.score["NYC"].success_rate * 10).toFixed(1)}
</div>
<div className="row">
{(obj.score["PRG"].success_rate * 10).toFixed(1)}
</div>
<div className="row">
{(obj.score["SIN"].success_rate * 10).toFixed(1)}
</div>
</div>
<div className="stroke">
<div className="row">
<h4>Speed</h4>
</div>
<div className="row">
{(obj.score["FRA"].round_trip_score * 10).toFixed(1)}
</div>
<div className="row">
{(obj.score["LAX"].round_trip_score * 10).toFixed(1)}
</div>
<div className="row">
{(obj.score["LON"].round_trip_score * 10).toFixed(1)}
</div>
<div className="row">
{(obj.score["MDW"].round_trip_score * 10).toFixed(1)}
</div>
<div className="row">
{(obj.score["NYC"].round_trip_score * 10).toFixed(1)}
</div>
<div className="row">
{(obj.score["PRG"].round_trip_score * 10).toFixed(1)}
</div>
<div className="row">
{(obj.score["SIN"].round_trip_score * 10).toFixed(1)}
</div>
</div>
<div className="stroke">
<div className="row">
<h4>Score</h4>
</div>
<div className="row">
{(obj.score["FRA"].score * 10).toFixed(1)}
</div>
<div className="row">
{(obj.score["LAX"].score * 10).toFixed(1)}
</div>
<div className="row">
{(obj.score["LON"].score * 10).toFixed(1)}
</div>
<div className="row">
{(obj.score["MDW"].score * 10).toFixed(1)}
</div>
<div className="row">
{(obj.score["NYC"].score * 10).toFixed(1)}
</div>
<div className="row">
{(obj.score["PRG"].score * 10).toFixed(1)}
</div>
<div className="row">
{(obj.score["SIN"].score * 10).toFixed(1)}
</div>
</div>
</div>
)
}
export default ScoreView;