From 146c9f3ef1ed761c202024858896a0047f47fb5e Mon Sep 17 00:00:00 2001 From: Ayse Zeynep Aydin Date: Wed, 7 Oct 2026 22:15:35 +0200 Subject: [PATCH 1/7] setup: added folder basic folder structure and a nav bar --- frontend/index.html | 2 +- frontend/package-lock.json | 13 +++ frontend/package.json | 1 + frontend/src/App.css | 184 ---------------------------------- frontend/src/App.tsx | 118 +--------------------- frontend/src/GameDetails.tsx | 6 ++ frontend/src/GamesGrid.tsx | 6 ++ frontend/src/Header.tsx | 26 +++++ frontend/src/MyRatings.tsx | 6 ++ frontend/src/assets/hero.png | Bin 13057 -> 0 bytes frontend/src/assets/react.svg | 1 - frontend/src/assets/vite.svg | 1 - frontend/src/index.css | 111 -------------------- package-lock.json | 78 ++++++++++++++ package.json | 5 + 15 files changed, 147 insertions(+), 411 deletions(-) create mode 100644 frontend/src/GameDetails.tsx create mode 100644 frontend/src/GamesGrid.tsx create mode 100644 frontend/src/Header.tsx create mode 100644 frontend/src/MyRatings.tsx delete mode 100644 frontend/src/assets/hero.png delete mode 100644 frontend/src/assets/react.svg delete mode 100644 frontend/src/assets/vite.svg create mode 100644 package-lock.json create mode 100644 package.json diff --git a/frontend/index.html b/frontend/index.html index 7b51410..d4263e3 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -2,7 +2,7 @@ - + it2810-t33-p2 diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 6299a8a..0263763 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -13,6 +13,7 @@ "graphql": "^17.0.2", "react": "^19.2.8", "react-bootstrap": "^2.10.10", + "react-bootstrap-icons": "^1.11.6", "react-dom": "^19.2.8", "rxjs": "^7.8.2" }, @@ -2999,6 +3000,18 @@ } } }, + "node_modules/react-bootstrap-icons": { + "version": "1.11.6", + "resolved": "https://registry.npmjs.org/react-bootstrap-icons/-/react-bootstrap-icons-1.11.6.tgz", + "integrity": "sha512-ycXiyeSyzbS1C4+MlPTYe0riB+UlZ7LV7YZQYqlERV2cxDiKtntI0huHmP/3VVvzPt4tGxqK0K+Y6g7We3U6tQ==", + "license": "MIT", + "dependencies": { + "prop-types": "^15.7.2" + }, + "peerDependencies": { + "react": ">=16.8.6" + } + }, "node_modules/react-dom": { "version": "19.3.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.3.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index 8938b16..99447be 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -15,6 +15,7 @@ "graphql": "^17.0.2", "react": "^19.2.8", "react-bootstrap": "^2.10.10", + "react-bootstrap-icons": "^1.11.6", "react-dom": "^19.2.8", "rxjs": "^7.8.2" }, diff --git a/frontend/src/App.css b/frontend/src/App.css index f90339d..e69de29 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -1,184 +0,0 @@ -.counter { - font-size: 16px; - padding: 5px 10px; - border-radius: 5px; - color: var(--accent); - background: var(--accent-bg); - border: 2px solid transparent; - transition: border-color 0.3s; - margin-bottom: 24px; - - &:hover { - border-color: var(--accent-border); - } - &:focus-visible { - outline: 2px solid var(--accent); - outline-offset: 2px; - } -} - -.hero { - position: relative; - - .base, - .framework, - .vite { - inset-inline: 0; - margin: 0 auto; - } - - .base { - width: 170px; - position: relative; - z-index: 0; - } - - .framework, - .vite { - position: absolute; - } - - .framework { - z-index: 1; - top: 34px; - height: 28px; - transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg) - scale(1.4); - } - - .vite { - z-index: 0; - top: 107px; - height: 26px; - width: auto; - transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg) - scale(0.8); - } -} - -#center { - display: flex; - flex-direction: column; - gap: 25px; - place-content: center; - place-items: center; - flex-grow: 1; - - @media (max-width: 1024px) { - padding: 32px 20px 24px; - gap: 18px; - } -} - -#next-steps { - display: flex; - border-top: 1px solid var(--border); - text-align: left; - - & > div { - flex: 1 1 0; - padding: 32px; - @media (max-width: 1024px) { - padding: 24px 20px; - } - } - - .icon { - margin-bottom: 16px; - width: 22px; - height: 22px; - } - - @media (max-width: 1024px) { - flex-direction: column; - text-align: center; - } -} - -#docs { - border-right: 1px solid var(--border); - - @media (max-width: 1024px) { - border-right: none; - border-bottom: 1px solid var(--border); - } -} - -#next-steps ul { - list-style: none; - padding: 0; - display: flex; - gap: 8px; - margin: 32px 0 0; - - .logo { - height: 18px; - } - - a { - color: var(--text-h); - font-size: 16px; - border-radius: 6px; - background: var(--social-bg); - display: flex; - padding: 6px 12px; - align-items: center; - gap: 8px; - text-decoration: none; - transition: box-shadow 0.3s; - - &:hover { - box-shadow: var(--shadow); - } - .button-icon { - height: 18px; - width: 18px; - } - } - - @media (max-width: 1024px) { - margin-top: 20px; - flex-wrap: wrap; - justify-content: center; - - li { - flex: 1 1 calc(50% - 8px); - } - - a { - width: 100%; - justify-content: center; - box-sizing: border-box; - } - } -} - -#spacer { - height: 88px; - border-top: 1px solid var(--border); - @media (max-width: 1024px) { - height: 48px; - } -} - -.ticks { - position: relative; - width: 100%; - - &::before, - &::after { - content: ''; - position: absolute; - top: -4.5px; - border: 5px solid transparent; - } - - &::before { - left: 0; - border-left-color: var(--border); - } - &::after { - right: 0; - border-right-color: var(--border); - } -} diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 9ca8e8d..bfd5953 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,122 +1,14 @@ -import { useState } from 'react' -import heroImg from './assets/hero.png' -import reactLogo from './assets/react.svg' -import viteLogo from './assets/vite.svg' -import './App.css' +import './App.css'; +import Header from './Header.tsx'; +import 'bootstrap/dist/css/bootstrap.min.css'; function App() { - const [count, setCount] = useState(0) return ( <> -
-
- - React logo - Vite logo -
-
-

Get started

-

- Edit src/App.tsx and save to test HMR -

-
- -
- -
- -
-
- -

Documentation

-

Your questions, answered

- -
-
- -

Connect with us

-

Join the Vite community

- -
-
- -
-
+
) } -export default App +export default App; diff --git a/frontend/src/GameDetails.tsx b/frontend/src/GameDetails.tsx new file mode 100644 index 0000000..6e03dca --- /dev/null +++ b/frontend/src/GameDetails.tsx @@ -0,0 +1,6 @@ +export default function GameDetails () { + return ( + <> + + ); +} \ No newline at end of file diff --git a/frontend/src/GamesGrid.tsx b/frontend/src/GamesGrid.tsx new file mode 100644 index 0000000..de49c3c --- /dev/null +++ b/frontend/src/GamesGrid.tsx @@ -0,0 +1,6 @@ +export default function GamesGrid () { + return ( + <> + + ); +} \ No newline at end of file diff --git a/frontend/src/Header.tsx b/frontend/src/Header.tsx new file mode 100644 index 0000000..5378f15 --- /dev/null +++ b/frontend/src/Header.tsx @@ -0,0 +1,26 @@ +import { Button, Container, Form, InputGroup, Nav, Navbar } from 'react-bootstrap'; +import { Search } from 'react-bootstrap-icons'; + +function navigate(){ + console.log('Navigating...'); +} + +export default function Header() { + return ( + + + NTNU Game Ratings(WIP) +
+ + + +
+ My Ratings + + + ); +} \ No newline at end of file diff --git a/frontend/src/MyRatings.tsx b/frontend/src/MyRatings.tsx new file mode 100644 index 0000000..500b704 --- /dev/null +++ b/frontend/src/MyRatings.tsx @@ -0,0 +1,6 @@ +export default function MyRatings () { + return ( + <> + + ); +} \ No newline at end of file diff --git a/frontend/src/assets/hero.png b/frontend/src/assets/hero.png deleted file mode 100644 index 02251f4b956c55af2d76fd0788124d7eee2b45eb..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 13057 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 P00000NkvXXu0mjft=yBf diff --git a/frontend/src/assets/react.svg b/frontend/src/assets/react.svg deleted file mode 100644 index 6c87de9..0000000 --- a/frontend/src/assets/react.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/frontend/src/assets/vite.svg b/frontend/src/assets/vite.svg deleted file mode 100644 index 5101b67..0000000 --- a/frontend/src/assets/vite.svg +++ /dev/null @@ -1 +0,0 @@ -Vite diff --git a/frontend/src/index.css b/frontend/src/index.css index 5fb3313..e69de29 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -1,111 +0,0 @@ -:root { - --text: #6b6375; - --text-h: #08060d; - --bg: #fff; - --border: #e5e4e7; - --code-bg: #f4f3ec; - --accent: #aa3bff; - --accent-bg: rgba(170, 59, 255, 0.1); - --accent-border: rgba(170, 59, 255, 0.5); - --social-bg: rgba(244, 243, 236, 0.5); - --shadow: - rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px; - - --sans: system-ui, 'Segoe UI', Roboto, sans-serif; - --heading: system-ui, 'Segoe UI', Roboto, sans-serif; - --mono: ui-monospace, Consolas, monospace; - - font: 18px/145% var(--sans); - letter-spacing: 0.18px; - color-scheme: light dark; - color: var(--text); - background: var(--bg); - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - - @media (max-width: 1024px) { - font-size: 16px; - } -} - -@media (prefers-color-scheme: dark) { - :root { - --text: #9ca3af; - --text-h: #f3f4f6; - --bg: #16171d; - --border: #2e303a; - --code-bg: #1f2028; - --accent: #c084fc; - --accent-bg: rgba(192, 132, 252, 0.15); - --accent-border: rgba(192, 132, 252, 0.5); - --social-bg: rgba(47, 48, 58, 0.5); - --shadow: - rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px; - } - - #social .button-icon { - filter: invert(1) brightness(2); - } -} - -#root { - width: 1126px; - max-width: 100%; - margin: 0 auto; - text-align: center; - border-inline: 1px solid var(--border); - min-height: 100svh; - display: flex; - flex-direction: column; - box-sizing: border-box; -} - -body { - margin: 0; -} - -h1, -h2 { - font-family: var(--heading); - font-weight: 500; - color: var(--text-h); -} - -h1 { - font-size: 56px; - letter-spacing: -1.68px; - margin: 32px 0; - @media (max-width: 1024px) { - font-size: 36px; - margin: 20px 0; - } -} -h2 { - font-size: 24px; - line-height: 118%; - letter-spacing: -0.24px; - margin: 0 0 8px; - @media (max-width: 1024px) { - font-size: 20px; - } -} -p { - margin: 0; -} - -code, -.counter { - font-family: var(--mono); - display: inline-flex; - border-radius: 4px; - color: var(--text-h); -} - -code { - font-size: 15px; - line-height: 135%; - padding: 4px 8px; - background: var(--code-bg); -} diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..5d533f7 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,78 @@ +{ + "name": "T33-Project-2", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "dependencies": { + "react-bootstrap-icons": "^1.11.6" + } + }, + "node_modules/js-tokens": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", + "license": "MIT" + }, + "node_modules/loose-envify": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", + "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "license": "MIT", + "dependencies": { + "js-tokens": "^3.0.0 || ^4.0.0" + }, + "bin": { + "loose-envify": "cli.js" + } + }, + "node_modules/object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/prop-types": { + "version": "15.8.1", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", + "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", + "license": "MIT", + "dependencies": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.13.1" + } + }, + "node_modules/react": { + "version": "19.3.0", + "resolved": "https://registry.npmjs.org/react/-/react-19.3.0.tgz", + "integrity": "sha512-E8LUcbtBWt20bbl2YoHfx4ZDBdxVTfOKtCZn9cDSJ4l6/nuoApcpIBcj47t2wZoVX8g2ZHuMHbiShgCR1T5Sog==", + "license": "MIT", + "peer": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/react-bootstrap-icons": { + "version": "1.11.6", + "resolved": "https://registry.npmjs.org/react-bootstrap-icons/-/react-bootstrap-icons-1.11.6.tgz", + "integrity": "sha512-ycXiyeSyzbS1C4+MlPTYe0riB+UlZ7LV7YZQYqlERV2cxDiKtntI0huHmP/3VVvzPt4tGxqK0K+Y6g7We3U6tQ==", + "license": "MIT", + "dependencies": { + "prop-types": "^15.7.2" + }, + "peerDependencies": { + "react": ">=16.8.6" + } + }, + "node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", + "license": "MIT" + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..112c08d --- /dev/null +++ b/package.json @@ -0,0 +1,5 @@ +{ + "dependencies": { + "react-bootstrap-icons": "^1.11.6" + } +} From fb21b82f2b95424a10fefd6be5524dad785132a0 Mon Sep 17 00:00:00 2001 From: Ayse Zeynep Aydin Date: Fri, 9 Oct 2026 10:30:30 +0200 Subject: [PATCH 2/7] feat: added GameDetails.tsx --- frontend/src/App.tsx | 4 ++- frontend/src/GameDetails.tsx | 47 ++++++++++++++++++++++++++++++++---- frontend/src/Header.tsx | 7 ++---- frontend/src/MyRatings.tsx | 3 +++ 4 files changed, 50 insertions(+), 11 deletions(-) diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index bfd5953..eeb3916 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,4 +1,5 @@ import './App.css'; +import GameDetails from './GameDetails.tsx'; import Header from './Header.tsx'; import 'bootstrap/dist/css/bootstrap.min.css'; @@ -6,7 +7,8 @@ function App() { return ( <> -
+ {/*
*/} + ) } diff --git a/frontend/src/GameDetails.tsx b/frontend/src/GameDetails.tsx index 6e03dca..960d866 100644 --- a/frontend/src/GameDetails.tsx +++ b/frontend/src/GameDetails.tsx @@ -1,6 +1,43 @@ -export default function GameDetails () { - return ( - <> - - ); +import { Container, Image } from "react-bootstrap"; +import Header from "./Header"; + +function fetchGameDetails(){ + +} + +export default function GameDetails() { + return ( + <> +
+ + + Release year | Age rating + +

+ Game Title +

+
+ Game Image +
+
NTNU Rating:
+

Your Rating:

+
+
+
Tags:
+
Developer(s):
+
Publisher(s):
+
Platform(s):
+

+ Description +

+ + + + ); } \ No newline at end of file diff --git a/frontend/src/Header.tsx b/frontend/src/Header.tsx index 5378f15..95d51fe 100644 --- a/frontend/src/Header.tsx +++ b/frontend/src/Header.tsx @@ -1,15 +1,12 @@ import { Button, Container, Form, InputGroup, Nav, Navbar } from 'react-bootstrap'; import { Search } from 'react-bootstrap-icons'; -function navigate(){ - console.log('Navigating...'); -} export default function Header() { return ( - NTNU Game Ratings(WIP) + NTNU Game Ratings(WIP)
- My Ratings + My Ratings ); diff --git a/frontend/src/MyRatings.tsx b/frontend/src/MyRatings.tsx index 500b704..0dafea7 100644 --- a/frontend/src/MyRatings.tsx +++ b/frontend/src/MyRatings.tsx @@ -1,6 +1,9 @@ +import Header from './Header.tsx' + export default function MyRatings () { return ( <> +
); } \ No newline at end of file From 0c173156951d529c064defaf044c34ff6df7bfa0 Mon Sep 17 00:00:00 2001 From: Ayse Zeynep Aydin Date: Fri, 9 Oct 2026 11:31:15 +0200 Subject: [PATCH 3/7] feat: GamesGrid.tsx initialization --- frontend/src/App.tsx | 6 ++++-- frontend/src/GamesGrid.tsx | 20 ++++++++++++++++++++ 2 files changed, 24 insertions(+), 2 deletions(-) diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index eeb3916..d3db457 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,14 +1,16 @@ import './App.css'; +import 'bootstrap/dist/css/bootstrap.min.css'; import GameDetails from './GameDetails.tsx'; import Header from './Header.tsx'; -import 'bootstrap/dist/css/bootstrap.min.css'; +import GamesGrid from './GamesGrid.tsx'; function App() { return ( <> {/*
*/} - + {/* */} + ) } diff --git a/frontend/src/GamesGrid.tsx b/frontend/src/GamesGrid.tsx index de49c3c..288b80b 100644 --- a/frontend/src/GamesGrid.tsx +++ b/frontend/src/GamesGrid.tsx @@ -1,6 +1,26 @@ +import { Container, Image } from "react-bootstrap"; +import Header from "./Header"; + export default function GamesGrid () { return ( <> +
+ {/* Filtering, paging and sorting */} + {/* Grid itself */} + + Game Image +
+
Game Title
+
Release year
+
Tags
+
Rating
+
+ + ); } \ No newline at end of file From b16862c887c2526766c972f4380b8da99bf4a6fc Mon Sep 17 00:00:00 2001 From: Ayse Zeynep Aydin Date: Fri, 9 Oct 2026 14:46:45 +0200 Subject: [PATCH 4/7] bug-fix: removed folder-structure from README.md --- README.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index a934a3c..6596562 100644 --- a/README.md +++ b/README.md @@ -14,10 +14,9 @@ A searchable catalog of video games where users can browse, filter and rate game 3. [Functionality](#functionality) 4. [Design](#design) 5. [Architecture](#architecture) -6. [Folder structure](#folder-structure) -7. [Accessibility](#accessibility) -8. [Sustainability](#sustainability) -9. [Development process and AI use](#development-process-and-ai-use) +6. [Accessibility](#accessibility) +7. [Sustainability](#sustainability) +8. [Development process and AI use](#development-process-and-ai-use) --- From f4afa74864affcf20e94f9efc7a581282777e65e Mon Sep 17 00:00:00 2001 From: joelte Date: Fri, 9 Oct 2026 16:20:33 +0200 Subject: [PATCH 5/7] refactor: Split frontend into scaling-proof tree Sliit the frontend src-code into a more structured folder setup that will allow for easier implementation in the future --- frontend/src/App.tsx | 6 +++--- frontend/src/{ => components/Header}/Header.tsx | 0 frontend/src/{ => pages/GameDetails}/GameDetails.tsx | 2 +- frontend/src/{ => pages/GamesGrid}/GamesGrid.tsx | 2 +- frontend/src/{ => pages/MyRatings}/MyRatings.tsx | 2 +- 5 files changed, 6 insertions(+), 6 deletions(-) rename frontend/src/{ => components/Header}/Header.tsx (100%) rename frontend/src/{ => pages/GameDetails}/GameDetails.tsx (95%) rename frontend/src/{ => pages/GamesGrid}/GamesGrid.tsx (93%) rename frontend/src/{ => pages/MyRatings}/MyRatings.tsx (65%) diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index d3db457..57bbd76 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,8 +1,8 @@ import './App.css'; import 'bootstrap/dist/css/bootstrap.min.css'; -import GameDetails from './GameDetails.tsx'; -import Header from './Header.tsx'; -import GamesGrid from './GamesGrid.tsx'; +import GameDetails from './pages/GameDetails/GameDetails.tsx'; +import Header from './components/Header/Header.tsx'; +import GamesGrid from './pages/GamesGrid/GamesGrid.tsx'; function App() { diff --git a/frontend/src/Header.tsx b/frontend/src/components/Header/Header.tsx similarity index 100% rename from frontend/src/Header.tsx rename to frontend/src/components/Header/Header.tsx diff --git a/frontend/src/GameDetails.tsx b/frontend/src/pages/GameDetails/GameDetails.tsx similarity index 95% rename from frontend/src/GameDetails.tsx rename to frontend/src/pages/GameDetails/GameDetails.tsx index 960d866..d5e3d2d 100644 --- a/frontend/src/GameDetails.tsx +++ b/frontend/src/pages/GameDetails/GameDetails.tsx @@ -1,5 +1,5 @@ import { Container, Image } from "react-bootstrap"; -import Header from "./Header"; +import Header from "../../components/Header/Header"; function fetchGameDetails(){ diff --git a/frontend/src/GamesGrid.tsx b/frontend/src/pages/GamesGrid/GamesGrid.tsx similarity index 93% rename from frontend/src/GamesGrid.tsx rename to frontend/src/pages/GamesGrid/GamesGrid.tsx index 288b80b..1e0723c 100644 --- a/frontend/src/GamesGrid.tsx +++ b/frontend/src/pages/GamesGrid/GamesGrid.tsx @@ -1,5 +1,5 @@ import { Container, Image } from "react-bootstrap"; -import Header from "./Header"; +import Header from "../../components/Header/Header"; export default function GamesGrid () { return ( diff --git a/frontend/src/MyRatings.tsx b/frontend/src/pages/MyRatings/MyRatings.tsx similarity index 65% rename from frontend/src/MyRatings.tsx rename to frontend/src/pages/MyRatings/MyRatings.tsx index 0dafea7..e52a5cc 100644 --- a/frontend/src/MyRatings.tsx +++ b/frontend/src/pages/MyRatings/MyRatings.tsx @@ -1,4 +1,4 @@ -import Header from './Header.tsx' +import Header from '../../components/Header/Header.tsx' export default function MyRatings () { return ( From 1eb7e4a3b2d1997f4c681288427e359f03c9c678 Mon Sep 17 00:00:00 2001 From: joelte Date: Fri, 9 Oct 2026 16:26:08 +0200 Subject: [PATCH 6/7] refactor: Remove unecessary unused files and code Cleanup of the current skeleton to allow for easier future implementation --- frontend/public/favicon.svg | 1 - frontend/public/icons.svg | 24 -------- frontend/src/App.css | 0 frontend/src/App.tsx | 16 +---- frontend/src/components/Header/Header.tsx | 37 +++++++----- frontend/src/index.css | 0 frontend/src/main.tsx | 11 ++-- .../src/pages/GameDetails/GameDetails.tsx | 59 ++++++++----------- frontend/src/pages/GamesGrid/GamesGrid.tsx | 43 +++++++------- frontend/src/pages/MyRatings/MyRatings.tsx | 16 ++--- 10 files changed, 81 insertions(+), 126 deletions(-) delete mode 100644 frontend/public/favicon.svg delete mode 100644 frontend/public/icons.svg delete mode 100644 frontend/src/App.css delete mode 100644 frontend/src/index.css diff --git a/frontend/public/favicon.svg b/frontend/public/favicon.svg deleted file mode 100644 index 6893eb1..0000000 --- a/frontend/public/favicon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/frontend/public/icons.svg b/frontend/public/icons.svg deleted file mode 100644 index e952219..0000000 --- a/frontend/public/icons.svg +++ /dev/null @@ -1,24 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/frontend/src/App.css b/frontend/src/App.css deleted file mode 100644 index e69de29..0000000 diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 57bbd76..235f3d9 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,18 +1,8 @@ -import './App.css'; -import 'bootstrap/dist/css/bootstrap.min.css'; -import GameDetails from './pages/GameDetails/GameDetails.tsx'; -import Header from './components/Header/Header.tsx'; -import GamesGrid from './pages/GamesGrid/GamesGrid.tsx'; +import "bootstrap/dist/css/bootstrap.min.css"; +import GamesGrid from "./pages/GamesGrid/GamesGrid"; function App() { - - return ( - <> - {/*
*/} - {/* */} - - - ) + return ; } export default App; diff --git a/frontend/src/components/Header/Header.tsx b/frontend/src/components/Header/Header.tsx index 95d51fe..e833e68 100644 --- a/frontend/src/components/Header/Header.tsx +++ b/frontend/src/components/Header/Header.tsx @@ -1,23 +1,28 @@ -import { Button, Container, Form, InputGroup, Nav, Navbar } from 'react-bootstrap'; -import { Search } from 'react-bootstrap-icons'; - +import { + Button, + Container, + Form, + InputGroup, + Nav, + Navbar, +} from "react-bootstrap"; +import { Search } from "react-bootstrap-icons"; export default function Header() { - return ( + return ( - - NTNU Game Ratings(WIP) + + NTNU Game Ratings (WIP)
- - - -
+ + + + + My Ratings - ); -} \ No newline at end of file + ); +} diff --git a/frontend/src/index.css b/frontend/src/index.css deleted file mode 100644 index e69de29..0000000 diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx index bef5202..f8fc6f5 100644 --- a/frontend/src/main.tsx +++ b/frontend/src/main.tsx @@ -1,10 +1,9 @@ -import { StrictMode } from 'react' -import { createRoot } from 'react-dom/client' -import './index.css' -import App from './App.tsx' +import { StrictMode } from "react"; +import { createRoot } from "react-dom/client"; +import App from "./App"; -createRoot(document.getElementById('root')!).render( +createRoot(document.getElementById("root")!).render( , -) +); diff --git a/frontend/src/pages/GameDetails/GameDetails.tsx b/frontend/src/pages/GameDetails/GameDetails.tsx index d5e3d2d..3415488 100644 --- a/frontend/src/pages/GameDetails/GameDetails.tsx +++ b/frontend/src/pages/GameDetails/GameDetails.tsx @@ -1,43 +1,32 @@ import { Container, Image } from "react-bootstrap"; import Header from "../../components/Header/Header"; -function fetchGameDetails(){ - -} - export default function GameDetails() { return ( <> -
- - - Release year | Age rating - -

- Game Title -

-
- Game Image -
-
NTNU Rating:
-

Your Rating:

-
-
-
Tags:
-
Developer(s):
-
Publisher(s):
-
Platform(s):
-

- Description -

- - +
+ + Release year | Age rating +

Game Title

+
+ Game Image +
+
NTNU Rating:
+

Your Rating:

+
+
+
Tags:
+
Developer(s):
+
Publisher(s):
+
Platform(s):
+

Description

+ ); -} \ No newline at end of file +} diff --git a/frontend/src/pages/GamesGrid/GamesGrid.tsx b/frontend/src/pages/GamesGrid/GamesGrid.tsx index 1e0723c..f2012f7 100644 --- a/frontend/src/pages/GamesGrid/GamesGrid.tsx +++ b/frontend/src/pages/GamesGrid/GamesGrid.tsx @@ -1,26 +1,23 @@ import { Container, Image } from "react-bootstrap"; import Header from "../../components/Header/Header"; -export default function GamesGrid () { - return ( - <> -
- {/* Filtering, paging and sorting */} - {/* Grid itself */} - - Game Image -
-
Game Title
-
Release year
-
Tags
-
Rating
-
- - - - ); -} \ No newline at end of file +export default function GamesGrid() { + return ( + <> +
+ + Game Image +
+
Game Title
+
Release year
+
Tags
+
Rating
+
+ + + ); +} diff --git a/frontend/src/pages/MyRatings/MyRatings.tsx b/frontend/src/pages/MyRatings/MyRatings.tsx index e52a5cc..aede895 100644 --- a/frontend/src/pages/MyRatings/MyRatings.tsx +++ b/frontend/src/pages/MyRatings/MyRatings.tsx @@ -1,9 +1,9 @@ -import Header from '../../components/Header/Header.tsx' +import Header from "../../components/Header/Header"; -export default function MyRatings () { - return ( - <> -
- - ); -} \ No newline at end of file +export default function MyRatings() { + return ( + <> +
+ + ); +} From 32794471674bd845f8af370a77ecbc1a0a7dfddb Mon Sep 17 00:00:00 2001 From: joelte Date: Fri, 9 Oct 2026 16:58:55 +0200 Subject: [PATCH 7/7] feat: Implementing static version of main Implemented a full 1st version of the frontpage with each module statically codeded with responsive sizes for the elements --- .../GameListItem/GameListItem.module.css | 34 ++++++++++ .../components/GameListItem/GameListItem.tsx | 31 +++++++++ .../src/components/Header/Header.module.css | 42 ++++++++++++ frontend/src/components/Header/Header.tsx | 43 ++++++------ .../src/components/Layout/Layout.module.css | 5 ++ frontend/src/components/Layout/Layout.tsx | 6 ++ .../src/components/Toolbar/Toolbar.module.css | 33 ++++++++++ frontend/src/components/Toolbar/Toolbar.tsx | 33 ++++++++++ frontend/src/index.css | 34 ++++++++++ frontend/src/main.tsx | 1 + .../src/pages/GamesGrid/GamesGrid.module.css | 6 ++ frontend/src/pages/GamesGrid/GamesGrid.tsx | 66 +++++++++++++++---- 12 files changed, 299 insertions(+), 35 deletions(-) create mode 100644 frontend/src/components/GameListItem/GameListItem.module.css create mode 100644 frontend/src/components/GameListItem/GameListItem.tsx create mode 100644 frontend/src/components/Header/Header.module.css create mode 100644 frontend/src/components/Layout/Layout.module.css create mode 100644 frontend/src/components/Layout/Layout.tsx create mode 100644 frontend/src/components/Toolbar/Toolbar.module.css create mode 100644 frontend/src/components/Toolbar/Toolbar.tsx create mode 100644 frontend/src/index.css create mode 100644 frontend/src/pages/GamesGrid/GamesGrid.module.css diff --git a/frontend/src/components/GameListItem/GameListItem.module.css b/frontend/src/components/GameListItem/GameListItem.module.css new file mode 100644 index 0000000..10da3c9 --- /dev/null +++ b/frontend/src/components/GameListItem/GameListItem.module.css @@ -0,0 +1,34 @@ +.row { + display: flex; + align-items: center; + flex: 1 1 0; + min-height: var(--row-min-height); + gap: 1.5rem; + padding: 0 1.5rem; +} + +.odd { + background-color: var(--color-stripe-odd); +} + +.even { + background-color: var(--color-stripe-even); +} + +.image { + width: 95px; + height: 95px; + object-fit: cover; + background-color: #ddd; + flex-shrink: 0; +} + +.info p { + margin: 0; +} + +.title { + margin: 0 0 0.25rem; + font-size: 1.1rem; + font-weight: 700; +} diff --git a/frontend/src/components/GameListItem/GameListItem.tsx b/frontend/src/components/GameListItem/GameListItem.tsx new file mode 100644 index 0000000..e682427 --- /dev/null +++ b/frontend/src/components/GameListItem/GameListItem.tsx @@ -0,0 +1,31 @@ +import styles from "./GameListItem.module.css"; + +interface GameListItemProps { + title: string; + year: number; + tags: string; + rating: number; + image: string; + striped: boolean; +} + +export default function GameListItem({ + title, + year, + tags, + rating, + image, + striped, +}: GameListItemProps) { + return ( +
+ {title} +
+

{title}

+

{year}

+

{tags}

+

{rating.toFixed(1)}/10

+
+
+ ); +} diff --git a/frontend/src/components/Header/Header.module.css b/frontend/src/components/Header/Header.module.css new file mode 100644 index 0000000..7fde7a7 --- /dev/null +++ b/frontend/src/components/Header/Header.module.css @@ -0,0 +1,42 @@ +.header { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + height: var(--header-height); + padding: 0 1.5rem; + background-color: var(--color-brand); +} + +.brand, +.link { + font-weight: 700; + color: var(--color-text); + white-space: nowrap; +} + +.link { + text-decoration: none; +} + +.search { + flex: 1; + max-width: 420px; +} + +.search :global(.input-group) { + border-radius: 999px; + overflow: hidden; +} + +.search :global(.form-control) { + border: none; +} + +.search :global(.form-control:focus) { + box-shadow: none; +} + +.search :global(.btn) { + border: none; +} diff --git a/frontend/src/components/Header/Header.tsx b/frontend/src/components/Header/Header.tsx index e833e68..b846e7f 100644 --- a/frontend/src/components/Header/Header.tsx +++ b/frontend/src/components/Header/Header.tsx @@ -1,28 +1,27 @@ -import { - Button, - Container, - Form, - InputGroup, - Nav, - Navbar, -} from "react-bootstrap"; +import { Button, Form, InputGroup } from "react-bootstrap"; import { Search } from "react-bootstrap-icons"; +import styles from "./Header.module.css"; export default function Header() { return ( - - - NTNU Game Ratings (WIP) -
- - - - -
- My Ratings - - +
+ Working Title + +
+ + + + +
+ + + My Ratings + +
); } diff --git a/frontend/src/components/Layout/Layout.module.css b/frontend/src/components/Layout/Layout.module.css new file mode 100644 index 0000000..52611a0 --- /dev/null +++ b/frontend/src/components/Layout/Layout.module.css @@ -0,0 +1,5 @@ +.shell { + width: 100%; + max-width: var(--content-width); + margin: 0 auto; +} diff --git a/frontend/src/components/Layout/Layout.tsx b/frontend/src/components/Layout/Layout.tsx new file mode 100644 index 0000000..ced9683 --- /dev/null +++ b/frontend/src/components/Layout/Layout.tsx @@ -0,0 +1,6 @@ +import type { ReactNode } from "react"; +import styles from "./Layout.module.css"; + +export default function Layout({ children }: { children: ReactNode }) { + return
{children}
; +} diff --git a/frontend/src/components/Toolbar/Toolbar.module.css b/frontend/src/components/Toolbar/Toolbar.module.css new file mode 100644 index 0000000..51f876a --- /dev/null +++ b/frontend/src/components/Toolbar/Toolbar.module.css @@ -0,0 +1,33 @@ +.toolbar { + display: flex; + align-items: center; + justify-content: space-between; + height: var(--toolbar-height); + padding: 0 1.5rem; + background-color: #fff; + border-bottom: 1px solid var(--color-border); + color: var(--color-muted); +} + +.action { + display: inline-flex; + align-items: center; + gap: 0.4rem; + border: none; + background: none; + color: inherit; + font: inherit; + cursor: pointer; +} + +.pagination { + display: inline-flex; + align-items: center; + gap: 0.75rem; +} + +.sort { + display: inline-flex; + align-items: center; + gap: 1rem; +} diff --git a/frontend/src/components/Toolbar/Toolbar.tsx b/frontend/src/components/Toolbar/Toolbar.tsx new file mode 100644 index 0000000..e2eadbb --- /dev/null +++ b/frontend/src/components/Toolbar/Toolbar.tsx @@ -0,0 +1,33 @@ +import { + ArrowDownUp, + ChevronDown, + ChevronLeft, + ChevronRight, + Funnel, +} from "react-bootstrap-icons"; +import styles from "./Toolbar.module.css"; + +export default function Toolbar() { + return ( +
+ + +
+ + Page 1 + +
+ +
+ + +
+
+ ); +} diff --git a/frontend/src/index.css b/frontend/src/index.css new file mode 100644 index 0000000..8082bd9 --- /dev/null +++ b/frontend/src/index.css @@ -0,0 +1,34 @@ +:root { + /* 50% of a 1920px viewport — the grid stays centered at this width until + the viewport can't fit it anymore, then it fills the screen (see Layout). */ + --content-width: 960px; + --header-height: 72px; + --toolbar-height: 56px; + /* Rows grow to fill the list height evenly, split across however many + games are currently rendered, but never shrink below this. Once rows + hit the floor, the list clips instead of squeezing them unreadably + thin (see GamesGrid.module.css and GameListItem.module.css). */ + --row-min-height: 112px; + --color-brand: #a8504f; + --color-text: #1a1a1a; + --color-muted: #495057; + --color-stripe-odd: #f6d9d8; + --color-stripe-even: #fdf6f5; + --color-border: #e9cfce; +} + +* { + box-sizing: border-box; +} + +body { + margin: 0; + background-color: var(--color-stripe-odd); + color: var(--color-text); + font-family: + system-ui, + -apple-system, + "Segoe UI", + Roboto, + sans-serif; +} diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx index f8fc6f5..15753af 100644 --- a/frontend/src/main.tsx +++ b/frontend/src/main.tsx @@ -1,5 +1,6 @@ import { StrictMode } from "react"; import { createRoot } from "react-dom/client"; +import "./index.css"; import App from "./App"; createRoot(document.getElementById("root")!).render( diff --git a/frontend/src/pages/GamesGrid/GamesGrid.module.css b/frontend/src/pages/GamesGrid/GamesGrid.module.css new file mode 100644 index 0000000..4dd75cc --- /dev/null +++ b/frontend/src/pages/GamesGrid/GamesGrid.module.css @@ -0,0 +1,6 @@ +.list { + display: flex; + flex-direction: column; + height: calc(100vh - var(--header-height) - var(--toolbar-height)); + overflow: hidden; +} diff --git a/frontend/src/pages/GamesGrid/GamesGrid.tsx b/frontend/src/pages/GamesGrid/GamesGrid.tsx index f2012f7..93c6aff 100644 --- a/frontend/src/pages/GamesGrid/GamesGrid.tsx +++ b/frontend/src/pages/GamesGrid/GamesGrid.tsx @@ -1,23 +1,63 @@ -import { Container, Image } from "react-bootstrap"; import Header from "../../components/Header/Header"; +import Layout from "../../components/Layout/Layout"; +import Toolbar from "../../components/Toolbar/Toolbar"; +import GameListItem from "../../components/GameListItem/GameListItem"; +import styles from "./GamesGrid.module.css"; + +const games = [ + { + title: "Heroes of Might and Magic: Olden Era", + year: 2026, + tags: "Turn-based strategy", + rating: 9.3, + image: "", + }, + { + title: "Minecraft", + year: 2009, + tags: "Indie, Survival, Adventure, Sandbox", + rating: 9.1, + image: "", + }, + { + title: "Ori and the Blind Forest", + year: 2015, + tags: "Metroidvania", + rating: 8.8, + image: "", + }, + { + title: "Pokémon Legends: Z-A", + year: 2025, + tags: "Action RPG", + rating: 0.1, + image: "", + }, + { + title: "Hades", + year: 2020, + tags: "Roguelike", + rating: 9.4, + image: "", + }, +]; export default function GamesGrid() { return ( <>
- - Game Image -
-
Game Title
-
Release year
-
Tags
-
Rating
+ + +
+ {games.map((game, index) => ( + + ))}
- + ); }