Update styles. Add some animations. Add favicon.

milespratt · Aug 9, 2018 · f5a80da · f5a80da
1 parent c6fc191
commit f5a80da
Show file tree

Hide file tree

Showing 31 changed files with 3,829 additions and 41 deletions.
diff --git a/android-icon-144x144.png b/android-icon-144x144.png
diff --git a/android-icon-192x192.png b/android-icon-192x192.png
diff --git a/android-icon-36x36.png b/android-icon-36x36.png
diff --git a/android-icon-48x48.png b/android-icon-48x48.png
diff --git a/android-icon-72x72.png b/android-icon-72x72.png
diff --git a/android-icon-96x96.png b/android-icon-96x96.png
diff --git a/apple-icon-114x114.png b/apple-icon-114x114.png
diff --git a/apple-icon-120x120.png b/apple-icon-120x120.png
diff --git a/apple-icon-144x144.png b/apple-icon-144x144.png
diff --git a/apple-icon-152x152.png b/apple-icon-152x152.png
diff --git a/apple-icon-180x180.png b/apple-icon-180x180.png
diff --git a/apple-icon-57x57.png b/apple-icon-57x57.png
diff --git a/apple-icon-60x60.png b/apple-icon-60x60.png
diff --git a/apple-icon-72x72.png b/apple-icon-72x72.png
diff --git a/apple-icon-76x76.png b/apple-icon-76x76.png
diff --git a/apple-icon-precomposed.png b/apple-icon-precomposed.png
diff --git a/apple-icon.png b/apple-icon.png
diff --git a/assets/scripts/index.js b/assets/scripts/index.js
@@ -8,7 +8,8 @@ const religionTable = document.getElementById("religion_table");
 const hobbyTable = document.getElementById("hobby_table");
 const quirkTable = document.getElementById("quirk_table");
 
-const hidden = document.querySelectorAll(".hidden");
+const list = document.querySelectorAll(".list");
+const control = document.getElementById("control");
 
 export function updatePersonDetails(person) {
   personNameField.innerText = `${person.name} - ${person.profession}`;
@@ -125,7 +126,60 @@ export function updatePersonDetails(person) {
 }
 
 export function newPerson() {
+  control.classList.add("disabled");
+  control.classList.add("animated", "bounceOutLeft");
+  const newPerson = new Person();
+  list.forEach((listItem, index) => {
+    if (Array.from(listItem.classList).indexOf("hidden") > -1) {
+      listItem.classList.add("animated", "bounceInRight");
+      listItem.classList.remove("hidden");
+      if (index === list.length - 1) {
+        updatePersonDetails(newPerson);
+        setTimeout(() => {
+          control.classList.remove("disabled");
+          control.classList.remove("new");
+          control.classList.remove("bounceOutLeft");
+          control.classList.add("old");
+          control.classList.add("fadeIn");
+        }, 1000);
+      }
+    } else {
+      listItem.classList.remove("bounceInRight");
+      listItem.classList.add("bounceOutLeft");
+      control.classList.remove("fadeIn");
+      control.classList.add("bounceOutLeft");
+      setTimeout(() => {
+        listItem.classList.remove("bounceOutLeft");
+        listItem.classList.add("bounceInRight");
+      }, 500);
+      if (index === list.length - 1) {
+        setTimeout(() => {
+          clearPersonDetails();
+        }, 500);
+        setTimeout(() => {
+          updatePersonDetails(newPerson);
+        }, 600);
+        setTimeout(() => {
+          control.classList.remove("bounceOutLeft");
+          control.classList.add("fadeIn");
+          control.classList.remove("disabled");
+        }, 1500);
+      }
+    }
+  });
+}
+
+function clearPersonDetails() {
+  personalityTable.innerHTML = "";
+  personTable.innerHTML = "";
+  religionTable.innerHTML = "";
+  hobbyTable.innerHTML = "";
+  quirkTable.innerHTML = "";
+}
+
+function start() {
   const newPerson = new Person();
-  hidden.forEach(hidden => hidden.classList.remove("hidden"));
   updatePersonDetails(newPerson);
 }
+
+// start();