typing-game-cli/dist/Results.js

Command line game to practice your typing speed by competing against typer-robot or against your best result

import React from 'react';
import { Text, Box } from 'ink';
import { nanoid } from 'nanoid';
import { format, parseISO } from 'date-fns';
import { getBestResultCompactString, getResults, getSortedByString } from './helpers.js';
import Menu from './Menu.js';
export default function Results({
  sortBy,
  isShowAllHistory,
  isCompactFormat,
  topN
}) {
  return isCompactFormat ? /*#__PURE__*/React.createElement(Box, {
    flexDirection: "column",
    justifyContent: "center",
    paddingX: 1
  }, /*#__PURE__*/React.createElement(Text, null, ` ${getBestResultCompactString()}`), /*#__PURE__*/React.createElement(Menu, null)) : /*#__PURE__*/React.createElement(Box, {
    flexDirection: "column"
  }, /*#__PURE__*/React.createElement(Box, {
    flexDirection: "row",
    justifyContent: "space-around",
    alignItems: "center",
    paddingY: 1
  }, /*#__PURE__*/React.createElement(Box, {
    flexDirection: "column",
    alignItems: "center"
  }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Text, null, "Top results")), /*#__PURE__*/React.createElement(Box, {
    flexDirection: "column"
  }, getResults({
    sortBy: '-cpm',
    showAll: false,
    topN
  }).map((result, i, array) => /*#__PURE__*/React.createElement(Box, {
    key: nanoid(),
    justifyContent: "center",
    flexDirection: "row",
    columnGap: 4,
    borderStyle: "single",
    borderLeft: false,
    borderRight: false,
    borderBottom: i === array.length - 1
  }, /*#__PURE__*/React.createElement(Text, {
    dimColor: true
  }, `${format(parseISO(result.date), 'MM/dd/yyyy HH:mm')}`), /*#__PURE__*/React.createElement(Text, null, `wpm: `, /*#__PURE__*/React.createElement(Text, {
    color: Number(result.value.wpm) > 30 ? '#0bc923' : '#e9c154'
  }, result.value.wpm), `  cpm: `, /*#__PURE__*/React.createElement(Text, {
    color: Number(result.value.cpm) > 200 ? '#0bc923' : '#e9c154'
  }, result.value.cpm)))))), /*#__PURE__*/React.createElement(Box, {
    flexDirection: "column",
    alignItems: "center"
  }, /*#__PURE__*/React.createElement(Text, null, "Results sorted by ", getSortedByString(sortBy), ":"), /*#__PURE__*/React.createElement(Box, {
    flexDirection: "column"
  }, getResults({
    sortBy,
    showAll: isShowAllHistory
  }).map((result, i, array) => /*#__PURE__*/React.createElement(Box, {
    key: nanoid(),
    justifyContent: "center",
    flexDirection: "row",
    columnGap: 4,
    borderStyle: "single",
    borderLeft: false,
    borderRight: false,
    borderBottom: i === array.length - 1
  }, /*#__PURE__*/React.createElement(Text, {
    dimColor: true
  }, `${format(parseISO(result.date), 'MM/dd/yyyy HH:mm')}`), /*#__PURE__*/React.createElement(Text, null, `wpm: `, /*#__PURE__*/React.createElement(Text, {
    color: Number(result.value.wpm) > 30 ? '#0bc923' : '#e9c154'
  }, result.value.wpm), `  cpm: `, /*#__PURE__*/React.createElement(Text, {
    color: Number(result.value.cpm) > 200 ? '#0bc923' : '#e9c154'
  }, result.value.cpm))))))), /*#__PURE__*/React.createElement(Menu, null));
}