aly/servatrice
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

country dropdown (#4479)

Browse source
This commit is contained in:
Aren Kasner 2021-11-16 13:55:30 -08:00 committed by GitHub
parent 8b1daa21ef
commit 755a09bd83
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 379 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

@ -10,3 +10,4 @@ cmake-build-debug/
preferences preferences
compile_commands.json compile_commands.json
.vs/ .vs/
.vscode/

12
webclient/src/components/CountryDropdown/CountryDropdown.css Normal file
View file

@ -0,0 +1,12 @@
.CountryDropdown {
width: 100%;
}
.CountryDropdown-item {
display: flex;
}
.CountryDropdown-item__image {
width: 1.1em;
margin-right: 1em;
}

46
webclient/src/components/CountryDropdown/CountryDropdown.tsx Normal file
View file

@ -0,0 +1,46 @@
// eslint-disable-next-line
import React, { useEffect, useState } from 'react';
import { Select, MenuItem } from '@material-ui/core';
import FormControl from '@material-ui/core/FormControl';
import InputLabel from '@material-ui/core/InputLabel';
import { Images } from 'images/Images';
import './CountryDropdown.css';
import { CountryLabel } from 'types';
const CountryDropdown = ({ onChange }) => {
const [state, setState] = useState('');
return (
<FormControl variant='outlined' className='CountryDropdown'>
<InputLabel id='CountryDropdown-select'>Country</InputLabel>
<Select
id='CountryDropdown-select'
labelId='CountryDropdown-label'
label='Country'
margin='dense'
value={state}
fullWidth={true}
onChange={e => setState(e.target.value as string)}
>
<MenuItem value={''} key={-1}>
<div className="CountryDropdown-item">
<span className="CountryDropdown-item__label">None</span>
</div>
</MenuItem>
{
Object.keys(CountryLabel).map((country, index:number) => (
<MenuItem value={country} key={index}>
<div className="CountryDropdown-item">
<img className="CountryDropdown-item__image" src={Images.Countries[country.toLowerCase()]} alt={CountryLabel[country]} />
<span className="CountryDropdown-item__label">{CountryLabel[country.toUpperCase()] || country.toUpperCase()}</span>
</div>
</MenuItem>
))
}
</Select>
</FormControl>
)
};
export default CountryDropdown;

130
webclient/src/forms/RegisterForm/RegisterForm.tsx
View file

@ -1,66 +1,66 @@
// eslint-disable-next-line // eslint-disable-next-line
import React, { Component } from 'react'; import React, { Component } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { Form, Field, reduxForm, change } from 'redux-form' import { Form, Field, reduxForm, change } from 'redux-form'
import Button from '@material-ui/core/Button'; import Button from '@material-ui/core/Button';
import { InputField, KnownHosts } from 'components'; import { InputField, KnownHosts } from 'components';
import { FormKey } from 'types'; import { FormKey } from 'types';
import './RegisterForm.css'; import './RegisterForm.css';
const RegisterForm = (props) => { const RegisterForm = (props) => {
const { dispatch, handleSubmit } = props; const { dispatch, handleSubmit } = props;
const onHostChange = ({ host, port }) => { const onHostChange = ({ host, port }) => {
dispatch(change(FormKey.REGISTER, 'host', host)); dispatch(change(FormKey.REGISTER, 'host', host));
dispatch(change(FormKey.REGISTER, 'port', port)); dispatch(change(FormKey.REGISTER, 'port', port));
} }
return ( return (
<Form className="registerForm row" onSubmit={handleSubmit} autoComplete="off"> <Form className="registerForm row" onSubmit={handleSubmit} autoComplete="off">
<div className="leftRegisterForm column" > <div className="leftRegisterForm column" >
<div className="registerForm-item"> <div className="registerForm-item">
<KnownHosts onChange={onHostChange} /> <KnownHosts onChange={onHostChange} />
{ /* Padding is off */ } { /* Padding is off */ }
</div> </div>
<div className="registerForm-item"> <div className="registerForm-item">
<Field label="Country" name="country" component={InputField} /> <Field label="Country" name="country" component={InputField} />
</div> </div>
<div className="registerForm-item"> <div className="registerForm-item">
<Field label="Real Name" name="realName" component={InputField} /> <Field label="Real Name" name="realName" component={InputField} />
</div> </div>
<div className="registerForm-item"> <div className="registerForm-item">
<Field label="Email" name="email" type="email" component={InputField} /> <Field label="Email" name="email" type="email" component={InputField} />
</div> </div>
</div> </div>
<div className="rightRegisterForm column"> <div className="rightRegisterForm column">
<div className="registerForm-item"> <div className="registerForm-item">
<Field label="Player Name" name="user" component={InputField} /> <Field label="Player Name" name="user" component={InputField} />
</div> </div>
<div className="registerForm-item"> <div className="registerForm-item">
<Field label="Password" name="pass" type="password" component={InputField} /> <Field label="Password" name="pass" type="password" component={InputField} />
</div> </div>
<div className="registerForm-item"> <div className="registerForm-item">
<Field label="Password (again)" name="passwordConfirm" type="password" component={InputField} /> <Field label="Password (again)" name="passwordConfirm" type="password" component={InputField} />
</div> </div>
<Button className="registerForm-submit tall" color="primary" variant="contained" type="submit"> <Button className="registerForm-submit tall" color="primary" variant="contained" type="submit">
Register Register
</Button> </Button>
</div> </div>
</Form > </Form >
); );
}; };
const propsMap = { const propsMap = {
form: FormKey.REGISTER, form: FormKey.REGISTER,
}; };
const mapStateToProps = () => ({ const mapStateToProps = () => ({
initialValues: { initialValues: {
} }
}); });
export default connect(mapStateToProps)(reduxForm(propsMap)(RegisterForm)); export default connect(mapStateToProps)(reduxForm(propsMap)(RegisterForm));

4
webclient/src/images/countries/_Countries.ts
View file

@ -306,7 +306,7 @@ export const Countries = {
dj, dj,
dk, dk,
dm, dm,
_do, do: _do,
dz, dz,
ec, ec,
ee, ee,
@ -351,7 +351,7 @@ export const Countries = {
ie, ie,
il, il,
im, im,
_in, in: _in,
io, io,
iq, iq,
ir, ir,

252
webclient/src/types/countries.ts Normal file
View file

@ -0,0 +1,252 @@
export enum CountryLabel{
'AF'= 'Afghanistan',
'AX'= 'Åland Islands',
'AL'= 'Albania',
'DZ'= 'Algeria',
'AS'= 'American Samoa',
'AD'= 'Andorra',
'AO'= 'Angola',
'AI'= 'Anguilla',
'AQ'= 'Antarctica',
'AG'= 'Antigua and Barbuda',
'AR'= 'Argentina',
'AM'= 'Armenia',
'AW'= 'Aruba',
'AU'= 'Australia',
'AT'= 'Austria',
'AZ'= 'Azerbaijan',
'BH'= 'Bahrain',
'BS'= 'Bahamas',
'BD'= 'Bangladesh',
'BB'= 'Barbados',
'BY'= 'Belarus',
'BE'= 'Belgium',
'BZ'= 'Belize',
'BJ'= 'Benin',
'BM'= 'Bermuda',
'BT'= 'Bhutan',
'BO'= 'Plurinational State of Bolivia',
'BQ'= 'Sint Eustatius and Saba Bonaire',
'BA'= 'Bosnia and Herzegovina',
'BW'= 'Botswana',
'BV'= 'Bouvet Island',
'BR'= 'Brazil',
'IO'= 'British Indian Ocean Territory',
'BN'= 'Brunei Darussalam',
'BG'= 'Bulgaria',
'BF'= 'Burkina Faso',
'BI'= 'Burundi',
'KH'= 'Cambodia',
'CM'= 'Cameroon',
'CA'= 'Canada',
'CV'= 'Cape Verde',
'KY'= 'Cayman Islands',
'CF'= 'Central African Republic',
'TD'= 'Chad',
'CL'= 'Chile',
'CN'= 'China',
'CX'= 'Christmas Island',
'CC'= 'Cocos (Keeling) Islands',
'CO'= 'Colombia',
'KM'= 'Comoros',
'CG'= 'Congo',
'CD'= 'The Democratic Republic of the Congo',
'CK'= 'Cook Islands',
'CR'= 'Costa Rica',
'CI'= 'Côte d\'Ivoire',
'HR'= 'Croatia',
'CU'= 'Cuba',
'CW'= 'Curaçao',
'CY'= 'Cyprus',
'CZ'= 'Czech Republic',
'DK'= 'Denmark',
'DJ'= 'Djibouti',
'DM'= 'Dominica',
'DO'= 'Dominican Republic',
'EC'= 'Ecuador',
'EG'= 'Egypt',
'SV'= 'El Salvador',
'GQ'= 'Equatorial Guinea',
'ER'= 'Eritrea',
'EE'= 'Estonia',
'ET'= 'Ethiopia',
'EU'= 'European Union',
'FK'= 'Falkland Islands (Malvinas)',
'FO'= 'Faroe Islands',
'FJ'= 'Fiji',
'FI'= 'Finland',
'FR'= 'France',
'GF'= 'French Guiana',
'PF'= 'French Polynesia',
'TF'= 'French Southern Territories',
'GA'= 'Gabon',
'GM'= 'Gambia',
'GE'= 'Georgia',
'DE'= 'Germany',
'GH'= 'Ghana',
'GI'= 'Gibraltar',
'GR'= 'Greece',
'GL'= 'Greenland',
'GD'= 'Grenada',
'GP'= 'Guadeloupe',
'GU'= 'Guam',
'GT'= 'Guatemala',
'GG'= 'Guernsey',
'GN'= 'Guinea',
'GW'= 'Guinea-Bissau',
'GY'= 'Guyana',
'HT'= 'Haiti',
'HM'= 'Heard Island and McDonald Islands',
'VA'= 'Holy See (Vatican City State)',
'HN'= 'Honduras',
'HK'= 'Hong Kong',
'HU'= 'Hungary',
'IS'= 'Iceland',
'IN'= 'India',
'ID'= 'Indonesia',
'IR'= 'Islamic Republic of Iran',
'IQ'= 'Iraq',
'IE'= 'Ireland',
'IM'= 'Isle of Man',
'IL'= 'Israel',
'IT'= 'Italy',
'JM'= 'Jamaica',
'JP'= 'Japan',
'JE'= 'Jersey',
'JO'= 'Jordan',
'KZ'= 'Kazakhstan',
'KE'= 'Kenya',
'KI'= 'Kiribati',
'KP'= 'Democratic People\'s Republic of Korea',
'KR'= 'Republic of Korea',
'KW'= 'Kuwait',
'KG'= 'Kyrgyzstan',
'LA'= 'Lao People\'s Democratic Republic',
'LV'= 'Latvia',
'LB'= 'Lebanon',
'LS'= 'Lesotho',
'LR'= 'Liberia',
'LY'= 'Libya',
'LI'= 'Liechtenstein',
'LT'= 'Lithuania',
'LU'= 'Luxembourg',
'MO'= 'Macao',
'MK'= 'The Former Yugoslav Republic of Macedonia',
'MG'= 'Madagascar',
'MW'= 'Malawi',
'MY'= 'Malaysia',
'MV'= 'Maldives',
'ML'= 'Mali',
'MT'= 'Malta',
'MH'= 'Marshall Islands',
'MQ'= 'Martinique',
'MR'= 'Mauritania',
'MU'= 'Mauritius',
'YT'= 'Mayotte',
'MX'= 'Mexico',
'FM'= 'Federated States of Micronesia',
'MD'= 'Republic of Moldova',
'MC'= 'Monaco',
'MN'= 'Mongolia',
'ME'= 'Montenegro',
'MS'= 'Montserrat',
'MA'= 'Morocco',
'MZ'= 'Mozambique',
'MM'= 'Myanmar',
'NA'= 'Namibia',
'NR'= 'Nauru',
'NP'= 'Nepal',
'NL'= 'Netherlands',
'NC'= 'New Caledonia',
'NZ'= 'New Zealand',
'NI'= 'Nicaragua',
'NE'= 'Niger',
'NG'= 'Nigeria',
'NU'= 'Niue',
'NF'= 'Norfolk Island',
'MP'= 'Northern Mariana Islands',
'NO'= 'Norway',
'OM'= 'Oman',
'PK'= 'Pakistan',
'PW'= 'Palau',
'PS'= 'State of Palestine',
'PA'= 'Panama',
'PG'= 'Papua New Guinea',
'PY'= 'Paraguay',
'PE'= 'Peru',
'PH'= 'Philippines',
'PN'= 'Pitcairn',
'PL'= 'Poland',
'PT'= 'Portugal',
'PR'= 'Puerto Rico',
'QA'= 'Qatar',
'RE'= 'Réunion',
'RO'= 'Romania',
'RU'= 'Russian Federation',
'RW'= 'Rwanda',
'BL'= 'Saint Barthélemy',
'SH'= 'Ascension and Tristan da Cunha Saint Helena',
'KN'= 'Saint Kitts and Nevis',
'LC'= 'Saint Lucia',
'MF'= 'Saint Martin (French part)',
'PM'= 'Saint Pierre and Miquelon',
'VC'= 'Saint Vincent and the Grenadines',
'WS'= 'Samoa',
'SM'= 'San Marino',
'ST'= 'Sao Tome and Principe',
'SA'= 'Saudi Arabia',
'SN'= 'Senegal',
'RS'= 'Serbia',
'SC'= 'Seychelles',
'SL'= 'Sierra Leone',
'SG'= 'Singapore',
'SX'= 'Sint Maarten (Dutch part)',
'SK'= 'Slovakia',
'SI'= 'Slovenia',
'SB'= 'Solomon Islands',
'SO'= 'Somalia',
'ZA'= 'South Africa',
'GS'= 'South Georgia and the South Sandwich Islands',
'SS'= 'South Sudan',
'ES'= 'Spain',
'LK'= 'Sri Lanka',
'SD'= 'Sudan',
'SR'= 'Suriname',
'SJ'= 'Svalbard and Jan Mayen',
'SZ'= 'Swaziland',
'SE'= 'Sweden',
'CH'= 'Switzerland',
'SY'= 'Syrian Arab Republic',
'TW'= 'Taiwan',
'TJ'= 'Tajikistan',
'TZ'= 'United Republic of Tanzania',
'TH'= 'Thailand',
'TL'= 'Timor-Leste',
'TG'= 'Togo',
'TK'= 'Tokelau',
'TO'= 'Tonga',
'TT'= 'Trinidad and Tobago',
'TN'= 'Tunisia',
'TR'= 'Turkey',
'TM'= 'Turkmenistan',
'TC'= 'Turks and Caicos Islands',
'TV'= 'Tuvalu',
'UG'= 'Uganda',
'UA'= 'Ukraine',
'AE'= 'United Arab Emirates',
'GB'= 'United Kingdom',
'US'= 'United States',
'UM'= 'United States Minor Outlying Islands',
'UY'= 'Uruguay',
'UZ'= 'Uzbekistan',
'VU'= 'Vanuatu',
'VE'= 'Bolivarian Republic of Venezuela',
'VN'= 'Viet Nam',
'VG'= 'British Virgin Islands',
'VI'= 'U.S. Virgin Islands',
'WF'= 'Wallis and Futuna',
'EH'= 'Western Sahara',
'YE'= 'Yemen',
'ZM'= 'Zambia',
'ZW'= 'Zimbabwe'
};

1
webclient/src/types/index.ts
View file

@ -1,5 +1,6 @@
export * from './cards'; export * from './cards';
export * from './constants'; export * from './constants';
export * from './countries';
export * from './game'; export * from './game';
export * from './room'; export * from './room';
export * from './server'; export * from './server';