oh come on (#1196)

* added caching for images (need to fix) * added part fetching (needs fixing) * Add more clicky buttons * Add endpoint for project suggestions * Improve project idea prompt * Add project idea section * uuhhhhhh removed preloading idk * yay, no clipping * i make selector go weeeee * added some styling to writing prompt thingy * removed hamburger (amurica) --------- Co-authored-by: Max Wofford <max@maxwofford.com>
2026-04-19 22:05:11 +00:00 · 2024-05-07 21:02:02 -07:00 · 2024-05-07 21:02:02 -07:00 · d8b48943bf
commit d8b48943bf
parent 7f552bc7c8
7 changed files with 107 additions and 77 deletions
--- a/pages/api/bin/openai.js
+++ b/pages/api/bin/openai.js
@ -35,6 +35,6 @@ export default async function handler(req, res) {

  const recommendation = await generateProjectIdea(parts)

-  res.send({recommendation, parts})
+  res.send({ recommendation, parts })
 }

--- a/public/bin/landing-new/gambling.js
+++ b/public/bin/landing-new/gambling.js
@ -119,7 +119,7 @@ function rollParts() {
        document.querySelectorAll(".gambling-item-wrapper").forEach((element) => {
            element.removeChild(element.firstElementChild)
        })
-        addComponentsToPage(data)
+        addComponentsToPage(fetchedParts)
    }
    rolled = true
    document.querySelector(".gambling-build").classList.remove("disabled")
--- a/public/bin/landing-new/index.html
+++ b/public/bin/landing-new/index.html
@ -12,11 +12,14 @@
    <link rel="icon" type="image/png" sizes="16x16" href="https://assets.hackclub.com/favicons/favicon-16x16.png">
    <script src="https://awdev.codes/utils/smoothScroll.js"></script>
    <script src="https://awdev.codes/utils/hackclub/orph.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.4/howler.core.min.js" integrity="sha512-d00Brs/+XQUUaO0Y9Uo8Vw63o7kS6ZcLM2P++17kALrI8oihAfL4pl1jQObeRBgv06j7xG0GHOhudAW0BdrycA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.4/howler.core.min.js"
+        integrity="sha512-d00Brs/+XQUUaO0Y9Uo8Vw63o7kS6ZcLM2P++17kALrI8oihAfL4pl1jQObeRBgv06j7xG0GHOhudAW0BdrycA=="
+        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="./script.js"></script>
 </head>

 <body>
+    <img src="https://awdev.codes/images/ww.gif" style="display:none;">
    <section class="landing-section section">
        <div class="landing-header">
            <img src="../icons/icon.svg" class="landing-logo">
@ -31,7 +34,6 @@
            style="top: 30%; right:10%;animation-delay: -1500ms;"><!---animation-delay: -2s;-->
        <img src="../icons/scrolldown.svg" class="scroll-prompt" onclick="smoothScroll('.gambling-section')">
        <img src="../images/idea.png" class="huh floaty" style="animation-delay: -3000ms;">
-        <img src="../icons/menu.svg" class="menu-button">
    </section>
    <section class="gambling-section section">
        <div class="gambling-header">
@ -70,18 +72,16 @@
        </div>
    </section>
    <section class="project-idea-section section">
-        <div class="container">
+        <div class="project-idea-container">
            <h1>What are we building today?</h1>
            <textarea id="project-name" placeholder="I'm going to build a..."></textarea>
-            <h2>💡 Need an idea? Click the raccoon!</h2>
+            <h1>💡 Need an idea? Click the raccoon!</h1>
            <p><em>(It doesn't know much about electronics, but it'll try its best.)</em></p>
            <div style="display: flex;">
                <div>
-                    <img src="../images/idea.png"
-                        class="hoverable"
-                    style="margin: 0 auto; display: inline; max-width: 10em; height: auto;"
-                    id="generate-project-idea"
-                    onclick="generateProjectIdea()">
+                    <img src="../images/idea.png" class="hoverable"
+                        style="margin: 0 auto; display: inline; max-width: 10em; height: auto;"
+                        id="generate-project-idea" onclick="generateProjectIdea()">
                </div>
                <p id="project-idea" class="thought">🗑️</p>
            </div>
--- a/public/bin/landing-new/script.js
+++ b/public/bin/landing-new/script.js
@ -34,4 +34,10 @@ async function fetchAndLogTextFile(url) {
    }
 }

-fetchAndLogTextFile('./ascii-art.txt');
+fetchAndLogTextFile('./ascii-art.txt');
+
+window.addEventListener("load", (e) => {
+    document.querySelectorAll(".section").forEach(element => {
+        element.style.minHeight = element.getBoundingClientRect().height + "px"
+    })
+})
--- a/public/bin/landing-new/style.css
+++ b/public/bin/landing-new/style.css
@ -1,13 +1,11 @@
 .section {
-    height: 100vh;
+    height: fit-content;
    width: 100%;
    box-sizing: border-box;
 }

-.container {
-    margin: auto;
-    padding: 0 20px;
-    max-width: 52em;
+.landing-section {
+    height: 100vh;
 }

 .hoverable {
@ -24,18 +22,6 @@
    height: 0px;
 }

-.menu-button {
-    position: absolute;
-    top: 15px;
-    right: 15px;
-    transform: rotate(0deg);
-    transition: 500ms transform;
-    cursor: pointer;
-}
-
-.menu-button:hover {
-    transform: rotate(90deg);
-}

 /*TODO: decide whether to remove this*/
 .huh {
@ -351,6 +337,52 @@
    }
 }

+/* CSS from https://codepen.io/quadbaup/details/rKOKQv */
+.thought {
+    display: flex;
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 30px;
+    min-width: 40px;
+    max-width: 220px;
+    min-height: 40px;
+    margin: 20px;
+    position: relative;
+    align-items: center;
+    justify-content: center;
+    /* text-align:center; */
+}
+
+.thought:before,
+.thought:after {
+    content: "";
+    background-color: #fff;
+    border-radius: 50%;
+    display: block;
+    position: absolute;
+    z-index: -1;
+}
+
+.thought:before {
+    width: 44px;
+    height: 44px;
+    top: -12px;
+    left: 28px;
+    box-shadow: -50px 30px 0 -12px #fff;
+}
+
+.thought:after {
+    bottom: -10px;
+    right: 26px;
+    width: 30px;
+    height: 30px;
+    box-shadow: 40px -34px 0 0 #fff,
+        -28px -6px 0 -2px #fff,
+        -24px 17px 0 -6px #fff,
+        -5px 25px 0 -10px #fff;
+
+}
+

 .disabled {
    cursor: not-allowed !important;
@ -364,45 +396,23 @@
    cursor: pointer;
 }

-/* CSS from https://codepen.io/quadbaup/details/rKOKQv */
-.thought {
-    display:flex;
-    background-color:#fff;
-    padding:20px;
-    border-radius:30px;
-    min-width:40px;
-    max-width:220px;
-    min-height:40px;
-    margin:20px;
-    position:relative;
-    align-items:center;
-    justify-content:center;
-    /* text-align:center; */
-  }
-  .thought:before,
-  .thought:after {
-    content:"";
-    background-color:#fff;
-    border-radius:50%;
-    display:block;
-    position:absolute;
-    z-index:-1;
-  }
-  .thought:before {
-    width:44px;
-    height:44px;
-    top:-12px;
-    left:28px;
-    box-shadow:-50px 30px 0 -12px #fff;
-  }
-  .thought:after {
-    bottom:-10px;
-    right:26px;
-    width:30px;
-    height:30px;
-    box-shadow:40px -34px 0 0 #fff,
-               -28px -6px 0 -2px #fff,
-               -24px 17px 0 -6px #fff,
-               -5px 25px 0 -10px #fff;
-    
-  }
+#project-name {
+    resize: none;
+    width: 70%;
+    border: none;
+    padding: 20px;
+    font-size: 20px;
+    margin-bottom: 30px;
+    border-radius: 30px;
+}
+
+.project-idea-container {
+    margin: auto;
+    padding: 0 20px;
+    max-width: 52em;
+}
+
+.project-idea-container h1 {
+    font-size: 40px;
+    margin-bottom: 10px;
+}
--- a/public/bin/selector/script.js
+++ b/public/bin/selector/script.js
@ -13,6 +13,7 @@ async function fetchParts() {
 function removeItemByAttribute(arr, attr, value) {
    return arr.filter(item => item[attr] !== value);
 }
+/*
 async function preloadImage(item) {
    let response = await fetch(item.imageUrl);
    let blob = response.blob();
@ -23,7 +24,7 @@ async function saveImageToCache(item) {
    const blob = URL.createObjectURL(image)
    localStorage.setItem(item.wokwiName, blob);
    addPartToPage(item)
-}
+}*/
 function getSelectedItems() {
    return document.querySelectorAll(".selected")
 }
@ -31,6 +32,7 @@ function recalculateSelected() {
    let numSelectedItems = getSelectedItems().length
    let selections = []
    items = document.querySelectorAll(".selector-item")
+    items = document.querySelectorAll(".selector-item")
    document.querySelector(".selector-number").innerText = `${3 - numSelectedItems} choices remaining.`
    if (3 - numSelectedItems == 0) {
        items.forEach(item => {
@ -39,6 +41,7 @@ function recalculateSelected() {
                item.classList.add("disabled")
            }
        })
+        document.querySelector(".selector-number").classList.add("disabled")
    } else {
        items.forEach(item => {
            let isDisabled = item.className.includes("disabled")
@ -46,6 +49,7 @@ function recalculateSelected() {
                item.classList.remove("disabled")
            }
        })
+        document.querySelector(".selector-number").classList.remove("disabled")
    }
    getSelectedItems().forEach(item => {
        selections.push(item.getAttribute("part_name"))
@ -67,7 +71,7 @@ function addPartToPage(part) {
    selectorItem.className = "selector-item"

    let selectorImage = document.createElement("img")
-    selectorImage.src = localStorage.getItem(part.wokwiName)
+    selectorImage.src = part.imageUrl
    selectorImage.className = "selector-image"
    selectorItem.appendChild(selectorImage)

@ -103,7 +107,8 @@ window.addEventListener("load", (e) => {
        fetchedParts.forEach(part => {
            if (!(part.imageUrl == undefined)) {
                console.log(part.wokwiName)
-                saveImageToCache(part);
+                //saveImageToCache(part);
+                addPartToPage(part)
            }
        })
        //saveImageToCache({ wokwiName: "wokwi-pedro", imageUrl: "https://awdev.codes/images/ww.gif" })
--- a/public/bin/selector/style.css
+++ b/public/bin/selector/style.css
@ -55,11 +55,12 @@
    gap: 5px;
    box-sizing: border-box;
    cursor: pointer;
+    filter: grayscale(0) brightness(1);
    transition: filter 300ms;
 }

 .selector-item.disabled {
-    filter: grayscale(1);
+    filter: grayscale(1) brightness(0.7);
 }

 .selector-item.selected {
@ -84,10 +85,18 @@
 .selector-number {
    font-weight: bold;
    font-size: 30px;
-    position: absolute;
+    position: fixed;
    bottom: 30px;
    right: 50px;
-    padding: 10px;
+    padding: 10px 30px;
+    background-color: #867DEC;
+    border-radius: 50px;
+    filter: grayscale(0);
+    transition: filter 300ms;
+}
+
+.selector-number.disabled {
+    filter: grayscale(0.8);
 }

 .flex-lb {