diff --git a/hat.css b/hat.css
index d6b279f..8f56166 100644
--- a/hat.css
+++ b/hat.css
@@ -1,10 +1,71 @@
+:root {
+ --hat-color:#312802;
+ --hat-eye-color:#010101;
+}
+#hat-main {
+ margin-top: 15vh;
+ margin-left: auto;
+ margin-right: auto;
+ width: 20rem;
+ height: 20rem;
+ display: none;
+ text-shadow: 12px 12px 30px 30px rgba(168, 47, 47, 0.199);
+}
+#thoughts {
-#hat-canvas {
- margin-top: 15%;
- z-index: 1;
- position: relative;
+ color:white;
+ margin-top: 30px;
+ font-family: sans-serif;
+ white-space: nowrap;
+ text-align: center;
margin-left: auto;
margin-right: auto;
- display: block;
+ width: 30em;
+ overflow: hidden;
+
+}
+@keyframes type{
+ from { width: 0; }
+ }
+#hat-eye-left {
+ opacity: 0;
+}
+
+#hat-eye-right {
+ opacity: 0;
+}
+
+#hat-mouth {
+ opacity: 0;
+}
+
+
+@keyframes initialize-hat {
+ from {fill: var(--hat-color);opacity: 0 }
+ to {fill: var(--hat-color);opacity: 1}
+}
+
+@keyframes hat-floating {
+ 0% {
+ text-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.767);
+ transform: translateY(0px);
+ }
+ 50% {
+ text-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);
+ transform: translateY(-20px);
+ }
+ 100% {
+ text-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.925);
+ transform: translateY(0px);
+ }
+}
+
+@keyframes initialize-hat-eyes {
+ from {opacity: 0}
+ to {fill: var(--hat-eye-color);opacity: 1;}
+}
+@keyframes initialize-hat-mouth {
+ from {fill:#000;opacity: 0}
+ to {fill:#000;opacity: 1;}
}
\ No newline at end of file
diff --git a/hat.js b/hat.js
index d9d1ff9..8617ed7 100644
--- a/hat.js
+++ b/hat.js
@@ -1,44 +1,48 @@
-let canvas = document.getElementById("hat-canvas");
-let context = canvas.getContext("2d");
-let scale = 1;
-
-
-function initializeHat() {
-
- context.moveTo(0*scale,100*scale);
- context.strokeStyle = '#493716';
- context.fillStyle = '#493716';
-
- context.lineTo(0*scale,90*scale);
- context.stroke();
- context.lineTo(100*scale,90*scale);
- context.stroke();
- context.lineTo(100*scale,100*scale);
- context.stroke();
- context.lineTo(0*scale,100*scale);
- context.stroke();
- context.fill();
-
-
- context.moveTo(10*scale,80*scale);
-
- context.lineTo(90*scale,80*scale);
- context.stroke();
- context.lineTo(70*scale,35*scale);
- context.stroke();
- context.lineTo(80*scale,0*scale);
- context.stroke();
- context.lineTo(45*scale,32*scale);
- context.stroke();
- context.lineTo(10*scale,80*scale);
- context.stroke();
- context.fill();
+class Hat {
+
+ static THOUGHTS = [
+ {
+ thought : "You seem to be a little shy...",
+ color: "green"
+ }
+ ]
+
+ 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`
+ }
+
+ think(ANIME_TIME){
+ let thoughts = document.getElementById("thoughts");
+ let randomThought = this.getRandomThought();
+ thoughts.innerText = Hat.THOUGHTS[randomThought].thought;
+ thoughts.style.animation = "type 5s steps(60,start)";
+ }
+
+ getRandomThought() {
+ let min = 0;
+ let max = Hat.THOUGHTS.length - 1;
+ let index = Math.floor(Math.random() * (max - min + 1) + min);
+ return index;
+ }
+
}
-initializeHat();
-
-
-
-
-
diff --git a/hat/hat-wizard.svg b/hat/hat-wizard.svg
new file mode 100644
index 0000000..30782ec
--- /dev/null
+++ b/hat/hat-wizard.svg
@@ -0,0 +1,6 @@
+
diff --git a/index.html b/index.html
index 7cc5863..1c13760 100644
--- a/index.html
+++ b/index.html
@@ -11,14 +11,16 @@
-
-
-
+
+
+
+
+