Knee Slide 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 elements\n const neutralCursor = document.createElement('div');\n neutralCursor.id = 'neutral-cursor';\n document.body.appendChild(neutralCursor);\n \n const slideCursor = document.createElement('div');\n slideCursor.id = 'slide-cursor';\n document.body.appendChild(slideCursor);\n \n // Set up SVG images using the hosted URLs\n const neutralImg = document.createElement('img');\n neutralImg.src = \"https://dcm31-svghost.web.val.run/vma3lUz5?raw=true\";\n neutralImg.style.width = '60px';\n neutralImg.style.height = '60px';\n neutralCursor.appendChild(neutralImg);\n \n const slideImg = document.createElement('img');\n slideImg.src = \"https://dcm31-svghost.web.val.run/rWvfmu5R?raw=true\";\n slideImg.style.width = '56px';\n slideImg.style.height = '56px';\n slideCursor.appendChild(slideImg);\n \n // Mouse tracking variables\n let lastX = 0;\n let lastY = 0;\n let isMoving = false;\n let moveTimeout;\n\n // Movement detection function\n function onMouseMove(e) {\n const currentX = e.clientX;\n const currentY = e.clientY;\n \n // Calculate direction\n if (lastX !== 0 && lastY !== 0) {\n const deltaX = currentX - lastX;\n const deltaY = currentY - lastY;\n \n if (Math.abs(deltaX) > 3 || Math.abs(deltaY) > 3) {\n // Determine primary direction\n const isHorizontal = Math.abs(deltaX) > Math.abs(deltaY);\n \n if (isHorizontal) {\n // Moving horizontally\n if (deltaX > 0) {\n // Moving right - flip the image to face right (180 degrees)\n slideCursor.style.transform = 'rotate(0deg) scaleX(-1)'; \n } else {\n // Moving left - original orientation (0 degrees)\n slideCursor.style.transform = 'rotate(0deg)';\n }\n } else {\n // Moving vertically\n if (deltaY > 0) {\n // Moving down - rotate 270 degrees (FIXED: was 90)\n slideCursor.style.transform = 'rotate(270deg)';\n } else {\n // Moving up - rotate 90 degrees (FIXED: was 270)\n slideCursor.style.transform = 'rotate(90deg)';\n }\n }\n }\n }\n \n // Position cursors (adjusted for larger size)\n neutralCursor.style.left = (currentX - 30) + 'px';\n neutralCursor.style.top = (currentY - 30) + 'px';\n slideCursor.style.left = (currentX - 28) + 'px';\n slideCursor.style.top = (currentY - 28) + 'px';\n \n // Show slide cursor when moving\n clearTimeout(moveTimeout);\n isMoving = true;\n neutralCursor.style.opacity = '0';\n slideCursor.style.opacity = '1';\n \n // Switch back to neutral after movement stops\n moveTimeout = setTimeout(() => {\n isMoving = false;\n neutralCursor.style.opacity = '1';\n slideCursor.style.opacity = '0';\n }, 100);\n \n lastX = currentX;\n lastY = currentY;\n }\n\n // Add mouse movement listener\n document.addEventListener('mousemove', onMouseMove);\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 Soccer Knee Slide Cursor\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 elements\n const neutralCursor = document.createElement('div');\n neutralCursor.id = 'neutral-cursor';\n neutralCursor.style.cssText = 'position: fixed; z-index: 10000; pointer-events: none; top: 0; left: 0; width: 60px; height: 60px; opacity: 1; transition: opacity 0.1s ease; will-change: transform;';\n document.body.appendChild(neutralCursor);\n \n const slideCursor = document.createElement('div');\n slideCursor.id = 'slide-cursor';\n slideCursor.style.cssText = 'position: fixed; z-index: 10000; pointer-events: none; top: 0; left: 0; width: 56px; height: 56px; opacity: 0; transition: opacity 0.1s ease; will-change: transform;';\n document.body.appendChild(slideCursor);\n \n // Set up SVG images using the hosted URLs\n const neutralImg = document.createElement('img');\n neutralImg.src = \"https://dcm31-svghost.web.val.run/vma3lUz5?raw=true\";\n neutralImg.style.width = '60px';\n neutralImg.style.height = '60px';\n neutralCursor.appendChild(neutralImg);\n \n const slideImg = document.createElement('img');\n slideImg.src = \"https://dcm31-svghost.web.val.run/rWvfmu5R?raw=true\";\n slideImg.style.width = '56px';\n slideImg.style.height = '56px';\n slideCursor.appendChild(slideImg);\n \n // Mouse tracking variables\n let lastX = 0;\n let lastY = 0;\n let isMoving = false;\n let moveTimeout;\n\n // Movement detection function\n function onMouseMove(e) {\n const currentX = e.clientX;\n const currentY = e.clientY;\n \n // Calculate direction\n if (lastX !== 0 && lastY !== 0) {\n const deltaX = currentX - lastX;\n const deltaY = currentY - lastY;\n \n if (Math.abs(deltaX) > 3 || Math.abs(deltaY) > 3) {\n // Determine primary direction\n const isHorizontal = Math.abs(deltaX) > Math.abs(deltaY);\n \n if (isHorizontal) {\n // Moving horizontally\n if (deltaX > 0) {\n // Moving right - flip the image to face right (180 degrees)\n slideCursor.style.transform = 'rotate(0deg) scaleX(-1)'; \n } else {\n // Moving left - original orientation (0 degrees)\n slideCursor.style.transform = 'rotate(0deg)';\n }\n } else {\n // Moving vertically\n if (deltaY > 0) {\n // Moving down - rotate 270 degrees (FIXED: was 90)\n slideCursor.style.transform = 'rotate(270deg)';\n } else {\n // Moving up - rotate 90 degrees (FIXED: was 270)\n slideCursor.style.transform = 'rotate(90deg)';\n }\n }\n }\n }\n \n // Position cursors (adjusted for larger size)\n neutralCursor.style.left = (currentX - 30) + 'px';\n neutralCursor.style.top = (currentY - 30) + 'px';\n slideCursor.style.left = (currentX - 28) + 'px';\n slideCursor.style.top = (currentY - 28) + 'px';\n \n // Show slide cursor when moving\n clearTimeout(moveTimeout);\n isMoving = true;\n neutralCursor.style.opacity = '0';\n slideCursor.style.opacity = '1';\n \n // Switch back to neutral after movement stops\n moveTimeout = setTimeout(() => {\n isMoving = false;\n neutralCursor.style.opacity = '1';\n slideCursor.style.opacity = '0';\n }, 100);\n \n lastX = currentX;\n lastY = currentY;\n }\n\n // Add mouse movement listener\n document.addEventListener('mousemove', onMouseMove);\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#neutral-cursor, #slide-cursor {\n position: fixed;\n z-index: 10000;\n pointer-events: none;\n top: 0;\n left: 0;\n width: 60px;\n height: 60px;\n opacity: 1;\n transition: opacity 0.1s ease;\n will-change: transform;\n transform-origin: center;\n}\n\n#slide-cursor {\n opacity: 0;\n}\n\n#neutral-cursor img, #slide-cursor img {\n width: 100%;\n height: 100%;\n display: block;\n}\n`;\n","deleted","label","kneeslide-cursor",[99],"permalink","https://www.val.town/x/dcm31/kneeSlide/code/main.tsx","extension","actionData","errors"]