Created barebones Userpage, added default images for items in page.

User Class and Controller updated to work with page

src/main/java/Team5/SmartTowns/users/User.java

@@ -4,6 +4,7 @@ import Team5.SmartTowns.rewards.Badge;
 import Team5.SmartTowns.rewards.Sticker;
 import lombok.Data;
 
+import java.io.File;
 import java.util.HashMap;
 import java.util.Map;
 
@@ -13,6 +14,7 @@ public class User {
     int id;
     String email; //Validation would be done by email, since they will have that
     String name;
+    String imgPath;
 
     Map<Badge, Integer> badgeProgress = new HashMap<>(); // Demonstrates the progress towards a specific badge (0-100)
     Map<Sticker, Boolean> hasStickers = new HashMap<>(); // True if User has sticker (key)
@@ -21,5 +23,15 @@ public class User {
         this.id = id;
         this.email = email;
         this.name = name;
+        imgPath = findImagePath();
+    }
+
+    private String findImagePath(){
+        /* Finds the image in the Path folder, if image is not found assigns default image */
+        String imgPath = "images/users/" + id + ".jpg";
+        String notFoundPath = "../images/users/0.png";
+
+        File imgFile = new File("src/main/resources/static/" + imgPath);
+        return imgFile.exists() ? "../" + imgPath : notFoundPath;
     }
 }

src/main/java/Team5/SmartTowns/users/UserController.java

@@ -2,6 +2,7 @@ package Team5.SmartTowns.users;
 
 import org.springframework.stereotype.Controller;
 import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
 import org.springframework.web.servlet.ModelAndView;
 
 import java.util.List;
@@ -10,17 +11,18 @@ import java.util.List;
 public class UserController {
 
     /* TEMPORARY USER LIST --- TODO REPLACE IT WITH DATABASE LIST*/
-    List<User> users = List.of(
-            new User(1, "johndoe@gmail.com", "Chris Redfield"),
-            new User(2, "johndoe@gmail.com", "Claire Redfield"),
+    static List<User> users = List.of(
+            new User(1, "johndoe@gmail.com", "Claire Redfield"),
+            new User(2, "johndoe@gmail.com", "Albert Wesker"),
             new User(3, "johndoe@gmail.com", "Leon Kennedy"),
             new User(4, "johndoe@gmail.com", "Jill Valentine")
     );
 
-    @GetMapping("/allTrails")
-    public ModelAndView getUserPage(){
+    @GetMapping("/user/{id}")
+    public ModelAndView getUserPage(@PathVariable int id){
         ModelAndView mav = new ModelAndView("rewards/userProfile");
-        mav.addObject("trails", users); //Mock data for trails
+        users.stream().filter(user -> user.getId() == id).findFirst() //Convoluted way of finding the matching user to the id, probably easier to do a hashmap
+                .ifPresent(result -> mav.addObject("user", result));
         return mav;
     }
 }

src/main/resources/static/css/templatingstyle.css

+* {
+    margin:0;
+    padding:0;
+    box-sizing: border-box;
+}
+body {
+    background: linear-gradient(135deg, #9f74be, #3e126b);
+    height: 100svh;
+}
+
+main {
+    background: #1e1e1e;
+    border-radius: 1vw;
+    margin-inline: max(1vw, 2em);
+    margin-block: 1svh;
+    width: min(90%, 90vw);
+    padding-block: 2svh;
+    padding-inline: 1vw;
+    box-shadow: rgba(0, 0, 0, 0.7) 0 0.5svh max(1vw, 1em);
+}
+
+
 /* Header */
 .headerBar {
-    border-bottom: 2px rgb(230, 230, 230) solid;
+    /*border-bottom: 2px rgb(230, 230, 230) solid;*/
     margin-bottom: 20px;
     display: flex;
     background-color: rgb(84, 33, 128);
@@ -63,7 +85,7 @@ footer {
     display: flex;
     justify-content: center;
     background-color: rgb(84, 33, 128);
-    border-top: 2px rgb(230, 230, 230) solid;
+    /*border-top: 2px rgb(230, 230, 230) solid;*/
     font-size: 1vw;
 }
 .footerBar{

src/main/resources/static/css/userProfile.css

+
+
+.userInfo {
+    display: flex;
+    flex-direction: column;
+    padding: min(2vw, 4em);
+    text-align: center;
+
+    & #userPicture {
+        width: min(20vw, 20em);
+        margin-inline: auto;
+        border-radius: 100%;
+        border: solid #a2a2a2 4px;
+        box-shadow: rgba(0, 0, 0, 0.7) 0 0.5svh max(1vw, 1em);
+    }
+
+    & h1 {
+        margin: 1svh 25%;
+        color:white;
+        border-bottom: #36454F solid 2px;
+        border-radius: 5vw;
+        box-shadow: rgba(0, 0, 0, 0.7) 0 0.5svh 1vw -1vw;
+    }
+}
+
+#badgesBar {
+    background-color: white;
+    border-radius: 1vw;
+    margin-inline: max(4vw, 3rem);
+    display: flex;
+    flex-direction: column;
+
+    & h2 {
+        margin-inline: 5vw;
+        padding-inline: 2vw;
+        margin-block: 0.5svh;
+        box-shadow: rgba(0, 0, 0, 0.7) 0 0.5svh 1vw -1vw;
+        border-bottom: #36454F solid 2px;
+    }
+
+    & .badgesContainer {
+        margin: 1svh 2vw;
+        padding: 1svh 1vw;
+        border-inline: solid rgba(194, 98, 188, 0.7) 5px;
+        border-radius: 10%;
+        background: linear-gradient(90deg, rgba(255, 215, 0, 0.75), rgba(184, 134, 11, 0.75));
+        overflow-x: scroll;
+        min(18svh, 12em);
+        align-content: center;
+        display: flex;
+
+        & .badge {
+            margin-inline: 3vw;
+            height: min(18svh, 10em);
+
+        }
+
+    }
+}
+#stickersBox {
+    display: flex;
+    flex-direction: column;
+    margin-block: 0.5svh;
+    margin-inline: 0.5vw;
+    border-radius: 2vw;
+    background: #9f74be;
+    & h2 {
+        font-size: 4em;
+        text-align: center;
+        box-shadow: rgba(0, 0, 0, 0.7) 0 2vw 2vw -2vw;
+        border-bottom: #36454F solid 2px;
+        margin-block: 1svh;
+        margin-inline: 25%;
+    }
+    & .stickersContainer {
+        margin-block: 1svh;
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+
+        & img {
+            width: 20vw;
+
+        }
+    }
+}
+.locked {
+    filter: grayscale(100%);
+}
\ No newline at end of file

src/main/resources/templates/rewards/userProfile.html

@@ -2,9 +2,56 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title th:text="${user.getName()}"></title>
+    <title th:text="'VZLA Profile Page of ' + ${user.getName()}"></title>
+    <link rel="stylesheet" th:href="@{/css/userProfile.css}">
+    <link rel="stylesheet" th:href="@{/css/templatingstyle.css}">
 </head>
 <body>
 
+<header></header>
+
+<main>
+    <!--PICTURE - DATA - BADGES -->
+    <div class="userInfo">
+        <img th:src="@{${user.getImgPath()}}"
+             th:alt="${user.getName()}"
+             id="userPicture"
+        >
+        <h1 th:text="${user.getName()}"></h1>
+        <!--TODO add some progression info here?-->
+    </div>
+    <section class="rewards"> <!--Reward lists, badges on top, stickers (larger) on the bottom-->
+        <article id="badgesBar">
+            <h2>Your Badges: </h2> <!--Shows first earned badges, followed by greyed out badges-->
+            <div class="badgesContainer">
+                <img src="../images/badges.png" alt="Badge" class="badge">
+                <img src="../images/badges.png" alt="Badge" class="badge">
+                <img src="../images/badges.png" alt="Badge" class="badge">
+                <img src="../images/badges.png" alt="Badge" class="badge">
+                <img src="../images/badges.png" alt="Badge" class="badge">
+                <img src="../images/badges.png" alt="Badge" class="badge locked">
+                <img src="../images/badges.png" alt="Badge" class="badge locked">
+            </div>
+        </article>
+        <article id="stickersBox"> <!--Need a controller to show earned stickers -->
+            <h2> STICKERS! </h2>
+            <div class="stickersContainer">
+                <img src="../images/badges.png" alt="Badge" class="badge">
+                <img src="../images/badges.png" alt="Badge" class="badge">
+                <img src="../images/badges.png" alt="Badge" class="badge locked">
+                <img src="../images/badges.png" alt="Badge" class="badge">
+                <img src="../images/badges.png" alt="Badge" class="badge locked">
+                <img src="../images/badges.png" alt="Badge" class="badge locked">
+                <img src="../images/badges.png" alt="Badge" class="badge">
+            </div>
+        </article>
+    </section>
+
+</main>
+
+<footer></footer>
+
+
+
 </body>
 </html>
\ No newline at end of file