wip scores, components

tank-frontend/src/components/Button.css

@@ -0,0 +1,7 @@
+.Button {
+    border: solid 1px green;
+    border-radius: 12px;
+
+    color: green;
+    background: transparent;
+}

tank-frontend/src/components/Button.tsx

@@ -0,0 +1,15 @@
+import './Button.css';
+import {MouseEventHandler} from "react";
+
+export default function Button({text, onClick, className}: {
+    text: string,
+    onClick?: MouseEventHandler<HTMLButtonElement>,
+    className?: string
+}) {
+    return <button
+        className={'Button ' + (className ?? '')}
+        onClick={onClick}
+    >
+        {text}
+    </button>
+}

tank-frontend/src/components/Column.css

@@ -0,0 +1,7 @@
+.Column {
+    display: flex;
+    flex-direction: column;
+    flex: auto;
+    max-height: 100%;
+    align-items: stretch;
+}

tank-frontend/src/components/Column.tsx

@@ -0,0 +1,13 @@
+import {ReactNode} from "react";
+
+import './Column.css'
+
+export default function Column({children, className}: {
+    children: ReactNode,
+    className?: string
+}) {
+    return <div className={'Column ' + (className ?? '')}>
+        {children}
+    </div>
+}
+

tank-frontend/src/components/DataTable.css

@@ -0,0 +1,3 @@
+.DataTable {
+    flex-grow: 1;
+}

tank-frontend/src/components/DataTable.tsx

@@ -0,0 +1,52 @@
+import {ReactNode} from "react";
+import './DataTable.css';
+
+export type DataTableColumnDefinition<T> = {
+    field: string,
+    label?: string,
+    visualize?: (value: T) => ReactNode
+};
+
+function TableHead({columns}: { columns: DataTableColumnDefinition<any>[] }) {
+    return <thead className='DataTableHead'>
+    <tr>
+        {
+            columns.map(column =>
+                <th key={column.field}>
+                    {column.label ?? column.field}
+                </th>)
+        }
+    </tr>
+    </thead>;
+}
+
+function DataTableRow({rowData, columns}: {
+    rowData: any,
+    columns: DataTableColumnDefinition<any>[]
+}) {
+    return <tr>
+        {
+            columns.map(column => {
+                return <td key={column.field}>
+                    {
+                        column.visualize
+                            ? column.visualize(rowData)
+                            : rowData[column.field]
+                    }
+                </td>;
+            })
+        }
+    </tr>;
+}
+
+export default function DataTable<T>({data, columns}: {
+    data: T[],
+    columns: DataTableColumnDefinition<any>[]
+}) {
+    return <table className='DataTable'>
+        <TableHead columns={columns}/>
+        <tbody>
+        {data.map((element, index) => <DataTableRow key={index} rowData={element} columns={columns}/>)}
+        </tbody>
+    </table>
+}

tank-frontend/src/components/Row.css

@@ -0,0 +1,7 @@
+.Row {
+    display: flex;
+    flex-direction: row;
+    flex: auto;
+    max-width: 100%;
+    align-items: stretch;
+}

tank-frontend/src/components/Row.tsx

@@ -0,0 +1,9 @@
+import {ReactNode} from "react";
+
+import './Row.css';
+
+export default function Row({children, className}: { children: ReactNode, className?: string }) {
+    return <div className={'Row ' + (className ?? '')}>
+        {children}
+    </div>
+}