From ebf462064006a26fa84f1a4039c048e3de59ef3d Mon Sep 17 00:00:00 2001 From: = Date: Thu, 5 Dec 2024 21:19:41 +0100 Subject: [PATCH 01/40] New button component --- front/src/components/Button.tsx | 12 ++++++++++++ front/src/index.css | 29 +++++++++++++++++++++++++++++ 2 files changed, 41 insertions(+) create mode 100644 front/src/components/Button.tsx diff --git a/front/src/components/Button.tsx b/front/src/components/Button.tsx new file mode 100644 index 0000000..fa3fc54 --- /dev/null +++ b/front/src/components/Button.tsx @@ -0,0 +1,12 @@ +import { ReactNode, MouseEventHandler } from 'react'; + +interface ButtonProps { + onClick: MouseEventHandler; + children: ReactNode; +} + +export default function Button({ onClick, children }: ButtonProps) { + return ( + + ) +} diff --git a/front/src/index.css b/front/src/index.css index 6119ad9..5c7c0a1 100644 --- a/front/src/index.css +++ b/front/src/index.css @@ -66,3 +66,32 @@ button:focus-visible { background-color: #f9f9f9; } } + + +/* Button Component */ +.ni-button { + background-color: rgba(51, 51, 51, 0.05); + border-radius: 8px; + border-width: 0; + color: #333333; + cursor: pointer; + display: inline-block; + font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 14px; + font-weight: 500; + line-height: 20px; + list-style: none; + margin: 0; + padding: 10px 12px; + text-align: center; + transition: all 200ms; + vertical-align: baseline; + white-space: nowrap; + user-select: none; + -webkit-user-select: none; + touch-action: manipulation; +} + +.ni-button:hover { + background-color: rgba(51, 51, 51, 0.1); +} \ No newline at end of file From 265157bbe136612b6fc9d8941c7a6ad50b9414fc Mon Sep 17 00:00:00 2001 From: ChenNux Date: Thu, 5 Dec 2024 21:34:24 +0100 Subject: [PATCH 02/40] =?UTF-8?q?=09nouveau=20fichier=C2=A0:=20front/src/c?= =?UTF-8?q?omponents/ClickableLink.tsx=20=09nouveau=20fichier=C2=A0:=20fro?= =?UTF-8?q?nt/src/components/LogoButton.tsx=20=09nouveau=20fichier=C2=A0:?= =?UTF-8?q?=20front/src/components/NavBar.tsx=20=09modifi=C3=A9=C2=A0:=20?= =?UTF-8?q?=20=20=20=20=20=20=20=20front/src/main.tsx=20=09modifi=C3=A9?= =?UTF-8?q?=C2=A0:=20=20=20=20=20=20=20=20=20front/src/pages/MainPage.tsx?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- front/src/components/ClickableLink.tsx | 5 +++++ front/src/components/LogoButton.tsx | 11 +++++++++++ front/src/components/NavBar.tsx | 7 +++++++ front/src/main.tsx | 5 +++-- front/src/pages/MainPage.tsx | 5 ++--- 5 files changed, 28 insertions(+), 5 deletions(-) create mode 100644 front/src/components/ClickableLink.tsx create mode 100644 front/src/components/LogoButton.tsx create mode 100644 front/src/components/NavBar.tsx diff --git a/front/src/components/ClickableLink.tsx b/front/src/components/ClickableLink.tsx new file mode 100644 index 0000000..9334e71 --- /dev/null +++ b/front/src/components/ClickableLink.tsx @@ -0,0 +1,5 @@ +export default function ClickableLink(){ +
+ prout +
+} \ No newline at end of file diff --git a/front/src/components/LogoButton.tsx b/front/src/components/LogoButton.tsx new file mode 100644 index 0000000..b4da75b --- /dev/null +++ b/front/src/components/LogoButton.tsx @@ -0,0 +1,11 @@ +function Logo({logo}){ + return ( + + ) + } + +export default function LogoButton ({url, logo}) { + return ( + + ) +} \ No newline at end of file diff --git a/front/src/components/NavBar.tsx b/front/src/components/NavBar.tsx new file mode 100644 index 0000000..2980646 --- /dev/null +++ b/front/src/components/NavBar.tsx @@ -0,0 +1,7 @@ +import LogoButton from '../components/LogoButton.tsx' + +export default function NavBar(){ + return (
+ +
); +} \ No newline at end of file diff --git a/front/src/main.tsx b/front/src/main.tsx index bef5202..ed573f9 100644 --- a/front/src/main.tsx +++ b/front/src/main.tsx @@ -1,10 +1,11 @@ import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' import './index.css' -import App from './App.tsx' +// import App from './App.tsx' +import MainPage from './pages/MainPage' createRoot(document.getElementById('root')!).render( - + , ) diff --git a/front/src/pages/MainPage.tsx b/front/src/pages/MainPage.tsx index 248feb2..2a76825 100644 --- a/front/src/pages/MainPage.tsx +++ b/front/src/pages/MainPage.tsx @@ -1,10 +1,9 @@ - - +import NavBar from '../components/NavBar.tsx' export default function MainPage() { return (
-

Main Page

+
) } \ No newline at end of file From 706d491236707c68698b8e23aa3d89b6b4849637 Mon Sep 17 00:00:00 2001 From: iMax Date: Thu, 5 Dec 2024 21:42:37 +0100 Subject: [PATCH 03/40] =?UTF-8?q?-=20impl=C3=A9mentation=20de=20threejs.?= =?UTF-8?q?=20-=20Cr=C3=A9ation=20environnement=203D=20oc=C3=A9an.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- front/package.json | 7 +++- front/src/components/3d/Ocean.tsx | 49 ++++++++++++++++++++++ front/src/index.css | 2 +- front/src/main.tsx | 2 +- front/src/pages/GamePage.tsx | 28 +++++++++++-- front/src/pages/{MainPage.tsx => main.tsx} | 0 6 files changed, 81 insertions(+), 7 deletions(-) create mode 100644 front/src/components/3d/Ocean.tsx rename front/src/pages/{MainPage.tsx => main.tsx} (100%) diff --git a/front/package.json b/front/package.json index 8bd44d7..32aba92 100644 --- a/front/package.json +++ b/front/package.json @@ -10,9 +10,14 @@ "preview": "vite preview" }, "dependencies": { + "@react-three/drei": "^9.120.0", + "@react-three/fiber": "^8.17.10", + "@types/three": "^0.170.0", "react": "^18.3.1", "react-dom": "^18.3.1", - "react-router": "^7.0.2" + "react-router": "^7.0.2", + "three": "^0.171.0", + "three-stdlib": "^2.34.0" }, "devDependencies": { "@eslint/js": "^9.15.0", diff --git a/front/src/components/3d/Ocean.tsx b/front/src/components/3d/Ocean.tsx new file mode 100644 index 0000000..63981b4 --- /dev/null +++ b/front/src/components/3d/Ocean.tsx @@ -0,0 +1,49 @@ +// src/components/Ocean.tsx +import React, { useEffect, useRef } from 'react'; +import * as THREE from 'three'; +import { Water } from 'three/examples/jsm/objects/Water.js'; + +const Ocean: React.FC = () => { + + const waterGeometry = new THREE.PlaneGeometry(10000, 10000); + const waterOption = { + textureWidth: 512, + textureHeight: 512, + waterNormals: new THREE.TextureLoader().load('https://threejs.org/examples/textures/waternormals.jpg', function (texture) { + texture.wrapS = texture.wrapT = THREE.RepeatWrapping; + }), + alpha: 1.0, + sunDirection: new THREE.Vector3(), + sunColor: 0xffffff, + waterColor: 0x001e0f, + distortionScale: 3.7, + fog: false, + }; + const water = new Water(waterGeometry, waterOption); + water.rotation.x = -Math.PI / 2; + + const waterRef = useRef(null); + useEffect(() => { + if (waterRef.current) { + waterRef.current.add(water); + } + }, [waterRef]); + + + useEffect(() => { + const animate = () => { + requestAnimationFrame(animate); + water.material.uniforms['time'].value += 1.0 / 60.0; + }; + animate(); + }, []); + + return ( + + + + + ); +}; + +export default Ocean; diff --git a/front/src/index.css b/front/src/index.css index 6119ad9..02a41f8 100644 --- a/front/src/index.css +++ b/front/src/index.css @@ -3,7 +3,7 @@ line-height: 1.5; font-weight: 400; - color-scheme: light dark; + color-scheme: light dark; color: rgba(255, 255, 255, 0.87); background-color: #242424; diff --git a/front/src/main.tsx b/front/src/main.tsx index 4de8dee..3bc8b7f 100644 --- a/front/src/main.tsx +++ b/front/src/main.tsx @@ -2,7 +2,7 @@ import { BrowserRouter, Route, Routes } from "react-router"; import { createRoot } from 'react-dom/client' import './index.css' import App from './App.tsx' -import MainPage from "./pages/MainPage.tsx"; +import MainPage from "./pages/main.tsx"; import GamePage from "./pages/GamePage.tsx"; diff --git a/front/src/pages/GamePage.tsx b/front/src/pages/GamePage.tsx index f984288..c1eb1e9 100644 --- a/front/src/pages/GamePage.tsx +++ b/front/src/pages/GamePage.tsx @@ -1,9 +1,29 @@ +import { Canvas } from "@react-three/fiber"; +import { OrbitControls, Sky } from "@react-three/drei"; +import * as THREE from "three"; +import { useEffect, useRef } from "react"; +import Ocean from "../components/3d/Ocean"; + + + export default function GamePage() { return ( -
-

Game Page

+
+ + + + + + + + + + + + + +
) -} - +} \ No newline at end of file diff --git a/front/src/pages/MainPage.tsx b/front/src/pages/main.tsx similarity index 100% rename from front/src/pages/MainPage.tsx rename to front/src/pages/main.tsx From 3cdab2e3032be5a52cabd3e8ba73b6b823958f15 Mon Sep 17 00:00:00 2001 From: ChenNux Date: Thu, 5 Dec 2024 21:47:03 +0100 Subject: [PATCH 04/40] =?UTF-8?q?=09modifi=C3=A9=C2=A0:=20=20=20=20=20=20?= =?UTF-8?q?=20=20=20front/src/components/ClickableLink.tsx=20=09modifi?= =?UTF-8?q?=C3=A9=C2=A0:=20=20=20=20=20=20=20=20=20front/src/components/Na?= =?UTF-8?q?vBar.tsx?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit C'est très moche (j'aimerais avoir le bouton lien pas une ligne en dessous le logo lien); --- front/src/components/ClickableLink.tsx | 14 ++++++++++---- front/src/components/NavBar.tsx | 9 ++++++--- 2 files changed, 16 insertions(+), 7 deletions(-) diff --git a/front/src/components/ClickableLink.tsx b/front/src/components/ClickableLink.tsx index 9334e71..9a9bbdb 100644 --- a/front/src/components/ClickableLink.tsx +++ b/front/src/components/ClickableLink.tsx @@ -1,5 +1,11 @@ -export default function ClickableLink(){ -
- prout -
+function Link ({text}){ + return( + + ) +} + +export default function ClickableLink({url, text}) { + return (
+ +
) } \ No newline at end of file diff --git a/front/src/components/NavBar.tsx b/front/src/components/NavBar.tsx index 2980646..84499b8 100644 --- a/front/src/components/NavBar.tsx +++ b/front/src/components/NavBar.tsx @@ -1,7 +1,10 @@ import LogoButton from '../components/LogoButton.tsx' +import ClickableLink from './ClickableLink.tsx'; export default function NavBar(){ - return (
- -
); + return ( + <> + + + ); } \ No newline at end of file From 5d156416c997af171ce1f5b7e30b740e082275eb Mon Sep 17 00:00:00 2001 From: iMax Date: Thu, 5 Dec 2024 22:15:23 +0100 Subject: [PATCH 05/40] Recollage au main --- front/src/main.tsx | 14 ++++++++++++++ front/src/pages/{main.tsx => MainPage.tsx} | 0 2 files changed, 14 insertions(+) create mode 100644 front/src/main.tsx rename front/src/pages/{main.tsx => MainPage.tsx} (100%) diff --git a/front/src/main.tsx b/front/src/main.tsx new file mode 100644 index 0000000..ce00332 --- /dev/null +++ b/front/src/main.tsx @@ -0,0 +1,14 @@ +import { BrowserRouter, Route, Routes } from "react-router"; +import { createRoot } from 'react-dom/client' +import MainPage from "./pages/MainPage.tsx"; +import GamePage from "./pages/GamePage.tsx"; + + +createRoot(document.getElementById('root')!).render( + + + } /> + } /> + + , +) diff --git a/front/src/pages/main.tsx b/front/src/pages/MainPage.tsx similarity index 100% rename from front/src/pages/main.tsx rename to front/src/pages/MainPage.tsx From 5c4ac78dee601d89213f2cfd63e4428a50af30ad Mon Sep 17 00:00:00 2001 From: = Date: Thu, 5 Dec 2024 22:25:56 +0100 Subject: [PATCH 06/40] add style inline for the button component and theme colors --- front/src/components/Button.tsx | 24 +++++++++++++++++++++++- front/src/index.css | 7 +++++++ front/src/main.tsx | 2 +- 3 files changed, 31 insertions(+), 2 deletions(-) create mode 100644 front/src/index.css diff --git a/front/src/components/Button.tsx b/front/src/components/Button.tsx index fa3fc54..05c98b8 100644 --- a/front/src/components/Button.tsx +++ b/front/src/components/Button.tsx @@ -7,6 +7,28 @@ interface ButtonProps { export default function Button({ onClick, children }: ButtonProps) { return ( - + ) } + diff --git a/front/src/index.css b/front/src/index.css new file mode 100644 index 0000000..790438d --- /dev/null +++ b/front/src/index.css @@ -0,0 +1,7 @@ +/* Define theme colors */ +:root { + --color-verydarkblue: #00204a; + --color-darkblue: #005792; + --color-lightblue: #00bbf0; + --color-yellow: #fdb44b; +} \ No newline at end of file diff --git a/front/src/main.tsx b/front/src/main.tsx index ce00332..f2884e0 100644 --- a/front/src/main.tsx +++ b/front/src/main.tsx @@ -2,7 +2,7 @@ import { BrowserRouter, Route, Routes } from "react-router"; import { createRoot } from 'react-dom/client' import MainPage from "./pages/MainPage.tsx"; import GamePage from "./pages/GamePage.tsx"; - +import './index.css' createRoot(document.getElementById('root')!).render( From 36dae30b4eded2b102f868b0fad1087dfb9dafd1 Mon Sep 17 00:00:00 2001 From: = Date: Thu, 5 Dec 2024 22:59:11 +0100 Subject: [PATCH 07/40] Add first version of article section --- front/src/components/ArticleCard.tsx | 26 ++++++++++++++++++++++++ front/src/components/ArticlesSection.tsx | 22 ++++++++++++++++++++ front/src/pages/MainPage.tsx | 2 ++ front/src/types.ts | 7 +++++++ 4 files changed, 57 insertions(+) create mode 100644 front/src/components/ArticleCard.tsx create mode 100644 front/src/components/ArticlesSection.tsx create mode 100644 front/src/types.ts diff --git a/front/src/components/ArticleCard.tsx b/front/src/components/ArticleCard.tsx new file mode 100644 index 0000000..96000e4 --- /dev/null +++ b/front/src/components/ArticleCard.tsx @@ -0,0 +1,26 @@ +import { Article } from '../types' + +export default function ArticleCard({ article }: { article: Article }) { + + return ( +
+

{article.title}

+

{article.content}

+
+ ) +} \ No newline at end of file diff --git a/front/src/components/ArticlesSection.tsx b/front/src/components/ArticlesSection.tsx new file mode 100644 index 0000000..5db142b --- /dev/null +++ b/front/src/components/ArticlesSection.tsx @@ -0,0 +1,22 @@ +import { useEffect, useState } from "react"; +import ArticleCard from "./ArticleCard"; +import { Article } from "../types"; + +export default function ArticlesSection() { + + const [articles, setArticles] = useState([]); + + useEffect(() => { + fetch('/api/article') + .then(response => response.json()) + .then((data: Article[]) => setArticles(data)); + }, []); + + return ( +
+ {articles.map(article => ( + + ))} +
+ ) +} \ No newline at end of file diff --git a/front/src/pages/MainPage.tsx b/front/src/pages/MainPage.tsx index 2a76825..860455e 100644 --- a/front/src/pages/MainPage.tsx +++ b/front/src/pages/MainPage.tsx @@ -1,9 +1,11 @@ +import ArticlesSection from '../components/ArticlesSection.tsx' import NavBar from '../components/NavBar.tsx' export default function MainPage() { return (
+
) } \ No newline at end of file diff --git a/front/src/types.ts b/front/src/types.ts new file mode 100644 index 0000000..2274b65 --- /dev/null +++ b/front/src/types.ts @@ -0,0 +1,7 @@ +interface Article { + id: number; + title: string; + content: string; +} + +export type { Article }; \ No newline at end of file From 57d574d143c314e3b7eaf8c3043ad278b45e6605 Mon Sep 17 00:00:00 2001 From: linlkin Date: Thu, 5 Dec 2024 23:19:15 +0100 Subject: [PATCH 08/40] i added db and articles end points --- back/Cargo.toml | 2 +- back/data/data.db | 0 back/src/creat_db.rs | 15 +++++++++++++++ back/src/main.rs | 29 +++++++++++++++++++++++++++-- 4 files changed, 43 insertions(+), 3 deletions(-) create mode 100644 back/data/data.db create mode 100644 back/src/creat_db.rs diff --git a/back/Cargo.toml b/back/Cargo.toml index 8b48126..9a70ea3 100644 --- a/back/Cargo.toml +++ b/back/Cargo.toml @@ -6,4 +6,4 @@ edition = "2021" [dependencies] actix-files = "0.6.6" actix-web = "4" - +sqlite = "0.36.1" diff --git a/back/data/data.db b/back/data/data.db new file mode 100644 index 0000000..e69de29 diff --git a/back/src/creat_db.rs b/back/src/creat_db.rs new file mode 100644 index 0000000..ec5a2ed --- /dev/null +++ b/back/src/creat_db.rs @@ -0,0 +1,15 @@ +use sqlite::{Connection, State}; + +fn main() -> sqlite::Result<()> { + let conn = Connection::open("./data/data.db")?; + + conn.execute( + "CREATE TABLE articles ( + id INTEGER PRIMARY KEY, + title TEXT NOT NULL, + subTitle TEXT, + content TEXT NOT NULL, + )", + [], + )?; +} \ No newline at end of file diff --git a/back/src/main.rs b/back/src/main.rs index d4d0ee1..f0a5196 100644 --- a/back/src/main.rs +++ b/back/src/main.rs @@ -1,10 +1,14 @@ -use actix_web::{App, HttpServer}; +use actix_web::{get, http, post, web, App, HttpResponse, HttpServer, Responder}; use actix_files::Files; +use sqlite::{Connection, State, Error}; #[actix_web::main] -async fn main() -> std::io::Result<()> { +async fn main() -> Result<(), std::io::Error> { + let conn = Connection::open("./data/data.db"); + HttpServer::new(|| { App::new() + .service(hello) .service(Files::new("/", "./public").index_file("index.html")) }) .bind(("0.0.0.0", 8080))? @@ -12,3 +16,24 @@ async fn main() -> std::io::Result<()> { .await } +#[get("/api/hello")] +async fn hello() -> impl Responder { + HttpResponse::Ok().body("Hello world!") +} + +#[get("/api/articles")] +async fn get_articles() -> impl Responder { + let conn = Connection::open("./data/data.db").unwrap(); + let mut stmt = conn.prepare("SELECT * FROM articles").unwrap(); + let mut articles = Vec::new(); + + while let State::Row = stmt.next().unwrap() { + let id = stmt.read::(0).unwrap(); + let title = stmt.read::(1).unwrap(); + let subTitle = stmt.read::(2).unwrap(); + let content = stmt.read::(3).unwrap(); + articles.push((id, title, subTitle, content)); + } + + HttpResponse::Ok().json(articles) +} From 2317a3683ec9805db50e80beca86407dc8bca61a Mon Sep 17 00:00:00 2001 From: ChenNux Date: Thu, 5 Dec 2024 23:25:37 +0100 Subject: [PATCH 09/40] =?UTF-8?q?=09modifi=C3=A9=C2=A0:=20=20=20=20=20=20?= =?UTF-8?q?=20=20=20front/src/components/ClickableLink.tsx=20=09modifi?= =?UTF-8?q?=C3=A9=C2=A0:=20=20=20=20=20=20=20=20=20front/src/components/Lo?= =?UTF-8?q?goButton.tsx=20=09modifi=C3=A9=C2=A0:=20=20=20=20=20=20=20=20?= =?UTF-8?q?=20front/src/components/NavBar.tsx=20=09front/src/components/Ro?= =?UTF-8?q?undButton.tsx?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- front/src/components/ClickableLink.tsx | 28 +++++++++++++++++++------- front/src/components/LogoButton.tsx | 8 +------- front/src/components/NavBar.tsx | 15 ++++++++++---- 3 files changed, 33 insertions(+), 18 deletions(-) diff --git a/front/src/components/ClickableLink.tsx b/front/src/components/ClickableLink.tsx index 9a9bbdb..ee88b3b 100644 --- a/front/src/components/ClickableLink.tsx +++ b/front/src/components/ClickableLink.tsx @@ -1,11 +1,25 @@ -function Link ({text}){ - return( - - ) -} - export default function ClickableLink({url, text}) { return (
- +
) } \ No newline at end of file diff --git a/front/src/components/LogoButton.tsx b/front/src/components/LogoButton.tsx index b4da75b..5fcf29c 100644 --- a/front/src/components/LogoButton.tsx +++ b/front/src/components/LogoButton.tsx @@ -1,11 +1,5 @@ -function Logo({logo}){ - return ( - - ) - } - export default function LogoButton ({url, logo}) { return ( - + ) } \ No newline at end of file diff --git a/front/src/components/NavBar.tsx b/front/src/components/NavBar.tsx index 84499b8..7f8ab2f 100644 --- a/front/src/components/NavBar.tsx +++ b/front/src/components/NavBar.tsx @@ -1,10 +1,17 @@ import LogoButton from '../components/LogoButton.tsx' import ClickableLink from './ClickableLink.tsx'; +import RoundButton from './RoundButton.tsx'; export default function NavBar(){ return ( - <> - - - ); + ); } \ No newline at end of file From b3d966e0aee60b62ef54bfc4090d2e1b5a03c2bf Mon Sep 17 00:00:00 2001 From: ChenNux Date: Thu, 5 Dec 2024 23:28:56 +0100 Subject: [PATCH 10/40] =?UTF-8?q?=09nouveau=20fichier=C2=A0:=20front/src/c?= =?UTF-8?q?omponents/RoundButton.tsx?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- front/src/components/RoundButton.tsx | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 front/src/components/RoundButton.tsx diff --git a/front/src/components/RoundButton.tsx b/front/src/components/RoundButton.tsx new file mode 100644 index 0000000..8c2e092 --- /dev/null +++ b/front/src/components/RoundButton.tsx @@ -0,0 +1,26 @@ +export default function RoundButton({url, bgcolor, text}) { + return (
+ +
) +} \ No newline at end of file From 669c710f895279dcc13691f491f69b1906ae718e Mon Sep 17 00:00:00 2001 From: Lukian Date: Thu, 5 Dec 2024 23:38:43 +0100 Subject: [PATCH 11/40] Added json usage --- back/Cargo.toml | 2 ++ back/src/main.rs | 25 +++++++++++++++++++++++-- 2 files changed, 25 insertions(+), 2 deletions(-) diff --git a/back/Cargo.toml b/back/Cargo.toml index 8b48126..e2495de 100644 --- a/back/Cargo.toml +++ b/back/Cargo.toml @@ -6,4 +6,6 @@ edition = "2021" [dependencies] actix-files = "0.6.6" actix-web = "4" +serde = "1.0.215" +serde_json = "1.0.133" diff --git a/back/src/main.rs b/back/src/main.rs index d4d0ee1..e63b176 100644 --- a/back/src/main.rs +++ b/back/src/main.rs @@ -1,11 +1,32 @@ -use actix_web::{App, HttpServer}; +use actix_web::{App, HttpServer, get, Responder, HttpResponse, http::header::ContentType}; use actix_files::Files; +use serde_json::json; + + +#[get("/api")] +async fn api() -> impl Responder { + let value = json!({ + "code": 200, + "success": true, + "payload": { + "features": [ + "serde", + "json" + ], + "homepage": null + } + }); + HttpResponse::Ok() + .content_type(ContentType::json()) + .body(value.to_string()) +} #[actix_web::main] async fn main() -> std::io::Result<()> { HttpServer::new(|| { App::new() - .service(Files::new("/", "./public").index_file("index.html")) + .service(api) + .service(Files::new("/", "public").index_file("index.html")) }) .bind(("0.0.0.0", 8080))? .run() From a239d17697afba88b22c0316faad0a9c31553a1a Mon Sep 17 00:00:00 2001 From: ChenNux Date: Thu, 5 Dec 2024 23:42:38 +0100 Subject: [PATCH 12/40] =?UTF-8?q?=09modifi=C3=A9=C2=A0:=20=20=20=20=20=20?= =?UTF-8?q?=20=20=20front/src/components/ClickableLink.tsx=20=09modifi?= =?UTF-8?q?=C3=A9=C2=A0:=20=20=20=20=20=20=20=20=20front/src/components/Lo?= =?UTF-8?q?goButton.tsx=20=09modifi=C3=A9=C2=A0:=20=20=20=20=20=20=20=20?= =?UTF-8?q?=20front/src/components/RoundButton.tsx?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Insertion des types pour les composants. --- front/src/components/ClickableLink.tsx | 7 ++++++- front/src/components/LogoButton.tsx | 7 ++++++- front/src/components/RoundButton.tsx | 8 +++++++- 3 files changed, 19 insertions(+), 3 deletions(-) diff --git a/front/src/components/ClickableLink.tsx b/front/src/components/ClickableLink.tsx index ee88b3b..7cf03eb 100644 --- a/front/src/components/ClickableLink.tsx +++ b/front/src/components/ClickableLink.tsx @@ -1,4 +1,9 @@ -export default function ClickableLink({url, text}) { +interface ClickableLinkProps { + url:string; + text:string; +} + +export default function ClickableLink({url, text}: ClickableLinkProps) { return (
-
+
) } \ No newline at end of file From f77b96db25fbb87f712effcc73a81cca68ef395c Mon Sep 17 00:00:00 2001 From: ChenNux Date: Fri, 6 Dec 2024 00:36:52 +0100 Subject: [PATCH 17/40] =?UTF-8?q?=09nouveau=20fichier=C2=A0:=20front/src/c?= =?UTF-8?q?omponents/Footer.tsx?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- front/src/components/Footer.tsx | 19 +++++++++++++++++++ package-lock.json | 6 ++++++ 2 files changed, 25 insertions(+) create mode 100644 front/src/components/Footer.tsx create mode 100644 package-lock.json diff --git a/front/src/components/Footer.tsx b/front/src/components/Footer.tsx new file mode 100644 index 0000000..468812c --- /dev/null +++ b/front/src/components/Footer.tsx @@ -0,0 +1,19 @@ +import LogoButton from "./LogoButton" + +interface FooterProps { + bgcolor:string +} + +export default function Footer ({bgcolor}:FooterProps) { + return ( +
+
ENSIBS
RedCRAB
+
+ +
+
+ ) +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..e73376c --- /dev/null +++ b/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "projet-nuitinfo-2024", + "lockfileVersion": 3, + "requires": true, + "packages": {} +} From 9562eb98dc70620427aae437fb924e17d8e77fcb Mon Sep 17 00:00:00 2001 From: = Date: Fri, 6 Dec 2024 00:37:52 +0100 Subject: [PATCH 18/40] Articles section of the main page --- front/src/components/ArticleCard.tsx | 53 +++++++++++++++++------- front/src/components/ArticlesSection.tsx | 53 ++++++++++++++++++++---- front/src/components/Button.tsx | 7 ++-- front/src/index.css | 7 ++++ front/src/types.ts | 8 +++- 5 files changed, 101 insertions(+), 27 deletions(-) diff --git a/front/src/components/ArticleCard.tsx b/front/src/components/ArticleCard.tsx index 96000e4..6764b17 100644 --- a/front/src/components/ArticleCard.tsx +++ b/front/src/components/ArticleCard.tsx @@ -1,26 +1,49 @@ -import { Article } from '../types' - -export default function ArticleCard({ article }: { article: Article }) { +import { ArticlePreview } from '../types' +import Button from './Button' +export default function ArticleCard({ articlePreview }: { articlePreview: ArticlePreview }) { return (
-

{article.title}

-

{article.content}

+ Article preview +
+

{articlePreview.title}

+

{articlePreview.preview}

+
+
) } \ No newline at end of file diff --git a/front/src/components/ArticlesSection.tsx b/front/src/components/ArticlesSection.tsx index 5db142b..eab4b52 100644 --- a/front/src/components/ArticlesSection.tsx +++ b/front/src/components/ArticlesSection.tsx @@ -1,22 +1,59 @@ import { useEffect, useState } from "react"; import ArticleCard from "./ArticleCard"; -import { Article } from "../types"; +import { ArticlePreview } from "../types"; export default function ArticlesSection() { - const [articles, setArticles] = useState([]); + const [articlePreviews, setArticlePreviews] = useState([]); useEffect(() => { fetch('/api/article') - .then(response => response.json()) - .then((data: Article[]) => setArticles(data)); + .then(response => { + //response.json() + return [ + { + id: 1, + title: "Qu'est-ce que le Lorem Ipsum?", + preview: "Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.", + }, + { + id: 2, + title: "Pourquoi l'utiliser?", + preview: "On sait depuis longtemps que travailler avec du texte lisible et contenant du sens est source de distractions, et empêche de se concentrer sur la mise en page elle-même. L'avantage du Lorem Ipsum sur un texte générique comme 'Du texte. Du texte. Du texte.' est qu'il possède une distribution de lettres plus ou moins normale, et en tout cas comparable avec celle du français standard. De nombreuses suites logicielles de mise en page ou éditeurs de sites Web ont fait du Lorem Ipsum leur faux texte par défaut, et une recherche pour 'Lorem Ipsum' vous conduira vers de nombreux sites qui n'en sont encore qu'à leur phase de construction. Plusieurs versions sont apparues avec le temps, parfois par accident, souvent intentionnellement (histoire d'y rajouter de petits clins d'oeil, voire des phrases embarassantes).", + }, + { + id: 3, + title: "Title", + preview: "Preview", + }, + ] + }) + .then((data: ArticlePreview[]) => setArticlePreviews(data)); }, []); return ( -
- {articles.map(article => ( - +
+

Articles

+ {articlePreviews.map(articlePreview => ( + ))}
) -} \ No newline at end of file +} diff --git a/front/src/components/Button.tsx b/front/src/components/Button.tsx index 05c98b8..6d1fdf4 100644 --- a/front/src/components/Button.tsx +++ b/front/src/components/Button.tsx @@ -2,16 +2,17 @@ import { ReactNode, MouseEventHandler } from 'react'; interface ButtonProps { onClick: MouseEventHandler; + color: 'primary' | 'secondary'; children: ReactNode; } -export default function Button({ onClick, children }: ButtonProps) { +export default function Button({ onClick, color, children }: ButtonProps) { return (
+
) diff --git a/front/src/components/ArticlesSection.tsx b/front/src/components/ArticlesSection.tsx index eab4b52..fe52486 100644 --- a/front/src/components/ArticlesSection.tsx +++ b/front/src/components/ArticlesSection.tsx @@ -5,30 +5,15 @@ import { ArticlePreview } from "../types"; export default function ArticlesSection() { const [articlePreviews, setArticlePreviews] = useState([]); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); useEffect(() => { fetch('/api/article') - .then(response => { - //response.json() - return [ - { - id: 1, - title: "Qu'est-ce que le Lorem Ipsum?", - preview: "Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.", - }, - { - id: 2, - title: "Pourquoi l'utiliser?", - preview: "On sait depuis longtemps que travailler avec du texte lisible et contenant du sens est source de distractions, et empêche de se concentrer sur la mise en page elle-même. L'avantage du Lorem Ipsum sur un texte générique comme 'Du texte. Du texte. Du texte.' est qu'il possède une distribution de lettres plus ou moins normale, et en tout cas comparable avec celle du français standard. De nombreuses suites logicielles de mise en page ou éditeurs de sites Web ont fait du Lorem Ipsum leur faux texte par défaut, et une recherche pour 'Lorem Ipsum' vous conduira vers de nombreux sites qui n'en sont encore qu'à leur phase de construction. Plusieurs versions sont apparues avec le temps, parfois par accident, souvent intentionnellement (histoire d'y rajouter de petits clins d'oeil, voire des phrases embarassantes).", - }, - { - id: 3, - title: "Title", - preview: "Preview", - }, - ] - }) - .then((data: ArticlePreview[]) => setArticlePreviews(data)); + .then(response => response.json()) + .then((data: ArticlePreview[]) => setArticlePreviews(data)) + .catch(_ => setError('Failed to fetch articles')) + .finally(() => setLoading(false)); }, []); return ( @@ -37,6 +22,7 @@ export default function ArticlesSection() { flexWrap: 'wrap', justifyContent: 'space-around', backgroundColor: 'var(--color-verydarkblue)', + flex: 1, }}>

( ))} + {!loading && !error && articlePreviews.length === 0 &&

No articles found

} + {loading &&

Loading...

} + {error &&

{error}

} ) } diff --git a/front/src/components/ButtonLink.tsx b/front/src/components/ButtonLink.tsx new file mode 100644 index 0000000..a8a4757 --- /dev/null +++ b/front/src/components/ButtonLink.tsx @@ -0,0 +1,34 @@ +interface ButtonLinkProps { + url: string; + color: 'primary' | 'secondary'; + text: string; +} + +export default function Button({ url, color, text }: ButtonLinkProps) { + return ( + {text} + ) +} + diff --git a/front/src/index.css b/front/src/index.css index 3b3b175..328146f 100644 --- a/front/src/index.css +++ b/front/src/index.css @@ -7,6 +7,7 @@ --color-white: #ffffff; --color-black: #000000; --color-gray: #f5f5f5; + --color-red: #ff0000; } body { diff --git a/front/src/main.tsx b/front/src/main.tsx index f2884e0..d4ac604 100644 --- a/front/src/main.tsx +++ b/front/src/main.tsx @@ -2,13 +2,20 @@ import { BrowserRouter, Route, Routes } from "react-router"; import { createRoot } from 'react-dom/client' import MainPage from "./pages/MainPage.tsx"; import GamePage from "./pages/GamePage.tsx"; +import ArticlePage from "./pages/ArticlePage.tsx"; import './index.css' createRoot(document.getElementById('root')!).render( + // Main page } /> + // Game page } /> + // Article page (dynamic route) + } /> + // Not found + Not Found} /> - , + ) diff --git a/front/src/pages/ArticlePage.tsx b/front/src/pages/ArticlePage.tsx new file mode 100644 index 0000000..b3d99ad --- /dev/null +++ b/front/src/pages/ArticlePage.tsx @@ -0,0 +1,54 @@ +import React, { useEffect, useState } from 'react'; +import { useParams } from 'react-router-dom'; + +interface Article { + id: string; + title: string; + content: string; + author: string; + publishedAt: string; +} + +const ArticlePage: React.FC = () => { + const { id } = useParams<{ id: string }>(); + const [article, setArticle] = useState
(null); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + + useEffect(() => { + fetch(`/api/article/${id}`) + .then(response => response.json()) + .then(data => setArticle(data)) + .catch(_ => setError('Failed to fetch article')) + .finally(() => setLoading(false)); + }, [id]); + + if (loading) { + return
Loading...
; + } + + if (error) { + return
{error}
; + } + + if (!article) { + return
Article not found
; + } + + return ( +
+ Article preview +

{article.title}

+

{article.content}

+

By {article.author}

+

Published on {new Date(article.publishedAt).toLocaleDateString()}

+
+ ); +}; + +export default ArticlePage; \ No newline at end of file diff --git a/front/src/pages/MainPage.tsx b/front/src/pages/MainPage.tsx index be1d97d..f051552 100644 --- a/front/src/pages/MainPage.tsx +++ b/front/src/pages/MainPage.tsx @@ -5,11 +5,11 @@ import Footer from '../components/Footer.tsx' export default function MainPage() { return ( <> -
+
+
-