{"version":3,"sources":["webpack:///./src/pages/miscellaneous/boxer.js","webpack:///./src/libs/blobs.js"],"names":["generateBlobs","props","width","height","src","title","frameborder","allow","allowfullscreen","href","rand","max","Math","round","random","generateBlob","maxX","maxY","alive","selected","x","y","maxNum","num","blobs","i","push","Blob","onMouseDown","onMouseUp","id","style","position","top","left","backgroundColor","border"],"mappings":"2FAAA,4CAgBYA,YAAc,IAGX,mBAACC,GACZ,OAAO,6BACC,2FAGA,6BACI,4BAAQC,MAAM,MAAMC,OAAO,MAAMC,IAAI,4CAA4CC,MAAM,uBAAuBC,YAAY,IAAIC,MAAM,2FAA2FC,iBAAe,KALnP,0BAOwB,uBAAGC,KAAK,+CAAR,kBACvB,iC,kCC5BZ,6FAKaC,EAAO,SAACC,GAAD,OAASC,KAAKC,MAAMF,EAAMC,KAAKE,WAEtCC,EAAe,SAACC,EAAMC,GAM/B,MAAO,CACHC,OAAO,EACPC,UAAS,EACTC,EARUV,EAAKM,GASfK,EARUX,EAAKO,KAYVjB,EAAgB,SAACsB,EAAWN,EAAYC,QAAgB,IAAvCK,MAAO,SAAgC,IAA5BN,MAnB3B,WAmBuD,IAAhBC,MAlBtC,KAsBX,IAHA,IAAMM,EAAMb,EAAKY,GACXE,EAAQ,GAELC,EAAI,EAAGA,EAAIF,IAAOE,EACvBD,EAAME,KAAKX,EAAaC,EAAMC,IAGlC,OAAOO,GAGEG,EAAO,SAAC1B,GAAW,IACpBmB,EAAqDnB,EAArDmB,EAAGC,EAAkDpB,EAAlDoB,EAAGH,EAA+CjB,EAA/CiB,MAAOC,EAAwClB,EAAxCkB,SAAUS,EAA8B3B,EAA9B2B,YAAaC,EAAiB5B,EAAjB4B,UAAWC,EAAM7B,EAAN6B,GAEvD,OAAOZ,EACH,yBACIY,GAAIA,EACJF,YAAaA,EACbC,UAAWA,EACXE,MAAO,CACHC,SAAU,WACVC,IAAKZ,EACLa,KAAMd,EACNlB,MAAO,OACPC,OAAQ,OACRgC,gBAAiB,QACjBC,OAAQjB,EAAW,iBAAmB,QAE9C","file":"component---src-pages-miscellaneous-boxer-js-05ecc8473920c938513d.js","sourcesContent":["import React, { useEffect, useState } from \"react\"\nimport { generateBlobs, Blob } from \"../../libs/blobs\"\n\n/** ALERT - this is NOT optimized, it will be slow :'( if you have a ton of sprites **/\n\nconst MouseStates  = {\n    NO_SELECT: 0,\n    DRAG_SELECT: 1,\n    BOX_SELECT: 2,\n}\n\nvar mouseStartX = null\nvar mouseStartY = null\nvar mouseDx = null\nvar mouseDy = null\nvar mouseState = MouseStates.NO_SELECT\nvar blobs = generateBlobs(20)\n\n// https://stackoverflow.com/questions/53024496/state-not-updating-when-using-react-state-hook-within-setinterval\nexport default (props) => {\n    return <div>\n            <div>\n                oopsies, react got an update and broken oopsies no workyyy\n            </div>\n            <div>\n                <iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/FveF-we6lcE\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>\n            </div>\n            Or even more demented: <a href=\"https://www.youtube.com/watch?v=eWTtEkRz4fM\">oopsie woopsie</a>\n            <div>\n            </div>\n        </div>\n    // windowing and mouse\n    // const [winWidth, setWinWidth] = useState(window.innerWidth)\n    // const [winHeight, setWinHeight] = useState(window.innerHeight)\n\n    // // const [mouseStartX, setMouseStartX] = useState(null)\n    // // const [mouseStartY, setMouseStartY] = useState(null)\n    // // const [mouseDx, setMouseDx] = useState(null)\n    // // const [mouseDy, setMouseDy] = useState(null)\n\n    // // const [mouseState, setMouseState] = useState(MouseStates.NO_SELECT)\n\n    // // sprites\n    // // const [blobs, ] = useState(generateBlobs(3))\n\n    // // blobs.forEach((blob, index) => {\n    // //     if (blob.selected) {\n    // //         console.log(`blob at ${index} is located at ${blob.x} + ${mouseDx}, ${blob.y} + ${mouseDy}`)\n    // //     }  \n    // // })\n\n    // const getX = (blob) => blob.x + (mouseState === MouseStates.DRAG_SELECT && blob.selected ? mouseDx : 0)\n    // const getY = (blob) => blob.y + (mouseState === MouseStates.DRAG_SELECT && blob.selected ? mouseDy : 0)\n\n    // const getW = (index) => document.getElementById(`${index}`).clientWidth\n    // const getH = (index) => document.getElementById(`${index}`).clientHeight\n\n\n    // // constructor for windowing etc..\n    // useEffect(() => {\n    //     document.title = `Box and Drag`\n\n    //     // global event listeners a bit easier for detecting shit\n    //     const eventListeners = [\n    //         [`resize`, updateWindowDimensions], \n    //         [`mousemove`, handleMouseMove],\n    //         [`mousedown`, handleMouseDown],\n    //         [`mouseup`, handleMouseUp],\n    //     ]\n\n    //     eventListeners.forEach((params) => {\n    //         const [type, listener] = params\n    //         window.addEventListener(type, listener)\n    //     })\n\n    //     return () => {\n    //         eventListeners.forEach((params) => {\n    //             console.log(`removing ?!`)\n    //             const [type, listener] = params\n    //             window.removeEventListener(type, listener)\n    //         })\n    //     }\n    // /* eslint-disable react-hooks/exhaustive-deps */\n    // }, [])\n\n    // const updateWindowDimensions = () => {\n    //     setWinWidth(window.innerWidth)\n    //     setWinHeight(window.innerHeight)\n    // }\n\n    // const handleMouseMove = (evt) => {\n    //     const [mouseX, mouseY] = [evt.clientX, evt.clientY]\n    //     console.log(`mouse move, mouseDx ${mouseDx}, mouseDy ${mouseDy}, mouseStartX ${mouseStartX}, mouseStartY ${mouseStartY}`)\n\n    //     if (mouseDx !== null && mouseDy !== null && mouseStartX !== null && mouseStartY !== null) {\n    //         console.log(`started at ${mouseStartX} but now on ${mouseX} with dx as ${mouseDx}`)\n\n    //         // setMouseDx(mouseX - mouseStartX)\n    //         // setMouseDy(mouseY- mouseStartY)\n    //         mouseDx = mouseX - mouseStartX\n    //         mouseDy = mouseY - mouseStartY\n\n    //         // can be made faster by doing it all at once in the end, but I want them\n    //         // to highlight dynamically basically :'(\n    //         if (mouseState === MouseStates.BOX_SELECT) {\n    //             // console.log(`box select`)\n    //             blobs.forEach((blob) => {\n    //                 // fix this it only gets the corners\n    //                 if ((blob.x >= mouseStartX && blob.x <= mouseX) && (blob.y >= mouseStartY && blob.y <= mouseY)) {\n    //                     blob.selected = true\n    //                 } else {\n    //                     blob.selected = false\n    //                 }\n    //             })\n    //         } else if (mouseState === MouseStates.DRAG_SELECT) {\n    //             blobs.forEach(blob => {\n    //                 if (blob.selected) {\n    //                     blob.x += mouseDx\n    //                     blob.y += mouseDy\n    //                 }\n    //             })\n    //         }\n    //     }\n    // }\n\n    // const handleMouseDown = (evt) => {\n    //     const [mouseX, mouseY] = [evt.clientX, evt.clientY]\n        \n    //     // chooses the first one, which should be ok since that's the order that they display in\n    //     const blobSelected = blobs.reduce((accumulator, blob, index) => {\n    //         const [blobW, blobH] = [getW(index), getH(index)]\n    //         const [top, bottom, left, right] = [blob.y, blob.y + blobH, blob.x, blob.x + blobW]\n    //         // console.log(`top bottom left right is ${top}, ${bottom}, ${left}, ${right} with acc ${accumulator}`)\n    //         // console.log(`mouse y,x is ${mouseY}, ${mouseX}\\n`)\n    //         const yFits = mouseY >= top && mouseY <= bottom\n    //         const xFits = mouseX >= left && mouseX <= right\n    //         // console.log(`y fits, x fits is ${yFits}, ${xFits}`)\n    //         if (accumulator === null && xFits && yFits) {\n    //             // console.log(`IT FIT and index is ${index}`)\n    //             return index\n    //         } else {\n    //             return accumulator\n    //         }\n    //     }, null)\n\n    //     console.log(`OUTPUT IS ${blobSelected}`)\n\n    //     // console.log(`blob selected was ${blobSelected}`)\n\n    //     // console.log(`set mouse start x to ${mouseX}`)\n    //     // set the parameters so we know how much to drag by\n    //     // setMouseStartX(prevStartX => mouseX)\n    //     // setMouseStartY(prevStartY => mouseY)\n    //     // setMouseDx(prevDx => 0)\n    //     // setMouseDy(prevDy => 0)\n    //     mouseStartX = mouseX\n    //     mouseStartY = mouseY\n    //     mouseDx = 0\n    //     mouseDy = 0\n    //     console.log(`so in theory with ${mouseX}, ${mouseY}, ${0}, ${0}...`)\n    //     console.log(`just set mouse start X start y to ${mouseStartX}, ${mouseStartY} with mouse dx dy to ${mouseDx}, ${mouseDy}`)\n\n    //     if (blobSelected !== null) {\n    //         console.log(`blob selected`)\n    //         blobs[blobSelected].selected = true   \n            \n    //         mouseState = MouseStates.DRAG_SELECT\n    //         // setMouseState(MouseStates.DRAG_SELECT)\n    //     } else {\n    //         // setMouseState(MouseStates.BOX_SELECT)\n    //         mouseState = MouseStates.BOX_SELECT\n\n    //         // console.log(`why never here`)\n    //         // for (const blob in blobs) {\n    //         //     console.log(`blob is`)\n    //         // }\n\n    //         blobs.forEach((blob) => {\n    //             blob.selected = false\n    //             // console.log(`set to false`)\n    //         })\n    //     }\n\n    //     // console.log(`${mouseStartX}, ${mouseDx}, ${mouseX}`)\n    // }\n\n    // const handleMouseUp = (evt) => {\n    //     console.log(`mouse up`)\n    //     if (mouseState === MouseStates.DRAG_SELECT) {\n    //         blobs.forEach((blob) => {\n    //             if (blob.selected) {\n    //                 blob.x += mouseDx\n    //                 blob.y += mouseDy\n    //             }\n    //         })\n    //     }\n\n    //     console.log(`setting shit to null`)\n    //     // setMouseStartX(prevStartX => null)\n    //     // setMouseStartY(prevStartY => null)\n    //     // setMouseDx(prevDx => null)\n    //     // setMouseDy(prevDy => null)\n    //     mouseStartX = null\n    //     mouseStartY = null\n    //     mouseDx = null\n    //     mouseDy = null\n\n    //     // setMouseState(MouseStates.NO_SELECT)\n    //     mouseState = MouseStates.NO_SELECT\n    // }\n\n    // // visualize\n    // return blobs.map((blob, index) => {\n    //     return <Blob \n    //             // necessary bs\n    //             role=\"none\"\n    //             key={index} \n\n    //             // so we can get its offsetWidth\n    //             id={index}\n\n    //             // state information\n    //             x={getX(blob)} \n    //             y={getY(blob)} \n    //             alive={blob.alive} \n    //             selected={blob.selected} \n    //         />\n    //     })\n}","import React from \"react\"\n\nconst WIDTH = 1200\nconst HEIGHT = 675\n\nexport const rand = (max) => Math.round(max * Math.random())\n\nexport const generateBlob = (maxX, maxY) => {\n    const randX = rand(maxX)\n    const randY = rand(maxY)\n\n    // console.log(`generated blob at ${randX}, ${randY}`)\n\n    return {\n        alive: true,\n        selected:false,\n        x: randX,\n        y: randY,\n    }\n}\n\nexport const generateBlobs = (maxNum=50, maxX=WIDTH, maxY=HEIGHT) => {\n    const num = rand(maxNum)\n    const blobs = []\n\n    for (let i = 0; i < num; ++i) {\n        blobs.push(generateBlob(maxX, maxY))\n    }\n\n    return blobs\n}\n\nexport const Blob = (props) => {\n    const { x, y, alive, selected, onMouseDown, onMouseUp, id} = props\n    // console.log(`this blob is at ${x}, ${y} and it is selected? ${selected}`)\n    return alive ? (\n        <div\n            id={id}\n            onMouseDown={onMouseDown}\n            onMouseUp={onMouseUp}\n            style={{\n                position: \"absolute\",\n                top: y,\n                left: x,\n                width: \"40px\",\n                height: \"40px\",\n                backgroundColor: \"black\",\n                border: selected ? \"2px solid blue\" : null,\n            }} />\n    ) : null\n}"],"sourceRoot":""}