diff --git a/public/index.html b/public/index.html index aa069f2..0eee7ff 100644 --- a/public/index.html +++ b/public/index.html @@ -7,7 +7,7 @@ - React App + Site de Retrogaming legal diff --git a/src/App.js b/src/App.js index 298aac5..06d3c48 100644 --- a/src/App.js +++ b/src/App.js @@ -9,10 +9,25 @@ import ConsoleList from './page_elements/ConsoleList'; import GameList from './page_elements/GameList'; import GamePlayer from './page_elements/GamePlayer'; import Topbar from './page_elements/Topbar'; - +import {createTheme, ThemeProvider } from '@mui/material/styles'; import * as React from 'react'; var API_URL = process.env.VIDEOGAME_API_URL + +const dacula_theme = createTheme({ + palette: { + mode: 'dark', + primary: { + main: '#bd93f9', + }, + background: { + paper: '#44475a', + default: '#282a36', + }, + divider: '#44475a', + }, +}) + function App() { console.log(API_URL); const [gameId, setGameId] = React.useState(0); @@ -43,10 +58,11 @@ function App() { } return <> - - + + + - + } export default App; diff --git a/src/page_elements/ConsoleCard.js b/src/page_elements/ConsoleCard.js index 79d7dac..83ff72c 100644 --- a/src/page_elements/ConsoleCard.js +++ b/src/page_elements/ConsoleCard.js @@ -34,14 +34,9 @@ export default function ConsoleCard(props) { } return ( - navigate("/console/"+game_console_id)} sx={{ width: 250 }}> + navigate("/console/"+game_console_id)} + sx={{ width: 250, margin: "10px", textAlign:"center" }}> - {game_console} diff --git a/src/page_elements/ConsoleList.js b/src/page_elements/ConsoleList.js index 00ede00..7bf2040 100644 --- a/src/page_elements/ConsoleList.js +++ b/src/page_elements/ConsoleList.js @@ -6,6 +6,9 @@ import ConsoleCard from './ConsoleCard'; import axios from 'axios'; import * as React from 'react'; import { LinearProgress } from '@mui/material'; +import Box from '@mui/material/Box'; + + function ConsoleList(props) { const [game_consoles, setGameConsoles] = React.useState([]); @@ -14,7 +17,7 @@ function ConsoleList(props) { if (!has_loaded){ let consoles = JSON.parse(localStorage.getItem("consoles")); - + if (consoles !== null) { console.log("loaded cache"); for (const game_console of consoles) { @@ -42,16 +45,26 @@ function ConsoleList(props) { if (!has_loaded){ return ( -
+
); } else{ return ( -
+ {game_consoles} -
+ ); } } diff --git a/src/page_elements/GameCard.js b/src/page_elements/GameCard.js index edbde52..6328b54 100644 --- a/src/page_elements/GameCard.js +++ b/src/page_elements/GameCard.js @@ -1,47 +1,24 @@ import * as React from 'react'; import Card from '@mui/material/Card'; import CardContent from '@mui/material/CardContent'; -import CardMedia from '@mui/material/CardMedia'; import Typography from '@mui/material/Typography'; import { CardActionArea } from '@mui/material'; -import placeholder from '../images/placeholder.jpg'; import { useNavigate } from 'react-router-dom'; export default function GameCard(props) { const game_name = props.name; const game_id = props.id; - const liste = true; const navigate = useNavigate(); - if (liste) { return ( - navigate("/console/"+props.console_id+"/"+game_id)}> + navigate("/console/"+props.console_id+"/"+game_id)}> - + {game_name} ); - } else { - return ( - - - - - - {game_name} - - - - - ); - } } diff --git a/src/page_elements/GameList.js b/src/page_elements/GameList.js index 4c4e6d8..ac5cb3b 100644 --- a/src/page_elements/GameList.js +++ b/src/page_elements/GameList.js @@ -3,30 +3,47 @@ import '@fontsource/roboto/400.css'; import '@fontsource/roboto/500.css'; import '@fontsource/roboto/700.css'; import * as React from 'react'; -import { CircularProgress, Popover } from '@mui/material'; +import { CircularProgress, Button,Typography,Box } from '@mui/material'; +import Pagination from '@mui/material/Pagination'; +import Stack from '@mui/material/Stack'; import axios from 'axios'; import GameCard from './GameCard'; +import {TextField} from '@mui/material'; import { useParams } from 'react-router-dom'; +import { useSearchParams, useNavigate } from "react-router-dom"; -async function loadgamesfromlocalstorage(rom_name,console_id){ +var itemPerPage = 50; + +async function loadgamesfromlocalstorage(rom_name,console_id,filter){ let console_rom = JSON.parse(localStorage.getItem(rom_name)); let game_components = [] + console_rom = console_rom.filter(roms => roms["name"].toLowerCase().includes(filter.toLowerCase())) + console_rom.sort((a,b) => a["name"].localeCompare(b["name"])) for (const roms of console_rom) { const card = game_components.push(card); } return game_components; - -} +} function GameList(props) { const [game_consoles, setGameConsoles] = React.useState([]); const [has_loaded, setHasLoaded] = React.useState(false); - const game_components = [] - const params = useParams() - let console_id = params.consoleId; + const [search_filter, setSearchFilter] = React.useState(""); + const [current_page, setCurrentPage] = React.useState(0); + let [searchParams, setSearchParams] = useSearchParams(); + const navigate = useNavigate(); + console.log(searchParams); + let filter = ""; + if (searchParams.get("q") !== null){ + filter = searchParams.get("q"); + } + console.log(filter); + const game_components = []; + const params = useParams(); + let console_id = params.consoleId; let rom_name = "rom" + props.id; let console_rom = JSON.parse(localStorage.getItem(rom_name)); @@ -37,6 +54,8 @@ function GameList(props) { axios.get('https://videogamedb.simailadjalim.fr/consoles/'+ console_id + '/roms') .then((result) => { localStorage.setItem(rom_name,JSON.stringify(result.data)); + result.data = result.data.filter(roms => roms["name"].includes(filter)); + result.data.sort((a,b) => a["name"].localeCompare(b["name"])) for (const roms of result.data) { const card = game_components.push(card); @@ -46,24 +65,65 @@ function GameList(props) { }) }else{ console.log("loading roms from cache"); - loadgamesfromlocalstorage(rom_name,props.id).then(game_components =>{ + loadgamesfromlocalstorage(rom_name,props.id,filter).then(game_components =>{ setGameConsoles(game_components); setHasLoaded(true); }); } } - if (!has_loaded){ - return <> + + + const handleKeyDown = (event) => { + if (event.key === 'Enter') { + // 👇 Get input value + setSearchParams({"q" : search_filter}); + navigate(0); + } + }; + + function NavigationButtons(){ + let len = (game_consoles.length - (game_consoles.length % itemPerPage)) / itemPerPage; + console.log(len); + + return ( + + setCurrentPage(value)} /> + ) + } + + + if (!has_loaded){ + return
- + } else{ + let shown = game_consoles.slice(current_page*itemPerPage,current_page*itemPerPage+itemPerPage) return ( -
-

Jeux

- {game_consoles} -
+ + setSearchFilter(e.target.value)} /> + + + Jeux de cette console + +
+ {shown} +
+ + ); } } diff --git a/src/page_elements/GamePlayer.js b/src/page_elements/GamePlayer.js index 8ba73be..0761dba 100644 --- a/src/page_elements/GamePlayer.js +++ b/src/page_elements/GamePlayer.js @@ -4,42 +4,51 @@ import Button from '@mui/material/Button'; import { Box } from '@mui/material'; - - export default function GamePlayer(props) { - const [game, setGame] = React.useState(null); - var game_id = props.id; - var console_core = JSON.parse(localStorage.getItem("console"+props.consoleId)).core; - console.log(console_core); - axios.get('https://videogamedb.simailadjalim.fr/roms/' + game_id).then((result) => { - setGame(result.data["name"]); - }) - function handleDownload(){ - const fileUrl = 'https://videogamedb.simailadjalim.fr/roms/' + props.id + '?romfile=true'; - const link = document.createElement('a'); - link.href = fileUrl; - document.body.appendChild(link); - link.click(); - // Clean up the temporary URL and remove the element - document.body.removeChild(link); - }; - return ( -
-

GamePlayer

-

{game}

-