RedCrab/projet-nuitinfo-2024
8
0
Fork 0
generated from lucien/actix-react-template
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

- Mise à jour de la DA de la main page.

Browse source 
- Ajout de data temporaire pour les articles.
This commit is contained in:
iMax 2024-12-06 04:43:17 +01:00
parent 1de47f3fb8
commit 5bb2ac3f9b
11 changed files with 76 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

1
front/index.html
View file

@ -5,6 +5,7 @@
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title> <title>Vite + React + TS</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=sailing" />
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

2
front/src/components/ArticleCard.tsx
View file

@ -13,7 +13,7 @@ export default function ArticleCard({ articlePreview }: { articlePreview: Articl
margin: '20px', margin: '20px',
padding: '1.25em', padding: '1.25em',
paddingBottom: '1em', paddingBottom: '1em',
flex: '27%', flex: '0 1 30%',
textAlign: 'left', textAlign: 'left',
}}> }}>
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fimages8.alphacoders.com%2F438%2F438396.jpg&f=1&nofb=1&ipt=14796576c139b58db62d2d2098392ef2fbaee77911040f7c0d98ab65a69c4644&ipo=images" alt="Article preview" style={{ <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fimages8.alphacoders.com%2F438%2F438396.jpg&f=1&nofb=1&ipt=14796576c139b58db62d2d2098392ef2fbaee77911040f7c0d98ab65a69c4644&ipo=images" alt="Article preview" style={{

37
front/src/components/ArticlesSection.tsx
View file

@ -8,9 +8,41 @@ export default function ArticlesSection() {
const [loading, setLoading] = useState<boolean>(true); const [loading, setLoading] = useState<boolean>(true);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
const articles: ArticlePreview[] = [
{
id: 1,
title: "The Great Barrier Reef",
preview: "The Great Barrier Reef is the largest coral reef system in the world, composed of over 2,900 individual reefs and 900 islands stretching for over 2,300 kilometers (1,400 mi) over an area of approximately 344,400 square kilometers (133,000 sq mi).",
},
{
id: 2,
title: "The Great Pacific Garbage Patch",
preview: "The Great Pacific Garbage Patch, also known as the Pacific trash vortex, is a gyre of marine debris particles in the north-central Pacific Ocean. It is located roughly from 135°W to 155°W and 35°N to 42°N.",
},
{
id: 3,
title: "The Amazon Rainforest",
preview: "The Amazon rainforest, alternatively, the Amazon Jungle, also known in English as Amazonia, is a moist broadleaf tropical rainforest in the Amazon biome that covers most of the Amazon basin of South America.",
},
{
id: 4,
title: "The Arctic",
preview: "The Arctic is a polar region located at the northernmost part of Earth. The Arctic consists of the Arctic Ocean, adjacent seas, and parts of Alaska (United States), Northern Canada (Canada), Finland, Greenland (Kingdom of Denmark), Iceland, Norway, Russia, and Sweden.",
},
{
id: 5,
title: "The Antarctic",
preview: "The Antarctic, is a polar region containing the geographic South Pole and is situated in the Antarctic region of the Southern Hemisphere, almost entirely south of the Antarctic Circle, and is surrounded by the Southern Ocean.",
}
];
useEffect(() => { useEffect(() => {
fetch('/api/articles') fetch('/api/articles')
.then(response => response.json()) // .then(response => response.json())
.then(_ => articles)
.then((data: ArticlePreview[]) => setArticlePreviews(data)) .then((data: ArticlePreview[]) => setArticlePreviews(data))
.catch(_ => setError('Failed to fetch articles')) .catch(_ => setError('Failed to fetch articles'))
.finally(() => setLoading(false)); .finally(() => setLoading(false));
@ -37,9 +69,12 @@ export default function ArticlesSection() {
textAlign: 'center', textAlign: 'center',
width: '100%', width: '100%',
}}>Articles</h1> }}>Articles</h1>
<div style={{width: '100%', display: 'flex', justifyContent: 'space-around', flexWrap: 'wrap'}}>
{articlePreviews.map(articlePreview => ( {articlePreviews.map(articlePreview => (
<ArticleCard key={articlePreview.id} articlePreview={articlePreview} /> <ArticleCard key={articlePreview.id} articlePreview={articlePreview} />
))} ))}
</div>
{!loading && !error && articlePreviews.length === 0 && <p style={{color: "var(--color-lightblue)", fontSize: 22}}>No articles found</p>} {!loading && !error && articlePreviews.length === 0 && <p style={{color: "var(--color-lightblue)", fontSize: 22}}>No articles found</p>}
{loading && <p style={{color: "var(--color-lightblue)", fontSize: 22}}>Loading...</p>} {loading && <p style={{color: "var(--color-lightblue)", fontSize: 22}}>Loading...</p>}
{error && <p style={{color: "var(--color-lightblue)", fontSize: 22}}>{error}</p>} {error && <p style={{color: "var(--color-lightblue)", fontSize: 22}}>{error}</p>}

9
front/src/components/Button.tsx
View file

@ -1,14 +1,14 @@
import { ReactNode, MouseEventHandler } from 'react'; import { ReactNode, MouseEventHandler } from 'react';
interface ButtonProps { interface ButtonProps {
onClick: MouseEventHandler<HTMLButtonElement>;
color: 'primary' | 'secondary'; color: 'primary' | 'secondary';
children: ReactNode; children: ReactNode;
url?: string;
} }
export default function Button({ onClick, color, children }: ButtonProps) { export default function Button({ color, children, url }: ButtonProps) {
return ( return (
<button style={{ <a style={{
backgroundColor: color === 'primary' ? 'var(--color-yellow)' : 'var(--color-darkblue)', backgroundColor: color === 'primary' ? 'var(--color-yellow)' : 'var(--color-darkblue)',
borderRadius: '8px', borderRadius: '8px',
borderWidth: '0', borderWidth: '0',
@ -29,7 +29,8 @@ export default function Button({ onClick, color, children }: ButtonProps) {
userSelect: 'none', userSelect: 'none',
WebkitUserSelect: 'none', WebkitUserSelect: 'none',
touchAction: 'manipulation', touchAction: 'manipulation',
}} onClick={onClick} className="ni-button" role="button">{children}</button> textDecoration: 'none',
}} href={url} className="ni-button" role="button">{children}</a>
) )
} }

2
front/src/components/ClickableLink.tsx
View file

@ -9,7 +9,7 @@ export default function ClickableLink({url, text}: ClickableLinkProps) {
backgroundColor: "transparent", backgroundColor: "transparent",
borderRadius: '8px', borderRadius: '8px',
borderWidth: '0', borderWidth: '0',
color:"purple", color:"white",
cursor: 'pointer', cursor: 'pointer',
display: 'inline-block', display: 'inline-block',
fontFamily: '"Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif', fontFamily: '"Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif',

8
front/src/components/Footer.tsx
View file

@ -7,12 +7,14 @@ interface FooterProps {
export default function Footer ({bgcolor}:FooterProps) { export default function Footer ({bgcolor}:FooterProps) {
return ( return (
<footer style={{display: "flex", justifyContent: "space-between", backgroundColor:bgcolor}}> <footer style={{display: "flex", justifyContent: "space-between", backgroundColor:bgcolor}}>
<div style={{ display : "flex", alignItems: "center", flexDirection: "row"}}>ENSIBS<br />RedCRAB</div> <div style={{ display : "flex", alignItems: "center", flexDirection: "column", margin:"5px", width:"10%"}}><p>ENSIBS</p><p>RedCRAB</p></div>
<div style={{ display : "flex", alignItems: "center", flexDirection: "row"}}> <p>Made with ❤️ by RedCRAB</p>
<div style={{ display : "flex", alignItems: "center", flexDirection: "row", margin:"5px", width:"10%"}}>
<LogoButton <LogoButton
url="https://www-ensibs.univ-ubs.fr/fr/index.html" url="https://www-ensibs.univ-ubs.fr/fr/index.html"
logo = "https://www-ensibs.univ-ubs.fr/skins/ENSIBS/resources/img/logo.png" logo = "https://www-ensibs.univ-ubs.fr/skins/ENSIBS/resources/img/logo.png"
style={{ width: "50%", height: "auto" }}/> style={{ width: "100%", height: "auto",
padding: "10px"}}/>
</div> </div>
</footer> </footer>
) )

25
front/src/components/FstSection.tsx
View file

@ -1,19 +1,12 @@
import Button from "./Button"; import Button from "./Button";
import NavBar from "./NavBar"; import NavBar from "./NavBar";
interface FstSectionProps { export default function FstSection () {
centertxt: string;
txtbt1:string;
txtbt2:string;
image:string;
}
export default function FstSection ({centertxt, txtbt1, txtbt2, image}: FstSectionProps) {
return ( return (
<div style={{ <div style={{
textAlign: "center", textAlign: "center",
color: "yellow", color: "yellow",
backgroundImage: image, backgroundImage: "url('/pictures/sea.gif')",
backgroundSize: "cover", backgroundSize: "cover",
backgroundPosition: "center", backgroundPosition: "center",
backgroundRepeat: "no-repeat", backgroundRepeat: "no-repeat",
@ -28,10 +21,18 @@ export default function FstSection ({centertxt, txtbt1, txtbt2, image}: FstSecti
}} }}
> >
<div style={{height:"150px"}} /> <div style={{height:"150px"}} />
<h1>{centertxt}</h1><br /> <h1
style={{
fontSize: "3em",
fontWeight: "bold",
textShadow: "2px 2px 4px #000000",
fontFamily: "Helvetica",
}}
>Help us to save our oceans</h1><br />
<div style={{display:"flex", justifyContent: "center", gap: "20px"}}> <div style={{display:"flex", justifyContent: "center", gap: "20px"}}>
<Button onClick={() => alert("One")} color="primary" children={txtbt1} /> <Button color="primary" children={"Aller au jeu"} url="/game" />
<Button onClick={() => {alert("Two")}} color="secondary" children={txtbt2} /> <Button color="secondary" children={"Lire les articles"} url="/" />
</div> </div>
</div></div> </div></div>
) )

8
front/src/components/NavBar.tsx
View file

@ -4,14 +4,16 @@ import RoundButton from './RoundButton.tsx';
export default function NavBar(){ export default function NavBar(){
return ( return (
<nav style={{ display: "flex", alignItems: "center", justifyContent: "space-between"}}> <nav style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "0.5em 1em"}}>
<div style={{ display : "flex", alignItems: "center", flexDirection: "row"}}> <div style={{ display : "flex", alignItems: "center", flexDirection: "row"}}>
<LogoButton url="/" logo = "https://archlinux.org/static/hetzner_logo.41114a37d25f.png"/> {/* <LogoButton url="/" logo = "https://archlinux.org/static/hetzner_logo.41114a37d25f.png"/> */}
<span class="material-symbols-outlined"
style={{fontSize: "4em", color: "white", margin: "0.5em"}}>sailing</span>
<ClickableLink url="/" text = "Accueil" /> <ClickableLink url="/" text = "Accueil" />
<ClickableLink url="/game" text = "Jeu" /> <ClickableLink url="/game" text = "Jeu" />
</div> </div>
<div style={{ display : "flex", alignItems: "center", flexDirection: "row"}}> <div style={{ display : "flex", alignItems: "center", flexDirection: "row"}}>
<RoundButton url="https://archlinux.org" bgcolor="purple" text="?"/> <RoundButton url="https://archlinux.org" bgcolor="var(--color-white)" text="?"/>
</div> </div>
</nav>); </nav>);
} }

5
front/src/components/RoundButton.tsx
View file

@ -8,8 +8,11 @@ export default function RoundButton({url, bgcolor, text}: RoundButtonProps) {
return (<div> return (<div>
<a href={url}><button style={{ <a href={url}><button style={{
backgroundColor: bgcolor, backgroundColor: bgcolor,
borderColor:"blue", borderStyle: 'solid',
borderColor:"var(--color-lightblue)",
borderRadius: '50%', borderRadius: '50%',
width: '45px',
height: '45px',
borderWidth: '1', borderWidth: '1',
cursor: 'pointer', cursor: 'pointer',
display: 'inline-block', display: 'inline-block',

2
front/src/pages/GamePage.tsx
View file

@ -139,7 +139,7 @@ export default function GamePage() {
<Sky sunPosition={[100, 10, 100]} /> <Sky sunPosition={[100, 10, 100]} />
<OrbitControls /> <OrbitControls />
<Ocean /> <Ocean />
<Axes /> {/* <Axes /> */}
<Character /> <Character />
<Floor /> <Floor />
{/* <Marker position={[0, 1, 0]} color="red" /> */} {/* <Marker position={[0, 1, 0]} color="red" /> */}

6
front/src/pages/MainPage.tsx
View file

@ -6,11 +6,7 @@ export default function MainPage() {
return ( return (
<> <>
<div style={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}> <div style={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
<FstSection <FstSection />
centertxt="Choisissez votre numéro :"
txtbt1="Un"
txtbt2="Deux"
image="url('/pictures/sea.gif')"/>
<ArticlesSection /> <ArticlesSection />
<Footer bgcolor="lightblue"/> <Footer bgcolor="lightblue"/>
</div> </div>