diff options
| -rw-r--r-- | components/recentGames.tsx | 46 | ||||
| -rw-r--r-- | pages/account.tsx | 10 | ||||
| -rw-r--r-- | pages/index.tsx | 23 |
3 files changed, 55 insertions, 24 deletions
diff --git a/components/recentGames.tsx b/components/recentGames.tsx new file mode 100644 index 0000000..6bd766b --- /dev/null +++ b/components/recentGames.tsx @@ -0,0 +1,46 @@ +import { CSSProperties, Component } from 'react'; + +var LeftAlignedTableColumn: CSSProperties = { + textAlign: "left", + paddingLeft: 16 +} + +var RightAlignedTableColumn: CSSProperties = { + textAlign: "right", + paddingRight: 16 +} + +export default class RecentGames extends Component { + constructor(props: { + user?: string; + }) { + super(props); + } + + render () { + return <div> + <h2>Recente partijen</h2> + <table width="100%" style={{ marginTop: "16px", textAlign: "center" }}> + <tr> + <th style={{ width: "50%" }}>Tegenstander</th> + <th style={{ width: "20%" }}>Uitkomst</th> + <th style={{ width: "15%" }}>Zetten</th> + <th style={{ width: "15%" }}>Datum</th> + </tr> + <tr> + <td style={LeftAlignedTableColumn}>Naam hier</td> + <td style={{ color: "var(--disk-b-text)" }}>Gewonnen</td> + <td>7</td> + <td style={RightAlignedTableColumn}>Vandaag</td> + </tr> + <tr> + <td style={LeftAlignedTableColumn}>Nog meer namen</td> + <td style={{ opacity: .6 }}>Gelijkspel</td> + <td>42</td> + <td style={RightAlignedTableColumn}>Gisteren</td> + </tr> + </table> + </div> + } +} + diff --git a/pages/account.tsx b/pages/account.tsx index 4d1ecd2..82e21fa 100644 --- a/pages/account.tsx +++ b/pages/account.tsx @@ -5,6 +5,7 @@ import { NavBar } from '../components/navbar'; import { CenteredPage, PageTitle } from '../components/page'; import { Vierkant, IconLabelButton } from '../components/ui'; import { AccountAvatar } from '../components/account'; +import RecentGames from '../components/recentGames'; import PersonAddOutlinedIcon from '@material-ui/icons/PersonAddOutlined'; import AssignmentIndOutlinedIcon from '@material-ui/icons/AssignmentIndOutlined'; @@ -90,18 +91,21 @@ export default function AccountPage() { </div> </Vierkant> <InfoSection> - <InfoModule icon={<Icon size={1} path={mdiCheckboxBlankCircle}/>} label="Online"/> + <InfoModule icon={<Icon size={1} path={mdiCheckboxBlankCircle} color="var(--disk-b-text)"/>} label="Online"/> <InfoModule icon={<AssignmentIndOutlinedIcon/>} label="Lid sinds 14 december 2020"/> <InfoModule icon={<PeopleOutlineOutlinedIcon/>} label="2 vrienden"/> <InfoModule icon={<Icon size={1} path={mdiEarth}/>} label="Nederland"/> </InfoSection> <InfoSection> - <InfoModule icon={<ArrowUpwardOutlinedIcon/>} label="4 keer gewonnen"/> + <InfoModule icon={<ArrowUpwardOutlinedIcon style={{ color: "var(--disk-b-text)" }}/>} label="4 keer gewonnen"/> <InfoModule icon={<Icon size={1} path={mdiEqual}/>} label="2 keer gelijkspel"/> - <InfoModule icon={<ArrowDownwardOutlinedIcon/>} label="2 keer verloren"/> + <InfoModule icon={<ArrowDownwardOutlinedIcon style={{ color: "var(--disk-a-text)" }}/>} label="2 keer verloren"/> <InfoModule icon={<Icon size={1} path={mdiClipboardTextOutline}/>} label="Score: 400"/> <InfoModule icon={<Icon size={1} path={mdiGamepadSquareOutline}/>} label="6 potjes"/> </InfoSection> + <Vierkant> + <RecentGames/> + </Vierkant> </CenteredPage> </div> } diff --git a/pages/index.tsx b/pages/index.tsx index 7d128ef..665ef6a 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -6,6 +6,7 @@ import { NavBar } from '../components/navbar'; import { CenteredPage, PageTitle } from '../components/page'; import { Vierkant, Button } from '../components/ui'; import { AccountAvatar } from '../components/account'; +import RecentGames from '../components/recentGames'; import VideogameAssetIcon from '@material-ui/icons/VideogameAsset'; import ExtensionIcon from '@material-ui/icons/Extension'; @@ -160,27 +161,7 @@ export default class HomePage extends Component { </div> </Vierkant> <Vierkant fullwidth style={{ display: this.state.loggedIn ? "block" : "none" }}> - <h2>Recente partijen</h2> - <table width="100%" style={{ marginTop: "16px", textAlign: "center" }}> - <tr> - <th style={{ width: "50%" }}>Tegenstander</th> - <th style={{ width: "20%" }}>Uitkomst</th> - <th style={{ width: "15%" }}>Zetten</th> - <th style={{ width: "15%" }}>Datum</th> - </tr> - <tr> - <td style={LeftAlignedTableColumn}>Naam hier</td> - <td style={{ color: "var(--disk-b-text)" }}>Gewonnen</td> - <td>7</td> - <td style={RightAlignedTableColumn}>Vandaag</td> - </tr> - <tr> - <td style={LeftAlignedTableColumn}>Nog meer namen</td> - <td style={{ opacity: .6 }}>Gelijkspel</td> - <td>42</td> - <td style={RightAlignedTableColumn}>Gisteren</td> - </tr> - </table> + <RecentGames/> </Vierkant> <Vierkant fullwidth> <h2>Nieuws ofzo</h2> |