diff options
| -rw-r--r-- | src/components/navbar.tsx | 2 | ||||
| -rw-r--r-- | src/components/page.tsx | 43 | ||||
| -rw-r--r-- | src/components/voerBord.tsx | 43 | ||||
| -rw-r--r-- | src/pages/game.tsx | 16 | ||||
| -rw-r--r-- | src/pages/home.tsx | 6 | ||||
| -rw-r--r-- | src/pages/settings.tsx | 4 | ||||
| -rw-r--r-- | src/routes.tsx | 2 |
7 files changed, 88 insertions, 28 deletions
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx index 141119f..d0245dc 100644 --- a/src/components/navbar.tsx +++ b/src/components/navbar.tsx @@ -43,7 +43,7 @@ export function NavBar() { <div className="navbar" style={NavBarStyle}> <div style={NavBarItemStyle}><LogoDark/></div> <a href="/" style={NavBarItemStyle}><Home/></a> - <a href="/" style={NavBarItemStyle}><VideogameAssetIcon/></a> + <a href="/game" style={NavBarItemStyle}><VideogameAssetIcon/></a> <a href="/" style={NavBarItemStyle}><ExtensionIcon/></a> <a href="/" style={NavBarItemStyle}><SearchIcon/></a> diff --git a/src/components/page.tsx b/src/components/page.tsx index 44b00ba..b368eee 100644 --- a/src/components/page.tsx +++ b/src/components/page.tsx @@ -1,31 +1,30 @@ -import { Component, CSSProperties } from 'react'; +import { Component, ReactNode } from 'react'; -var CenteredPageStyle: CSSProperties = { - maxWidth: 802, - margin: "0 auto" +interface CenteredPageProps { + width?: number; + children?: ReactNode; } -export class CenteredPage extends Component { - render () { - return <div className="CenteredPageOuter" style={CenteredPageStyle}> - <div className="CenteredPageInner" style={{ - margin: "0 6px", - lineHeight: 0 - }}> {this.props.children} </div> - </div>; - } -} - -var PageTitleStyle: CSSProperties = { - color: "var(--text-alt)", - marginLeft: 6, - marginTop: 32, - marginBottom: 64, - fontSize: 25 +export function CenteredPage (props: CenteredPageProps) { + return <div className="CenteredPageOuter" style={{ + maxWidth: props.width, + margin: "0 auto" + }}> + <div className="CenteredPageInner" style={{ + margin: "0 6px", + lineHeight: 0 + }}> {props.children} </div> + </div>; } export class PageTitle extends Component { render () { - return <h1 style={PageTitleStyle}>{this.props.children}</h1>; + return <h1 style={{ + color: "var(--text-alt)", + marginLeft: 6, + marginTop: 32, + marginBottom: 64, + fontSize: 25 + }}>{this.props.children}</h1>; } } diff --git a/src/components/voerBord.tsx b/src/components/voerBord.tsx new file mode 100644 index 0000000..28de567 --- /dev/null +++ b/src/components/voerBord.tsx @@ -0,0 +1,43 @@ +interface VoerBordProps { + width: number; + height: number; +} + +export function VoerBord(props: VoerBordProps) { + return <table style={{ + borderSpacing: 8, + width: "100%" + }}> + { + [...Array(props.height)].map(() => ( + <tr> + {[...Array(props.width)].map(() => ( + <td style={{ + position: "relative", + width: "100%", + padding: 0 + }}> + <div style={{ + display: "block", + marginTop: "100%" + }}/> + <div style={{ + position: "absolute", + top: 0, left: 0, right: 0, bottom: 0, + borderRadius: 6, + border: "2px solid var(--background-alt)", + opacity: .5 + }}/> + <div style={{ + position: "absolute", + top: 2, left: 2, right: 2, bottom: 2, + backgroundColor: "var(--disk-a)", + borderRadius: 999999 + }}/> + </td> + ))} + </tr> + )) + } + </table> +} diff --git a/src/pages/game.tsx b/src/pages/game.tsx new file mode 100644 index 0000000..b248631 --- /dev/null +++ b/src/pages/game.tsx @@ -0,0 +1,16 @@ +import { NavBar } from '../components/navbar'; +import { CenteredPage, PageTitle } from '../components/page'; +import { VoerBord } from '../components/voerBord'; + +export default function GamePage() { + return ( + <div> + <NavBar/> + <CenteredPage width={900}> + <PageTitle>Niew spel starten</PageTitle> + <VoerBord width={7} height={6}/> + </CenteredPage> + </div> + ); +} + diff --git a/src/pages/home.tsx b/src/pages/home.tsx index 3583cfb..7196fc4 100644 --- a/src/pages/home.tsx +++ b/src/pages/home.tsx @@ -51,10 +51,10 @@ var RightAlignedTableColumn: CSSProperties = { export default function HomePage() { return ( <div> - <NavBar /> - <CenteredPage> + <NavBar/> + <CenteredPage width={802}> <PageTitle>4 op een rij</PageTitle> - <Vierkant href="/"> + <Vierkant href="/game"> <VideogameAssetIcon style={GameModeIconStyle}/> <span style={GameModeTextStyle}>Nieuw spel</span> <div style={SquareSize}></div> diff --git a/src/pages/settings.tsx b/src/pages/settings.tsx index 7c886d6..7460055 100644 --- a/src/pages/settings.tsx +++ b/src/pages/settings.tsx @@ -6,8 +6,8 @@ import { Vierkant } from '../components/vierkant'; export default function SettingsPage() { return ( <div> - <NavBar /> - <CenteredPage> + <NavBar/> + <CenteredPage width={802}> <PageTitle>Instellingen</PageTitle> <Vierkant width="calc(100% - 12px)"> <h2>Account</h2> diff --git a/src/routes.tsx b/src/routes.tsx index b9b39da..5310baf 100644 --- a/src/routes.tsx +++ b/src/routes.tsx @@ -4,11 +4,13 @@ import './global.css'; import HomePage from './pages/home'; import SettingsPage from './pages/settings'; +import GamePage from './pages/game'; export default function Router() { return <Switch> <Route exact path='/' component={HomePage}/> <Route exact path='/settings' component={SettingsPage}/> + <Route exact path='/game' component={GamePage}/> </Switch>; } |