Skip to content
Snippets Groups Projects
Commit 8ea83b39 authored by Gabriel Copat's avatar Gabriel Copat
Browse files

Added DragonTrail completion % to User Profile Page (UPP) 

Finalized the CSS for the UPP
Added Default pictur for sticker
Added Picture for DragonTrail completion
parent df92660b
No related branches found
No related tags found
1 merge request!25Resolve "As a user, I would like a place to see all my earned badges, so that I can track my progress."
Hide whitespace changes
Inline Side-by-side
Showing
with 116 additions and 67 deletions
src/main/java/Team5/SmartTowns/rewards/Sticker.java
+ 1
− 1
View file @ 8ea83b39
......@@ -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;
......
src/main/java/Team5/SmartTowns/users/UserController.java
+ 17
− 1
View file @ 8ea83b39
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;
// }
}
src/main/resources/static/css/templatingstyle.css
+ 1
− 2
View file @ 8ea83b39
* {
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%;
......
src/main/resources/static/css/userProfile.css
+ 81
− 61
View file @ 8ea83b39
/* 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;
}
}
src/main/resources/static/images/rewards/dragonFilled.png 0 → 100644
+ 0
− 0
View file @ 8ea83b39
src/main/resources/static/images/rewards/dragonFilled.png

49.7 KiB

src/main/resources/static/images/rewards/dragonOutline.png 0 → 100644
+ 0
− 0
View file @ 8ea83b39
src/main/resources/static/images/rewards/dragonOutline.png

46.8 KiB

src/main/resources/static/images/rewards/stickers/0.png 0 → 100644
+ 0
− 0
View file @ 8ea83b39
src/main/resources/static/images/rewards/stickers/0.png

1.65 MiB

src/main/resources/templates/rewards/userProfile.html
+ 16
− 2
View file @ 8ea83b39
......@@ -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>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment