Added Controller and Display for Packs in sticker

src/main/java/team5/smartTowns/rewards/RewardsController.java

+package team5.smartTowns.rewards;
+
+import org.springframework.beans.factory.annotation.Autowired;
+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 team5.smartTowns.users.User;
+import team5.smartTowns.users.UserRepository;
+
+import java.util.List;
+import java.util.Map;
+
+@Controller
+public class RewardsController {
+
+    @Autowired
+    RewardsRepository rewardsRepository;
+
+    @Autowired
+    UserRepository userRepository;
+
+    @GetMapping("/packInfo/{userID}/{packID}")
+    public ModelAndView getPackInfo(@PathVariable int userID, @PathVariable int packID) {
+        ModelAndView mav = new ModelAndView("users/userFrags :: stickersBox");
+        List<Sticker> allStickers = rewardsRepository.getAllStickersFromPack(packID);
+        Map<Long, Boolean> userStickers = userRepository.getStickers(userID);
+
+        for (Long stickerID : userStickers.keySet()) { //Finds and updates visibility of stickers based on what the user has
+            allStickers.stream()
+                    .filter(sticker -> sticker.getId()==stickerID)
+                    .findFirst().ifPresent(sticker -> sticker.setVisibility(userStickers.get(stickerID)));
+        }
+
+        mav.addObject("stickers", allStickers);
+
+        return mav;
+    }
+
+
+}

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

@@ -40,7 +40,7 @@
 
 body {
     background: linear-gradient(135deg, #f7e8fd, #9914d1);
-    height: 100svh;
+    height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: space-evenly;
@@ -55,8 +55,11 @@ main {
     margin-top: 6em;
     padding-inline: 1vw;
     box-shadow: rgba(0, 0, 0, 0.7) 0 0.5svh max(1vw, 1em);
+    transition: all linear 2s;
 
-
+}
+.rewards {
+    position: relative;
 }
 .userInfo {
     display: flex;
@@ -86,6 +89,7 @@ main {
     -ms-scrollbar-darkshadow-color: transparent;
 }
 #packsBar {
+    position: static;
     display: grid;
     grid-template-areas:
         "header"
@@ -110,20 +114,34 @@ main {
         height: 1.2em;
 
     }
-    & #allBadgesContainer {
+    & #allPacksContainer {
         margin-top: 3svh;
         grid-area: packs;
-        height: 10svh;
-        align-content: center;
+        height: 12svh;
+        width: 100%;
         display: flex;
+        justify-content: space-between;
         @media only screen and (min-device-width: 501px) {
             height: 20vw;
             margin-top: 6vw;
         }
     }
+    & .packContainer{
+        position: relative;
+        height: 12svh;
+        width: 20vw;
+        display: flex;
+        flex-direction: column;
+        text-align: center;
+        justify-content: center;
+        overflow: visible;
+    }
+
     & .packImg {
+        position: relative;
         margin-inline: 3vw;
         height: 8svh;
+        /*width: 25%;*/
         z-index: 50;
         @media only screen and (min-device-width: 501px) {
             height: 15vw;
@@ -135,6 +153,15 @@ main {
         transform: scale(1.5,1.5);
 
     }
+    & .packName {
+        height: 4svh;
+        display: flex;
+        justify-content: center;
+        font-size: 2em;
+        overflow: hidden;
+        align-items: flex-end;
+
+    }
 }
 
 #stickersBox {
@@ -145,6 +172,7 @@ main {
     /* border-bottom-right-radius: 2vw; */
     /*background: linear-gradient(to bottom, darkgoldenrod, transparent 90%);*/
     margin-top: -1%;
+    height: 500px;
     & h2 {
         font-size: 4em;
         text-align: center;
@@ -360,4 +388,8 @@ header .footerButton:hover {
     font-size: 0.6em;
     opacity: 0;
     transition: 0.5s ease-in-out 1ms;
+}
+
+.rewards {
+    transition: 1s ease-in-out 1ms;
 }
\ No newline at end of file

src/main/resources/static/scripts/userPage.js

+function updatePack(userid, packid) {
+    /* Updates the trail being shown on screen to the one requested by ID */
+    $.get("/packInfo/" + userid + "/" + packid).done(function (fragment) {
+        let stickerBox = $("#stickersBox");
+
+        stickerBox.fadeTo("slow", 0, function () {
+            stickerBox.html(fragment)
+            stickerBox.fadeTo("slow", 1);
+        })
+    });
+}
\ No newline at end of file

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

@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <title th:text="'VZLA Profile Page of ' + ${user.getName()}"></title>
     <link rel="stylesheet" th:href="@{/css/userProfile.css}">
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 <!--    <link rel="stylesheet" th:href="@{/css/templatingstyle.css}">-->
 </head>
 <body>
@@ -30,11 +31,16 @@
         <!--TODO add some progression info here?-->
     </div>
     <section class="rewards"> <!--Reward lists, badges on top, stickers (larger) on the bottom-->
+        <h2>Packs</h2>
         <article id="packsBar">
-            <h2>Packs</h2> <!--Shows first earned badges, followed by greyed out badges-->
+             <!--Shows first earned badges, followed by greyed out badges-->
             <div id="allPacksContainer"  class="centerFlex">
-                <img class="packImg"  th:each="pack : ${packs}" th:src="@{'../' + ${pack.getDisplayImg()}}"
-                     th:id="'packImg' + ${pack.getId()}" th:alt="${pack.getName()}" >
+                <div th:each="pack : ${packs}"  class="packContainer">
+                    <h4 class="packName" th:text="${pack.getName()}"></h4>
+                    <img class="packImg"   th:src="@{'../' + ${pack.getDisplayImg()}}"
+                         th:id="'packImg' + ${pack.getId()}" th:alt="${pack.getName()}"
+                         th:onclick="'updatePack(' + ${user.getId()} +',' + ${pack.getId()} +');'">
+                </div>
             </div>
         </article>
 
@@ -49,7 +55,7 @@
 <footer>
 
 </footer>
-
+<script type="text/javascript" th:src="@{../scripts/userPage.js}"></script>
 
 <script>
 </script>