progress in end-treasure and treasure as obj

tu2463 · Dec 4, 2023 · ee0d5ec · ee0d5ec
1 parent 31dc58a
commit ee0d5ec
Show file tree

Hide file tree

Showing 20 changed files with 153 additions and 24 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/final-project/css/end.css b/final-project/css/end.css
@@ -1,11 +0,0 @@
-.placeholder-img {
-    height: 168px;
-    width: 298px;
-    background: pink;
-    margin: 0px auto 14.5px auto;
-    border-radius: 21px;
-}
-
-#productivity-rating {
-    color: red;
-}

diff --git a/final-project/css/focus-general.css b/final-project/css/focus-general.css
@@ -27,4 +27,41 @@
 .timer .text {
    font-size: 96px;
    color: white;
+}
+
+/* end */
+.placeholder-img {
+   height: 168px;
+   width: 298px;
+   background: pink;
+   margin: 0px auto 14.5px auto;
+   border-radius: 21px;
+}
+
+#productivity-rating {
+   color: red;
+}
+
+/* end-treasure */
+.treasure-group {
+   position: relative;
+   margin-left: auto;
+   margin-right: auto;
+   width: 162px;
+   height: 162px;
+   background: purple;
+}
+
+.notice {
+   position: absolute;
+   width: 68px;
+   height: 68px;
+   z-index: 1000;
+   top: -6%;
+   left: -2%;
+}
+
+.treasure {
+   width: 133px;
+   height: 133px;
 }
diff --git a/final-project/css/style.css b/final-project/css/style.css
@@ -52,19 +52,21 @@ textarea::placeholder {
     border: 7px solid #e9d5ca;
 }
 
+/* general layout*/
+
 #left {
     width: 495px;
     /* background: grey; */
 }
 
 #right {
-    background: blue;
+    /* background: blue; */
     width: calc(1280px - 495px);
 }
 
 #planet-group {
     margin-top: 23px;
-    background: red;
+    /* background: red; */
     width: 785px;
     height: 785px;
 }
@@ -75,7 +77,7 @@ textarea::placeholder {
     width: 620px;
     height: 620px;
     margin: auto;
-    background: white;
+    /* background: white; */
 }
 
 img{
@@ -94,7 +96,7 @@ img{
 
 .planet-text {
     height: 296px;
-    /* background: green; */
+    background: green;
 }
 
 .planet-text #textbox{

diff --git a/final-project/end-treasure.html b/final-project/end-treasure.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+  <meta charset="UTF-8">
+  <head>
+    <title>Focus With the Little Prince</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Antic">
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="css/focus-general.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>
+    <script defer src="js/end.js"></script>
+    <script defer src="js/storage.js"></script>
+    <script defer src="js/app.js"></script>
+  </head>
+  <body>
+    <section id = "left">
+      <section>
+        <div class = "text">You have focused </div>
+        <div class = "timer">
+          <!-- 02:59:59  -->
+          <div id = "minutes" class = "text"></div>
+        </div>  <!-- end of timer -->
+
+        <div class = "text-group">
+          <div class = "text">on</div>
+          <textarea class = "text"></textarea>
+        </div>
+      </section>
+    </section> <!-- end of left -->
+
+    <section id = right>
+        <div id = "planet-group">
+            <div id = planet class = "homepage">
+                <img src = "img/planet_prince.png">
+                <div class = "planet-content">
+                    <div class = "planet-text">
+                      <div class = "title">
+                        Congrats! You discovered special from this planet.
+                      </div>
+                      <div class = "treasure-group">
+                        <div class = "treasure">
+                            <img src = "img/treasure-button.png">
+                        </div>
+                        <div class = "notice">
+                            <img src = "img/notice.png">
+                        </div>
+                      </div>
+                    </div> <!-- end of planet text -->
+
+                    <div id = "rec-button" class = "to-home">
+                      Continue
+                    </div>
+                </div> <!-- end of planet content -->
+
+            </div> <!-- end of planet -->
+        </div> <!-- end of planet-group -->
+    </section> <!-- end of right -->
+
+
+
+
+  </body>
+</html>
diff --git a/final-project/end.html b/final-project/end.html
@@ -6,7 +6,6 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Antic">
     <link rel="stylesheet" href="css/style.css">
     <link rel="stylesheet" href="css/focus-general.css">
-    <link rel="stylesheet" href="css/end.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>
@@ -40,13 +39,14 @@
                       <div class = "title">
                         Rate your productivity for this session:
                       </div>
-                      <div id = "productivity_rating">
+                      <div id = "productivity-rating">
                           <textarea class = "text" 
                           placeholder = "from 1-5" maxlength="3"></textarea>
                       </div>
                   </div> <!-- end of planet text -->
 
                     <div id = "rec-button" class = "to-end-treasure">
+                      Continue
                     </div>
                 </div> <!-- end of planet content -->
 

diff --git a/final-project/css/exp-gsap.css → final-project/exp/css/exp-gsap.css b/final-project/css/exp-gsap.css → final-project/exp/css/exp-gsap.css
diff --git a/final-project/css/exp-tweenmax.css → final-project/exp/css/exp-tweenmax.css b/final-project/css/exp-tweenmax.css → final-project/exp/css/exp-tweenmax.css
diff --git a/final-project/css/exp.css → final-project/exp/css/exp.css b/final-project/css/exp.css → final-project/exp/css/exp.css
diff --git a/final-project/exp-gsap.html → final-project/exp/exp-gsap.html b/final-project/exp-gsap.html → final-project/exp/exp-gsap.html
diff --git a/final-project/exp-tweenmax.html → final-project/exp/exp-tweenmax.html b/final-project/exp-tweenmax.html → final-project/exp/exp-tweenmax.html
diff --git a/final-project/exp.html → final-project/exp/exp.html b/final-project/exp.html → final-project/exp/exp.html
diff --git a/final-project/js/exp-focus-general.js → final-project/exp/js/exp-focus-general.js b/final-project/js/exp-focus-general.js → final-project/exp/js/exp-focus-general.js
diff --git a/final-project/js/exp-gsap.js → final-project/exp/js/exp-gsap.js b/final-project/js/exp-gsap.js → final-project/exp/js/exp-gsap.js
diff --git a/final-project/js/exp-tweenmax.js → final-project/exp/js/exp-tweenmax.js b/final-project/js/exp-tweenmax.js → final-project/exp/js/exp-tweenmax.js
diff --git a/final-project/js/exp.js → final-project/exp/js/exp.js b/final-project/js/exp.js → final-project/exp/js/exp.js
diff --git a/final-project/img/treasure button.png b/final-project/img/treasure button.png
diff --git a/final-project/img/treasure-button.png b/final-project/img/treasure-button.png
diff --git a/final-project/js/app.js b/final-project/js/app.js
@@ -61,5 +61,38 @@ else if (curPage == 'focus-in-progress.html') {
 else if (curPage == 'end.html'){
   updateEndInfo();
   const btnProd = document.querySelector('#rec-button.to-end-treasure');
-  btnProd.addEventListener('click', () => {submitProductivity()})
-}
+  btnProd.addEventListener('click', () => {submitProductivity()});
+}
+else if (curPage == 'end-treasure.html') {
+  updateEndInfo();
+  const btnSave = document.querySelector('#rec-button.to-home');
+  btnSave.addEventListener('click', () => (submitTreasure()));
+}
+
+// Treasure
+class Treasure {
+  constructor(id, category, title, body) {
+    this.id = id;
+    this.category = category;
+    this.title = title;
+    this.content = body;
+  }
+}
+
+const treasures = {
+  1: {category: "c_1", title: "t_1", body: "b_1"},
+  2: {category: "c_2", title: "t_2", body: "b_2"}
+};
+
+// const collections = {};
+
+// // for (let i = 0; i < treasures.size; i ++){
+//   // add only if i discovered it! otherwise just leave the treasure raw. no need to change it to obj.
+//   const t = treasures[i];
+//   const id = t;
+//   const category = t.category;
+//   const title = t.title;
+//   const body = t.body;
+//   const treasure = new Treasure(id, category, title, body);
+//   collections.add(treasure);
+// }
diff --git a/final-project/js/storage.js b/final-project/js/storage.js
@@ -13,13 +13,14 @@ function updateFocusInProgressInfo() {
 
     const timeInput = localStorage.getItem('05430FP_timeInput');
     // initTimer(timeInput.toString() + ":00");
-    initTimer("00:05");
+    initTimer("00:03");
 }
 
 function updateEndInfo() {
     const curRecord = retrieveHistory();
     const noteBodyElement = document.querySelector('#left .text-group textarea');
     noteBodyElement.value = curRecord.note;
+    console.log(curRecord, noteBodyElement.value);
     const minElement = document.querySelector('#minutes');
     minElement.innerText = curRecord.duration + " min";
 }
@@ -60,13 +61,16 @@ function submitNote() { // get the attributes that will go into a new Record obj
   window.location.replace("focus-in-progress.html");
 }
 
-function submitProductivity(){
-  const productivity =  parseInt(document.querySelector('#productivity-ratnig textarea.text').value);
-  assert(1 <= productivity && productivity <= 5);
+function submitProductivity() {
+  const productivity =  parseInt(document.querySelector('#productivity-rating textarea.text').value);
   const curRecord = history[history.length-1];
   curRecord.productivity = productivity;
   saveToLocalStorage();
-  // window.location.replace("end-treasure.html");
+  window.location.replace("end-treasure.html");
+}
+
+function submitTreasure() {
+  const 
 }
 
 function saveToLocalStorage() {