badges and confetti

hat.js

@@ -1,12 +1,12 @@
 
 const TEAMS = {
-    GRYFFINDOR : 1,
-    SLYTHERIN : 2,
-    RAVENCLAW : 3,
-    HUFFLEPUFF : 4
+    GRYFFINDOR : {id:1,color:'#740001',name:'gryffindor'},
+    SLYTHERIN : {id:2,color:'#1A472A',name:'slytherin'},
+    RAVENCLAW : {id:3,color:'#0E1A40',name:'hufflepuff'},
+    HUFFLEPUFF : {id:4,color:'#ECB939',name:'ravenclaw'}
 }
 
-let CURRENT_TEAM = 0;
+let CURRENT_TEAM = null;
 class Hat {
 
     static THOUGHTS = [
@@ -70,15 +70,29 @@ class Hat {
     }
 
     stopThinking(){
-        document.getElementById('landing').style.animation = "2s disappear forwards";
-        setTimeout(()=>this.displayBadgePage(),2000);
+        setTimeout(()=>this.displayBadgePage(CURRENT_TEAM.color,CURRENT_TEAM.name),2000);
     }
 
-    displayBadgePage(){
+    displayBadgePage(color,name){
         let badgePage = document.getElementsByTagName('body')[0];
         badgePage.style.animation= "";
         badgePage.style.backgroundColor='';
-        badgePage.style.animation = "3s appear forwards";
+        document.getElementById('landing').innerHTML= ``;
+        let badgeDiv = document.createElement('div');
+        badgeDiv.setAttribute("class","badge-div");
+        badgeDiv.style.backgroundColor=color;
+        badgeDiv.innerHTML = `
+        <img src='./pics/${name}.svg' class='badge-image'></img>
+        <h2 class="congrats"> Congratulations! </h2>
+        <p class='badge-description'> You have been sorted into <strong>${name.charAt(0).toUpperCase() + name.slice(1)}</strong> </p>
+        <img src='./pics/${name}_badge.png' class='badge'></img>
+        `
+        badgeDiv.style.animation= "0.5s appear1 3s forwards";
+        document.getElementById('landing').appendChild(badgeDiv);
+        document.documentElement.style.setProperty("--page-color", color);
+
+        badgePage.style.animation = "3s appear forwards ease";
+
     }
     think(ANIM_TIME){
         let thoughts = document.getElementById("thoughts");

pics/hat.js

@@ -0,0 +1,115 @@
+
+const TEAMS = {
+    GRYFFINDOR : {id:1,color:'#740001',name:'gryffindor'},
+    SLYTHERIN : {id:2,color:'#1A472A',name:'slytherin'},
+    RAVENCLAW : {id:3,color:'#0E1A40',name:'hufflepuff'},
+    HUFFLEPUFF : {id:4,color:'#ECB939',name:'ravenclaw'}
+}
+
+let CURRENT_TEAM = null;
+class Hat {
+
+    static THOUGHTS = [
+        {
+            thought: "Feeling Brave, are you?",
+            team: TEAMS.GRYFFINDOR
+        },
+        {
+            thought : "You seem to be the chivalrous sort",
+            team : TEAMS.GRYFFINDOR
+        },
+        {
+            thought : "A bottomless well of ambition!",
+            team : TEAMS.SLYTHERIN
+        },
+        {
+            thought : "Your pride might be your downfall",
+            team : TEAMS.SLYTHERIN
+        },
+        {
+            thought : "There is much patience in you",
+            team : TEAMS.HUFFLEPUFF
+        },
+        {
+            thought : "Your sense of loyalty is strong",
+            team : TEAMS.HUFFLEPUFF
+        },
+        {
+            thought : "You are the careful sort",
+            team : TEAMS.RAVENCLAW
+        },
+        {
+            thought : "You are Witted! Quick witted ? Or a Half Wit",
+            team : TEAMS.RAVENCLAW
+        }
+    ]
+
+
+
+    intialize(scene = null, animation = "none", ANIM_TIME = 1){
+        let hat = document.getElementById("hat-main");
+        let hatBackground = document.getElementById("hat-bg");
+        let hatEyeLeft = document.getElementById("hat-eye-left")
+        let hatEyeRight = document.getElementById("hat-eye-right")
+        let hatMouth = document.getElementById("hat-mouth")
+
+        hat.style.display="block";
+        hatBackground.style.animation=`${ANIM_TIME}s initialize-hat forwards`;
+        hatEyeLeft.style.animation=`${ANIM_TIME}s  initialize-hat-eyes forwards 1s`;
+        hatEyeRight.style.animation=`${ANIM_TIME}s  initialize-hat-eyes forwards 1s`;
+        hatMouth.style.animation=`${ANIM_TIME}s  initialize-hat-mouth forwards 1.5s`;
+
+        if(scene != null && animation !="none"){
+            scene.style.animation = animation;
+        }
+    } 
+
+    float(ANIM_TIME) {
+        let hat = document.getElementById("hat-main");
+        hat.style.animation= `hat-floating ${ANIM_TIME}s ease-in-out infinite`
+    }
+
+    stopThinking(){
+        setTimeout(()=>this.displayBadgePage(CURRENT_TEAM.color,CURRENT_TEAM.name),2000);
+    }
+
+    displayBadgePage(color,name){
+        let badgePage = document.getElementsByTagName('body')[0];
+        badgePage.style.animation= "";
+        badgePage.style.backgroundColor='';
+        document.getElementById('landing').innerHTML= ``;
+        let badgeDiv = document.createElement('div');
+        badgeDiv.setAttribute("class","badge-div");
+        badgeDiv.style.backgroundColor=color;
+        badgeDiv.innerHTML = `
+        <img src='./pics/${name}.svg' class='badge-image'></img>
+        <h2 class="congrats"> Congratulations! </h2>
+        <p class='badge-description'> You have been sorted into <strong>${name.charAt(0).toUpperCase() + name.slice(1)}</strong> </p>
+        <img src='./pics/${name}_badge.png' class='badge'></img>
+        `
+        badgeDiv.style.animation= "0.5s appear1 3s forwards";
+        document.getElementById('landing').appendChild(badgeDiv);
+        document.documentElement.style.setProperty("--page-color", color);
+
+        badgePage.style.animation = "3s appear forwards ease";
+
+    }
+    think(ANIM_TIME){
+        let thoughts = document.getElementById("thoughts");
+        let randomThought = this.getRandomThought();
+        thoughts.innerText = Hat.THOUGHTS[randomThought].thought;
+        CURRENT_TEAM = Hat.THOUGHTS[randomThought].team;
+        thoughts.style.animation = `type ${ANIM_TIME}s`;
+        setTimeout(()=> this.think(ANIM_TIME),ANIM_TIME*1000)
+
+    }
+
+     getRandomThought() {
+        let min = 0;
+        let max = Hat.THOUGHTS.length - 1;
+        let index = Math.floor(Math.random() * (max - min + 1) + min); 
+        return index;
+      }
+
+
+}

style.css

@@ -1,3 +1,7 @@
+:root {
+    --page-color:#1A472A;
+    --theme-color:#010101;
+}
 html {
     height: 100%;
     overflow: hidden;
@@ -6,6 +10,24 @@ html {
     margin: 0;
 
 }
+.badge-div {
+    height: 30rem;
+    width: 30rem;
+    opacity: 0;
+    text-align: center;
+    margin:25vh auto 0 auto;
+    box-shadow: 1px 1px 30px -2px rgba(0,0,0,0.71);
+    border-radius: 5px;
+    color: #fff;
+    font-family: sans-serif;
+}
+.badge {
+    width: 20rem;
+}
+.badge-image {
+    width: 10rem;
+    margin-top: 2rem;
+}
 body {
     position: absolute;;
     margin: 0%;
@@ -71,15 +93,20 @@ body {
 
 
     0%{
-        background-image: linear-gradient(135deg, #1A472A 50%, black 50%);
+        background-image: linear-gradient(135deg,var(--page-color) 50%, black 50%);
         background-position: left -100vw;
     }
     100%{
-        background-image: linear-gradient(135deg, #1A472A 50%, black 50%);
+        background-image: linear-gradient(135deg,var(--page-color) 50%, black 50%);
         background-position: right 0vw;
         transition: background-image 2000ms linear;
-        
+
     }
+
+
+}
+@keyframes appear1 {
+    to { opacity: 1;}
 }
 @keyframes move-stars {
     0%{transform: translateX(0)}
@@ -89,7 +116,7 @@ body {
 }
 
 @keyframes disappear {
-    to {display:hidden;opacity: 0;}
+    to {display:none;opacity: 0;}
 }
 @keyframes initialize-scene {
     from  {background: #000}