64 lines
1.5 KiB
JavaScript
64 lines
1.5 KiB
JavaScript
|
// 3rd party.
|
||
|
|
import React, {useEffect, useState} from 'react';
|
||
|
|
// 2nd party.
|
||
|
|
import {compose} from '@avocado/core';
|
||
|
|
import contempo from 'contempo';
|
||
|
|
// 1st party.
|
||
|
|
import {usePropertyChange} from '../hooks/use-property-change';
|
||
|
|
|
||
|
|
const decorate = compose(
|
||
|
|
contempo(`
|
||
|
|
.timers {
|
||
|
|
left: 164px;
|
||
|
|
position: absolute;
|
||
|
|
color: white;
|
||
|
|
font-size: 4px;
|
||
|
|
font-family: monospace;
|
||
|
|
top: 4px;
|
||
|
|
border: 1px solid white;
|
||
|
|
padding: 2px;
|
||
|
|
}
|
||
|
|
.tps:before {
|
||
|
|
content: 'TPS: ';
|
||
|
|
}
|
||
|
|
.rps:before {
|
||
|
|
content: 'RPS: ';
|
||
|
|
}
|
||
|
|
.count {
|
||
|
|
margin-right: 2px;
|
||
|
|
}
|
||
|
|
.jitter::before {
|
||
|
|
content: '+/-: ';
|
||
|
|
}
|
||
|
|
.down, .up {
|
||
|
|
display: inline-block;
|
||
|
|
width: 12px;
|
||
|
|
}
|
||
|
|
.down {
|
||
|
|
margin-right: 2px;
|
||
|
|
}
|
||
|
|
.up {
|
||
|
|
margin: 0px 2px;
|
||
|
|
}
|
||
|
|
`),
|
||
|
|
);
|
||
|
|
|
||
|
|
const TimersComponent = ({app}) => {
|
||
|
|
const tpsCount = usePropertyChange(app.tps, 'count', 0);
|
||
|
|
const tpsJitter = usePropertyChange(app.tps, 'jitter', [0, 0]);
|
||
|
|
const rpsCount = usePropertyChange(app.rps, 'count', 0);
|
||
|
|
const rpsJitter = usePropertyChange(app.rps, 'jitter', [0, 0]);
|
||
|
|
return <div className="timers unselectable">
|
||
|
|
<div className="tps">
|
||
|
|
<span className="count">{tpsCount}</span>
|
||
|
|
<span className="jitter"><span className="down">{tpsJitter[1]}</span>/<span className="up">{tpsJitter[0]}</span></span>
|
||
|
|
</div>
|
||
|
|
<div className="rps">
|
||
|
|
<span className="count">{rpsCount}</span>
|
||
|
|
<span className="jitter"><span className="down">{rpsJitter[1]}</span>/<span className="up">{rpsJitter[0]}</span></span>
|
||
|
|
</div>
|
||
|
|
</div>;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default decorate(TimersComponent);
|