Merge pull request #46 from derechtenap/dev

The v0.1.0 Update

.vscode/settings.json

@@ -23,7 +23,9 @@
     "dayjs",
     "embla",
     "esnext",
+    "filesize",
     "mantine",
+    "Marston",
     "nextron",
     "tabler",
     "tanstack",

README.md

@@ -6,8 +6,9 @@
 
 ## :sparkles: Features
 
-- **Create & Manage Profiles:** Easily create and manage player profiles for your games.
-- **Create A Game With Up to 8 Players:** Set up a game with up to 8 players and customize various game settings.
+- **Create & Manage Profiles:** Easily create and manage player profiles for your matches.
+- **Create A Match:** Set up a game with and customize various game settings.
+- **Analyze Your Latest Matches:** Gain valuable insights into your performance and track your progress.
 
 ## :robot: Scripts
 

package.json

@@ -21,9 +21,9 @@
   },
   "dependencies": {
     "@tanstack/react-query": "^4.33.0",
-    "@tanstack/react-query-devtools": "^4.33.0",
     "electron-serve": "^1.1.0",
-    "electron-store": "^8.1.0"
+    "electron-store": "^8.1.0",
+    "filesize": "^10.0.12"
   },
   "devDependencies": {
     "@emotion/react": "^11.11.1",
@@ -40,6 +40,7 @@
     "@next/eslint-plugin-next": "^13.4.19",
     "@tabler/icons-react": "^2.32.0",
     "@tanstack/eslint-plugin-query": "^4.34.1",
+    "@tanstack/react-query-devtools": "^4.36.1",
     "@types/node": "^18.17.12",
     "@types/react": "^18.2.21",
     "@types/react-avatar-editor": "^13.0.0",

renderer/components/content/ActionButton.tsx

@@ -0,0 +1,20 @@
+import type { ActionIconProps } from "@mantine/core";
+import { ActionIcon, Tooltip } from "@mantine/core";
+
+interface ActionButtonProps extends ActionIconProps {
+  action: () => void;
+  icon: JSX.Element;
+  label: string;
+}
+
+const ActionButton = ({ action, icon, label, ...rest }: ActionButtonProps) => {
+  return (
+    <Tooltip label={label} withArrow>
+      <ActionIcon {...rest} onClick={() => action()}>
+        {icon}
+      </ActionIcon>
+    </Tooltip>
+  );
+};
+
+export default ActionButton;

renderer/components/content/BadgeMatchStatus.tsx

@@ -0,0 +1,15 @@
+import { Badge } from "@mantine/core";
+import type { BadgeProps, MantineColor } from "@mantine/core";
+import type { MatchStatus } from "types/match";
+
+interface BadgeMatchStatusProps extends BadgeProps {
+  matchStatus: MatchStatus;
+}
+
+const BadgeMatchStatus = ({ matchStatus }: BadgeMatchStatusProps) => {
+  const badgeColor: MantineColor = matchStatus === "finished" ? "blue" : "red";
+
+  return <Badge color={badgeColor}>Status: {matchStatus}</Badge>;
+};
+
+export default BadgeMatchStatus;

renderer/components/content/PageHeader.tsx

@@ -1,11 +1,12 @@
-import { Title, Text, Box } from "@mantine/core";
+import { Box, Title, Text } from "@mantine/core";
+import type { SpaceProps } from "@mantine/core";
 
-type Props = {
+interface PageHeaderProps extends SpaceProps {
   children: React.ReactNode;
   title: string;
-};
+}
 
-const PageHeader = ({ children, title }: Props) => {
+const PageHeader = ({ children, title }: PageHeaderProps) => {
   return (
     <Box mb="xl" component="header">
       <Title>{title}</Title>