From d2c2cc62a4c2e1ac10f8434bea7bb834da820869 Mon Sep 17 00:00:00 2001 From: lonkaars Date: Sat, 16 Jan 2021 11:40:36 +0100 Subject: semi working next project --- src/api.ts | 9 -- src/components/account.tsx | 16 ---- src/components/dialogBox.tsx | 30 ------- src/components/gameBar.tsx | 88 ------------------ src/components/gameSettings.tsx | 134 --------------------------- src/components/logo.tsx | 28 ------ src/components/navbar.tsx | 63 ------------- src/components/page.tsx | 32 ------- src/components/toast.tsx | 78 ---------------- src/components/ui.tsx | 132 --------------------------- src/components/voerBord.tsx | 39 -------- src/dark.css | 9 -- src/global.css | 69 -------------- src/index.tsx | 11 --- src/pages/game.tsx | 84 ----------------- src/pages/home.tsx | 195 ---------------------------------------- src/pages/login.tsx | 71 --------------- src/pages/register.tsx | 99 -------------------- src/pages/settings.tsx | 34 ------- src/routes.tsx | 20 ----- 20 files changed, 1241 deletions(-) delete mode 100644 src/api.ts delete mode 100644 src/components/account.tsx delete mode 100644 src/components/dialogBox.tsx delete mode 100644 src/components/gameBar.tsx delete mode 100644 src/components/gameSettings.tsx delete mode 100644 src/components/logo.tsx delete mode 100644 src/components/navbar.tsx delete mode 100644 src/components/page.tsx delete mode 100644 src/components/toast.tsx delete mode 100644 src/components/ui.tsx delete mode 100644 src/components/voerBord.tsx delete mode 100644 src/dark.css delete mode 100644 src/global.css delete mode 100644 src/index.tsx delete mode 100644 src/pages/game.tsx delete mode 100644 src/pages/home.tsx delete mode 100644 src/pages/login.tsx delete mode 100644 src/pages/register.tsx delete mode 100644 src/pages/settings.tsx delete mode 100644 src/routes.tsx (limited to 'src') diff --git a/src/api.ts b/src/api.ts deleted file mode 100644 index e2e3d93..0000000 --- a/src/api.ts +++ /dev/null @@ -1,9 +0,0 @@ -export interface userInfo { - avatar?: string|null, - coutry?: string|null, - id?: string, - registered?: number, - type?: string, - username?: string, -}; - diff --git a/src/components/account.tsx b/src/components/account.tsx deleted file mode 100644 index e6ec58f..0000000 --- a/src/components/account.tsx +++ /dev/null @@ -1,16 +0,0 @@ -interface AccountAvatarProps { - size: number; - image: string; -} - -export function AccountAvatar(props: AccountAvatarProps) { - return
; -} - - diff --git a/src/components/dialogBox.tsx b/src/components/dialogBox.tsx deleted file mode 100644 index 74fe99b..0000000 --- a/src/components/dialogBox.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { ReactNode } from 'react'; - -import { Vierkant } from './ui'; - -import CancelIcon from '@material-ui/icons/Cancel'; - -interface DialogBoxProps { - children: ReactNode; - title: string; -} - -export function DialogBox(props: DialogBoxProps) { - return -

{props.title}

- - {props.children} - -} diff --git a/src/components/gameBar.tsx b/src/components/gameBar.tsx deleted file mode 100644 index 53eda88..0000000 --- a/src/components/gameBar.tsx +++ /dev/null @@ -1,88 +0,0 @@ -import { CSSProperties, ReactNode } from 'react'; -import { Vierkant } from './ui'; - -import SettingsRoundedIcon from '@material-ui/icons/SettingsRounded'; -import ExitToAppRoundedIcon from '@material-ui/icons/ExitToAppRounded'; -import NavigateNextRoundedIcon from '@material-ui/icons/NavigateNextRounded'; -import NavigateBeforeRoundedIcon from '@material-ui/icons/NavigateBeforeRounded'; - -interface GameBarModuleProps { - children?: ReactNode; -} - -function GameBarModule(props: GameBarModuleProps) { - return {props.children} -} - -var GameBarSpacer = () =>
; - -var GameBarAlignStyle: CSSProperties = { - display: "inline-block" -} - -export function GameBar() { - return -
-
-
-

Tegenstander

-
-
- 0-0 -
-
- - - - - - 00:00 - - - - - - - - - - - - - -
-
- ; -} diff --git a/src/components/gameSettings.tsx b/src/components/gameSettings.tsx deleted file mode 100644 index fb5188e..0000000 --- a/src/components/gameSettings.tsx +++ /dev/null @@ -1,134 +0,0 @@ -import { ReactNode, CSSProperties } from 'react'; - -import { Button, Vierkant, CheckBox, Input } from './ui'; -import { DialogBox } from './dialogBox'; - -import BuildRoundedIcon from '@material-ui/icons/BuildRounded'; - -export function CurrentGameSettings(/*props: CurrentGameSettingsProps*/) { - return
-

- Geen tijdslimiet
- Standaardregels
- Gerangschikt -

- -
; -} - -function GameSettingsSection(props: { - children?: ReactNode; - title: string; - state: boolean; - noMarginBottom?: boolean; -}) { - return - {props.title} - -
{props.children}
- -} - -function GameRule(props: { - title: string; - description: string; - style?: CSSProperties; -}) { - return
-

{props.title}

-

{props.description}

-
; -} - -export function EditGameSettings() { - return -
- -
- - - -
- - Timer gebruiken voor bijde spelers - - -
- - -
- - - - -
- ; -} diff --git a/src/components/logo.tsx b/src/components/logo.tsx deleted file mode 100644 index b0f358f..0000000 --- a/src/components/logo.tsx +++ /dev/null @@ -1,28 +0,0 @@ -export function LogoDark() { - return ( -
- - - - - - - -
- ); -} - -export function LogoLight() { - return ( -
- - - - - - - -
- ); -} - diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx deleted file mode 100644 index 7725ca8..0000000 --- a/src/components/navbar.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import { CSSProperties } from "react"; - -import { LogoDark } from "../components/logo"; - -import Home from '@material-ui/icons/Home'; -import VideogameAssetIcon from '@material-ui/icons/VideogameAsset'; -import ExtensionIcon from '@material-ui/icons/Extension'; -import SearchIcon from '@material-ui/icons/Search'; -import SettingsIcon from '@material-ui/icons/Settings'; -import PersonIcon from '@material-ui/icons/Person'; - -var NavBarItemStyle: CSSProperties = { - margin: 12, - marginBottom: 16, - display: "block" -} - -export function NavBar() { - return ( -
-
- - - - - -
- -
- -
- - -
-
- ); -} - diff --git a/src/components/page.tsx b/src/components/page.tsx deleted file mode 100644 index d8a4a2b..0000000 --- a/src/components/page.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { Component, CSSProperties, ReactNode } from 'react'; - -interface CenteredPageProps { - width?: number; - children?: ReactNode; - style?: CSSProperties; -} - -export function CenteredPage (props: CenteredPageProps) { - return
-
{props.children}
-
; -} - -export class PageTitle extends Component { - render () { - return

{this.props.children}

; - } -} diff --git a/src/components/toast.tsx b/src/components/toast.tsx deleted file mode 100644 index 1d467bd..0000000 --- a/src/components/toast.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import { CSSProperties, ReactNode, Component } from "react"; - -import CloseIcon from '@material-ui/icons/Close'; - -export function ToastArea(props: { - style?: CSSProperties - children?: ReactNode -}) { - return
{props.children}
-} - -export class Toast extends Component<{ - text?: string - icon?: ReactNode - children?: ReactNode - type?: "normal"|"confirmation"|"error" - style?: CSSProperties -}> { - state = { render: true } - - close = () => this.setState({ render: false }) - - render () { - if (!this.state.render) return null; - return
- { - this.props.children ? - this.props.children : -
-
{this.props.icon}
-

{this.props.text}

-
- -
-
- } -
- } -} - diff --git a/src/components/ui.tsx b/src/components/ui.tsx deleted file mode 100644 index 3afd97a..0000000 --- a/src/components/ui.tsx +++ /dev/null @@ -1,132 +0,0 @@ -import { Component, CSSProperties, ReactNode } from "react"; - -import SearchIcon from '@material-ui/icons/Search'; -import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank'; -import CheckBoxIcon from '@material-ui/icons/CheckBox'; - -export function Vierkant(props: { - href?: string; - width?: string; - height?: string; - style?: CSSProperties; - children?: ReactNode; - className?: string; }) -{ - return {props.children} -} - -export function Button(props: { - text?: string; - children?: ReactNode; - style?: CSSProperties; - href?: string; - onclick?: (() => void); }) -{ - return - { - props.text ? - {props.text} - : undefined - } - { props.children } - ; -} - -export function Input(props: { - label?: string, - style?: CSSProperties, - type?: string, - id?: string -}) { - return -} - -export function SearchBar(props: { label?: string }) { - return
- -
- -
-
-} - -export class CheckBox extends Component<{ - state?: boolean, - style?: CSSProperties -}> { - state = { on: this.props.state || false } - public toggle = () => this.setState({ on: !this.state.on }) - - render() { - return
- { - this.state.on ? - : - - } -
; - } -} - - - diff --git a/src/components/voerBord.tsx b/src/components/voerBord.tsx deleted file mode 100644 index 3e319a1..0000000 --- a/src/components/voerBord.tsx +++ /dev/null @@ -1,39 +0,0 @@ -interface VoerBordProps { - width: number; - height: number; -} - -export function VoerBord(props: VoerBordProps) { - return - - { - [...Array(props.height)].map(() => ( - - {[...Array(props.width)].map(() => ( - - ))} - - )) - } - -
-
-
-
-} diff --git a/src/dark.css b/src/dark.css deleted file mode 100644 index a0f652e..0000000 --- a/src/dark.css +++ /dev/null @@ -1,9 +0,0 @@ -:root { - --text: #FCFFFD; - --text-alt: var(--text); - - --page-background: #11171a; - --background: #222d33; - --background-alt: #344047; -} - diff --git a/src/global.css b/src/global.css deleted file mode 100644 index d851131..0000000 --- a/src/global.css +++ /dev/null @@ -1,69 +0,0 @@ -:root { - --text: #FCFFFD; - --page-background: var(--text); - - --background: #5D737E; - --text-alt: var(--background); - --background-alt: #81949E; - - --disk-a: #E16D82; - --disk-a-text: #FDC0C4; - --disk-b: #73D0C5; - --disk-b-text: #C0FDEB; -} - -/* default margin */ -html, body { - margin: 0; - padding: 0; -} - -/* navbar fix */ -body { padding-left: 48px; } - -/* font */ -html { - font-size: 14px; - font-family: "Inter"; -} - -/* background color */ -html { background-color: var(--page-background); } - -/* link color fix */ -a { color: var(--text); } - -/* centering misschien */ -.CenteredPageInner { text-align: center; } -.CenteredPageInner > * { text-align: left; } - -/* line height reset */ -h1, h2, p, span, td, th { - margin: 0; - line-height: 1.2; -} - -/* table groottes met percentages werkt nu */ -table { table-layout: fixed; } - -/* table styles */ -td, th { - padding: 4px; - font-size: 15px; -} - -input::placeholder { - font-style: italic; - opacity: .8; -} - -/* remove chrome's ugly :focus outline */ -:focus { outline: none; } - -/* icon size fix */ -.navbar svg, -.gameBar svg { font-size: 24px; } - -/* scroll balken */ -::-webkit-scrollbar { width: 0 !important; } - diff --git a/src/index.tsx b/src/index.tsx deleted file mode 100644 index 5ca3ea1..0000000 --- a/src/index.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import ReactDOM from 'react-dom'; -import { BrowserRouter } from 'react-router-dom'; -import Router from "./routes"; - -ReactDOM.render( - - - , - document.getElementById('root') -); - diff --git a/src/pages/game.tsx b/src/pages/game.tsx deleted file mode 100644 index 513fc7a..0000000 --- a/src/pages/game.tsx +++ /dev/null @@ -1,84 +0,0 @@ -import { CSSProperties } from 'react'; - -import { NavBar } from '../components/navbar'; -import { CenteredPage } from '../components/page'; -import { VoerBord } from '../components/voerBord'; -import { DialogBox } from '../components/dialogBox'; -import { CurrentGameSettings } from '../components/gameSettings'; -import { Button, SearchBar } from '../components/ui'; -import { GameBar } from '../components/gameBar'; - -import WifiTetheringRoundedIcon from '@material-ui/icons/WifiTetheringRounded'; -import LinkRoundedIcon from '@material-ui/icons/LinkRounded'; - -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() { - return ( -
- - -
- - -
- - -
- - -
- - - -
- ); -} - diff --git a/src/pages/home.tsx b/src/pages/home.tsx deleted file mode 100644 index f298846..0000000 --- a/src/pages/home.tsx +++ /dev/null @@ -1,195 +0,0 @@ -import { CSSProperties, Component } from 'react'; -import axios from 'axios'; -import { userInfo } from '../api'; - -import { NavBar } from '../components/navbar'; -import { CenteredPage, PageTitle } from '../components/page'; -import { Vierkant, Button } from '../components/ui'; -import { AccountAvatar } from '../components/account'; -import { ToastArea, Toast } from '../components/toast'; - -import VideogameAssetIcon from '@material-ui/icons/VideogameAsset'; -import ExtensionIcon from '@material-ui/icons/Extension'; - -import Icon from '@mdi/react'; -import { mdiRobotExcited } from '@mdi/js'; - -var GameModeIconStyle: CSSProperties = { - fontSize: 64, - width: 64, - height: 64, - display: "inline-block", - position: "absolute", - top: 24, - left: "50%", - transform: "translateX(-50%)" -} - -var GameModeTextStyle: CSSProperties = { - whiteSpace: "nowrap", - display: "inline-block", - position: "absolute", - bottom: 24, - left: "50%", - transform: "translateX(-50%)", - userSelect: "none", - fontWeight: 500 -} - -var SquareSize: CSSProperties = { - width: 90, - height: 90 -} - -var LeftAlignedTableColumn: CSSProperties = { - textAlign: "left", - paddingLeft: 16 -} - -var RightAlignedTableColumn: CSSProperties = { - textAlign: "right", - paddingRight: 16 -} - -export default class HomePage extends Component { - state: { - info: userInfo, - loggedIn: boolean - } = { - info: {}, - loggedIn: document.cookie.includes("token") - } - - getUserInfo () { - axios.request({ - method: "get", - url: `${window.location.origin}/api/user/info`, - headers: {"content-type": "application/json"} - }) - .then(request => this.setState({ info: request.data })) - .catch(console.log); - } - - constructor(props: {}) { - super(props); - - if(this.state.loggedIn) this.getUserInfo() - } - - render () { - return
- - - }/> - - - - 4 op een rij - - - Nieuw spel -
- - - - Puzzels -
- - - - Tegen computer -
- - -
- Log in of maak een account aan om je scores op te slaan en toegang te krijgen tot meer functies -
-
-
-
-
- -
-
-

{this.state.info.username}

-

Score: 400

-

- 0 W - / - 0 V - / - 0 G -

-
-
- - -

Recente partijen

- - - - - - - - - - - - - - - - - - - -
TegenstanderUitkomstZettenDatum
Naam hierGewonnen7Vandaag
Nog meer namenGelijkspel42Gisteren
- - -

Nieuws ofzo

-

Chess.com heeft heel veel troep waar niemand naar kijkt

- - -
- } -} - diff --git a/src/pages/login.tsx b/src/pages/login.tsx deleted file mode 100644 index 8528a39..0000000 --- a/src/pages/login.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import { v4 as uuidv4 } from 'uuid'; -import axios from 'axios'; - -import { NavBar } from '../components/navbar'; -import { CenteredPage } from '../components/page'; -import { Vierkant, Input, Button } from '../components/ui'; - -var ids = { - email: uuidv4(), - password: uuidv4() -} - -function submitLogin() { - var formData = { - email: (document.getElementById(ids.email) as HTMLInputElement).value, - password: (document.getElementById(ids.password) as HTMLInputElement).value - } - - if ( !formData.email || - !formData.password ) { - alert("Vul alsjeblieft alle velden in!"); - return; - } - - axios({ - method: "post", - url: `${window.location.origin}/api/auth/login`, - headers: {"content-type": "application/json"}, - data: formData - }) - .then(() => window.location.pathname = "/") - .catch(error => { - if (error.response.status === 401) { - alert("Verkeerde gebruikersnaam/wachtwoord combinatie!") - return; - } - alert("Er is iets fout gegaan!"); - }); -} - -export default function LoginPage() { - return ( -
- - -
- - - -
- - -
- -
- -
- ); -} - diff --git a/src/pages/register.tsx b/src/pages/register.tsx deleted file mode 100644 index e0f98de..0000000 --- a/src/pages/register.tsx +++ /dev/null @@ -1,99 +0,0 @@ -import { NavBar } from '../components/navbar'; -import { CenteredPage } from '../components/page'; -import { Vierkant, Input, Button } from '../components/ui'; - -import { v4 as uuidv4 } from 'uuid'; -import { validate as validateEmail } from 'email-validator'; -import axios from 'axios'; - -var ids = { - username: uuidv4(), - email: uuidv4(), - password: uuidv4() -} - -function submitRegister() { - var formData = { - username: (document.getElementById(ids.username) as HTMLInputElement).value, - email: (document.getElementById(ids.email) as HTMLInputElement).value, - password: (document.getElementById(ids.password) as HTMLInputElement).value - } - - if ( !formData.username || - !formData.email || - !formData.password ) { - alert("Vul alsjeblieft alle velden in!"); - return; - } - - var passwordRegex: RegExp = /^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9]).{8,}$/; - /* - * ^ Begin string - * (?=.*[A-Z]) Minimaal één hoofdletter - * (?=.*[a-z]) Minimaal één kleine letter - * (?=.*[0-9]) Minimaal één getal - * .{8,} Minimaal acht tekens in lengte - * $ Ende string - * https://stackoverflow.com/questions/5142103/regex-to-validate-password-strength - */ - - //TODO: alert -> react toast / material-ui snackbar - if ( formData.username.length > 35 ) { - alert("Je gebruikersnaam kan maximaal 35 tekens lang zijn!"); - return; - } - - if ( !validateEmail(formData.email) ) { - alert("Voer alsjeblieft een geldig e-mail adres in!"); - return; - } - - //TODO: wachtwoord max 72 tekens ivm bcrypt - if ( !formData.password.match(passwordRegex) ) { - alert("Je wachtwoord moet minimaal 8 tekens lang zijn en een hoofdletter, kleine letter, en een nummer bevatten!"); - return; - } - - axios({ - method: "post", - url: `${window.location.origin}/api/auth/signup`, - headers: {"content-type": "application/json"}, - data: formData - }) - .then(() => { - //TODO: email verificatie - // redirect naar home, automatische login - window.location.pathname = "/"; - }) - .catch(error => { - alert("Er is iets fout gegaan!"); - console.log(error); - }); -} - -export default function RegisterPage() { - return ( -
- - -
- -
- - - - -
- -
- -
- ); -} - diff --git a/src/pages/settings.tsx b/src/pages/settings.tsx deleted file mode 100644 index 2daa90b..0000000 --- a/src/pages/settings.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { CSSProperties } from 'react'; - -import { NavBar } from '../components/navbar'; -import { CenteredPage, PageTitle } from '../components/page'; -import { Vierkant } from '../components/ui'; -/* import { AccountAvatar } from '../components/account'; */ -import { CurrentGameSettings, EditGameSettings } from '../components/gameSettings'; - -var SettingsSectionHeaderStyle: CSSProperties = { - marginBottom: 24 -} - -export default function SettingsPage() { - return ( -
- - - Instellingen - -

Account

- - -

Kleuren

- - -

Standaard spelregels

- - - - -
- ); -} - diff --git a/src/routes.tsx b/src/routes.tsx deleted file mode 100644 index baff382..0000000 --- a/src/routes.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { Switch, Route } from 'react-router-dom'; - -import './global.css'; - -import HomePage from './pages/home'; -import SettingsPage from './pages/settings'; -import GamePage from './pages/game'; -import LoginPage from './pages/login'; -import RegisterPage from './pages/register'; - -export default function Router() { - return - - - - - - ; -} - -- cgit v1.2.3