Changeset 64dc53b for components


Ignore:
Timestamp:
06/11/22 23:50:19 (2 years ago)
Author:
anastasovv <simon@…>
Branches:
main
Children:
4a1a3ca
Parents:
87614a5
Message:

Code cleanings

Location:
components
Files:
8 edited
1 moved

Legend:

Unmodified
Added
Removed

  • components/Alert.jsx

    r87614a5 r64dc53b  
    88
    99import { setBlackjack, setStyle } from '../redux/reducers/styleSlice'
    10 import { setGame, setPlayer } from '../redux/reducers/playerSlice'
     10import { setGame } from '../redux/reducers/playerSlice'
    1111
    1212const Alert = () => {

  • components/GameCircle.jsx

    r87614a5 r64dc53b  
    44
    55import { useRouter } from 'next/router'
    6 
    7 import { useState } from 'react'
    8 
    9 import { setInGame } from '../redux/reducers/playerSlice'
    10 import { useDispatch } from 'react-redux'
    11 import FullwidthText from './FullwidthText'
    126
    137const GameCircle = ( { src, text, routeTo, game } ) => {

  • components/Header.jsx

    r87614a5 r64dc53b  
    33import Link from 'next/link'
    44
    5 import { useRouter } from 'next/router'
    6 
    7 import { useState, useEffect } from 'react'
     5import { useEffect } from 'react'
    86import { useDispatch, useSelector } from 'react-redux'
    97
    … …  
    2321      ...styleState.style,
    2422      displayRegisterScreen: true,
     23      registerScreenInfo: {
     24        ...styleState.style.registerScreenInfo,
     25        setFocus: true
     26      }
    2527    }))
    2628  }
    … …  
    3032      ...styleState.style,
    3133      displayLoginScreen: true,
     34      loginScreenInfo: {
     35        ...styleState.style.loginScreenInfo,
     36        setFocus: true
     37      }
    3238    }))
    3339  }
    … …  
    128134        </div>
    129135      </Link>
    130       <nav>
     136      <nav className='mainHeaderNavigation'>
    131137          <ul>
    132138            {playerState.player.displayName === '' || playerState.player.displayName === 'Guest' ? (

  • components/LoginScreen.jsx

    r87614a5 r64dc53b  
    22
    33import { useSelector, useDispatch } from 'react-redux'
     4
     5import { useRef } from 'react'
    46
    57import { setPlayer } from '../redux/reducers/playerSlice';
    … …  
    911
    1012const LoginScreen = () => {
     13    const ref = useRef(null);
     14
    1115    const dispatch = useDispatch();
    1216
    1317    const playerState = useSelector(state => state.player);
    1418    const styleState = useSelector(state => state.style);
     19
     20    setTimeout(() => {
     21        if (styleState.style.displayLoginScreen && styleState.style.loginScreenInfo.setFocus) {
     22            ref.current.focus();
     23            dispatch(setStyle({
     24                ...styleState.style,
     25                loginScreenInfo: {
     26                    ...styleState.style.loginScreenInfo,
     27                    setFocus: false
     28                }
     29            }))
     30        }
     31    }, 10);
    1532
    1633    function onChangeUsername(e) {
    … …  
    3451    }
    3552
     53    function keyUp(e) {
     54        if (e.key === 'Enter') {
     55            login();
     56        }
     57    }
     58
    3659    function closeForm() {
    3760        dispatch(setStyle({
    … …  
    4467            inlineAlertText: '',
    4568        }));
     69
    4670    }
    47 
    4871    function login() {
    4972        dispatch(setStyle({
    … …  
    119142                <div>
    120143                    <span>Username:</span>
    121                     <input type="text" onChange={(e) => {onChangeUsername(e)}} value={styleState.style.loginScreenInfo.username}/>
     144                    <input ref={ref} type="text" onChange={(e) => {onChangeUsername(e)}} onKeyUp={(e) => keyUp(e)} value={styleState.style.loginScreenInfo.username} placeholder="your username..."/>
    122145                    <span>Password:</span>
    123                     <input type="password" onChange={(e) => {onChangePassword(e)}} value={styleState.style.loginScreenInfo.password}/>
     146                    <input type="password" onChange={(e) => {onChangePassword(e)}} onKeyUp={(e) => keyUp(e)} value={styleState.style.loginScreenInfo.password} placeholder="your password..."/>
    124147                    <div style={{width: '100%', display: 'flex', flexDirection: 'row', justifyContent: 'space-between'}}>
    125148                        <button className="primaryButton" onClick={() => closeForm()}>Close Form</button>

  • components/RegisterScreen.jsx

    r87614a5 r64dc53b  
    22
    33import { useSelector, useDispatch } from 'react-redux'
     4
     5import { useRef } from 'react'
    46
    57import { setStyle } from '../redux/reducers/styleSlice';
    … …  
    810
    911const RegisterScreen = () => {
     12    const ref = useRef(null);
     13
    1014    const dispatch = useDispatch();
    1115
    1216    const styleState = useSelector(state => state.style);
     17
     18    setTimeout(() => {
     19        if (styleState.style.displayRegisterScreen && styleState.style.registerScreenInfo.setFocus) {
     20            ref.current.focus();
     21            dispatch(setStyle({
     22                ...styleState.style,
     23                registerScreenInfo: {
     24                    ...styleState.style.registerScreenInfo,
     25                    setFocus: false
     26                }
     27            }))
     28        }
     29    }, 10);
    1330
    1431    function onChangeUsername(e) {
    … …  
    4057            }
    4158        }))
     59    }
     60
     61    function keyUp(e) {
     62        if (e.key === 'Enter') {
     63            register();
     64        }
    4265    }
    4366
    … …  
    89112                            status: 'success',
    90113                        },
     114                        inlineAlertText: '',
    91115                    }));
    92116                }
    … …  
    107131                <div>
    108132                    <span>Username:</span>
    109                     <input type="text" onChange={(e) => {onChangeUsername(e)}} value={styleState.style.registerScreenInfo.username}/>
     133                    <input ref={ref} type="text" onChange={(e) => {onChangeUsername(e)}} onKeyUp={(e) => keyUp(e)} value={styleState.style.registerScreenInfo.username} placeholder="your username..."/>
    110134                    <span>Display Name:</span>
    111                     <input type="text" onChange={(e) => {onChangeDisplayName(e)}} value={styleState.style.registerScreenInfo.displayName}/>
     135                    <input type="text" onChange={(e) => {onChangeDisplayName(e)}} onKeyUp={(e) => keyUp(e)} value={styleState.style.registerScreenInfo.displayName} placeholder="your display name..."/>
    112136                    <span>Password:</span>
    113                     <input type="password" onChange={(e) => {onChangePassword(e)}} value={styleState.style.registerScreenInfo.password}/>
     137                    <input type="password" onChange={(e) => {onChangePassword(e)}} onKeyUp={(e) => keyUp(e)} value={styleState.style.registerScreenInfo.password} placeholder="your password..."/>
    114138                    <div style={{width: '100%', display: 'flex', flexDirection: 'row', justifyContent: 'space-between'}}>
    115139                        <button className="primaryButton" onClick={() => closeForm()}>Close Form</button>

  • components/blackjack/Blackjack.jsx

    r87614a5 r64dc53b  
    11import React from 'react'
    22
    3 import InGameHeader from '../../components/InGameHeader'
     3import BlackjackHeader from './BlackjackHeader'
    44
    55import Head from 'next/head'
    … …  
    1818      </Head>
    1919 
    20       <InGameHeader/>
     20      <BlackjackHeader/>
    2121
    2222      <PlayButtons/>

  • components/blackjack/BlackjackHeader.jsx

    r87614a5 r64dc53b  
    77import { AiOutlineArrowLeft } from 'react-icons/ai'
    88
    9 import { useState, useEffect } from 'react'
     9import { useEffect } from 'react'
    1010import { useDispatch, useSelector } from 'react-redux'
    1111
    12 import { setGame, setPlayer } from '../redux/reducers/playerSlice'
    13 import { setBlackjack, setStyle } from '../redux/reducers/styleSlice'
     12import { setGame, setPlayer } from '../../redux/reducers/playerSlice'
     13import { setBlackjack, setStyle } from '../../redux/reducers/styleSlice'
    1414
    1515import axios from 'axios';
    1616
    17 const InGameHeader = () => {
     17const BlackjackHeader = () => {
    1818    const dispatch = useDispatch();
    1919
    … …  
    267267}
    268268
    269 export default InGameHeader
     269export default BlackjackHeader

  • components/blackjack/Cards.jsx

    r87614a5 r64dc53b  
    22
    33import { useSelector } from 'react-redux'
    4 
    5 import { useState } from 'react'
    64
    75import Card from '../Card'
    … …  
    97const Cards = () => {
    108  const playerState = useSelector(state => state.player)
    11 
    12   let initialPos = {
    13     left: 70,
    14     top: 24,
    15   }
    169
    1710  let playerPos = {

  • components/blackjack/PlayButtons.jsx

    r87614a5 r64dc53b  
    88
    99import { useSelector, useDispatch } from 'react-redux'
    10 import { useState, useEffect } from 'react'
    1110
    1211import axios from 'axios';
Note: See TracChangeset for help on using the changeset viewer.