diff --git a/src/main/java/Team5/SmartTowns/rewards/Sticker.java b/src/main/java/Team5/SmartTowns/rewards/Sticker.java
index 77144e48fa281eb8e9853e6bc1b7cc1f61b02bad..274091bdacbaf6199349956be041eb09e34074ff 100644
--- a/src/main/java/Team5/SmartTowns/rewards/Sticker.java
+++ b/src/main/java/Team5/SmartTowns/rewards/Sticker.java
@@ -27,7 +27,7 @@ public class Sticker {
private String findImagePath(){
/* Finds the image in the Path folder, if image is not found assigns default image */
String imgPath = "images/rewards/stickers/" + id + ".jpg";
- String notFoundPath = "images/rewards/stickers/0.jpg";
+ String notFoundPath = "images/rewards/stickers/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 a72718d0062764dc096eb34acc7da8df7d1de4e1..0df6457070de7a7db2ff33576c569e20120be554 100644
--- a/src/main/java/Team5/SmartTowns/users/UserController.java
+++ b/src/main/java/Team5/SmartTowns/users/UserController.java
@@ -1,6 +1,7 @@
package Team5.SmartTowns.users;
import Team5.SmartTowns.rewards.Badge;
+import Team5.SmartTowns.rewards.Sticker;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
@@ -28,14 +29,29 @@ public class UserController {
new Badge(7, "Badge1", "Bage One is This", 2)
);
+ static List<Sticker> stickers = List.of(
+ new Sticker(1, "Sticker", "Sticker", 1),
+ new Sticker(2, "Sticker", "Sticker", 4),
+ new Sticker(3, "Sticker", "Sticker One is This", 4),
+ new Sticker(4, "Sticker", "Sticker One is This", 5),
+ new Sticker(5, "Sticker", "Sticker One is This", 5),
+ new Sticker(46, "Sticker", "Sticker One is This", 5),
+ new Sticker(7, "Sticker", "Sticker One is This", 2)
+ );
+
@GetMapping("/user/{id}")
- public ModelAndView getUserPage(@PathVariable int id){
+ public ModelAndView getUserPage(@PathVariable int id) {
ModelAndView mav = new ModelAndView("rewards/userProfile");
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));
mav.addObject("badges", badges);
+ mav.addObject("stickers", stickers);
return mav;
}
+// @GetMapping("/userProfile")
+// public ModelAndView getUserPage(ModelAndView mav) {
+// return mav;
+// }
}
diff --git a/src/main/resources/static/css/templatingstyle.css b/src/main/resources/static/css/templatingstyle.css
index 3819e78cd8f7051d57b75c4f90bc3c6e7914fe0c..6c7bcdb486f6922819d951c5ba903c541810ff5c 100644
--- a/src/main/resources/static/css/templatingstyle.css
+++ b/src/main/resources/static/css/templatingstyle.css
@@ -1,7 +1,6 @@
* {
margin:0;
padding:0;
- box-sizing: border-box;
}
body {
background: linear-gradient(135deg, #9f74be, #3e126b);
@@ -9,7 +8,7 @@ body {
}
main {
- background: #1e1e1e;
+ background: linear-gradient(to bottom, #1e1e1e 10%, darkgoldenrod 50%, #1e1e1e 90%);
border-radius: 1vw;
margin-inline: 5%;
margin-block: 5%;
diff --git a/src/main/resources/static/css/userProfile.css b/src/main/resources/static/css/userProfile.css
index f2617b279a934f7fdc104023614353dbd8e0edf4..0f19b40b43be3a56afb4bf657c3941802c3992b7 100644
--- a/src/main/resources/static/css/userProfile.css
+++ b/src/main/resources/static/css/userProfile.css
@@ -1,5 +1,4 @@
/* AUTHOR: Gabriel Copat*/
-
.userInfo {
display: flex;
flex-direction: column;
@@ -23,18 +22,27 @@
box-shadow: rgba(0, 0, 0, 0.7) 0 0.5svh 1vw -1vw;
}
}
-
+#badgesBar::-webkit-scrollbar {
+ display: none;
+ -ms-scrollbar-darkshadow-color: transparent;
+}
#badgesBar {
- border-radius: 1vw;
+ /* border-radius: 1vw; */
display: grid;
- grid-template-areas: "header"
- "badges";
+ grid-template-areas:
+ "header"
+ "badges";
overflow-x: scroll;
overflow-y: hidden;
scrollbar-width: none;
scrollbar-color: transparent transparent;
color: white;
- @media only screen and (min-device-width: 501px) {
+ padding-bottom: 2%;
+ z-index: 99999;
+ /* margin-right: 10px; */
+ /*background: linear-gradient(to bottom, transparent, darkgoldenrod 200%);*/
+ @media only screen and (
+ min-device-width: 501px) {
height: 24vw;
}
& h2 {
@@ -42,13 +50,11 @@
grid-area: header;
margin-inline: 5vw;
padding-inline: 2vw;
- margin-block: 0.5svh;
+ margin-block: -1svh;
box-shadow: rgba(0, 0, 0, 0.7) 0 0.5svh 1vw -1vw;
border-bottom: #36454F solid 2px;
font-size: 4vw;
- @media only screen and (min-device-width: 501px) {
- font-size: 4vw;
- }
+ width: 25%;
}
& #allBadgesContainer {
margin-top: 3svh;
@@ -56,7 +62,8 @@
height: 10svh;
align-content: center;
display: flex;
- @media only screen and (min-device-width: 501px) {
+ @media only screen and (
+ min-device-width: 501px) {
height: 20vw;
margin-top: 6vw;
}
@@ -64,25 +71,28 @@
& .badgeImg {
margin-inline: 3vw;
height: 8svh;
- @media only screen and (min-device-width: 501px) {
+ z-index: 999;
+ @media only screen and (
+ min-device-width: 501px) {
height: 15vw;
}
-
transition: 0.3s ease-out 100ms;
}
& .badgeImg:hover {
/*box-shadow: 0 0 20px 10px #bbbb00;*/
transform: scale(1.5,1.5);
+
}
}
#stickersBox {
+ padding-top: 5%;
display: flex;
flex-direction: column;
- margin-block: 0.5svh;
- margin-inline: 0.5vw;
- border-radius: 2vw;
- background: #9f74be;
+ /* border-bottom-left-radius: 2vw; */
+ /* border-bottom-right-radius: 2vw; */
+ /*background: linear-gradient(to bottom, darkgoldenrod, transparent 90%);*/
+ margin-top: -1%;
& h2 {
font-size: 4em;
text-align: center;
@@ -93,11 +103,14 @@
}
& .stickersContainer {
margin-block: 1svh;
- display: grid;
- grid-template-columns: repeat(4, 1fr);
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-around;
+ width: 100%;
- & img {
+ & .stickerImg {
width: 20vw;
+ margin-block: 1em;
}
}
@@ -106,48 +119,55 @@
filter: grayscale(100%);
}
-
-
-
-/* TOOLTIP CSS MODIFIED FROM:
- http://www.menucool.com/tooltip/css-tooltip*/
-.popUpBox {
+.dragonProgression {
+ position: relative;
display: flex;
- position:relative;
- width: 50vw;
- height: 50svh;
- margin:auto;
- align-self: center;
- /*transform:translate(-50%, -5%);*/
- padding:10px 20px;
- color:#ffffff;
- background-color:#009cdc;
- font-weight:normal;
- font-size:14px;
- border-radius:8px;
+ flex-direction: column;
+ justify-content: center;
+ text-align: center;
+ height: 16svh;
+ box-sizing: content-box;
+ /*background: linear-gradient(to bottom, transparent -50%, darkgoldenrod 50%);*/
+ width: 100%;
+ /*padding-top: 1svh;*/
+
+ @media only screen and (
+ min-device-width: 501px) {
+ height: 28vw;
+ margin-bottom: 0;
+ padding-bottom: 5svh;
+ }
+ & h1 {
+ font-size: 3em;
+ color: white;
+ box-shadow: rgba(0, 0, 0, 0.7) 0 2vw 2vw -2vw;
+ border-bottom: #36454F solid 2px;
+ border-top: #36454F solid 2px;
+ margin-inline: 25%;
+ margin-bottom: 1%;
+ }
+ & .dragonContainer {
+ position: relative;
+ margin: auto;
+ }
+ & .dragonImg {
+ height: 10svh;
+ width: 16svh;
+ @media only screen and (
+ min-device-width: 501px) {
+ height: 22vw;
+ width: 30vw;
+ }
- z-index:99;
- box-sizing:border-box;
- box-shadow:0 1px 8px rgba(0,0,0,0.5);
- visibility:hidden; opacity:0; transition:opacity 0.8s;
- overflow: visible;
-}
-.tooltip:hover .popUpBox {
- visibility:visible; opacity:1;
- overflow: visible;
-}
-.tooltip .text-content {
- padding:10px 20px;
-}
+ }
-.tooltip .popUpBox i {
- position:absolute;
- top:50%;
- right:100%;
- margin-top:-12px;
- width:12px;
- height:24px;
- overflow:hidden;
+ & .dragonFill {
+ position: absolute;
+ overflow: hidden;
+ width: 40%;
+ }
+ & .dragonOut {
+ /*position: absolute;*/
+ overflow: hidden;
+ }
}
-
-
diff --git a/src/main/resources/static/images/rewards/dragonFilled.png b/src/main/resources/static/images/rewards/dragonFilled.png
new file mode 100644
index 0000000000000000000000000000000000000000..7b0be9867d8b02500393ef2488dc8facf6c20711
Binary files /dev/null and b/src/main/resources/static/images/rewards/dragonFilled.png differ
diff --git a/src/main/resources/static/images/rewards/dragonOutline.png b/src/main/resources/static/images/rewards/dragonOutline.png
new file mode 100644
index 0000000000000000000000000000000000000000..12f6c621e392b57573717b0f4cb496a0b9e96b99
Binary files /dev/null and b/src/main/resources/static/images/rewards/dragonOutline.png differ
diff --git a/src/main/resources/static/images/rewards/stickers/0.png b/src/main/resources/static/images/rewards/stickers/0.png
new file mode 100644
index 0000000000000000000000000000000000000000..54eb8acb855af1730b2ba00b947a957ac7dfddca
Binary files /dev/null and b/src/main/resources/static/images/rewards/stickers/0.png differ
diff --git a/src/main/resources/templates/rewards/userProfile.html b/src/main/resources/templates/rewards/userProfile.html
index 381c9f0f9b1bc48b01dd49028d40b132563558af..f75061bc436ffe914cff805122fe7e2c0651e2b9 100644
--- a/src/main/resources/templates/rewards/userProfile.html
+++ b/src/main/resources/templates/rewards/userProfile.html
@@ -28,11 +28,25 @@
th:id="'img' + ${badge.getId()}" th:alt="${badge.getName()}" >
</div>
</article>
+ <article class="dragonProgression">
+ <h1>The Dragon Trail</h1>
+ <div class="dragonContainer">
+ <div class="dragonFill">
+ <img th:src="@{/images/rewards/dragonFilled.png}"
+ alt="Filled Dragon" id="FilledDragon" class="dragonImg">
+ </div>
+ <div class="dragonOut">
+ <img th:src="@{/images/rewards/dragonOutline.png}"
+ alt="Outline Dragon" id="OutlineDragon" class="dragonImg">
+ </div>
+ </div>
+ <h2>40%</h2>
+ </article>
<article id="stickersBox"> <!--Need a controller to show earned stickers -->
<h2> STICKERS! </h2>
<div class="stickersContainer">
- <img class="badgeImg" th:each="badge : ${badges}" th:src="@{'..' + ${badge.getImgPath()}}"
- th:id="'img' + ${badge.getId()}" th:alt="${badge.getName()}" >
+ <img class="stickerImg" th:each="sticker : ${stickers}" th:src="@{'../' + ${sticker.getImgPath()}}"
+ th:id="'img' + ${sticker.getId()}" th:alt="${sticker.getName()}" >
</div>
</article>
</section>