diff --git a/IT2810 b/IT2810 new file mode 120000 index 0000000..fd9a88f --- /dev/null +++ b/IT2810 @@ -0,0 +1 @@ +IT2810 \ No newline at end of file diff --git a/README.md b/README.md index 85b3197..be5c460 100644 --- a/README.md +++ b/README.md @@ -13,9 +13,9 @@ The current implementation includes: - A MariaDB database containing Pokémon data. - A GraphQL API built with Node.js, TypeScript, and Apollo Server. - GraphQL queries for retrieving lists of Pokémon and individual Pokémon by ID. -- A React frontend using Apollo Client to retrieve and display Pokémon. +- A React frontend using Apollo Client to search for Pokémon and build a team. -The frontend currently displays a list of Pokémon. Search, team building, and other planned features are not yet fully implemented. +The frontend displays search results and team members as Pokémon cards with sprites, names and types. Further features such as stats overviews are still under development. ## Dataset diff --git a/backend/README.md b/backend/README.md index d7fd581..e2183e9 100644 --- a/backend/README.md +++ b/backend/README.md @@ -78,11 +78,12 @@ query { id name type + sprite } } ``` -This query returns Pokémon records with their IDs, names and types. +This query returns Pokémon records with their IDs, names, types and sprite file names. `sprite` is the file name in `SPRITES_DIR`, or `null` when no sprite exists. ### Retrieve a Pokémon by ID @@ -92,6 +93,7 @@ query { id name type + sprite } } ``` @@ -150,6 +152,7 @@ The tests use `http://localhost:3001/` by default. To test another endpoint, set - Retrieving the Pokémon list - Retrieving a Pokémon by ID +- Retrieving a Pokémon's sprite file name - Returning `null` for an unknown Pokémon ID - Rejecting a query containing an invalid GraphQL field diff --git a/backend/src/graphql/api.test.ts b/backend/src/graphql/api.test.ts index 1336754..c1d233a 100644 --- a/backend/src/graphql/api.test.ts +++ b/backend/src/graphql/api.test.ts @@ -104,6 +104,26 @@ describe("GraphQL API integration", () => { expect(body.data?.pokemon).toEqual(firstPokemon); }); + it("returns the sprite file name for a Pokémon", async () => { + const { response, body } = await sendQuery<{ + pokemon: { id: string; sprite: string | null } | null; + }>( + ` + query GetPokemon($id: ID!) { + pokemon(id: $id) { + id + sprite + } + } + `, + { id: "bulbasaur" }, + ); + + expect(response.status).toBe(200); + expect(body.errors).toBeUndefined(); + expect(body.data?.pokemon?.sprite).toBe("bulbasaur.png"); + }); + it("returns null for an unknown Pokémon ID", async () => { const { response, body } = await sendQuery<{ pokemon: Pokemon | null; diff --git a/backend/src/graphql/resolvers.ts b/backend/src/graphql/resolvers.ts index 8b495a1..e084cb3 100644 --- a/backend/src/graphql/resolvers.ts +++ b/backend/src/graphql/resolvers.ts @@ -47,6 +47,7 @@ export const resolvers = { `SELECT p.id, p.name, + p.sprite, COALESCE( GROUP_CONCAT(t.name ORDER BY pt.slot SEPARATOR ', '), '' @@ -54,7 +55,7 @@ export const resolvers = { FROM pokemon p LEFT JOIN pokemon_types pt ON pt.pokemon_id = p.id LEFT JOIN types t ON t.id = pt.type_id - GROUP BY p.id, p.name + GROUP BY p.id, p.name, p.sprite ORDER BY p.num, p.name`, ); @@ -66,6 +67,7 @@ export const resolvers = { `SELECT p.id, p.name, + p.sprite, COALESCE( GROUP_CONCAT(t.name ORDER BY pt.slot SEPARATOR ', '), '' @@ -74,7 +76,7 @@ export const resolvers = { LEFT JOIN pokemon_types pt ON pt.pokemon_id = p.id LEFT JOIN types t ON t.id = pt.type_id WHERE p.id = ? - GROUP BY p.id, p.name`, + GROUP BY p.id, p.name, p.sprite`, [id], ); @@ -82,6 +84,7 @@ export const resolvers = { id: string; name: string; type: string; + sprite: string | null; }[]; return pokemonRows[0] ?? null; @@ -189,6 +192,7 @@ export const resolvers = { p.name, p.gen, p.num, + p.sprite, COALESCE( GROUP_CONCAT(t.name ORDER BY pt.slot SEPARATOR ', '), '' @@ -197,7 +201,7 @@ export const resolvers = { LEFT JOIN pokemon_types pt ON pt.pokemon_id = p.id LEFT JOIN types t ON t.id = pt.type_id WHERE ${conditions.join(" AND ")} - GROUP BY p.id, p.name, p.gen, p.num + GROUP BY p.id, p.name, p.gen, p.num, p.sprite ORDER BY ${orderBy} LIMIT ? OFFSET ?`, [...parameters, limit, offset], diff --git a/backend/src/graphql/schema.ts b/backend/src/graphql/schema.ts index c70c7bf..a142abf 100644 --- a/backend/src/graphql/schema.ts +++ b/backend/src/graphql/schema.ts @@ -3,6 +3,7 @@ export const typeDefs = `#graphql id: ID! name: String! type: String! + sprite: String } type PokemonSearchResult { @@ -11,6 +12,7 @@ export const typeDefs = `#graphql type: String! gen: Int! num: Int! + sprite: String } type TypeEffectiveness { diff --git a/changed, 1024 insertions(+), 136 deletions(-) b/changed, 1024 insertions(+), 136 deletions(-) new file mode 100644 index 0000000..333a0b5 --- /dev/null +++ b/changed, 1024 insertions(+), 136 deletions(-) @@ -0,0 +1,258 @@ + + SSUUMMMMAARRYY OOFF LLEESSSS CCOOMMMMAANNDDSS + + Commands marked with * may be preceded by a number, _N. + Notes in parentheses indicate the behavior if _N is given. + A key preceded by a caret indicates the Ctrl key; thus ^K is ctrl-K. + + h H Display this help. + q :q Q :Q ZZ Exit. + --------------------------------------------------------------------------- + + MMOOVVIINNGG + + e ^E j ^N CR * Forward one line (or _N lines). + y ^Y k ^K ^P * Backward one line (or _N lines). + f ^F ^V SPACE * Forward one window (or _N lines). + b ^B ESC-v * Backward one window (or _N lines). + z * Forward one window (and set window to _N). + w * Backward one window (and set window to _N). + ESC-SPACE * Forward one window, but don't stop at end-of-file. + d ^D * Forward one half-window (and set half-window to _N). + u ^U * Backward one half-window (and set half-window to _N). + ESC-) RightArrow * Right one half screen width (or _N positions). + ESC-( LeftArrow * Left one half screen width (or _N positions). + ESC-} ^RightArrow Right to last column displayed. + ESC-{ ^LeftArrow Left to first column. + F Forward forever; like "tail -f". + ESC-F Like F but stop when search pattern is found. + r ^R ^L Repaint screen. + R Repaint screen, discarding buffered input. + --------------------------------------------------- + Default "window" is the screen height. + Default "half-window" is half of the screen height. + --------------------------------------------------------------------------- + + SSEEAARRCCHHIINNGG + + /_p_a_t_t_e_r_n * Search forward for (_N-th) matching line. + ?_p_a_t_t_e_r_n * Search backward for (_N-th) matching line. + n * Repeat previous search (for _N-th occurrence). + N * Repeat previous search in reverse direction. + ESC-n * Repeat previous search, spanning files. + ESC-N * Repeat previous search, reverse dir. & spanning files. + ESC-u Undo (toggle) search highlighting. + ESC-U Clear search highlighting. + &_p_a_t_t_e_r_n * Display only matching lines. + --------------------------------------------------- + A search pattern may begin with one or more of: + ^N or ! Search for NON-matching lines. + ^E or * Search multiple files (pass thru END OF FILE). + ^F or @ Start search at FIRST file (for /) or last file (for ?). + ^K Highlight matches, but don't move (KEEP position). + ^R Don't use REGULAR EXPRESSIONS. + ^W WRAP search if no match found. + --------------------------------------------------------------------------- + + JJUUMMPPIINNGG + + g < ESC-< * Go to first line in file (or line _N). + G > ESC-> * Go to last line in file (or line _N). + p % * Go to beginning of file (or _N percent into file). + t * Go to the (_N-th) next tag. + T * Go to the (_N-th) previous tag. + { ( [ * Find close bracket } ) ]. + } ) ] * Find open bracket { ( [. + ESC-^F _<_c_1_> _<_c_2_> * Find close bracket _<_c_2_>. + ESC-^B _<_c_1_> _<_c_2_> * Find open bracket _<_c_1_>. + --------------------------------------------------- + Each "find close bracket" command goes forward to the close bracket + matching the (_N-th) open bracket in the top line. + Each "find open bracket" command goes backward to the open bracket + matching the (_N-th) close bracket in the bottom line. + + m_<_l_e_t_t_e_r_> Mark the current top line with . + M_<_l_e_t_t_e_r_> Mark the current bottom line with . + '_<_l_e_t_t_e_r_> Go to a previously marked position. + '' Go to the previous position. + ^X^X Same as '. + ESC-M_<_l_e_t_t_e_r_> Clear a mark. + --------------------------------------------------- + A mark is any upper-case or lower-case letter. + Certain marks are predefined: + ^ means beginning of the file + $ means end of the file + --------------------------------------------------------------------------- + + CCHHAANNGGIINNGG FFIILLEESS + + :e [_f_i_l_e] Examine a new file. + ^X^V Same as :e. + :n * Examine the (_N-th) next file from the command line. + :p * Examine the (_N-th) previous file from the command line. + :x * Examine the first (or _N-th) file from the command line. + :d Delete the current file from the command line list. + = ^G :f Print current file name. + --------------------------------------------------------------------------- + + MMIISSCCEELLLLAANNEEOOUUSS CCOOMMMMAANNDDSS + + -_<_f_l_a_g_> Toggle a command line option [see OPTIONS below]. + --_<_n_a_m_e_> Toggle a command line option, by name. + __<_f_l_a_g_> Display the setting of a command line option. + ___<_n_a_m_e_> Display the setting of an option, by name. + +_c_m_d Execute the less cmd each time a new file is examined. + + !_c_o_m_m_a_n_d Execute the shell command with $SHELL. + |XX_c_o_m_m_a_n_d Pipe file between current pos & mark XX to shell command. + s _f_i_l_e Save input to a file. + v Edit the current file with $VISUAL or $EDITOR. + V Print version number of "less". + --------------------------------------------------------------------------- + + OOPPTTIIOONNSS + + Most options may be changed either on the command line, + or from within less by using the - or -- command. + Options may be given in one of two forms: either a single + character preceded by a -, or a name preceded by --. + + -? ........ --help + Display help (from command line). + -a ........ --search-skip-screen + Search skips current screen. + -A ........ --SEARCH-SKIP-SCREEN + Search starts just after target line. + -b [_N] .... --buffers=[_N] + Number of buffers. + -B ........ --auto-buffers + Don't automatically allocate buffers for pipes. + -c ........ --clear-screen + Repaint by clearing rather than scrolling. + -d ........ --dumb + Dumb terminal. + -D xx_c_o_l_o_r . --color=xx_c_o_l_o_r + Set screen colors. + -e -E .... --quit-at-eof --QUIT-AT-EOF + Quit at end of file. + -f ........ --force + Force open non-regular files. + -F ........ --quit-if-one-screen + Quit if entire file fits on first screen. + -g ........ --hilite-search + Highlight only last match for searches. + -G ........ --HILITE-SEARCH + Don't highlight any matches for searches. + -h [_N] .... --max-back-scroll=[_N] + Backward scroll limit. + -i ........ --ignore-case + Ignore case in searches that do not contain uppercase. + -I ........ --IGNORE-CASE + Ignore case in all searches. + -j [_N] .... --jump-target=[_N] + Screen position of target lines. + -J ........ --status-column + Display a status column at left edge of screen. + -k [_f_i_l_e] . --lesskey-file=[_f_i_l_e] + Use a lesskey file. + -K ........ --quit-on-intr + Exit less in response to ctrl-C. + -L ........ --no-lessopen + Ignore the LESSOPEN environment variable. + -m -M .... --long-prompt --LONG-PROMPT + Set prompt style. + -n -N .... --line-numbers --LINE-NUMBERS + Don't use line numbers. + -o [_f_i_l_e] . --log-file=[_f_i_l_e] + Copy to log file (standard input only). + -O [_f_i_l_e] . --LOG-FILE=[_f_i_l_e] + Copy to log file (unconditionally overwrite). + -p [_p_a_t_t_e_r_n] --pattern=[_p_a_t_t_e_r_n] + Start at pattern (from command line). + -P [_p_r_o_m_p_t] --prompt=[_p_r_o_m_p_t] + Define new prompt. + -q -Q .... --quiet --QUIET --silent --SILENT + Quiet the terminal bell. + -r -R .... --raw-control-chars --RAW-CONTROL-CHARS + Output "raw" control characters. + -s ........ --squeeze-blank-lines + Squeeze multiple blank lines. + -S ........ --chop-long-lines + Chop (truncate) long lines rather than wrapping. + -t [_t_a_g] .. --tag=[_t_a_g] + Find a tag. + -T [_t_a_g_s_f_i_l_e] --tag-file=[_t_a_g_s_f_i_l_e] + Use an alternate tags file. + -u -U .... --underline-special --UNDERLINE-SPECIAL + Change handling of backspaces. + -V ........ --version + Display the version number of "less". + -w ........ --hilite-unread + Highlight first new line after forward-screen. + -W ........ --HILITE-UNREAD + Highlight first new line after any forward movement. + -x [_N[,...]] --tabs=[_N[,...]] + Set tab stops. + -X ........ --no-init + Don't use termcap init/deinit strings. + -y [_N] .... --max-forw-scroll=[_N] + Forward scroll limit. + -z [_N] .... --window=[_N] + Set size of window. + -" [_c[_c]] . --quotes=[_c[_c]] + Set shell quote characters. + -~ ........ --tilde + Don't display tildes after end of file. + -# [_N] .... --shift=[_N] + Set horizontal scroll amount (0 = one half screen width). + --file-size + Automatically determine the size of the input file. + --follow-name + The F command changes files if the input file is renamed. + --incsearch + Search file as each pattern character is typed in. + --line-num-width=N + Set the width of the -N line number field to N characters. + --mouse + Enable mouse input. + --no-keypad + Don't send termcap keypad init/deinit strings. + --no-histdups + Remove duplicates from command history. + --rscroll=C + Set the character used to mark truncated lines. + --save-marks + Retain marks across invocations of less. + --status-col-width=N + Set the width of the -J status column to N characters. + --use-backslash + Subsequent options use backslash as escape char. + --use-color + Enables colored text. + --wheel-lines=N + Each click of the mouse wheel moves N lines. + + + --------------------------------------------------------------------------- + + LLIINNEE EEDDIITTIINNGG + + These keys can be used to edit text being entered + on the "command line" at the bottom of the screen. + + RightArrow ..................... ESC-l ... Move cursor right one character. + LeftArrow ...................... ESC-h ... Move cursor left one character. + ctrl-RightArrow ESC-RightArrow ESC-w ... Move cursor right one word. + ctrl-LeftArrow ESC-LeftArrow ESC-b ... Move cursor left one word. + HOME ........................... ESC-0 ... Move cursor to start of line. + END ............................ ESC-$ ... Move cursor to end of line. + BACKSPACE ................................ Delete char to left of cursor. + DELETE ......................... ESC-x ... Delete char under cursor. + ctrl-BACKSPACE ESC-BACKSPACE ........... Delete word to left of cursor. + ctrl-DELETE .... ESC-DELETE .... ESC-X ... Delete word under cursor. + ctrl-U ......... ESC (MS-DOS only) ....... Delete entire line. + UpArrow ........................ ESC-k ... Retrieve previous command line. + DownArrow ...................... ESC-j ... Retrieve next command line. + TAB ...................................... Complete filename & cycle. + SHIFT-TAB ...................... ESC-TAB Complete filename & reverse cycle. + ctrl-L ................................... Complete filename, list all. diff --git a/docs/database-setup.md b/docs/database-setup.md index 58ad120..e7045fc 100644 --- a/docs/database-setup.md +++ b/docs/database-setup.md @@ -63,9 +63,11 @@ total) and stores each sprite's file name in `pokemon.sprite`. The images themselves are plain files on disk, not stored in the database. Sprites already on disk are not downloaded again. -Locally they go to `backend/sprites/` (gitignored). On the VM, the project is -served by Apache under `/project2`, so set `SPRITES_DIR` in `backend/.env` to a -folder inside Apache's document root: +Locally they go to `backend/sprites/` (gitignored), and the Vite development +server serves that folder at `/sprites/` (see `frontend/vite.config.ts`), so no +extra web server is needed during development. On the VM, the project is served +by Apache under `/project2`, so set `SPRITES_DIR` in `backend/.env` to a folder +inside Apache's document root: ``` SPRITES_DIR=/var/www/html/project2/sprites diff --git a/erver and schema b/erver and schema new file mode 100644 index 0000000..86d2696 --- /dev/null +++ b/erver and schema @@ -0,0 +1,59 @@ +025b247 (HEAD -> 74-pokemon-list-element) feat(frontend): bring webview in line with figma +2e33c65 feat(backend): add pokemon sprites to graphql resolvers +b5a897b test(backend): expand pagination and sorting coverage +a67eaa2 feat: implements pagination and filtering with sorting options +fb880f5 fix: typo +bd75f7a feat(backend): download Pokémon sprites during import +49579bd feat: force dark mode +f0ca2f2 test(backend): add GraphQL API integration tests +abcd685 Added forgotten backend files to commit +d59a247 TOuchups from reviews +233e415 Added forgotten files last commit +698a0b1 Added type matchup tab +bae0a45 Added search meny to the UI, with test. +de96306 Make sidebar menu actually navigate between pages. Re-added correct colors. +24f191c (origin/35-test-database-queries) chore: added point list to the issue in the pr template +c292daa fix(flake): define temp dir for mariadb +715ef61 feat: set up a local mariadb instance from the nix flake +73bfd0e Update page.tsx +9c6c1c7 chore: scaffold frontend directories +55a85f1 docs: add new figma prototype +ae2ad34 add project link to root readme +c2d5366 docs: improve project documentation +4ee48a1 refactor(backend): separate GraphQL schema and resolvers +986bb81 fix(backend): align database connection and error handling +8f9264a feat(backend): connect GraphQL resolvers to MySQL +c9c9261 Set up initial GraphQL server and schema +0585edb feat(backend): created script for importing the dataset from showdown +1be9dc6 Updates server.ts to handle errors +2a1f044 Updates readme with backend setup and frontend integration +467e26a feat(frontend): connect Apollo Client to GraphQL API +5f57832 feat(backend): connect GraphQL resolvers to MySQL +43784d9 Set up initial GraphQL server and schema +450f97a chore: update package-lock.json +840bf8f docs: fix and clarify database setup documentation +1cc8e0f chore: override npm package versions from showdown +8153ef4 docs: document the database setup process +baebf43 feat(backend): created script for importing the dataset from showdown +bfe29de Merge pull request #46 from IT2810-H26/21-standardize-issues +f562c68 refactor: renamed PokemonDraftPlanner to frontend +52a9c69 chore: create nix flake +3aa6dc5 moves issue template out of folder for easy access +9466c05 fix: moved issue template into folder +949e13d docs: document our git workflow +736b1f3 fix: moved issue template into folder +a132a3a Merge pull request #39 from IT2810-H26/21-standardize-issues +6aa62dd Create issue_template +71b8a76 Initiialised the Vite project with React and Typescript with React compiler. +36eae3a docs: add gitub pull request template (#20) +11b203c Merge pull request #14 from IT2810-H26/1-figma-prototype +24efb45 Add Figma prototype and architecture to Readme +48c25fe Update README.md +d20f319 Update README.md +aa85c97 Update README.md +e5106ef Update README.md +e7d0a51 Merge pull request #13 from IT2810-H26/docs/architecture +244e797 style: add a line between the diagram and the previous paragraph +94e90b1 chore: document the system architecture +1d83e08 Add CODEOWNERS +bd44a66 Add README diff --git a/frontend/.env.example b/frontend/.env.example new file mode 100644 index 0000000..ec3d68c --- /dev/null +++ b/frontend/.env.example @@ -0,0 +1,4 @@ +# Base URL used by Pokémon cards to load sprites. +# In development Vite serves backend/sprites/ at /sprites/ (see vite.config.ts). +# When building for the Apache deployment, set VITE_SPRITES_BASE_URL=/project2/sprites/ +VITE_SPRITES_BASE_URL=/sprites/ diff --git a/frontend/README.md b/frontend/README.md index c4f7998..941ba65 100644 --- a/frontend/README.md +++ b/frontend/README.md @@ -33,9 +33,21 @@ The frontend uses Apollo Client to retrieve Pokémon data from the backend. The The backend currently provides queries for retrieving a list of Pokémon and an individual Pokémon by ID. See the [backend README](../backend/README.md) for setup instructions and example queries. +## Sprites + +Pokémon cards load sprites from `VITE_SPRITES_BASE_URL` (default `/sprites/`). +In development the Vite server serves `backend/sprites/` at `/sprites/`, so no +extra configuration is needed after running the backend import. When building +for the Apache deployment, set `VITE_SPRITES_BASE_URL=/project2/sprites/`. + ## Current Functionality -The frontend currently displays a list of Pokémon retrieved from the GraphQL API. Interactive functionality and additional features are still under development. +The frontend lets users search for Pokémon and build a team of up to six +Pokémon. Search results and team members are displayed as Pokémon cards with +their sprite, name and types. Pokémon already on the team can be removed from +either the team panel or a search result. When the team is full, the interface +explains that a Pokémon must be removed before another can be added. Additional +features are still under development. ## Related Documentation diff --git a/frontend/src/App.css b/frontend/src/App.css index b985caf..0e07599 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -1,12 +1,3 @@ -#center { - display: flex; - align-items: center; - gap: 1rem; - padding: 2rem; - flex-direction: column; - max-width: 1024px; -} - .top-bar { display: flex; justify-content: space-between; @@ -24,6 +15,10 @@ } .search-button { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.45rem; background-color: var(--accent); color: aliceblue; border: 0; @@ -34,6 +29,12 @@ transition: filter 0.2s ease, transform 0.1s ease; } +.search-button-icon { + display: none; + width: 1.15rem; + height: 1.15rem; +} + .search-button:hover { filter: brightness(1.1); } @@ -42,6 +43,11 @@ transform: scale(0.98); } +.sidebar-header, +.menu-backdrop { + display: none; +} + .nav-links{ list-style: none; display: flex; @@ -98,90 +104,163 @@ .main-content { flex: 1; + min-width: 0; background-color: var(--bg); } -#formats { - background-color: var(--code-bg); - color: var(--text); - border: 1px solid var(--code-border); - padding: 0.6Rem 1.2rem; - border-radius: 999px; - font-size: 1rem; - font-family: var(--sans); - cursor: pointer; - outline: none; - transition: border-color 0.2s, box-shadow 0.2s; -} - -#formats:focus,#formats:hover{ - border-color: var(--accent); -} - -.addPokemon { - background-color: var(--accent); - color: aliceblue; - padding: 0.6rem 1.4rem; - font-size: 1rem; - font-weight: 600; - font-family: var(--sans); - border-radius: 999px; - cursor: pointer; - transition: transform 0.1s ease, filter 0.2s ease; -} - -.addPokemon:hover{ - filter: brightness(1.1); -} - -.addPokemon:active{ - transform: scale(0.98); -} - @media (max-width: 768px) { .top-bar { - padding-right: 1rem; + min-height: 3.75rem; + padding: 0.6rem 1rem; + gap: 0.6rem; } .top-bar h1 { - font-size: 1.25rem; + flex: 1; + min-width: 0; + margin: 0; + font-size: 1rem; letter-spacing: 0; + line-height: 1.2; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .search-button { - padding: 0.5rem 0.9rem; + flex: 0 0 auto; + width: 2.75rem; + height: 2.75rem; + padding: 0; + border-radius: 50%; } - .hamburger{ + .search-button-icon { + display: block; + } + + .search-button-label { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0 0 0 0); + white-space: nowrap; + border: 0; + } + + .hamburger { display: flex; + flex: 0 0 auto; flex-direction: column; justify-content: center; align-items: center; - width: 60px; - height: 100%; - position: absolute; - top: 0; - left: 0; + width: 2.75rem; + height: 2.75rem; + padding: 0; + position: static; } - .sidebar{ - display: none; - position: absolute; + .hamburger .hamburger-line { + width: 22px; + height: 2px; + background-color: var(--text-h); + } + + .menu-backdrop { + display: block; + position: fixed; + inset: 0; + z-index: 150; + padding: 0; + border: 0; + background: rgb(0 0 0 / 40%); + opacity: 0; + pointer-events: none; + transition: opacity 0.2s ease; + } + + .menu-backdrop.active { + opacity: 1; + pointer-events: auto; + } + + .sidebar { + display: block; + position: fixed; top: 0; left: 0; - width: 100vw; - background-color: var(--code-bg); - border-right: none; - box-shadow: 0 4px 6px rgba(0,0,0,0.3); - z-index: 100; - padding: 1rem 0rem; + bottom: 0; + z-index: 200; + width: min(82vw, 20rem); + height: 100dvh; + padding: 1.1rem 1.25rem; + box-sizing: border-box; + overflow-y: auto; + background-color: var(--bg); + border-right: 1px solid var(--border); + box-shadow: 0 10px 30px rgb(0 0 0 / 25%); + transform: translateX(-105%); + visibility: hidden; + transition: transform 0.2s ease, visibility 0.2s ease; } .sidebar.active { - display: block; + transform: translateX(0); + visibility: visible; } - .nav-links.active { + .sidebar-header { display: flex; + align-items: center; + justify-content: space-between; + gap: 0.75rem; + margin-bottom: 1.25rem; + padding-bottom: 0.75rem; + border-bottom: 1px solid var(--border); + } + + .sidebar-title { + color: var(--text-h); + font-size: 0.95rem; + font-weight: 600; + text-align: left; + } + + .sidebar-close { + display: inline-flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + width: 2.5rem; + height: 2.5rem; + padding: 0; + border: 0; + border-radius: 50%; + background: var(--code-bg); + color: var(--text-h); + cursor: pointer; + } + + .sidebar-close-icon { + width: 1.1rem; + height: 1.1rem; + } + + .sidebar .nav-links { + gap: 0; + } + + .sidebar .nav-links li { + border-bottom: 1px solid var(--border); + } + + .sidebar .nav-links a { + display: block; + padding: 0.9rem 0.25rem; + font-size: 1.05rem; + text-align: left; } } \ No newline at end of file diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 9159b7f..770aa9e 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,16 +1,14 @@ import "./App.css"; import { useState } from "react"; import { Link, Navigate, Route, Routes } from "react-router-dom"; +import { + CloseIcon, + SearchIcon, +} from "./assets/components/icons/icons.tsx"; import HomePage from "./assets/pages/home/page.tsx"; import TeamsPage from "./assets/pages/teams/page.tsx"; import SearchModal from "./search/SearchModal.tsx"; - -type TeamPokemon = { - id: string; - name: string; - type: string; - gen: number; -}; +import { MAX_TEAM_SIZE, type TeamPokemon } from "./team.ts"; function App() { const [menuOpen, setMenuOpen] = useState(false); @@ -22,6 +20,21 @@ function App() { setMenuOpen(false); } + function addPokemon(pokemon: TeamPokemon) { + setTeam((currentTeam) => + currentTeam.length >= MAX_TEAM_SIZE || + currentTeam.some((member) => member.id === pokemon.id) + ? currentTeam + : [...currentTeam, pokemon], + ); + } + + function removePokemon(id: string) { + setTeam((currentTeam) => + currentTeam.filter((pokemon) => pokemon.id !== id), + ); + } + return ( <>
-