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

Page now display custom progress for each selected pack 

Page also starts with pack1 selected by default
parent 4692a6aa
No related branches found
No related tags found
1 merge request!33Resolve "As a QR-scanning connoisseur , I want to unlock stickers after scanning a QR code to feel a sense of reward."
Hide whitespace changes
Inline Side-by-side
Showing
with 291 additions and 203 deletions
src/main/java/team5/smartTowns/rewards/RewardsController.java
+ 1
− 16
View file @ 306e2ee3
......@@ -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;
}
}
src/main/java/team5/smartTowns/rewards/RewardsRepository.java
+ 2
− 0
View file @ 306e2ee3
......@@ -15,5 +15,7 @@ public interface RewardsRepository {
List<Pack> getAllPacks();
Pack findPackByID(int id);
}
src/main/java/team5/smartTowns/rewards/RewardsRepositoryJDBC.java
+ 8
− 0
View file @ 306e2ee3
......@@ -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);
}
}
src/main/java/team5/smartTowns/users/UserController.java
+ 42
− 0
View file @ 306e2ee3
......@@ -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;
}
}
src/main/resources/data.sql
+ 7
− 0
View file @ 306e2ee3
......@@ -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);
......
src/main/resources/static/css/userProfile2.css
+ 202
− 153
View file @ 306e2ee3
......@@ -62,184 +62,233 @@ 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;
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;
& .packImg:hover {
transform: scale(1.5, 1.5)
}
}
.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;
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
src/main/resources/static/scripts/userPage.js
+ 4
− 4
View file @ 306e2ee3
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
src/main/resources/templates/users/userFrags.html
+ 25
− 25
View file @ 306e2ee3
<!-- @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
src/main/resources/templates/users/userProfile.html
+ 0
− 5
View file @ 306e2ee3
......@@ -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>
......
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