diff --git a/src/main/java/team5/smartTowns/rewards/RewardsController.java b/src/main/java/team5/smartTowns/rewards/RewardsController.java
index ca4ba5dbd61e643838dad8e99094ed51254667bf..1666e563407eda037519a83b4508c2a41935c50b 100644
--- a/src/main/java/team5/smartTowns/rewards/RewardsController.java
+++ b/src/main/java/team5/smartTowns/rewards/RewardsController.java
@@ -20,22 +20,7 @@ public class RewardsController {
@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;
- }
+
}
diff --git a/src/main/java/team5/smartTowns/rewards/RewardsRepository.java b/src/main/java/team5/smartTowns/rewards/RewardsRepository.java
index dd825f1c1ebac837e0d54a7632d0b18a51c72b7d..7d8090eaea6126650542af8f66017ef27b643e3c 100644
--- a/src/main/java/team5/smartTowns/rewards/RewardsRepository.java
+++ b/src/main/java/team5/smartTowns/rewards/RewardsRepository.java
@@ -15,5 +15,7 @@ public interface RewardsRepository {
List<Pack> getAllPacks();
+ Pack findPackByID(int id);
+
}
diff --git a/src/main/java/team5/smartTowns/rewards/RewardsRepositoryJDBC.java b/src/main/java/team5/smartTowns/rewards/RewardsRepositoryJDBC.java
index 683be3219a11fb11dfdd748642440262a8bbc51f..bd35f10f54ed8d582a8adbcdf461659afccecb93 100644
--- a/src/main/java/team5/smartTowns/rewards/RewardsRepositoryJDBC.java
+++ b/src/main/java/team5/smartTowns/rewards/RewardsRepositoryJDBC.java
@@ -4,6 +4,7 @@ package team5.smartTowns.rewards;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.jdbc.core.RowMapper;
import org.springframework.stereotype.Repository;
+import team5.smartTowns.users.User;
import java.util.List;
@@ -69,4 +70,11 @@ public class RewardsRepositoryJDBC implements RewardsRepository {
String sql= "SELECT * FROM stickers WHERE packID="+packID;
return jdbc.query(sql, stickerMapper);
}
+
+ @Override
+ public Pack findPackByID(int id){
+ String sql= "SELECT * FROM packs WHERE id="+id;
+ List<Pack> result = jdbc.query(sql, packMapper);
+ return result.get(0);
+ }
}
diff --git a/src/main/java/team5/smartTowns/users/UserController.java b/src/main/java/team5/smartTowns/users/UserController.java
index 9ffd4dc6844e90baec9e68eafd2963c3d840ad00..c85260db9a9bc3eb6799e40287c719a47719430f 100644
--- a/src/main/java/team5/smartTowns/users/UserController.java
+++ b/src/main/java/team5/smartTowns/users/UserController.java
@@ -56,8 +56,50 @@ public class UserController {
}
mav.addObject("user", userRepository.getUser(id));
mav.addObject("packs", allPacks);
+ mav.addObject("selectedPack", rewardsRepository.findPackByID(1));
mav.addObject("stickers", allStickers);
+ /* CHANGE THIS BIT WHEN DEFAULT IS ADDED TO PAGE*/
+ int progress = getPackProgress(allStickers);
+ mav.addObject("progress", progress);
+
+
+
return mav;
}
+
+ @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);
+
+ int progress = getPackProgress(allStickers);
+ mav.addObject("progress", progress);
+ mav.addObject("selectedPack", rewardsRepository.findPackByID(packID));
+ return mav;
+ }
+
+ public int getPackProgress(List<Sticker> allStickers){
+ /* GETS PROGRESS FOR GIVEN PACK*/
+ double progress = 0;
+ try {
+ progress = (
+ (double) allStickers.stream().filter(Sticker::hasSticker).count()
+ / allStickers.size() )
+ * 100;
+ } catch (ArithmeticException e){ //allStickers is empty
+ progress = 0;
+ }
+ return (int)progress;
+ }
+
}
diff --git a/src/main/resources/data.sql b/src/main/resources/data.sql
index 1676a14b20135b343d1670a736aef86b615241f7..849bcc24a2eb1694d26c527b9f2509cf20686da8 100644
--- a/src/main/resources/data.sql
+++ b/src/main/resources/data.sql
@@ -60,6 +60,13 @@ delete from stickers;
insert into stickers (name, description, rarity, packID) value ('TownConnoisseur', 'You know the town very well!', '2', 1);
insert into stickers (name, description, rarity, packID) value ('TownRegular', 'You visited the town 3 days in a row!', '1', 1);
insert into stickers (name, description, rarity, packID) value ('TownMaster', 'You visited the town 7 days in a row!', '1', 1);
+insert into stickers (name, description, rarity, packID) value ('TownMaster', 'You visited the town 7 days in a row!', '1', 1);
+insert into stickers (name, description, rarity, packID) value ('TownMaster', 'You visited the town 7 days in a row!', '1', 1);
+insert into stickers (name, description, rarity, packID) value ('TownMaster', 'You visited the town 7 days in a row!', '1', 1);
+insert into stickers (name, description, rarity, packID) value ('TownMaster', 'You visited the town 7 days in a row!', '1', 1);
+insert into stickers (name, description, rarity, packID) value ('TownMaster', 'You visited the town 7 days in a row!', '1', 1);
+insert into stickers (name, description, rarity, packID) value ('TownMaster', 'You visited the town 7 days in a row!', '1', 1);
+insert into stickers (name, description, rarity, packID) value ('TownMaster', 'You visited the town 7 days in a row!', '1', 1);
insert into stickers (name, description, rarity, packID) value ('TownRegular', 'You visited the town 3 days in a row!', '1', 2);
insert into stickers (name, description, rarity, packID) value ('TownRegular', 'You visited the town 3 days in a row!', '1', 2);
diff --git a/src/main/resources/static/css/userProfile2.css b/src/main/resources/static/css/userProfile2.css
index d7457e0ab8f021d0aebd085e542fe867e0ac221e..e6c3528e238d2f7bf83bb8dbdf9f44b22820373b 100644
--- a/src/main/resources/static/css/userProfile2.css
+++ b/src/main/resources/static/css/userProfile2.css
@@ -62,184 +62,236 @@ body {
height: 100svh;
}
-@media only screen
-and (min-device-width: 320px)
-and (max-device-width: 640px)
-{
- html {
- position: fixed;
- width: 100vw;
- height: 100svh;
- }
- main {
- width: 90%;
- height: 95%;
- background: linear-gradient(to bottom left, #1f1f1f, #1e1e1e, #1f1f1f);
- overflow-x: hidden;
- overflow-y: scroll;
- margin-inline: auto;
+.grayedOut {
+ filter: grayscale(1);
+}
- display: flex;
- flex-direction: column;
- align-content: flex-start;
- align-items: center;
- border-radius: 5vw;
- }
- .userContainer {
- width: 80%;
- padding-block: 2em;
- margin-block: 1em;
- border-radius: 5vw;
- display: flex;
- flex-direction: column;
- align-items: center;
- row-gap: 1svh;
- & h1 {
- font-size: 5em;
- text-align: center;
- text-shadow: black 0 0.2em 0.5em;
- letter-spacing: 0.1em;
- /*border-bottom: black solid 3px;*/
- padding-inline: 5%;
- padding-block: 2%;
- border-radius: 35%;
- box-shadow: var(--accent-shadow);
- background: var(--accent-border);
- }
- & #userPicture {
- width: 35vw;
- height: 35vw;
- border-radius: 100%;
- border: solid #989898 0.8em;
- box-shadow: var(--accent-shadow);
- overflow: hidden;
- }
+html {
+ position: fixed;
+ width: 100vw;
+ height: 100svh;
+}
+main {
+ width: 90%;
+ height: 95%;
+ background: linear-gradient(to bottom left, #1f1f1f, #1e1e1e, #1f1f1f);
+ overflow-x: hidden;
+ overflow-y: scroll;
+ margin-inline: auto;
+
+ display: flex;
+ flex-direction: column;
+ align-content: flex-start;
+ align-items: center;
+ border-radius: 5vw;
+}
+.userContainer {
+ width: 90%;
+ padding-block: 2em;
+ margin-block: 1em;
+ border-radius: 5vw;
+ display: flex;
+ flex-direction: row-reverse;
+ /*align-items: center;*/
+ justify-content: space-evenly;
+
+ row-gap: 1svh;
+ & h1 {
+ font-size: 5em;
+ text-align: center;
+ text-shadow: black 0 0.2em 0.5em;
+ letter-spacing: 0.1em;
+ width: 40vw;
+ max-height: 40vw;
+ /*border-bottom: black solid 3px;*/
+ padding-inline: 5%;
+ padding-block: 2%;
+ border-radius: 35%;
+ /*box-shadow: var(--accent-shadow);*/
+ /*background: var(--accent-border);*/
+ align-self: center;
+ text-wrap: normal;
+ }
+ & #userPicture {
+ border-radius: 100%;
+ box-shadow: var(--accent-shadow);
+ overflow: hidden;
}
+}
- .rewards {
- position: relative;
- display: flex;
- flex-direction: column;
- overflow: visible;
- width: 100%;
+
+.rewards {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ overflow: visible;
+ width: 100%;
+}
+#packsBar {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-evenly;
+ text-align: center;
+ width: 100%;
+ & h2 {
+ font-size: 4em;
+ letter-spacing: 0.1em;
+ border-bottom: 10px solid darkred;
+ margin-inline: 5%;
}
- #packsBar {
- position: relative;
+
+}
+#allPacksContainer {
+ padding-top: 3em;
+ display: flex;
+ overflow-x: scroll;
+ padding-inline: 20%;
+ justify-content: space-between;
+ border-bottom: 10px solid rgba(139, 0, 0, 0.5);
+ margin-bottom: 2em;
+ & .packName {
+ font-size: 2em;
+ height: 2.4em;
+ overflow: hidden;
+ padding-bottom: 1em;
display: flex;
- flex-direction: column;
- justify-content: space-evenly;
- text-align: center;
- width: 100%;
- & h2 {
- font-size: 4em;
- letter-spacing: 0.1em;
- border-bottom: 10px solid darkred;
- margin-inline: 5%;
- }
+ justify-content: center;
+ align-content: flex-start;
}
- .empty-space {
- height: 10svh;
- width: 15em;
- background: transparent;
+ & .packImg {
+ transition: 0.5s ease-in-out 1ms;
}
- #allPacksContainer {
- padding-top: 3em;
- display: flex;
+ & .packImg:hover {
+ transform: scale(1.5, 1.5)
+ }
+}
+.progressionContainer {
+ display: flex;
+ flex-direction: column;
+ height: 14svh;
+ & h1 {
+ font-size: 4em;
+ width: 100%;
+ font-family: 'MedievalSharp', cursive;
+ text-align: center;
overflow-x: scroll;
- padding-inline: 20%;
- justify-content: space-between;
- border-bottom: 10px solid rgba(139, 0, 0, 0.5);
- margin-bottom: 2em;
- & .packName {
- font-size: 2em;
- height: 2.4em;
+ overflow-y: hidden;
+ }
+ & .progImgContainer {
+ position: relative;
+ margin-inline: auto;
+ & .progImg {
+ height: 10svh;
+ width: 16svh;
+ }
+ & .progImgFill {
+ position: absolute;
+ overflow: hidden;
+ width: 50%;
+ }
+ & .progImgOut {
+ position: absolute;
overflow: hidden;
- padding-bottom: 1em;
+ }
+ & .progText {
+ opacity: 0.5;
+ position: absolute;
display: flex;
+ text-align: center;
+ align-items: center;
justify-content: center;
- align-content: flex-start;
-
- }
- & .packImg {
height: 10svh;
- width: 15em;
- transition: 0.5s ease-in-out 1ms;
- padding-inline: 1em;
- margin-inline: 1em;
- }
- & .packImg:hover {
- transform: scale(1.5, 1.5)
+ width: 16svh;
+
+ font-size: 3em;
+ translate: 0 5%;
}
+
}
+}
+
+#stickersBox {
+ width: 100%;
+}
+.stickersContainer {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ margin-top: 2em;
+ row-gap: 2em;
+ height: 100%;
+
+}
+.stickerImg {
+ height: 15em;
+ margin: 1.5em;
+}
+/*}*/
+
+@media only screen
+and (min-device-width: 320px)
+and (max-device-width: 640px) {
+ #userPicture {
+ width: 30vw;
+ height: 30vw;
+ border: solid #989898 0.8em;
+ }
+ .packImg {
+ height: 10svh;
+ width: 15em;
+ padding-inline: 1em;
+ margin-inline: 1em;
+ }
#allPacksContainer::-webkit-scrollbar {
display: none;
-ms-scrollbar-darkshadow-color: transparent;
}
+}
- .progressionContainer {
- display: flex;
- flex-direction: column;
- height: 14svh;
- & h1 {
- font-size: 4em;
- font-family: 'MedievalSharp', cursive;
- text-align: center;
- }
- & .progImgContainer {
- position: relative;
- margin-inline: auto;
- & .progImg {
- height: 10svh;
- width: 16svh;
- }
- & .progImgFill {
- position: absolute;
- overflow: hidden;
- width: 50%;
- }
- & .progImgOut {
- position: absolute;
- overflow: hidden;
- }
- & .progText {
- opacity: 0.5;
- position: absolute;
- display: flex;
- text-align: center;
- align-items: center;
- justify-content: center;
- height: 10svh;
- width: 16svh;
-
- font-size: 3em;
- translate: 0 5%;
- }
-
- }
-
+@media only screen
+and (min-device-width: 1000px) {
+ #userPicture {
+ width: 200px;
+ height: 200px;
+ border: solid #989898 10px;
}
-
- #stickersBox {
+ #allPacksContainer {
+ padding:0;
+ margin-block: 50px;
width: 100%;
- height: inherit;
- overflow-y: scroll;
-
+ height: 100%;
+ overflow: visible;
+ border: 5px solid rgba(139, 0, 0, 0.5);
}
- .stickersContainer {
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
- margin-top: 2em;
- row-gap: 2em;
+ .packImg {
+ height: 100px;
+ width: 125px;
+ padding-inline: 1em;
+ margin-inline: 3em;
}
- .stickerImg {
- width: 15em;
- margin: 1.5em;
+ .packImg:hover ~ .packName{
+ visibility: visible;
+ opacity: 1;
}
-
-}
+ & .packName {
+ position: absolute;
+ visibility: hidden;
+ text-align: center;
+ left: 50%;
+ transform: translate(-50%);
+ opacity: 0;
+ transition: opacity 1s;
+ }
+ #packsBar {
+ /*height: 250px;*/
+ & h2 {
+ display: none;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/main/resources/static/scripts/userPage.js b/src/main/resources/static/scripts/userPage.js
index c61be8b18a45674517468ba45c95b1c45fa90db4..2c1d5069ad652b854abf6b8cb460d7ebf89d696f 100644
--- a/src/main/resources/static/scripts/userPage.js
+++ b/src/main/resources/static/scripts/userPage.js
@@ -1,11 +1,11 @@
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");
+ let packRewardsWrapper = $("#packRewardsWrapper");
- stickerBox.fadeTo("slow", 0, function () {
- stickerBox.html(fragment)
- stickerBox.fadeTo("slow", 1);
+ packRewardsWrapper.fadeTo("slow", 0, function () {
+ packRewardsWrapper.html(fragment)
+ packRewardsWrapper.fadeTo("slow", 1);
})
});
}
\ No newline at end of file
diff --git a/src/main/resources/templates/users/userFrags.html b/src/main/resources/templates/users/userFrags.html
index 348cc49a0b946248843d2f6ae5678a795d5c094e..bd2a005aef4ad13ff88e9ff409a8876d46bfad69 100644
--- a/src/main/resources/templates/users/userFrags.html
+++ b/src/main/resources/templates/users/userFrags.html
@@ -1,28 +1,28 @@
- <!-- @thymesVar id="sticker" type="team5.smartTowns.rewards.Sticker" -->
-<article th:fragment="stickersBox" id="stickersBox">
-<!-- <h2>STICKERS!</h2>-->
- <div class="stickersContainer">
- <img th:class="'stickerImg ' + ${sticker.getVisibility()}" th:each="sticker : ${stickers}" th:src="@{'../' + ${sticker.getDisplayImg()}}"
- th:id="'img' + ${sticker.getId()}" th:alt="${sticker.getName()}" >
- </div>
-</article>
-
+<!-- @thymesVar id="sticker" type="team5.smartTowns.rewards.Sticker" -->
<!-- @thymesVar id="user" type="team5.smartTowns.users.User" -->
-<article th:fragment="trailProgression" class="progressionContainer">
- <h1>The Dragon's Tale</h1>
- <div class="progImgContainer">
- <div class="progImgFill" th:style="'width:'+ ${user.getDragonProgress()} + '%;'">
- <img th:src="@{/images/rewards/dragonFilled.png}"
- alt="Filled Dragon" id="FilledDragon" class="progImg">
- </div>
- <div class="progText">
- <p th:text="${user.getDragonProgress()} + '%'"></p>
- </div>
- <div class="progImgOutline">
- <img th:src="@{/images/rewards/dragonOutline.png}"
- alt="Outline Dragon" id="OutlineDragon" class="progImg">
+<!-- @thymesVar id="selectedPack" type="team5.smartTowns.rewards.Pack" -->
+<div th:fragment="stickersBox" id="packRewardsWrapper">
+ <article class="progressionContainer">
+ <h1 th:text="${selectedPack.getName()}"></h1>
+ <div class="progImgContainer">
+ <div class="progImgFill" th:style="'width:'+ ${progress} + '%;'">
+ <img th:src="@{/images/rewards/dragonFilled.png}"
+ alt="Filled Dragon" id="FilledDragon" class="progImg">
+ </div>
+ <div class="progText">
+ <p th:text="${progress} + '%'"></p>
+ </div>
+ <div class="progImgOutline">
+ <img th:src="@{/images/rewards/dragonOutline.png}"
+ alt="Outline Dragon" id="OutlineDragon" class="progImg">
+ </div>
</div>
+ </article>
- </div>
-
-</article>
\ No newline at end of file
+ <article id="stickersBox">
+ <div class="stickersContainer">
+ <img th:class="'stickerImg ' + ${sticker.getVisibility()}" th:each="sticker : ${stickers}" th:src="@{'../' + ${sticker.getDisplayImg()}}"
+ th:id="'img' + ${sticker.getId()}" th:alt="${sticker.getName()}" >
+ </div>
+ </article>
+</div>
\ No newline at end of file
diff --git a/src/main/resources/templates/users/userProfile.html b/src/main/resources/templates/users/userProfile.html
index 101e2c96339f50b2e5d22af1db2cd1371332f1b1..3e865175760bc4b0aa11c9b54aade5d312ac55b5 100644
--- a/src/main/resources/templates/users/userProfile.html
+++ b/src/main/resources/templates/users/userProfile.html
@@ -35,19 +35,14 @@
<h2>Packs</h2>
<!--Shows first earned badges, followed by greyed out badges-->
<div id="allPacksContainer" class="centerFlex">
-
<div th:each="pack : ${packs}" class="packContainer">
<img class="packImg" th:src="@{'../' + ${pack.getDisplayImg()}}"
th:id="'packImg' + ${pack.getId()}" th:alt="${pack.getName()}"
th:onclick="'updatePack(' + ${user.getId()} +',' + ${pack.getId()} +');'">
<h4 class="packName" th:text="${pack.getName()}"></h4>
</div>
-
</div>
</article>
-
- <article th:replace="~{users/userFrags.html::trailProgression}" id="trailProgression"></article>
-
<article th:replace="~{users/userFrags.html::stickersBox}" id="stickersBox"></article>
</section>