currently wanting to commit something

2026-04-19 22:05:11 +00:00 · 2024-05-07 20:53:07 -07:00 · 2024-05-07 20:53:07 -07:00 · 88a864feb5
commit 88a864feb5
parent 291b9f1214 864628ee21
41 changed files with 228 additions and 46 deletions
--- a/components/bin/rsvp-form.js
+++ b/components/bin/rsvp-form.js
@ -5,7 +5,7 @@ import { Slide } from 'react-reveal'

 export default function RsvpForm() {
  const { status, formProps, useField } = useForm('/api/bin/rsvp', null, {
-    clearOnSubmit: 60000,
+    clearOnSubmit: 5000,
    method: 'POST',
    initData: {}
  })
--- a/pages/api/bin/openai.js
+++ b/pages/api/bin/openai.js
@ -10,7 +10,7 @@ const generateProjectIdea = async (parts) => {
  })

  prompt += `
-  The project should only involve household items like lamps. The project should only use sensors provided, and use those sensors for their intended use. For example, an accelerometer cannot be used to measure humidity or tilt.`
+  The project should only involve household items. The project should only use sensors provided, and use those sensors for their intended use. For example, an accelerometer cannot be used to measure humidity or tilt.`

  // expects OPENAI_API_KEY
  const openai = new OpenAI();
@ -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/pages/clubs.js
+++ b/pages/clubs.js
@ -82,8 +82,8 @@ const Page = () => (
  <>
    <Meta
      as={Head}
-      title="Clubs"
-      description="Hack Club is a global nonprofit network of high school makers & student-led coding clubs where young people build the agency, the network, & the technical talent to think big & do big things in the world."
+      title="Coding / Computer Science Clubs"
+      description="Hack Club is a global nonprofit network of high school makers & student-led computer science clubs where young people build the agency, the network, & the technical talent to think big & do big things in the world."
      image="https://cloud-epiki4yvg.vercel.app/2020-09-09_drbp62kayjuyyy0ek89mf9fwcp5t4kuz.jpeg"
    />
    <Head>
@ -164,7 +164,7 @@ const Page = () => (
            mb: [3, 4]
          }}
        >
-          Hack Club is a nonprofit network of high school coding&nbsp;clubs and
+          Hack Club is a nonprofit network of high school computer science&nbsp;clubs and
          makers around the world. <strong>Applications are now open.</strong>
        </Text>
        <Button
@ -534,7 +534,7 @@ const Page = () => (
                We're always building new tools for leaders, such as{' '}
                <a href="https://sprig.hackclub.com">Sprig</a>! We've also got
                free subscriptions to Figma Pro, Postman, and more for running a
-                great club.
+                great computer science club club.
              </>
            }
          />
@ -551,7 +551,7 @@ const Page = () => (
          name="Existing clubs welcome"
          desc={
            <>
-              When established CS clubs join, they get all the Hack&nbsp;Club
+              When established Computer Science clubs join, they get all the Hack&nbsp;Club
              benefits: Zoom&nbsp;Pro, stickers, our Slack community,{' '}
              <a href="https://workshops.hackclub.com/">workshops</a>, the
              works. They’re welcome to use the “Hack&nbsp;Club” name or keep
--- a/pages/index.js
+++ b/pages/index.js
@ -204,10 +204,10 @@ function Page({
            gradient="linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.45))"
          />
 	  <Announcement
-            copy="Get free boba for making your first website! 🍵"
-            caption="Follow the tutorial to build your own space on the web."
-            href="https://workshops.hackclub.com/personal_website"
-            iconLeft="web"
+            copy="Hop OnBoard and create your first PCB"
+            caption="Join 1,000 others to create your first circuit board."
+            href="https://hackclub.com/onboard/"
+            iconLeft="idea"
          />
          <Box
            sx={{
--- a/public/bin/landing-new/gambling.js
+++ b/public/bin/landing-new/gambling.js
@ -1,6 +1,49 @@
 var fetchedParts;
 var selectedParts = []
 var rolled = false;
+
+
+let yap_sounds = {
+    // ty caleb!
+    thinking: [
+        new Howl({ src: '/bin/yapping/thonk1.wav' }),
+        new Howl({ src: '/bin/yapping/thonk2.wav' }),
+        new Howl({ src: '/bin/yapping/thonk3.wav' }),
+    ],
+    talking: {
+        // these sounds and most of the yapping code are adapted from https://github.com/equalo-official/animalese-generator
+        a: new Howl({ src: '/bin/yapping/a.wav' }),
+        b: new Howl({ src: '/bin/yapping/b.wav' }),
+        c: new Howl({ src: '/bin/yapping/c.wav' }),
+        d: new Howl({ src: '/bin/yapping/d.wav' }),
+        e: new Howl({ src: '/bin/yapping/e.wav' }),
+        f: new Howl({ src: '/bin/yapping/f.wav' }),
+        g: new Howl({ src: '/bin/yapping/g.wav' }),
+        h: new Howl({ src: '/bin/yapping/h.wav' }),
+        i: new Howl({ src: '/bin/yapping/i.wav' }),
+        j: new Howl({ src: '/bin/yapping/j.wav' }),
+        k: new Howl({ src: '/bin/yapping/k.wav' }),
+        l: new Howl({ src: '/bin/yapping/l.wav' }),
+        m: new Howl({ src: '/bin/yapping/m.wav' }),
+        n: new Howl({ src: '/bin/yapping/n.wav' }),
+        o: new Howl({ src: '/bin/yapping/o.wav' }),
+        p: new Howl({ src: '/bin/yapping/p.wav' }),
+        q: new Howl({ src: '/bin/yapping/q.wav' }),
+        r: new Howl({ src: '/bin/yapping/r.wav' }),
+        s: new Howl({ src: '/bin/yapping/s.wav' }),
+        t: new Howl({ src: '/bin/yapping/t.wav' }),
+        u: new Howl({ src: '/bin/yapping/u.wav' }),
+        v: new Howl({ src: '/bin/yapping/v.wav' }),
+        w: new Howl({ src: '/bin/yapping/w.wav' }),
+        x: new Howl({ src: '/bin/yapping/x.wav' }),
+        y: new Howl({ src: '/bin/yapping/y.wav' }),
+        z: new Howl({ src: '/bin/yapping/z.wav' }),
+        th: new Howl({ src: '/bin/yapping/th.wav' }),
+        sh: new Howl({ src: '/bin/yapping/sh.wav' }),
+        _: new Howl({ src: '/bin/yapping/_.wav' })
+    }
+};
+
 async function fetchParts() {
    const response = await fetch('https://hackclub.com/api/bin/wokwi/parts/');
    if (!response.ok) {
@ -9,9 +52,9 @@ async function fetchParts() {
    data = await response.json();

    data = removeItemByAttribute(data, "type", "Microprocessor");
+    console.log(data)
    return data
 }
-/*
 async function preloadImage(item) {
    let response = await fetch(item.imageUrl);
    let blob = response.blob();
@ -21,7 +64,7 @@ async function saveImageToCache(item) {
    const image = await preloadImage(item)
    const blob = URL.createObjectURL(image)
    localStorage.setItem(item.wokwiName, blob);
-}*/
+}
 function removeItemByAttribute(arr, attr, value) {
    return arr.filter(item => item[attr] !== value);
 }
@ -80,20 +123,38 @@ function rollParts() {
    }
    rolled = true
    document.querySelector(".gambling-build").classList.remove("disabled")
-    let results = []
-    document.querySelectorAll(".gambling-item-wrapper").forEach((element) => {
-        let randomThingy = getRandomInt(fetchedParts.length - 1)
+    let chosenParts = []
+    const numPartsNeeded = document.querySelectorAll(".gambling-item-wrapper").length
+    // for the first one, pick an input component
+    const inputParts = fetchedParts.filter((part) => part.type == "Input");
+    const inputPartIndex = Math.floor(Math.random() * inputParts.length)
+    chosenParts.push(inputParts[inputPartIndex])
+    console.log(`For the input part, we picked ${inputParts[inputPartIndex].name}`)
+    // for the second one, pick an output component
+    const outputParts = fetchedParts.filter((part) => part.type == "Output");
+    const outputPartIndex = Math.floor(Math.random() * outputParts.length)
+    chosenParts.push(outputParts[outputPartIndex])
+    console.log(`For the output part, we picked ${outputParts[outputPartIndex].name}`)
+    // for the rest, pick any component
+    for (let i = 2; i < numPartsNeeded; i++) {
+        let partIndex = Math.floor(Math.random() * fetchedParts.length)
+        chosenParts.push(fetchedParts[partIndex])
+        console.log(`For the ${i}th part, we picked ${fetchedParts[partIndex].name}`)
+    }
+    let chosenPartNames = []
+    document.querySelectorAll(".gambling-item-wrapper").forEach((element, key) => {
+        let thisPart = chosenParts[key]
+        //console.log(`Hydrating part ${key} with ${thisPart.name}`)
        let spinnerImage = element.childNodes[2].childNodes[0]
        let partTitle = element.childNodes[2].childNodes[1]
        let flavorText = element.childNodes[2].childNodes[2]
-        let result = fetchedParts[randomThingy]
-        spinnerImage.src = (result.imageUrl == "" || result.imageUrl == undefined) ? "https://awdev.codes/images/ww.gif" : result.imageUrl
-        //spinnerImage.src = (result.imageUrl == "" || result.imageUrl == undefined) ? localStorage.getItem("wokwi-pedro") : localStorage.getItem(result.wokwiName)
-        partTitle.innerText = result.name;
-        flavorText.innerText = result.flavorText;
-        results.push(result.wokwiName)
+        //spinnerImage.src = (thisPart.imageUrl == "" || thisPart.imageUrl == undefined) ? "https://awdev.codes/images/ww.gif" : thisPart.imageUrl
+        spinnerImage.src = (thisPart.imageUrl == "" || thisPart.imageUrl == undefined) ? localStorage.getItem("wokwi-pedro") : localStorage.getItem(thisPart.wokwiName)
+        partTitle.innerText = thisPart.name;
+        flavorText.innerText = thisPart.flavorText;
+        chosenPartNames.push(thisPart.wokwiName)
    })
-    selectedParts = results
+    selectedParts = chosenPartNames
 }


@ -133,26 +194,95 @@ async function generateBuildLink(e) {
 window.addEventListener("load", (e) => {
    fetchParts().then(parts => {
        fetchedParts = parts;
-
-        /*fetchedParts.forEach(part => {
+        fetchedParts.forEach(part => {
            if (!(part.imageUrl == undefined)) {
                console.log(part.wokwiName)
-                //saveImageToCache(part);
+                saveImageToCache(part);
            }
-        })*/
-        //saveImageToCache({ wokwiName: "wokwi-pedro", imageUrl: "https://awdev.codes/images/ww.gif" })
-    });
-
-    document.querySelector("#generate-project-idea").addEventListener("click", async (e) => {
-        document.querySelector('#project-idea').innerText = "Thinking..."
-        const res = await fetch('/api/bin/openai/', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({ parts: selectedParts })
        })
-        const json = await res.json()
-        document.querySelector('#project-idea').innerText = json.recommendation
+        saveImageToCache({ wokwiName: "wokwi-pedro", imageUrl: "https://awdev.codes/images/ww.gif" })
+    });
+})
+
+document.querySelector("#generate-project-idea").addEventListener("click", async (e) => {
+    document.querySelector('#project-idea').innerText = "Thinking..."
+    yap_sounds.thinking[getRandomInt(yap_sounds.thinking.length)].play();
+    const res = await fetch('/api/bin/openai/', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ parts: selectedParts })
    })
-})
+    const json = await res.json()
+    document.querySelector('#project-idea').innerText = json.recommendation
+    yap(json.recommendation)
+})
+})
+
+async function yap(text) {
+    text = text.toLowerCase();
+    const yap_queue = [];
+    for (let i = 0; i < text.length; i++) {
+        const char = text[i];
+        try {
+            if (char === 's' && text[i + 1] === 'h') { // test for 'sh' sound
+                yap_queue.push(yap_sounds.talking['sh']);
+                continue;
+            } else if (char === 't' && text[i + 1] === 'h') { // test for 'th' sound
+                yap_queue.push(yap_sounds.talking['th']);
+                continue;
+            } else if (char === 'h' && (text[i - 1] === 's' || text[i - 1] === 't')) { // test if previous letter was 's' or 't' and current letter is 'h'
+                continue;
+            } else if (char === ',' || char === '?' || char === '.') {
+                yap_queue.push(yap_sounds.talking['_']);
+                continue;
+            } else if (char === text[i - 1]) { // skip repeat letters
+                continue;
+            }
+        } catch (e) {
+            // who cares. pick up a foot ball
+        }
+        if (!char.match(/[a-zA-Z.]/)) {
+            continue; // skip characters that are not letters or periods
+        }
+        yap_queue.push(yap_sounds.talking[char]);
+    }
+
+    function next_yap() {
+        if (yap_queue.length === 0) return;
+        let noise = yap_queue.shift();
+        noise.rate(2 * (Math.random() * .50 + 1.9));
+        noise.once('end', next_yap)
+        console.log(noise)
+        noise.play();
+    }
+
+    next_yap();
+}
+
+
+async function generateProjectIdea() {
+    document.querySelector('#project-idea').innerHTML = "<em>" + thinkingWords() + "..." + "</em>"
+    document.querySelector('#generate-project-idea').src = "https://cloud-cyo3pqn0f-hack-club-bot.vercel.app/1thinking_rac.png"
+    const res = await fetch('/api/bin/openai/', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ parts: selectedParts })
+    })
+    const json = await res.json()
+    document.querySelector('#project-idea').innerHTML = json.recommendation
+    document.querySelector('#generate-project-idea').src = "https://cloud-cyo3pqn0f-hack-club-bot.vercel.app/0statement_rac.png"
+}
+
+function thinkingWords() {
+    const arr = [
+        "thinking",
+        "single neuron activated",
+        "thinking about trash",
+        "rummaging through my thoughts",
+        "wishing you a garbage day"]
+    return arr[Math.floor(Math.random() * arr.length)]
+}
--- a/public/bin/landing-new/index.html
+++ b/public/bin/landing-new/index.html
@ -12,6 +12,9 @@
    <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="./script.js"></script>
 </head>

@ -73,13 +76,14 @@
            <h1>What are we building today?</h1>
            <textarea id="project-name" placeholder="I'm going to build a..."></textarea>
            <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" style="margin: 0 auto; display: inline; max-width: 10em"
-                        id="generate-project-idea">
-                    <p><em>(It doesn't know much about electronics, but it'll try its best.)</em></p>
+                    <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">🗑️</p>
+                <p id="project-idea" class="thought">🗑️</p>
            </div>
        </div>
    </section>
--- a/public/bin/landing-new/style.css
+++ b/public/bin/landing-new/style.css
@ -337,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;
--- a/public/bin/selector/script.js
+++ b/public/bin/selector/script.js
@ -32,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 => {
--- a/public/bin/yapping/_.wav
+++ b/public/bin/yapping/_.wav
--- a/public/bin/yapping/__attribution.txt
+++ b/public/bin/yapping/__attribution.txt
@ -0,0 +1 @@
+these are from https://github.com/equalo-official/animalese-generator!
--- a/public/bin/yapping/a.wav
+++ b/public/bin/yapping/a.wav
--- a/public/bin/yapping/b.wav
+++ b/public/bin/yapping/b.wav
--- a/public/bin/yapping/c.wav
+++ b/public/bin/yapping/c.wav
--- a/public/bin/yapping/d.wav
+++ b/public/bin/yapping/d.wav
--- a/public/bin/yapping/e.wav
+++ b/public/bin/yapping/e.wav
--- a/public/bin/yapping/f.wav
+++ b/public/bin/yapping/f.wav
--- a/public/bin/yapping/g.wav
+++ b/public/bin/yapping/g.wav
--- a/public/bin/yapping/h.wav
+++ b/public/bin/yapping/h.wav
--- a/public/bin/yapping/i.wav
+++ b/public/bin/yapping/i.wav
--- a/public/bin/yapping/j.wav
+++ b/public/bin/yapping/j.wav
--- a/public/bin/yapping/k.wav
+++ b/public/bin/yapping/k.wav
--- a/public/bin/yapping/l.wav
+++ b/public/bin/yapping/l.wav
--- a/public/bin/yapping/m.wav
+++ b/public/bin/yapping/m.wav
--- a/public/bin/yapping/n.wav
+++ b/public/bin/yapping/n.wav
--- a/public/bin/yapping/o.wav
+++ b/public/bin/yapping/o.wav
--- a/public/bin/yapping/p.wav
+++ b/public/bin/yapping/p.wav
--- a/public/bin/yapping/q.wav
+++ b/public/bin/yapping/q.wav
--- a/public/bin/yapping/r.wav
+++ b/public/bin/yapping/r.wav
--- a/public/bin/yapping/s.wav
+++ b/public/bin/yapping/s.wav
--- a/public/bin/yapping/sh.wav
+++ b/public/bin/yapping/sh.wav
--- a/public/bin/yapping/t.wav
+++ b/public/bin/yapping/t.wav
--- a/public/bin/yapping/th.wav
+++ b/public/bin/yapping/th.wav
--- a/public/bin/yapping/thonk1.wav
+++ b/public/bin/yapping/thonk1.wav
--- a/public/bin/yapping/thonk2.wav
+++ b/public/bin/yapping/thonk2.wav
--- a/public/bin/yapping/thonk3.wav
+++ b/public/bin/yapping/thonk3.wav
--- a/public/bin/yapping/u.wav
+++ b/public/bin/yapping/u.wav
--- a/public/bin/yapping/v.wav
+++ b/public/bin/yapping/v.wav
--- a/public/bin/yapping/w.wav
+++ b/public/bin/yapping/w.wav
--- a/public/bin/yapping/x.wav
+++ b/public/bin/yapping/x.wav
--- a/public/bin/yapping/y.wav
+++ b/public/bin/yapping/y.wav
--- a/public/bin/yapping/z.wav
+++ b/public/bin/yapping/z.wav
				`@ -0,0 +1 @@`
				`these are from https://github.com/equalo-official/animalese-generator!`