Skip to content

Commit

Permalink
type set selection
Browse files Browse the repository at this point in the history
  • Loading branch information
lewisc64 committed Aug 21, 2024
1 parent d185f06 commit 4c66372
Show file tree
Hide file tree
Showing 8 changed files with 393 additions and 33 deletions.
40 changes: 30 additions & 10 deletions quick-pokemon-type-matchup/src/App.jsx
Original file line number Diff line number Diff line change
@@ -1,20 +1,22 @@
import { useState, useEffect } from 'react';
import { useState, useEffect, useCallback } from 'react';
import { css } from '@emotion/react';
import TypeChartSelector from './components/TypeChartSelector';
import TypeSelectList from './components/TypeSelectList';
import Information from './components/Information';

import TypesMainLatest from './data/types_main_latest.json';
import './App.css';

function App() {
const [types, setTypes] = useState([]);
const [types, setTypes] = useState(TypesMainLatest);
const [selectedTypes, setSelectedTypes] = useState([]);

useEffect(() => {
async function fetchData() {
const response = await fetch('./types.json');
setTypes(await response.json());
}
fetchData();
const updateTypes = useCallback((newTypes) => {
setTypes(newTypes);
}, []);

const updateSelectedTypes = useCallback((newSelectedTypes) => {
setSelectedTypes(newSelectedTypes);
}, []);

return (
Expand All @@ -29,13 +31,31 @@ function App() {
css={css`
width: 14rem;
height: 100dvh;
overflow-y: scroll;
@media (max-width: 1000px) {
width: 7rem;
}
display: flex;
flex-direction: column;
`}
>
<TypeSelectList types={types} updateSelectedTypes={setSelectedTypes} />
<TypeChartSelector
css={css`
margin: 0.5rem;
`}
setTypesCallback={updateTypes}
/>
<div
css={css`
flex-grow: 1;
min-height: 0;
overflow-y: scroll;
`}
>
<TypeSelectList
types={types}
updateSelectedTypes={updateSelectedTypes}
/>
</div>
</div>
<div
css={css`
Expand Down
7 changes: 4 additions & 3 deletions quick-pokemon-type-matchup/src/components/DamageDisplay.jsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import React from 'react';
import { css } from '@emotion/react';
import TypeViewText from './TypeViewText';
import DamageNumber from './DamageNumber';
Expand Down Expand Up @@ -30,10 +31,10 @@ const DamageDisplay = ({ yourTypes, yourDamages, theirTypes, theirDamage }) => {
`}
>
{theirTypes.map((type, i) => (
<>
<TypeViewText key={i} type={type} />
<React.Fragment key={i}>
<TypeViewText type={type} />
{i < theirTypes.length - 1 ? ', ' : ''}
</>
</React.Fragment>
))}
</div>
</div>
Expand Down
69 changes: 69 additions & 0 deletions quick-pokemon-type-matchup/src/components/TypeChartSelector.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
import { useState } from 'react';
import { css } from '@emotion/react';

import TypesMainGen1 from '../data/types_main_gen1.json';
import TypesMainGen2 from '../data/types_main_gen2_5.json';
import TypesMainLatest from '../data/types_main_latest.json';

const TYPE_OPTIONS = ['main_gen1', 'main_gen2_5', 'main_latest'];

const DEFAULT_OPTION = 'main_latest';

const TYPE_DATA_MAP = {
main_gen1: TypesMainGen1,
main_gen2_5: TypesMainGen2,
main_latest: TypesMainLatest,
};

const TYPE_OPTION_LABEL_MAP = {
main_gen1: 'Gen 1',
main_gen2_5: 'Gen 2 - 5',
main_latest: 'Gen 6+',
};

const TypeChartSelector = ({ setTypesCallback, className }) => {
const [selectedOption, setSelectedOption] = useState(DEFAULT_OPTION);

const updateOption = (newOption) => {
setSelectedOption(newOption);
setTypesCallback(TYPE_DATA_MAP[newOption]);
};

return (
<div
className={className}
css={css`
color: white;
display: flex;
flex-wrap: wrap;
column-gap: 0.5rem;
row-gap: 0.2rem;
align-items: center;
`}
>
<p
css={css`
margin: 0;
`}
>
Type set:
</p>
<select
css={css`
flex-grow: 1;
min-width: 0;
`}
value={selectedOption}
onChange={(e) => updateOption(e.target.value)}
>
{TYPE_OPTIONS.map((typeOption) => (
<option key={typeOption} value={typeOption}>
{TYPE_OPTION_LABEL_MAP[typeOption]}
</option>
))}
</select>
</div>
);
};

export default TypeChartSelector;
38 changes: 24 additions & 14 deletions quick-pokemon-type-matchup/src/components/TypeSelectList.jsx
Original file line number Diff line number Diff line change
@@ -1,32 +1,42 @@
import { useState, useEffect, useCallback } from 'react';
import { useState, useEffect, useRef, useCallback } from 'react';
import { css } from '@emotion/react';
import { MAXIMUM_TYPES_SELECTED } from '../constants';
import TypeViewButton from './TypeViewButton';

const TypeSelectList = ({ types, updateSelectedTypes }) => {
const typeReferenceTracker = useRef(null);
const [selected, setSelected] = useState([]);

const toggleSelected = useCallback((type) => {
setSelected((previous) => {
let newSelected = [];

if (previous.includes(type)) {
newSelected = previous.filter((x) => x.name != type.name);
const toggleSelected = useCallback(
(type) => {
let newSelected;
if (selected.includes(type)) {
newSelected = selected.filter((x) => x.name != type.name);
} else {
newSelected = [...previous, type];
newSelected = [...selected, type];
}

if (newSelected.length > MAXIMUM_TYPES_SELECTED) {
newSelected = newSelected.slice(1);
}

return newSelected;
});
}, []);
setSelected(newSelected);
updateSelectedTypes(newSelected);
},
[selected]
);

useEffect(() => {
updateSelectedTypes(selected);
}, [selected]);
if (typeReferenceTracker.current != types) {
typeReferenceTracker.current = types;
const selectedNames = selected.map((y) => y.name);
const newSelected = types.filter((x) => selectedNames.includes(x.name));
setSelected(newSelected);
updateSelectedTypes(newSelected);
}
}, [types, selected]);

const selectedNames = selected.map((x) => x.name);

return (
<ul
Expand All @@ -41,7 +51,7 @@ const TypeSelectList = ({ types, updateSelectedTypes }) => {
<li key={x.name}>
<TypeViewButton
type={x}
selected={selected.includes(x)}
selected={selectedNames.includes(x.name)}
clickCallback={toggleSelected}
/>
</li>
Expand Down
7 changes: 4 additions & 3 deletions quick-pokemon-type-matchup/src/components/YourTypeReadout.jsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
import React from 'react';
import TypeViewText from './TypeViewText';

const YourTypeReadout = ({ selectedTypes }) => {
return (
<p>
You are a{'aeiou'.includes(selectedTypes[0].name[0]) ? 'n' : ''}{' '}
{selectedTypes.map((x) => (
<>
<TypeViewText key={x.name} type={x} />{' '}
</>
<React.Fragment key={x.name}>
<TypeViewText type={x} />{' '}
</React.Fragment>
))}
Pok&eacute;mon!
</p>
Expand Down
107 changes: 107 additions & 0 deletions quick-pokemon-type-matchup/src/data/types_main_gen1.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
[
{
"name": "normal",
"color": "#A0A0A0",
"superEffective": [],
"notVeryEffective": ["rock"],
"noEffect": ["ghost"]
},
{
"name": "fire",
"color": "#FFAA66",
"superEffective": ["grass", "ice", "bug"],
"notVeryEffective": ["fire", "water", "rock", "dragon"],
"noEffect": []
},
{
"name": "water",
"color": "#66AAFF",
"superEffective": ["fire", "ground", "rock"],
"notVeryEffective": ["water", "grass", "dragon"],
"noEffect": []
},
{
"name": "electric",
"color": "#FFDC60",
"superEffective": ["water", "flying"],
"notVeryEffective": ["electric", "grass", "dragon"],
"noEffect": ["ground"]
},
{
"name": "grass",
"color": "#6AD854",
"superEffective": ["water", "ground", "rock"],
"notVeryEffective": ["fire", "grass", "poison", "flying", "bug", "dragon"],
"noEffect": []
},
{
"name": "ice",
"color": "#B6EAE4",
"superEffective": ["grass", "ground", "flying", "dragon"],
"notVeryEffective": ["water", "ice"],
"noEffect": []
},
{
"name": "fighting",
"color": "#E85564",
"superEffective": ["normal", "ice", "rock"],
"notVeryEffective": ["poison", "flying", "psychic", "bug"],
"noEffect": ["ghost"]
},
{
"name": "poison",
"color": "#BC74B1",
"superEffective": ["grass", "bug"],
"notVeryEffective": ["poison", "ground", "rock", "ghost"],
"noEffect": []
},
{
"name": "ground",
"color": "#BA7A5D",
"superEffective": ["fire", "electric", "poison", "rock"],
"notVeryEffective": ["grass", "bug"],
"noEffect": ["flying"]
},
{
"name": "flying",
"color": "#AABFE2",
"superEffective": ["grass", "fighting", "bug"],
"notVeryEffective": ["electric", "rock"],
"noEffect": []
},
{
"name": "psychic",
"color": "#E07277",
"superEffective": ["fighting", "poison"],
"notVeryEffective": ["psychic"],
"noEffect": []
},
{
"name": "bug",
"color": "#ADDD82",
"superEffective": ["grass", "psychic", "poison"],
"notVeryEffective": ["fire", "fighting", "flying", "ghost"],
"noEffect": []
},
{
"name": "rock",
"color": "#DBD0B3",
"superEffective": ["fire", "ice", "flying", "bug"],
"notVeryEffective": ["fighting", "ground"],
"noEffect": []
},
{
"name": "ghost",
"color": "#7488BC",
"superEffective": ["ghost"],
"notVeryEffective": [],
"noEffect": ["normal", "psychic"]
},
{
"name": "dragon",
"color": "#3276B5",
"superEffective": ["dragon"],
"notVeryEffective": [],
"noEffect": []
}
]
Loading

0 comments on commit 4c66372

Please sign in to comment.