diff --git a/src/main/java/Team5/SmartTowns/users/User.java b/src/main/java/Team5/SmartTowns/users/User.java
index 02611fe0eae9a67a33c893fafa2146170504a2e0..667222393c481b9e2f573ca1773700a93cf7667d 100644
--- a/src/main/java/Team5/SmartTowns/users/User.java
+++ b/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;
}
}
diff --git a/src/main/java/Team5/SmartTowns/users/UserController.java b/src/main/java/Team5/SmartTowns/users/UserController.java
index 602fe65d32eb9f612328ee6ed1344c5e97f53d0c..78c1d94da5567720c65e13608e97e4a2cb143d49 100644
--- a/src/main/java/Team5/SmartTowns/users/UserController.java
+++ b/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;
}
}
diff --git a/src/main/resources/static/css/templatingstyle.css b/src/main/resources/static/css/templatingstyle.css
index 1ffc84d486810f03102e4a7534aa5d088c97bab0..e2955d7c3648632fffed11ecd6c6516b3dda4dff 100644
--- a/src/main/resources/static/css/templatingstyle.css
+++ b/src/main/resources/static/css/templatingstyle.css
@@ -1,6 +1,28 @@
+* {
+ 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{
diff --git a/src/main/resources/static/css/userProfile.css b/src/main/resources/static/css/userProfile.css
new file mode 100644
index 0000000000000000000000000000000000000000..f86825b12760111f82ebb9e7f7ebc3da129c41d9
--- /dev/null
+++ b/src/main/resources/static/css/userProfile.css
@@ -0,0 +1,88 @@
+
+
+.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
diff --git a/src/main/resources/static/images/users/0.png b/src/main/resources/static/images/users/0.png
new file mode 100644
index 0000000000000000000000000000000000000000..75a9de71d2fd7e9b4f8e5a0992d0edeabe50c888
Binary files /dev/null and b/src/main/resources/static/images/users/0.png differ
diff --git a/src/main/resources/templates/rewards/userProfile.html b/src/main/resources/templates/rewards/userProfile.html
index c1eb176bf6453417b546503653e4bd3ee6174350..82c203dcd208bb666bb68ec17dbc3bd19c0e389f 100644
--- a/src/main/resources/templates/rewards/userProfile.html
+++ b/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