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,14 +25,26 @@ const Winner = (obj) => {
let scoreObj = null; let scoreObj = null;
if (thisScore) { if (thisScore) {
scoreObj = <div className="strokeSmollLeft" style={{ minWidth: '100px' }} > scoreObj =
<div className="rowAlignLeft" > <Popover className="strokeSmollLeft" style={{ minWidth: '100px', cursor: 'pointer' }}
<h4>Global Score</h4> opened={opened}
</div> onClose={() => setOpened(false)}
<div className="rowAlignRight" > target={
<span>{(thisScore * 10).toFixed(1)}</span> <div className="strokeSmollLeft" onClick={() => setOpened((o) => !o)} >
</div> <div className="rowAlignLeft" >
</div> <h4>Global Score</h4>
</div>
<div className="rowAlignRight" >
<span>{(thisScore * 10).toFixed(1)}</span>
</div>
</div>
}
width={260}
position="bottom"
withArrow
>
<ScoreView score={obj.stats.scores[obj.address]} />
</Popover>
} }
return ( return (

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;