|
|
import React, {useContext, useEffect, useMemo, useState} from 'react';
import "./Bois.css"; import {StatusContext} from "./Contexts"; import {CalorieScore, CpmScore, DistanceScore, RpmScore, Timer} from "./Score"; import calculateDiff from "../helpers/diff"; import useKey from "../hooks/useKey"; import {COLOR_VERY_BAD} from "../helpers/color"; import {Milestones} from "./Milestones";
const Boi = ({type, children}) => { return ( <div className={`Boi Boi-${type}`}> {children} </div> ) };
export const LeftBoi = () => { const {prevLongDiff, workoutStatus, program} = useContext(StatusContext); if (workoutStatus === null || program === null) { return null; }
const {minutes, seconds, calories, distance, rpm} = workoutStatus; const diff = calculateDiff(program, minutes, seconds, calories); const cpm = calories / (minutes + (seconds / 60));
return ( <Boi type="left"> <Timer minutes={minutes} seconds={seconds}/> <CalorieScore calories={calories} diff={diff} prevDiff={prevLongDiff}/> <DistanceScore distance={distance}/> <RpmScore rpm={rpm}/> <CpmScore cpm={cpm}/> </Boi> ); };
export const CentreBoi = () => { const { state, program, setProgram, bike, setBike, bikes, programs, start, pause, stop, create, workoutStatus, } = useContext(StatusContext); const [options, setOptions] = useState(null); const [current, setCurrent] = useState(0);
useEffect(() => { if (bikes === null && programs === null) { return; }
setOptions(state === "bike" ? bikes : programs); }, [state, bike, program, bikes, programs]);
useKey("-", () => { if (options === null) { return false; }
if (current > 0) { setCurrent(current - 1); } else { setCurrent(options.length - 1); }
return true; });
useKey("+", () => { if (options === null) { return false; }
if (current < options.length - 1) { setCurrent(current + 1); } else { setCurrent(0); }
return true; });
useKey("Enter", () => { if (state === "bike") { setBike(options[current]);
return true; } else if (state === "program") { setProgram(options[current]); create(options[current]);
return true; } else if (state === "connected") { start();
return true; } else if (state === "started") { pause();
return true; }
return false; });
useKey("Escape", () => { if (state === "connected") { stop();
return true; } });
if (state === "started" && workoutStatus !== null) { const {minutes, seconds, calories} = workoutStatus; const diff = calculateDiff(program, minutes, seconds, calories);
if (diff < 0) { return ( <Boi type="centre"> <span className="Boi-centre-warning" style={{color: COLOR_VERY_BAD}}> {diff} </span> </Boi> ); } else { return null; } }
if (bikes === null || programs === null) { return <Boi type="centre">Laster inn...</Boi>; }
return ( <Boi type="centre"> {state === "stopped" && ( <div className="Boi-centre-info">Inaktiv</div> )} {state === "bike" && ( <div className="Boi-centre-info"> Velg sykkel (+/-): <br/> <b>{options[current].name}</b> </div> )} {state === "program" && ( <div className="Boi-centre-info"> Velg program (+/-): <br/> <b>{options[current].name}</b> </div> )} {state === "connected" && ( <table className="Boi-centre-info"> <tr> <td>Enter:</td> <td><b>Start</b></td> </tr> <tr> <td>Esc:</td> <td><b>Avslutt</b></td> </tr> </table> )} {state === "unknown" && ( <div className="Boi-centre-info">Noe gikk galt</div> )} </Boi> ); };
export const RightBoi = () => { const {milestones} = useContext(StatusContext);
if ((milestones || []).length === 0) { return null; }
return ( <Boi type="right"> <Milestones milestones={milestones.sort((i, j) => j.minutes - i.minutes)}/> </Boi> ); };
|