update styles

Author: elpddev

package.json

@@ -22,6 +22,7 @@
   "dependencies": {
     "@babel/core": "^7.19.3",
     "@emotion/react": "^11.10.4",
+    "@emotion/styled": "^11.10.4",
     "@mantine/core": "^5.5.5",
     "@mantine/hooks": "^5.5.5",
     "react": "^18.2.0",

pnpm-lock.yaml

@@ -10,18 +10,8 @@ export function ActionBar({
   onRestart: () => void;
 }) {
   return (
-    <Stack sx={{ width: "400px" }}>
-      <Group position="apart">
-        <Text>WPM</Text>
-        <NumberInput disabled value={wpm} />
-      </Group>
-
-      <Group position="apart">
-        <Text>Time left</Text>
-        <NumberInput disabled value={timeLeft} />
-      </Group>
-
+    <Group position="center">
       <Button onClick={onRestart}>Restart</Button>
-    </Stack>
+    </Group>
   );
 }

src/components/ActionBar.tsx

@@ -0,0 +1,28 @@
+import { NumberInput, Text, Group, Button, Stack } from "@mantine/core";
+import styled from "@emotion/styled";
+
+export function StatsBar({ wpm, timeLeft }: { wpm: number; timeLeft: number }) {
+  return (
+    <Group position="apart">
+      <StatsBox>
+        <Group position="apart" align="baseline">
+          <Text>WPM:</Text>
+          <div>{Math.floor(wpm)}</div>
+        </Group>
+      </StatsBox>
+
+      <StatsBox>
+        <Group position="apart" align="baseline">
+          <Text>Time left:</Text>
+          <div>{Math.floor(timeLeft / 1000)}</div>
+        </Group>
+      </StatsBox>
+    </Group>
+  );
+}
+
+const StatsBox = styled.div({
+  backgroundColor: "rgb(253, 253, 253)",
+  border: "1px solid lightgray",
+  padding: "5px",
+});

src/components/StatsBar.tsx

@@ -1,4 +1,4 @@
-import { Container, Title } from "@mantine/core";
+import { Container, Group, Title } from "@mantine/core";
 import { Stack } from "@mantine/core";
 import { useCallback, useEffect, useState } from "react";
 import { ActionBar } from "./ActionBar";
@@ -8,18 +8,23 @@ import { init, moveByKey } from "../models/Board";
 import { useCountdown } from "../utils/useCountdown";
 import { useTypingCapture } from "../utils/useTypingCapture";
 import { useMeasureWpm } from "../utils/useMeasureWpm";
+import { StatsBar } from "./StatsBar";
 
 export function TypingGame() {
   const { wpm, timeLeft, board, restart } = useTypingGame();
 
   return (
     <Container>
-      <Stack align="center">
-        <Title order={1}>Typing Test</Title>
+      <Stack align="stretch">
+        <Group position="center">
+          <Title order={1}>Typing Test</Title>
+        </Group>
 
         <ActionBar wpm={wpm} timeLeft={timeLeft} onRestart={restart} />
 
         <WordsCard board={board} />
+
+        <StatsBar wpm={wpm} timeLeft={timeLeft} />
       </Stack>
     </Container>
   );

src/components/TypingGame.tsx

@@ -8,6 +8,7 @@ export function useTypingCapture(
 
   const typingCallback = useCallback((event: KeyboardEvent) => {
     event.stopPropagation();
+    event.preventDefault();
     onCapture({ code: event.code as KeyCode, char: event.key });
   }, []);