From bf54341b0f323da4fe34c83aa5d19cf98cfc6129 Mon Sep 17 00:00:00 2001 From: henry russell Date: Tue, 18 Jun 2024 02:32:18 +0100 Subject: [PATCH] wip --- public/index.html | 12 ++++++--- public/main.js | 65 ++++++++++++++++++++++++++++++++++++----------- public/sticker.js | 8 ++---- public/style.css | 41 ++++++++++++++++++++++-------- 4 files changed, 92 insertions(+), 34 deletions(-) diff --git a/public/index.html b/public/index.html index 6219ff1..7d635c3 100644 --- a/public/index.html +++ b/public/index.html @@ -15,18 +15,24 @@ -
+
+ Birthday banner + +
+ - + + + \ No newline at end of file diff --git a/public/main.js b/public/main.js index f3065c9..8364d45 100644 --- 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 index 3b181a1..c53b9f5 100644 --- 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 index 6b93119..9402709 100644 --- a/public/style.css +++ b/public/style.css @@ -167,36 +167,46 @@ 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 { @@ -204,7 +214,7 @@ body { } .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; } \ No newline at end of file