wip

HRussellZFAC023 · Jun 18, 2024 · bf54341 · bf54341
1 parent d6bf877
commit bf54341
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 34 deletions.
diff --git a/public/index.html b/public/index.html
@@ -15,18 +15,24 @@
 </head>
 
 <body>
-  <div id="app"></div>
+  <div id="app">
+    <img id="birthday-banner" src="assets/banner.png" alt="Birthday banner" class="sticker">
+
+  </div>
+
   <script type="module" src="/main.js"></script>
-  <script async src="https://www.tiktok.com/embed.js"></script>
+
+
 
   <blockquote class="tiktok-embed" cite="https://www.tiktok.com/@brccspanishfork/video/7339943185180839210"
     data-video-id="7339943185180839210" style="max-width: 325px;min-width: 325px; display: none;">
     <section></section>
-    <button id="hideTikTok" style="display: block; margin: 10px auto; z-index: 100; background-color: #ff0000"
+    <button id="hideTikTok" style="display: block; margin: 10px auto; z-index: 6;" 
       class="cute-button">Sorry🥲</button>
   </blockquote>
 
 
+  <script async src="https://www.tiktok.com/embed.js"></script>
 </body>
 
 </html>
diff --git a/public/main.js b/public/main.js
@@ -4,6 +4,27 @@ import { createAndPositionStickers } from './sticker.js';
 import { drawArrow, drawCareOMeter } from './care-o-meta.js';
 import { createCanvas, drawBackground, drawFrills } from './canvasBg.js';
 
+const messages = [
+  "Mary, would you let me make your post-birthday celebration extra special?",
+  "How about we continue the birthday celebration when you're back?",
+  "Can I have the honor of celebrating your birthday with a belated surprise?",
+  "Would you like to extend your birthday celebration with a special day out?",
+  "Your birthday might be over, but the celebration doesn't have to be. Shall we?",
+  "How about a post-birthday adventure together?"
+];
+
+let currentMessageIndex = 0;
+
+
+const displayBirthdayMessage = () => {
+  if (currentMessageIndex < messages.length) {
+    const message = messages[currentMessageIndex];
+    document.querySelector('.message').textContent = message;
+    currentMessageIndex++;
+  } else {
+    console.log("No more messages");
+  }}
+
 window.onload = (() => {
 
 
@@ -24,49 +45,63 @@ window.onload = (() => {
   const buttonContainer = document.createElement('div');
   contentContainer.className = 'content-container';
   buttonContainer.className = 'button-wrapper';
+
+  const messageParagraph = document.createElement('p');
+  messageParagraph.className = 'message';
+  contentContainer.appendChild(messageParagraph);
+
   const yesButton = createButton('Yes', 'up');
   yesButton.className = 'cute-button yes-button';
   const noButton = createButton('No', 'down');
   noButton.className = 'cute-button no-button';
+
   buttonContainer.appendChild(noButton);
   buttonContainer.appendChild(yesButton);
-
   contentContainer.appendChild(buttonContainer);
 
-  app.appendChild(contentContainer);
 
+
+
+  app.appendChild(contentContainer);
+  // Display the first message when the page loads
+  displayBirthdayMessage();
 });
 
 
 let arrowAngle = Math.PI * 2;
-let noCount = 0;
 export const animateArrow = (canvas, direction) => {
   const angleChange = direction === 'up' ? 0.3 : -0.3;
 
 
-  const animationInterval = setInterval(() => {
-    arrowAngle += angleChange;
+
+  arrowAngle += angleChange;
+
+
+  if (arrowAngle <= (Math.PI * 2) - 0.3 * 3) {
+    console.log("show tiktok");
+    document.querySelector('.tiktok-embed').style.display = 'block';
+    arrowAngle = Math.PI * 2;
+  }
+  resizeAndDrawCanvas();
 
 
-    if (arrowAngle <= (Math.PI * 2) - 0.3 * 3) {
-      console.log("show tiktok");
-      document.querySelector('.tiktok-embed').style.display = 'block';
-      arrowAngle = Math.PI * 2;
-    }
-    resizeAndDrawCanvas();
 
-    clearInterval(animationInterval);
-  }, 50);
 };
 
 const createButton = (text, direction) => {
   const button = document.createElement('button');
   button.textContent = text;
-  button.onclick = () => animateArrow(document.querySelector('.canvas'), direction);
+  if (text === 'Yes') {
+    button.onclick = () => {
+      animateArrow(document.querySelector('.canvas'), direction);
+      displayBirthdayMessage();
+    };
+  } else {
+    button.onclick = () => animateArrow(document.querySelector('.canvas'), direction);
+  }
   return button;
 };
 
-
 const resizeAndDrawCanvas = () => {
   const canvas = document.querySelector('.canvas');
   const canvasDimensions = canvas.getBoundingClientRect();

diff --git a/public/sticker.js b/public/sticker.js
@@ -43,14 +43,10 @@ export const createAndPositionStickers = () => {
         stickerElements.push(img);
     });
 
-    let lastWidth = window.innerWidth;
 
     window.addEventListener('resize', () => {
-        let currentWidth = window.innerWidth;
-        if (currentWidth !== lastWidth) {
-            stickers.forEach((_, index) => positionStickers(index, stickerElements[index]));
-            lastWidth = currentWidth;
-        }
+
+        stickers.forEach((_, index) => positionStickers(index, stickerElements[index]));
     });
 
     return stickerElements;

diff --git a/public/style.css b/public/style.css
@@ -167,44 +167,54 @@ body {
     display: grid;
     position: absolute;
     top: 50%;
-    /* Adjust this value to position the container below the heart */
+
     left: 0;
     width: 100%;
     height: 50%;
-    /* Adjust this value based on the size of the heart */
+
     justify-items: center;
     align-items: start;
     grid-gap: 20px;
-    /* Adjust this value to add space between grid items */
+
 }
 
 
+.message {
+    font-size: 1.5em;
+    text-align: center;
+    background-color: var(--light-yellow);
+    padding: 1em;
+    border-radius: 1em;
+    box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
+    max-width: 66vw;
+}
+
 
 .button-wrapper {
     display: flex;
     justify-content: center;
-    gap: 1.5em;
-    margin-top: 1.5em;
+    gap: 3em;
+
 }
 
 .cute-button {
-    padding: 0.625em 1.25em;
-    border-radius: 3.125em;
+    padding: 1.25em 2.5em; 
+    border-radius: 6.25em; 
     border: none;
-    color: white;
     cursor: pointer;
     transition: transform 0.2s;
-    width: 6.25em;
+    width: 12.5em; 
     z-index: 1;
     margin: 0 auto;
+    font-size: 1.25em;
 }
 
 .cute-button:hover {
     transform: scale(1.3);
 }
 
 .tiktok-embed {
-    z-index: 2;
+    z-index: 6;
 }
 
 .yes-button {
@@ -217,4 +227,15 @@ body {
     background-color: var(--no-button);
     color: var(--no-button-text);
     border: 2px solid var(--no-button-border);
+}
+
+#birthday-banner {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 25vw;
+    min-width: 10em;
+    z-index: 5;
+    max-width: 33vh;
 }