new game dialog not broken anyore

9 files changed, 103 insertions, 126 deletions

diff --git a/components/page.tsx b/components/page.tsx
index 506e2db..b8e3dac 100644
--- a/components/page.tsx
+++ b/components/page.tsx
@@ -1,12 +1,11 @@
 import { Component, CSSProperties, ReactNode } from 'react';
 
-interface CenteredPageProps {
+export function CenteredPage(props: {
 	width?: number;
 	children?: ReactNode;
 	style?: CSSProperties;
-}
-
-export function CenteredPage(props: CenteredPageProps) {
+	className?: string;
+}) {
 	return <div
 		className='CenteredPageOuter'
 		style={{
@@ -15,7 +14,7 @@ export function CenteredPage(props: CenteredPageProps) {
 		}}
 	>
 		<div
-			className='CenteredPageInner'
+			className={'CenteredPageInner ' + props.className}
 			style={{
 				margin: '0 6px',
 				lineHeight: 0,
diff --git a/components/ui.tsx b/components/ui.tsx
index 9aa48cc..80bfba1 100644
--- a/components/ui.tsx
+++ b/components/ui.tsx
@@ -96,41 +96,14 @@ export function Input(props: {
 }
 
 export function SearchBar(props: { label?: string; }) {
-	return <div
-		style={{
-			marginTop: 24,
-			borderRadius: 8,
-			overflow: 'hidden',
-			width: '100%',
-		}}
-	>
+	return <div className='searchBar round-t fullwidth'>
 		<Input
 			label={props.label}
-			style={{
-				width: 'calc(100% - 24px - 41px)',
-				borderTopRightRadius: 0,
-				borderBottomRightRadius: 0,
-			}}
+			className='pad-m bg-700'
 		/>
-		<div
-			style={{
-				width: 41,
-				height: 41,
-				backgroundColor: 'var(--disk-a)',
-				display: 'inline-block',
-				verticalAlign: 'top',
-				position: 'relative',
-			}}
-		>
-			<SearchIcon
-				style={{
-					position: 'absolute',
-					top: '50%',
-					left: '50%',
-					transform: 'translate(-50%, -50%)',
-				}}
-			/>
-		</div>
+		<Button className='dispinbl valigntop'>
+			<SearchIcon className='icon' />
+		</Button>
 	</div>;
 }
 
diff --git a/pages/_app.tsx b/pages/_app.tsx
index db62fa8..31bc0e7 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -11,6 +11,7 @@ import '../styles/navbar.css';
 import '../styles/ui.css';
 import '../styles/utility.css';
 
+import '../styles/game.css';
 import '../styles/gameSettings.css';
 import '../styles/index.css';
 import '../styles/loginregister.css';
diff --git a/pages/game.tsx b/pages/game.tsx
index b5200a7..d6d7fb0 100644
--- a/pages/game.tsx
+++ b/pages/game.tsx
@@ -66,10 +66,8 @@ function VoerGame(props: {
 	}, []);
 
 	return <div
+		className='posrel abscenterv'
 		style={{
-			position: 'relative',
-			top: '50%',
-			transform: 'translateY(-50%)',
 			maxWidth: '100vh',
 			margin: '0 auto',
 		}}
@@ -109,30 +107,22 @@ function GameOutcomeDialog(props: {
 }) {
 	return <DialogBox
 		title='Speluitkomst'
-		style={{ display: props.visible ? 'inline-block' : 'none' }}
+		hidden={!props.visible}
+		className='outcomeDialog'
 		onclick={() => {
 			window.history.replaceState(null, null, '/');
 			window.location.reload();
 		}}
 	>
-		<div
-			style={{
-				width: '100%',
-				textAlign: 'center',
-			}}
-		>
+		<div className='inner fullwidth center'>
 			<h2
-				style={{
-					color: props.outcome == 0
-						? 'var(--text)'
-						: props.outcome == props.player
-						? 'var(--disk-a-text)'
-						: props.outcome != props.player
-						? 'var(--disk-b-text)'
-						: 'var(--text)',
-					opacity: props.outcome == 0 ? .75 : 1,
-					marginTop: 8,
-				}}
+				className={'outcome' + ' ' + (props.outcome == 0
+					? 'draw'
+					: props.outcome == props.player
+					? 'lose'
+					: props.outcome != props.player
+					? 'win'
+					: 'draw')}
 			>
 				{props.outcome == 0
 					? 'Gelijkspel'
@@ -142,7 +132,7 @@ function GameOutcomeDialog(props: {
 					? 'Gewonnen'
 					: '???'}
 			</h2>
-			{false && <p style={{ marginTop: 24 }}>
+			{false && <p className='analysis'>
 				0 Gemiste winstzetten<br />
 				6 Optimale zetten<br />
 				0 Blunders
@@ -150,42 +140,11 @@ function GameOutcomeDialog(props: {
 			{false && <IconLabelButton
 				text='Opnieuw spelen'
 				icon={<RefreshIcon />}
-				style={{
-					float: 'none',
-					marginTop: 24,
-					padding: '12px 32px',
-				}}
 			/>}
 		</div>
 	</DialogBox>;
 }
 
-var InviteButtonStyle: CSSProperties = {
-	backgroundColor: 'var(--page-background)',
-	height: 160,
-	padding: 12,
-};
-
-var InviteButtonIconStyle: CSSProperties = {
-	fontSize: 100,
-	position: 'absolute',
-	top: 12,
-	left: '50%',
-	transform: 'translateX(-50%)',
-};
-
-var InviteButtonLabelStyle: CSSProperties = {
-	position: 'absolute',
-	bottom: 12,
-	left: '50%',
-	transform: 'translateX(-50%)',
-	textAlign: 'center',
-	color: 'var(--text-alt)',
-	width: 136,
-	fontSize: 20,
-	userSelect: 'none',
-};
-
 export default function GamePage() {
 	var [gameID, setGameID] = useState('');
 	var [player1, setPlayer1] = useState(true);
@@ -226,7 +185,7 @@ export default function GamePage() {
 
 	return <div>
 		<NavBar />
-		<CenteredPage width={900} style={{ height: '100vh' }}>
+		<CenteredPage width={900} className='h100vh'>
 			<VoerGame
 				active={active}
 				gameID={gameID}
@@ -236,22 +195,16 @@ export default function GamePage() {
 			/>
 			<DialogBox
 				title='Nieuw spel'
-				style={{ display: gameIDUrl || gameID ? 'none' : 'inline-block' }}
+				className='newGameDialog'
+				hidden={!!(gameIDUrl || gameID)}
 				onclick={() => {
 					window.history.go(-1);
 				}}
 			>
 				<CurrentGameSettings />
-				<div
-					style={{
-						marginTop: 24,
-						display: 'grid',
-						gridTemplateColumns: '1fr 1fr',
-						gridGap: 24,
-					}}
-				>
+				<div className='sidebyside gg-l'>
 					<Button
-						style={InviteButtonStyle}
+						className='inviteButton random pad-m'
 						onclick={() => {
 							axios.request<{ id: string; player_1: boolean; game_started: boolean; }>({
 								url: '/api/game/random',
@@ -266,16 +219,11 @@ export default function GamePage() {
 								.catch(() => {});
 						}}
 					>
-						<WifiTetheringRoundedIcon
-							style={{
-								color: 'var(--disk-b)',
-								...InviteButtonIconStyle,
-							}}
-						/>
-						<h2 style={InviteButtonLabelStyle}>Willekeurige speler</h2>
+						<WifiTetheringRoundedIcon className='icon posabs abscenterh' />
+						<h2 className='label center posabs abscenterh nosel'>Willekeurige speler</h2>
 					</Button>
 					<Button
-						style={InviteButtonStyle}
+						className='inviteButton link pad-m'
 						onclick={() => {
 							axios.request<{ id: string; }>({
 								method: 'post',
@@ -300,13 +248,8 @@ export default function GamePage() {
 								.catch(() => {});
 						}}
 					>
-						<LinkRoundedIcon
-							style={{
-								color: 'var(--disk-a)',
-								...InviteButtonIconStyle,
-							}}
-						/>
-						<h2 style={InviteButtonLabelStyle}>Uitnodigen via link</h2>
+						<LinkRoundedIcon className='icon posabs abscenterh' />
+						<h2 className='label center posabs abscenterh nosel'>Uitnodigen via link</h2>
 					</Button>
 				</div>
 				<SearchBar label='Zoeken in vriendenlijst' />
diff --git a/pages/search.tsx b/pages/search.tsx
index e874775..e0f3123 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -10,7 +10,7 @@ import { Button, Input, Vierkant } from '../components/ui';
 import SearchOutlinedIcon from '@material-ui/icons/SearchOutlined';
 
 function search(callback: (results: Array<userInfo>) => void) {
-	var query: string = (document.getElementById('searchBar') as HTMLInputElement).value;
+	var query: string = (document.getElementById('bigSearchBar') as HTMLInputElement).value;
 	if (query.length < 3) return;
 
 	axios.request<{ 'results': Array<userInfo>; }>({
@@ -44,20 +44,20 @@ function SearchResult(props: { user: userInfo; }) {
 	</Vierkant>;
 }
 
-function SearchBar(props: {
+function BigSearchBar(props: {
 	searchFunction: (event?: FormEvent<HTMLFormElement>) => void;
 }) {
-	return <Vierkant className='pad-m w100m2m searchBar'>
+	return <Vierkant className='pad-m w100m2m bigSearchBar posrel'>
 		<form onSubmit={props.searchFunction}>
 			<Input
-				id='searchBar'
+				id='bigSearchBar'
 				label='Zoeken voor gebruikers...'
 				autocomplete='off'
 				autofocus
-				className='pad-m'
+				className='pad-m posabs abscenterv'
 			/>
 			<Button
-				className='pad-m dispinbl valigntop'
+				className='pad-m dispinbl valigntop floatr'
 				onclick={props.searchFunction}
 			>
 				<SearchOutlinedIcon />
@@ -80,7 +80,7 @@ export default function HomePage() {
 		<NavBar />
 		<CenteredPage width={802}>
 			<PageTitle>Zoeken</PageTitle>
-			<SearchBar searchFunction={getSearchResults} />
+			<BigSearchBar searchFunction={getSearchResults} />
 			<SearchResults userList={results} />
 			{searched && results.length == 0 && <h1
 				className='noresults center subtile'
diff --git a/styles/game.css b/styles/game.css
new file mode 100644
index 0000000..ae8c3ff
--- /dev/null
+++ b/styles/game.css
@@ -0,0 +1,34 @@
+.outcomeDialog .inner > * {
+	margin-top: var(--spacing-medium);
+}
+
+.outcomeDialog .inner .button {
+	float: unset;
+	padding: var(--spacing-medium) var(--spacing-large);
+}
+
+.newGameDialog .inviteButton {
+	height: 160px;
+}
+
+.newGameDialog .inviteButton.random {
+	background-color: var(--confirm);
+}
+
+.newGameDialog .inviteButton.link {
+	background-color: var(--error);
+}
+
+.newGameDialog .inviteButton .icon {
+	top: var(--spacing-medium);
+	font-size: 100px;
+}
+
+.newGameDialog .inviteButton .label {
+	bottom: var(--spacing-medium);
+}
+
+.newGameDialog > div {
+	margin-top: var(--spacing-large);
+}
+
diff --git a/styles/search.css b/styles/search.css
index 06a3918..696294d 100644
--- a/styles/search.css
+++ b/styles/search.css
@@ -1,6 +1,5 @@
-.searchBar input {
+.bigSearchBar .input {
 	width: calc(100% - 2 * var(--spacing-medium) - 48px);
-	margin: 2px 0;
 }
 
 .results .result .inner .userInfo {
diff --git a/styles/ui.css b/styles/ui.css
index 8003a7c..cd9f461 100644
--- a/styles/ui.css
+++ b/styles/ui.css
@@ -78,3 +78,17 @@
 	cursor: pointer;
 }
 
+.searchBar {
+	overflow: hidden;
+}
+
+.searchBar .button {
+	border-radius: 0;
+	padding: 10px;
+}
+
+.searchBar .input {
+	width: calc(100% - 44px);
+	box-sizing: border-box;
+}
+
diff --git a/styles/utility.css b/styles/utility.css
index be982f8..d3c5897 100644
--- a/styles/utility.css
+++ b/styles/utility.css
@@ -49,6 +49,9 @@
 
 .w100m2m { width: calc(100% - var(--spacing-medium)); }
 
+.w100vw { width: 100vw; }
+.h100vh { height: 100vh; }
+
 .fullwidth {
 	width: 100%;
 	box-sizing: border-box;
@@ -64,6 +67,7 @@
 	font-weight: 600;
 }
 
+.gg-l { grid-gap: var(--spacing-large) !important; }
 .sidebyside {
 	display: grid;
 	grid-gap: var(--spacing-medium);
@@ -76,8 +80,18 @@
 	text-overflow: ellipsis;
 }
 
+.abscenterh {
+	left: 50%;
+	transform: translateX(-50%);
+}
+
+.abscenterv {
+	top: 50%;
+	transform: translateY(-50%);
+}
+
 .abscenter {
-	top: 51%;
+	top: 50%;
 	left: 50%;
 	transform: translate(-50%, -50%);
 }