Merge branch...

Merge branch '73-as-a-qr-scanning-connoisseur-i-want-to-unlock-stickers-after-scanning-a-qr-code-to-feel-a-sense' into 'main'

Resolve "As a QR-scanning connoisseur , I want to unlock stickers after scanning a QR code to feel a sense of reward."

Closes #73

See merge request !33

src/main/java/Team5/SmartTowns/rewards/Sticker.java

 /*AUTHOR: Gabriel Copat*/
 package Team5.SmartTowns.rewards;
 
-import lombok.Data;
+import lombok.Getter;
 
-import java.io.File;
-import java.util.Objects;
 
-@Data
-public class Sticker {
-    /* Stickers are trade-able rewards, they vary in rarity and are earned at random */
+@Getter
+public class Sticker extends Reward{
+    /* Stickers are randomly earned rewards from a specific pack */
+
+    final int rarity; //1-5
+    final int packID;
 
-    int id;
-    String name;
-    String description;
-    String imgPath;
-    int rarity; //1-5
     boolean hasSticker;
 
-    public Sticker(int id, String name, String description, int rarity) {
-        this.id = id;
-        this.name = name;
-        this.description = description;
+
+    public Sticker(int packID, int id, String name, String description, int rarity) {
+        super(id, name, description);
         this.rarity = rarity;
-        imgPath = findImagePath();
+        this.packID = packID;
+        displayImg = super.findImagePath();
     }
 
-    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.png";
-
-        File imgFile = new File("src/main/resources/static/" + imgPath);
-        return imgFile.exists() ? imgPath : notFoundPath;
+    @Override
+    public String getImgFolder() {
+        return "stickers/" + getPackID();
     }
 
     public boolean hasSticker(){
@@ -41,21 +33,7 @@ public class Sticker {
         this.hasSticker = hasSticker;
     }
     public String getVisibility(){
-        return hasSticker? "" : "grayedOut";
-    }
-
-
-    @Override
-    public boolean equals(Object o) {
-        if (this == o) return true;
-        if (o == null || getClass() != o.getClass()) return false;
-        Sticker sticker = (Sticker) o;
-        return id == sticker.id && Objects.equals(name, sticker.name);
-    }
-
-    @Override
-    public int hashCode() {
-        return Objects.hash(id, name);
+        return hasSticker ? "gotSticker" : "grayedSticker";
     }
 }
 

src/main/java/Team5/SmartTowns/Towns/TownController.java → src/main/java/Team5/SmartTowns/towns/TownController.java

-package Team5.SmartTowns.Towns;
+package Team5.SmartTowns.towns;
 
 import org.springframework.stereotype.Controller;
 import org.springframework.web.bind.annotation.GetMapping;

src/main/java/Team5/SmartTowns/Towns/TownStorage.java → src/main/java/Team5/SmartTowns/towns/TownStorage.java

-package Team5.SmartTowns.Towns;
+package Team5.SmartTowns.towns;
 
 import java.util.ArrayList;
 import java.util.List;
@@ -11,13 +11,13 @@ public class TownStorage {
         townList = new ArrayList<>();
         townList.addAll(
           List.of(
-                  new Towns("Caerphilly",01,3,70,"/images/CaerphillyCastle.jpg"),
-                  new Towns("Risca",02,2,34,"/images/RiscaBanner.jpg"),
-                  new Towns("Penarth",03,5,0,"/images/PenarthBanner.jpg"),
-                  new Towns("Penarth",03,5,50,"/images/PenarthBanner.jpg"),
-                  new Towns("Caerphilly",01,3,70,"/images/CaerphillyCastle.jpg"),
-                  new Towns("Risca",02,2,90,"/images/RiscaBanner.jpg"),
-                  new Towns("Penarth",03,5,100,"/images/PenarthBanner.jpg")
+                  new Towns("Caerphilly",01,3,70,"/images/banners/CaerphillyCastle.jpg"),
+                  new Towns("Risca",02,2,34,"/images/banners/RiscaBanner.jpg"),
+                  new Towns("Penarth",03,5,0,"/images/banners/PenarthBanner.jpg"),
+                  new Towns("Penarth",03,5,50,"/images/banners/PenarthBanner.jpg"),
+                  new Towns("Caerphilly",01,3,70,"/images/banners/CaerphillyCastle.jpg"),
+                  new Towns("Risca",02,2,90,"/images/banners/RiscaBanner.jpg"),
+                  new Towns("Penarth",03,5,100,"/images/banners/PenarthBanner.jpg")
 
 
 

src/main/java/Team5/SmartTowns/Towns/Towns.java → src/main/java/Team5/SmartTowns/towns/Towns.java

-package Team5.SmartTowns.Towns;
+package Team5.SmartTowns.towns;
 
 import lombok.Data;
 

src/main/java/Team5/SmartTowns/trails/TrailsController.java

 package Team5.SmartTowns.trails;
 
 
-import Team5.SmartTowns.Landmarks.Landmarks;
+import Team5.SmartTowns.landmarks.Landmarks;
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.Model;
 import org.springframework.web.bind.annotation.*;
@@ -11,7 +11,7 @@ import java.util.ArrayList;
 import java.util.List;
 import java.util.Optional;
 
-import static Team5.SmartTowns.Landmarks.Landmarks.landmarksDragonstrail;
+import static Team5.SmartTowns.landmarks.Landmarks.landmarksDragonstrail;
 
 //import static Team5.SmartTowns.Landmarks.Landmarks.landmarksDragonstrail;
 

src/main/java/Team5/SmartTowns/users/User.java

@@ -17,7 +17,6 @@ public class User {
     String name;
     String imgPath;
     int dragonProgress;
-    Map<Badge, Integer> badgeProgress = new HashMap<>(); // Demonstrates the progress towards a specific badge (0-100)
     Map<Sticker, Boolean> hasStickers = new HashMap<>(); // True if User has sticker (key)
     Map<Integer, Boolean> dragonstaleLandmarkIDs = new HashMap<>(); // Storing the IDs of the landmarks associated with Dragonstale, as well as if the user has visited it before (boolean)
 
@@ -26,7 +25,12 @@ public class User {
         this.email = email;
         this.name = name;
         this.dragonProgress = dragonProgress;
-//        this.dragonstaleLandmarkIDs = dragonstaleLandmarkIDs;
+        imgPath = findImagePath();
+    }
+    public User(int id, String email, String name) {
+        this.id = id;
+        this.email = email;
+        this.name = name;
         imgPath = findImagePath();
     }
 

src/main/java/Team5/SmartTowns/users/UserController.java

 package Team5.SmartTowns.users;
 
 
-import Team5.SmartTowns.rewards.Badge;
-import Team5.SmartTowns.rewards.BadgesRepository;
+import Team5.SmartTowns.rewards.Pack;
+import Team5.SmartTowns.rewards.RewardsRepository;
 import Team5.SmartTowns.rewards.Sticker;
-import Team5.SmartTowns.rewards.StickersRepository;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Controller;
 import org.springframework.web.bind.annotation.GetMapping;
@@ -12,7 +11,6 @@ import org.springframework.web.bind.annotation.PathVariable;
 import org.springframework.web.servlet.ModelAndView;
 
 import java.util.List;
-import java.util.Map;
 
 @Controller
 public class UserController {
@@ -20,13 +18,11 @@ public class UserController {
     @Autowired
     private UserRepository userRepository;
     @Autowired
-    private BadgesRepository badgesRepository;
-    @Autowired
-    private StickersRepository stickersRepository;
+    private RewardsRepository rewardsRepository;
 
     @GetMapping("/login")
     public ModelAndView getLoginPage() {
-        ModelAndView mav = new ModelAndView("rewards/login");
+        ModelAndView mav = new ModelAndView("users/login");
 //        List<User> users = userRepository.getAllUsers();
 //        mav.addObject("users", users);
         return mav;
@@ -42,21 +38,52 @@ public class UserController {
 
     @GetMapping("/user/{id}")
     public ModelAndView getUserPage(@PathVariable int id) {
-        ModelAndView mav = new ModelAndView("rewards/userProfile");
-        List<Badge> badges = badgesRepository.getAllBadges(); /*DEPRECATED FOR THE MOMENT*/
-        mav.addObject("badges", badges);
-        List<Sticker> allStickers = stickersRepository.getAllStickers();
-        List<User> users = userRepository.getAllUsers();
-        Map<Long, Boolean> userStickers = userRepository.getStickers(id);
+        ModelAndView mav = new ModelAndView("users/userProfile");
+        List<Pack> allPacks = rewardsRepository.getAllPacks();
+        mav.addObject("user", userRepository.getUserById(id));
+        mav.addObject("packs", allPacks);
 
-        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.addAllObjects(getPackInfo(id, 1).getModelMap());
 
-        mav.addObject("user", userRepository.getUser(id));
-        mav.addObject("stickers", allStickers);
         return mav;
     }
+
+    @GetMapping("/packInfo/{userID}/{packID}")
+    public ModelAndView getPackInfo(@PathVariable int userID, @PathVariable int packID) {
+        /* Displays on page the stickers present in the pack and colour the ones the
+        *  user has acquired */
+
+        ModelAndView mav = new ModelAndView("users/userFrags :: stickersBox");
+        List<Sticker> allStickers = rewardsRepository.getAllStickersFromPack(packID);
+        List<Long> userStickers = userRepository.getUserStickersFromPack(userID, packID);
+
+
+
+        mav.addObject("stickers", setStickerVisibility(allStickers, userStickers));
+        mav.addObject("progress", getPackProgress(allStickers));
+        mav.addObject("selectedPack", rewardsRepository.findPackByID(packID));
+        return mav;
+    }
+
+    public int getPackProgress(List<Sticker> userStickers){
+        /* Returns the % of completion of given userStickers */
+        double progress = 0;
+        if (!userStickers.isEmpty()) {
+            progress = userStickers.stream().filter(Sticker::hasSticker).count();
+            progress = progress / userStickers.size();
+            progress = Math.round(progress * 100);
+        }
+        return (int) progress;
+    }
+
+    public List<Sticker> setStickerVisibility(List<Sticker> displayedStickers, List<Long> userStickers){
+        /* Makes displayedStickers which are present in userStickers visible */
+        for (Long stickerID : userStickers) {
+            displayedStickers.stream()
+                    .filter(sticker -> sticker.getId()==stickerID) //Tries to find matching id from the two lists
+                    .findFirst().ifPresent(sticker -> sticker.setVisibility(true));
+        }
+        return displayedStickers;
+    }
+
 }

src/main/java/Team5/SmartTowns/users/UserRepository.java

@@ -2,13 +2,10 @@
 package Team5.SmartTowns.users;
 
 import java.util.List;
-import java.util.Map;
 
 public interface UserRepository {
     List<User> getAllUsers();
-//    Map<Long, Integer> getBadgeProgress(int id);
-    Map<Long, Boolean> getStickers(int id);
-//    Map<Integer, Boolean> getTest(int id);
-//    Map<Long, Boolean> getDTCompletion(int id);
-    User getUser(int id);
+    List<Long> getUserStickersFromPack(int userID, int packID);
+    User getUserById(int userID);
+    boolean unlockSticker(int userID, int packID, int stickerID);
 }

src/main/java/Team5/SmartTowns/users/UserRepositoryJDBC.java

@@ -7,7 +7,6 @@ import org.springframework.stereotype.Repository;
 
 import java.util.HashMap;
 import java.util.List;
-import java.util.Map;
 
 @Repository
 public class UserRepositoryJDBC implements UserRepository{
@@ -21,10 +20,9 @@ public class UserRepositoryJDBC implements UserRepository{
 
     private void setUserMapper(){
         userMapper = (rs, i) -> new User(
-                rs.getInt("userID"),
+                rs.getInt("id"),
                 rs.getString("email"),
-                rs.getString("name"),
-                rs.getInt("dragonProgress")
+                rs.getString("name")
         );
     }
 
@@ -36,44 +34,23 @@ public class UserRepositoryJDBC implements UserRepository{
 
 
     @Override
-    public User getUser(int id){
-        String sql= "SELECT * FROM users WHERE userID="+id;
+    public User getUserById(int userID){
+        String sql= "SELECT * FROM users WHERE id="+userID;
         List<User> result = jdbc.query(sql, userMapper);
-        return result.get(0);
+        return result.isEmpty() ? null : result.get(0);
     }
 
     @Override
-    public Map<Long, Boolean> getStickers(int id){
-        String sql = "SELECT stickerID, hasSticker FROM stickerprogress WHERE userID=" + id;
-        List<Map<String, Object>> query = jdbc.queryForList(sql);
-        Map<Long, Boolean> progress = new HashMap<>();
-        for (Map<String, Object> result : query) {
-            progress.put((Long)result.get("stickerID"), (boolean)result.get("hasSticker"));
-        }
-        return progress;
+    public List<Long> getUserStickersFromPack(int userID, int packID) {
+        String sql = "SELECT stickerID FROM stickerprogress WHERE (userID, packID)= (" + userID + "," + packID + ")";
+        return jdbc.queryForList(sql, Long.class);
     }
 
-//    @Override
-//    public Map<Long, Boolean> getDTCompletion(int id){
-//        //Using prepared statement to prevent SQL injections
-//        String sql = "SELECT userid, qrCodeSCAN FROM testuser WHERE userID= ?";
-//        List<Map<String, Object>> dtQuery = jdbc.queryForList(sql, id);
-//        Map<Long, Boolean> dtProgress = new HashMap<>();
-//        for (Map<String, Object> result : dtQuery) {
-//            dtProgress.put((Long)result.get("stickerID"), (boolean)result.get("hasSticker"));
-//        }
-//        return dtProgress;
-//    }
-
-
-//    @Override
-//    public Map<Long, Integer> getBadgeProgress(int id){
-//        String sql = "SELECT badgeID, progress FROM badgeprogress WHERE userID=" + id;
-//        List<Map<String, Object>> query = jdbc.queryForList(sql);
-//        Map<Long, Integer> progress = new HashMap<>();
-//        for (Map<String, Object> result : query) {
-//            progress.put((Long)result.get("badgeID"), (int)result.get("progress"));
-//        }
-//        return progress;
-//    }
+    @Override
+    public boolean unlockSticker(int userID, int packID, int stickerID){
+        String sql = "INSERT INTO stickerprogress (userID, packID, stickerID) VALUES (" +
+                userID + ", " + packID + "," + stickerID + ")";
+        jdbc.update(sql);
+        return true;
+    }
 }

src/main/java/Team5/SmartTowns/Webpages/WebpageController.java → src/main/java/Team5/SmartTowns/webpages/WebpageController.java

-package Team5.SmartTowns.Webpages;
+package Team5.SmartTowns.webpages;
 
 
-import org.springframework.ui.Model;
 import org.springframework.web.bind.annotation.GetMapping;
-import org.springframework.web.bind.annotation.RequestMapping;
-import org.springframework.web.bind.annotation.RequestMethod;
 import org.springframework.web.servlet.ModelAndView;
 import org.springframework.stereotype.Controller;
 @Controller
@@ -26,20 +23,4 @@ public class WebpageController {
         ModelAndView modelAndView = new ModelAndView("Towns/risca");
         return modelAndView;
     }
-
-//    @GetMapping("/home")
-//    public ModelAndView getHome(){
-//        ModelAndView modelAndView = new ModelAndView("Towns/home/homePage");
-//        return modelAndView;
-//    }
-
-
-    @RequestMapping(value="/test_ajax_frag", method=RequestMethod.POST)
-    public String sendHtmlFragment(Model map) {
-        //map.addAttribute("foo", "bar");
-        return "fragments/temp_frags.html :: trailInfo2";
-    }
-
-
-
 }

src/main/resources/QRCodeScanner.html

-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>QR Camera</title>
-</head>
-<body>
-
-</body>
-</html>
\ No newline at end of file

src/main/resources/data.sql

 delete from users;
-insert into users (email, name, dragonProgress) value ('hannah@gmail.com', 'Hannah', '90');
-insert into users (userID, email, name, dragonProgress) value ('2', 'nigel@gmail.com', 'Nigel', '40');
+insert into users (email, name) value ('hannah@gmail.com', 'Hannah');
+insert into users (email, name) value ('nigel@gmail.com', 'Nigel');
 
 delete from trails;
 insert into trails ( Name) value ( 'Caerphilly Coffee Trail');
@@ -32,26 +32,32 @@ insert into locations ( locationName , locationEmail,locationDescription,locatio
 
 insert into locations (locationID, locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value (19, 'The Esplanade','','Location description here','Penarth',0301);
 insert into locations (locationID, locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value (20, 'The Old Swimming Baths','','Location description here','Penarth',0301);
-delete from badges;
-insert into badges (name, description, difficulty) value ('TownConnoisseur', 'You know the town very well!', '2');
-insert into badges (name, description, difficulty) value ('TownRegular', 'You visited the town 3 days in a row!', '1');
-insert into badges (name, description, difficulty) value ('TownMaster', 'You visited the town 7 days in a row!', '1');
-insert into badges (name, description, difficulty) value ('TownRegular', 'You visited the town 3 days in a row!', '1');
-insert into badges (name, description, difficulty) value ('TownRegular', 'You visited the town 3 days in a row!', '1');
 
-delete from stickers;
-insert into stickers (name, description, rarity) value ('TownConnoisseur', 'You know the town very well!', '2');
-insert into stickers (name, description, rarity) value ('TownRegular', 'You visited the town 3 days in a row!', '1');
-insert into stickers (name, description, rarity) value ('TownMaster', 'You visited the town 7 days in a row!', '1');
-insert into stickers (name, description, rarity) value ('TownRegular', 'You visited the town 3 days in a row!', '1');
-insert into stickers (name, description, rarity) value ('TownRegular', 'You visited the town 3 days in a row!', '1');
 
-delete from badgeprogress;
-insert into badgeprogress (userID, badgeID, progress) value ('1', '1', '40');
-insert into badgeprogress (userID, badgeID, progress) value ('1', '2', '70');
-insert into badgeprogress (userID, badgeID, progress) value ('2', '2', '70');
+delete from packs;
+insert into packs (name, description) value ('Wales Football Team', 'Pack of Welsh Football Players in the National Team');
+insert into packs (name, description) value ('Wales Rugby Team', 'Pack of Welsh Rugby Players in the National Team');
+insert into packs (name, description) value ('Welsh Heritage', 'Pack About Welsh Heritage');
+
+delete from stickers;
+insert into stickers (packID, stickerID, name, description, rarity) value (1, 1, 'wayne_hennessey', 'Wales Football Team Player', '2');
+insert into stickers (packID, stickerID, name, description, rarity) value (1, 2, 'neco_williams', 'Wales Football Team Player', '2');
+insert into stickers (packID, stickerID, name, description, rarity) value (1, 3, 'joe_morrell', 'Wales Football Team Player', '2');
+insert into stickers (packID, stickerID, name, description, rarity) value (1, 4, 'ethan_ampadu', 'Wales Football Team Player', '2');
+insert into stickers (packID, stickerID, name, description, rarity) value (1, 5, 'connor_roberts', 'Wales Football Team Player', '2');
+insert into stickers (packID, stickerID, name, description, rarity) value (2, 1, 'Taine_Basham', 'Wales Rugby Team Player', '1');
+insert into stickers (packID, stickerID, name, description, rarity) value (2, 2, 'Adam Beard', 'Wales Rugby Team Player', '1');
+insert into stickers (packID, stickerID, name, description, rarity) value (2, 3, 'Elliot Dee', 'Wales Rugby Team Player', '1');
+insert into stickers (packID, stickerID, name, description, rarity) value (2, 4, 'Corey Domachowski', 'Wales Rugby Team Player', '1');
+insert into stickers (packID, stickerID, name, description, rarity) value (2, 5, 'Ryan Elias', 'Wales Rugby Team Player', '1');
+insert into stickers (packID, stickerID, name, description, rarity) value (3, 1, 'Welsh Lady', 'Welsh Heritage', '1');
+insert into stickers (packID, stickerID, name, description, rarity) value (3, 2, 'Welsh Outline', 'Welsh Heritage', '1');
+insert into stickers (packID, stickerID, name, description, rarity) value (3, 3, 'Welsh Spoon', 'Welsh Heritage', '1');
 
 delete from stickerprogress;
-insert into stickerprogress (userID, stickerID, hasSticker) value ('1', '1', true);
-insert into stickerprogress (userID, stickerID, hasSticker) value ('1', '3', true);
-insert into stickerprogress (userID, stickerID, hasSticker) value ('2', '2', true);
+insert into stickerprogress (userID, packID, stickerID) value (1, 1, 1);
+insert into stickerprogress (userID, packID, stickerID) value (1, 1, 2);
+insert into stickerprogress (userID, packID, stickerID) value (1, 1, 3);
+insert into stickerprogress (userID, packID, stickerID) value (1, 1, 5);
+insert into stickerprogress (userID, packID, stickerID) value (1, 2, 1);
+insert into stickerprogress (userID, packID, stickerID) value (1, 2, 3);
\ No newline at end of file

src/main/resources/index.html

-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Home Page</title>
-</head>
-<body>
-<h1>Welcome to the home page</h1>
-
-</body>
-</html>
\ No newline at end of file

src/main/resources/schema.sql

@@ -17,45 +17,48 @@ create table if not exists locations
     locationTrailID varchar(128)
 )   engine=InnoDB;
 
+
 drop table if exists users;
+drop table if exists stickers;
+drop table if exists packs;
+drop table if exists stickerProgress;
+
 create table if not exists users
 (
-    userID bigint auto_increment primary key,
+    id bigint auto_increment primary key,
     email varchar(128),
-    name varchar(128),
+    name varchar(30),
     dragonProgress int,
     dragonsLandmarkIDs longtext
 ) engine=InnoDB;
 
-drop table if exists badges;
-create table if not exists badges
+
+create table if not exists packs
 (
-    badgeID bigint auto_increment primary key,
-    name varchar(128),
-    description varchar(128),
-    difficulty bigint
+    id bigint auto_increment primary key,
+    name varchar(20),
+    description text
 ) engine=InnoDB;
 
-drop table if exists stickers;
 create table if not exists stickers
 (
-    stickerID bigint auto_increment primary key,
-    name varchar(128),
-    description varchar(128),
-    rarity bigint
-) engine=InnoDB;
+    id bigint auto_increment primary key,
+    packID bigint,
+    FOREIGN KEY (packID) REFERENCES packs(id)
+        ON DELETE CASCADE
+        ON UPDATE RESTRICT,
+    stickerID bigint, /*STICKER ID NUMBER WITHIN ITS OWN PACK*/
+    name varchar(30),
+    description text,
+    rarity tinyint
 
-drop table if exists badgeProgress;
-create table if not exists badgeProgress
-(
-    userID bigint,
-    badgeID bigint,
-    progress int /*0-100*/
 ) engine=InnoDB;
 
 create table if not exists stickerProgress
 (
+    id bigint auto_increment primary key,
     userID bigint,
-    stickerID bigint,
-    hasSticker boolean /*Has sticker or not*/
-) engine=InnoDB;
\ No newline at end of file
+    packID bigint,
+    stickerID bigint
+
+) engine=InnoDB;

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

@@ -37,13 +37,21 @@
         & p { line-height: 1.1; color: white;}
     }
 }
-
+html{
+    height: 100%;
+    @media only screen and (min-device-width: 1500px) {
+        height: auto;
+    }
+}
 body {
     background: linear-gradient(135deg, #f7e8fd, #9914d1);
-    height: 100svh;
+    height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: space-evenly;
+    @media only screen and (min-device-width: 1500px) {
+        height: auto;
+    }
 }
 main {
     background: linear-gradient(to bottom, #1e1e1e 10%, darkgoldenrod 50%, #1e1e1e 90%);
@@ -55,8 +63,16 @@ 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;
+    overflow-y: scroll;
+    height: 90%;
+    @media only screen and (min-device-width: 1500px) {
+        padding-inline: 20%;
+        overflow: visible;
+    }
+}
+.rewards {
+    position: relative;
 }
 .userInfo {
     display: flex;
@@ -81,15 +97,16 @@ main {
         box-shadow: rgba(0, 0, 0, 0.7) 0 0.5svh 1vw -1vw;
     }
 }
-#badgesBar::-webkit-scrollbar {
+#packsBar::-webkit-scrollbar {
     display: none;
     -ms-scrollbar-darkshadow-color: transparent;
 }
-#badgesBar {
+#packsBar {
+    position: static;
     display: grid;
     grid-template-areas:
         "header"
-        "badges";
+        "packs";
     overflow-x: scroll;
     overflow-y: hidden;
     color: white;
@@ -110,31 +127,54 @@ main {
         height: 1.2em;
 
     }
-    & #allBadgesContainer {
+    & #allPacksContainer {
         margin-top: 3svh;
-        grid-area: badges;
-        height: 10svh;
-        align-content: center;
+        grid-area: packs;
+        height: 12svh;
+        width: 100%;
         display: flex;
+        justify-content: space-between;
         @media only screen and (min-device-width: 501px) {
             height: 20vw;
             margin-top: 6vw;
         }
     }
-    & .badgeImg {
+    & .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;
         }
         transition: 0.3s ease-out 100ms;
     }
-    & .badgeImg:hover {
+    & .packImg:hover {
         /*box-shadow: 0 0 20px 10px #bbbb00;*/
         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 +185,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 +401,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/css/userProfile2.css

+/* AUTHOR: Gabriel Copat*/
+@import url('https://fonts.googleapis.com/css2?family=MedievalSharp&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=MedievalSharp&display=swap');
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+
+    /*COLOUR PALETTE*/
+    @media (prefers-color-scheme: dark) {
+        --primary-darker: hsl(272, 100%, 10%);
+        --primary-dark: hsl(271, 100%, 20%);
+        --primary-colour: hsl(271, 100%, 30%);
+        --primary-light: hsl(271, 100%, 40%);
+        --primary-lighter: hsl(271, 100%, 50%);
+
+        --secondary-colour: hsl(12, 81%, 46%);
+        --accent-colour: hsl(12, 82%, 32%);
+        --accent-border: hsl(12, 81%, 25%);
+
+        --accent-shadow: rgba(0, 0, 0, 0.7) 0 0.5em 1em -0.5em;
+
+        color: white;
+
+    }
+    @media (prefers-color-scheme: light) {
+        --primary-darker: hsl(272, 100%, 10%);
+        --primary-dark: hsl(271, 100%, 20%);
+        --primary-colour: hsl(271, 100%, 30%);
+        --primary-light: hsl(271, 100%, 40%);
+        --primary-lighter: hsl(271, 100%, 50%);
+
+        --secondary-colour: hsl(12, 81%, 46%);
+        --accent-colour: hsl(12, 82%, 32%);
+        --accent-border: hsl(12, 81%, 25%);
+
+        --accent-shadow: rgba(0, 0, 0, 0.7) 0 0.5em 1em -0.5em;
+
+        color: white;
+
+
+    }
+}
+
+
+
+/* DEFAULT CSS MADE FOR SCREEN SIZES WIDTHS
+    BETWEEN 320px and 640px:*/
+
+body {
+    background: linear-gradient(to bottom right,
+    var(--primary-darker),
+    var(--primary-dark),
+    var(--primary-darker));
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-content: center;
+
+    position: fixed;
+    width: 100vw;
+    height: 100svh;
+}
+
+.grayedSticker {
+    filter: grayscale(1);
+}
+.gotSticker {
+    filter: drop-shadow(0 0 10px yellow);
+}
+
+
+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%;
+}
+#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%;
+    }
+
+}
+#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;
+        justify-content: center;
+        align-content: flex-start;
+
+    }
+    & .packImg {
+        transition: 0.5s ease-in-out 1ms;
+        border-radius: 20%;
+    }
+}
+.packImg:hover {
+    transform: scale(1.5, 1.5)
+}
+.progressionContainer {
+    display: flex;
+    flex-direction: column;
+    height: 18svh;
+    & h1 {
+        font-size: 4em;
+        width: 100%;
+        font-family: 'MedievalSharp', cursive;
+        text-align: center;
+        overflow-x: scroll;
+        overflow-y: hidden;
+    }
+    & .progImgContainer {
+        position: relative;
+        margin-inline: auto;
+        & .progImg {
+            height: 14svh;
+            /*width: 16svh;*/
+            border-radius: 20%;
+        }
+        & .progImgFill {
+            position: absolute;
+            overflow: hidden;
+            width: 50%;
+        }
+        & .progImgOutline {
+            opacity: 0.1;
+            filter: grayscale(1);
+        }
+        & .progText {
+            font-family: Consolas, serif;
+            opacity: 0.5;
+            -webkit-text-stroke: 1px black;
+            position: absolute;
+            text-align: center;
+            width: 16svh;
+            left:50%;
+            transform: translate(-50%, 150%);
+            font-size: 3em;
+        }
+
+    }
+
+}
+
+#stickersBox {
+    width: 100%;
+}
+.stickersContainer {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin-top: 2em;
+    row-gap: 2em;
+    height: 100%;
+
+}
+.stickerImg {
+    height: 17em;
+    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;
+    }
+}
+
+@media only screen
+and (min-device-width: 1000px) {
+    #userPicture {
+        width: 200px;
+        height: 200px;
+        border: solid #989898 10px;
+    }
+    #allPacksContainer {
+        padding:0;
+        margin-block: 50px;
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+        border: 5px solid rgba(139, 0, 0, 0.5);
+        justify-content: space-evenly;
+    }
+    .packImg {
+        height: 100px;
+        width: 125px;
+        padding-inline: 1em;
+        margin-inline: 3em;
+    }
+    .packImg:hover{
+        transform: scale(2,2);
+    }
+    .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;
+        }
+    }
+    .progressionContainer {
+        height: 20svh;
+    }
+}
\ No newline at end of file