Sauce Bottle Cursor

{message}

\n \n

\n \n \n \n

\n \n

Add to Your Website:

\n{`/* Add to your CSS */\nbody * {\n  cursor: none !important;\n}\n\n/* Add this JavaScript */\nconst cursorScript = document.createElement('script');\ncursorScript.src = \"${import.meta.url}?js\";\ndocument.head.appendChild(cursorScript);\n`}\n

\n \n View Source\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n \n // Create cursor element\n const cursor = document.createElement('div');\n cursor.id = 'sauce-cursor';\n document.body.appendChild(cursor);\n \n // Set up SVG images using the hosted URLs\n const defaultCursorImg = document.createElement('img');\n defaultCursorImg.src = \"https://dcm31-svghost.web.val.run/dEsE2DIO?raw=true\";\n defaultCursorImg.style.width = '90px';\n defaultCursorImg.style.height = '90px';\n cursor.appendChild(defaultCursorImg);\n\n const clickableCursorImg = document.createElement('img');\n clickableCursorImg.src = \"https://dcm31-svghost.web.val.run/pwWzi0tM?raw=true\";\n clickableCursorImg.style.width = '90px';\n clickableCursorImg.style.height = '90px';\n clickableCursorImg.style.display = 'none';\n cursor.appendChild(clickableCursorImg);\n\n // Cursor positioning function\n function onMove(x, y) {\n cursor.style.left = (x - 10) + 'px';\n cursor.style.top = (y - 10) + 'px';\n }\n\n // Check if element is clickable\n function isClickable(element) {\n const clickableTags = ['A', 'BUTTON', 'INPUT', 'SELECT', 'TEXTAREA'];\n return (\n clickableTags.includes(element.tagName) ||\n element.onclick != null ||\n element.getAttribute('role') === 'button' ||\n getComputedStyle(element).cursor === 'pointer'\n );\n }\n\n // Show clicking cursor\n function showClickingCursor() {\n defaultCursorImg.style.display = 'none';\n clickableCursorImg.style.display = 'block';\n clickableCursorImg.style.animation = 'none';\n clickableCursorImg.offsetHeight; // Trigger reflow\n clickableCursorImg.style.animation = 'rotateBottle 0.15s ease-out forwards';\n }\n\n // Show default or clickable cursor\n function showDefaultOrClickableCursor(x, y) {\n const target = document.elementFromPoint(x, y);\n if (isClickable(target)) {\n defaultCursorImg.style.display = 'none';\n clickableCursorImg.style.display = 'block';\n clickableCursorImg.style.animation = 'none';\n } else {\n defaultCursorImg.style.display = 'block';\n clickableCursorImg.style.display = 'none';\n }\n }\n\n // Mouse event handlers\n function onMouseMove(e) {\n onMove(e.clientX, e.clientY);\n showDefaultOrClickableCursor(e.clientX, e.clientY);\n }\n\n function onMouseDown(e) {\n onMove(e.clientX, e.clientY);\n showClickingCursor();\n }\n\n function onMouseUp(e) {\n onMove(e.clientX, e.clientY);\n showDefaultOrClickableCursor(e.clientX, e.clientY);\n }\n\n // Touch event handlers\n function onTouchMove(e) {\n if (e.touches.length > 0) {\n const touch = e.touches[0];\n onMove(touch.clientX, touch.clientY);\n showDefaultOrClickableCursor(touch.clientX, touch.clientY);\n }\n }\n\n function onTouchStart(e) {\n if (e.touches.length > 0) {\n const touch = e.touches[0];\n onMove(touch.clientX, touch.clientY);\n showClickingCursor();\n }\n }\n\n function onTouchEnd(e) {\n if (e.changedTouches.length > 0) {\n const touch = e.changedTouches[0];\n onMove(touch.clientX, touch.clientY);\n showDefaultOrClickableCursor(touch.clientX, touch.clientY);\n }\n }\n\n // Add event listeners\n document.addEventListener('mousemove', onMouseMove);\n document.addEventListener('mousedown', onMouseDown);\n document.addEventListener('mouseup', onMouseUp);\n document.addEventListener('touchmove', onTouchMove);\n document.addEventListener('touchstart', onTouchStart);\n document.addEventListener('touchend', onTouchEnd);\n}\n\n// Initialize in browser context\nif (typeof document !== \"undefined\") { \n client(); \n}\n\nexport default async function server(request: Request): Promise {\n const url = new URL(request.url);\n \n // Return JavaScript version for embedding\n if (url.searchParams.has('js')) {\n return new Response(getJavaScriptVersion(), {\n headers: {\n \"content-type\": \"application/javascript\",\n },\n });\n }\n \n return new Response(`\n \n \n Sauce Bottle Cursor\n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n}\n\n// Standalone JS version for embedding on websites\nfunction getJavaScriptVersion() {\n return `\n (function() {\n // Create cursor element\n const cursor = document.createElement('div');\n cursor.id = 'sauce-cursor';\n cursor.style.cssText = 'position: fixed; z-index: 10000; pointer-events: none; top: 0; left: 0; width: 90px; height: 90px;';\n document.body.appendChild(cursor);\n \n // Set up SVG images using the hosted URLs\n const defaultCursorImg = document.createElement('img');\n defaultCursorImg.src = \"https://dcm31-svghost.web.val.run/dEsE2DIO?raw=true\";\n defaultCursorImg.style.width = '90px';\n defaultCursorImg.style.height = '90px';\n cursor.appendChild(defaultCursorImg);\n\n const clickableCursorImg = document.createElement('img');\n clickableCursorImg.src = \"https://dcm31-svghost.web.val.run/pwWzi0tM?raw=true\";\n clickableCursorImg.style.width = '90px';\n clickableCursorImg.style.height = '90px';\n clickableCursorImg.style.display = 'none';\n cursor.appendChild(clickableCursorImg);\n\n // Cursor positioning function\n function onMove(x, y) {\n cursor.style.left = (x - 10) + 'px';\n cursor.style.top = (y - 10) + 'px';\n }\n\n // Check if element is clickable\n function isClickable(element) {\n const clickableTags = ['A', 'BUTTON', 'INPUT', 'SELECT', 'TEXTAREA'];\n return (\n clickableTags.includes(element.tagName) ||\n element.onclick != null ||\n element.getAttribute('role') === 'button' ||\n getComputedStyle(element).cursor === 'pointer'\n );\n }\n\n // Show clicking cursor\n function showClickingCursor() {\n defaultCursorImg.style.display = 'none';\n clickableCursorImg.style.display = 'block';\n clickableCursorImg.style.animation = 'none';\n clickableCursorImg.offsetHeight; // Trigger reflow\n clickableCursorImg.style.animation = 'rotateBottle 0.15s ease-out forwards';\n }\n\n // Show default or clickable cursor\n function showDefaultOrClickableCursor(x, y) {\n const target = document.elementFromPoint(x, y);\n if (isClickable(target)) {\n defaultCursorImg.style.display = 'none';\n clickableCursorImg.style.display = 'block';\n clickableCursorImg.style.animation = 'none';\n } else {\n defaultCursorImg.style.display = 'block';\n clickableCursorImg.style.display = 'none';\n }\n }\n\n // Mouse event handlers\n function onMouseMove(e) {\n onMove(e.clientX, e.clientY);\n showDefaultOrClickableCursor(e.clientX, e.clientY);\n }\n\n function onMouseDown(e) {\n onMove(e.clientX, e.clientY);\n showClickingCursor();\n }\n\n function onMouseUp(e) {\n onMove(e.clientX, e.clientY);\n showDefaultOrClickableCursor(e.clientX, e.clientY);\n }\n\n // Touch event handlers\n function onTouchMove(e) {\n if (e.touches.length > 0) {\n const touch = e.touches[0];\n onMove(touch.clientX, touch.clientY);\n showDefaultOrClickableCursor(touch.clientX, touch.clientY);\n }\n }\n\n function onTouchStart(e) {\n if (e.touches.length > 0) {\n const touch = e.touches[0];\n onMove(touch.clientX, touch.clientY);\n showClickingCursor();\n }\n }\n\n function onTouchEnd(e) {\n if (e.changedTouches.length > 0) {\n const touch = e.changedTouches[0];\n onMove(touch.clientX, touch.clientY);\n showDefaultOrClickableCursor(touch.clientX, touch.clientY);\n }\n }\n\n // Add event listeners\n document.addEventListener('mousemove', onMouseMove);\n document.addEventListener('mousedown', onMouseDown);\n document.addEventListener('mouseup', onMouseUp);\n document.addEventListener('touchmove', onTouchMove);\n document.addEventListener('touchstart', onTouchStart);\n document.addEventListener('touchend', onTouchEnd);\n\n // Add CSS for rotation animation\n const style = document.createElement('style');\n style.textContent = \\`\n @keyframes rotateBottle {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(-90deg); }\n }\n \\`;\n document.head.appendChild(style);\n })();\n `;\n}\n\nconst css = `\nbody {\n margin: 0;\n font-family: system-ui, sans-serif;\n cursor: none;\n background-color: white;\n height: 100vh;\n overflow: hidden;\n}\n\n.soccer-field {\n position: relative;\n height: 100%;\n background: white;\n border-top: 4px solid #4CAF50;\n border-bottom: 4px solid #4CAF50;\n}\n\n.container {\n max-width: 800px;\n margin: 0 auto;\n padding: 2rem;\n position: relative;\n z-index: 2;\n}\n\nh1 {\n font-size: 2.5rem;\n text-align: center;\n margin-bottom: 1rem;\n color: #333;\n}\n\nh2 {\n font-size: 1.5rem;\n margin-top: 2rem;\n margin-bottom: 1rem;\n color: #333;\n}\n\n.message {\n font-size: 1.8rem;\n text-align: center;\n color: #333;\n margin: 1.5rem 0;\n padding: 1rem;\n background-color: #f9f9f9;\n border-radius: 8px;\n font-weight: bold;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\n}\n\n.button-container {\n display: flex;\n justify-content: center;\n gap: 20px;\n margin: 2rem 0;\n}\n\n.soccer-button {\n background-color: #4CAF50;\n color: white;\n border: none;\n border-radius: 50px;\n padding: 12px 24px;\n font-size: 1rem;\n font-weight: bold;\n cursor: pointer;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n transition: all 0.2s ease;\n position: relative;\n overflow: hidden;\n}\n\n.soccer-button:hover {\n transform: translateY(-3px);\n box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);\n background-color: #3d9140;\n}\n\n.soccer-button:active {\n transform: translateY(0);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.field-elements {\n display: flex;\n justify-content: space-between;\n align-items: center;\n height: 200px;\n margin: 2rem 0;\n position: relative;\n background-color: #f0fff0;\n border: 2px solid #4CAF50;\n border-radius: 8px;\n}\n\n.goal {\n width: 80px;\n height: 120px;\n border: 4px solid #4CAF50;\n position: relative;\n}\n\n.left-goal {\n border-right: none;\n border-top-left-radius: 8px;\n border-bottom-left-radius: 8px;\n}\n\n.right-goal {\n border-left: none;\n border-top-right-radius: 8px;\n border-bottom-right-radius: 8px;\n}\n\n.center-circle {\n width: 150px;\n height: 150px;\n border: 4px solid #4CAF50;\n border-radius: 50%;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n}\n\n.center-circle::after {\n content: '';\n position: absolute;\n width: 12px;\n height: 12px;\n background-color: #4CAF50;\n border-radius: 50%;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n}\n\n.code-snippet {\n background-color: #f5f5f5;\n color: #333;\n border: 1px solid #ddd;\n border-radius: 8px;\n padding: 1.5rem;\n margin: 1rem 0;\n overflow-x: auto;\n font-family: monospace;\n font-size: 0.9rem;\n white-space: pre-wrap;\n}\n\n.instructions {\n background-color: #f9f9f9;\n border-left: 4px solid #4CAF50;\n padding: 1.5rem;\n margin: 2rem 0;\n border-radius: 8px;\n color: #333;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\n}\n\n.source {\n margin-top: 2rem;\n font-size: 0.9rem;\n text-align: center;\n}\n\n.source a {\n color: #4CAF50;\n text-decoration: none;\n position: relative;\n padding: 5px 10px;\n border-radius: 4px;\n background-color: #f5f5f5;\n transition: all 0.2s ease;\n}\n\n.source a:hover {\n background-color: #e8e8e8;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n#sauce-cursor {\n position: fixed;\n z-index: 10000;\n pointer-events: none;\n top: 0;\n left: 0;\n width: 90px;\n height: 90px;\n}\n\n#sauce-cursor img {\n width: 100%;\n height: 100%;\n display: block;\n position: absolute;\n transform-origin: top left;\n}\n\n@keyframes rotateBottle {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(-90deg); }\n}\n\n@media (max-width: 768px) {\n .container {\n padding: 1rem;\n }\n\n h1 {\n font-size: 2rem;\n }\n\n .message {\n font-size: 1.4rem;\n }\n\n .button-container {\n flex-direction: column;\n align-items: center;\n }\n\n .soccer-button {\n width: 100%;\n max-width: 200px;\n margin-bottom: 1rem;\n }\n\n .field-elements {\n height: 150px;\n }\n\n .goal {\n width: 60px;\n height: 90px;\n }\n\n .center-circle {\n width: 100px;\n height: 100px;\n }\n\n #sauce-cursor {\n width: 67.5px;\n height: 67.5px;\n }\n\n #sauce-cursor img {\n width: 67.5px;\n height: 67.5px;\n }\n}\n`;","deleted","label",[99],"permalink","https://www.val.town/x/dcm31/saucepointer/code/main.tsx","extension","actionData","errors"]