\n// - Calls spline.setVariable('camera-states', ) on section change\n// - On mobile (<=480px): disables Spline and section scrolling\n\n// import { Application } from \"https://esm.sh/@splinetool/runtime\";\nimport { Application } from \"@splinetool/runtime\";\nimport { gsap } from \"gsap\";\nimport { Observer } from \"gsap/Observer\";\nimport { ScrollToPlugin } from \"gsap/ScrollToPlugin\";\n\nwindow.devicePixelRatio = 1;\n\ngsap.registerPlugin(Observer, ScrollToPlugin);\n\n// ---- Configuration ----\nconst SCENE_URL =\n \"https://prod.spline.design/eQeab11kGDLxZPdj/scene.splinecode\";\nconst MOBILE_MAX_WIDTH = 480; // <= 480: no Spline, no section scrolling\n\n// ---- Spline lifecycle ----\nconst canvas = document.getElementById(\"spline-canvas\");\nlet spline = null;\nlet isSplineReady = false;\n\nconst removePreloader = () => {\n const preloaderBtn = document.querySelector(\"[data-preload]\");\n if (preloaderBtn) preloaderBtn.click();\n};\n\nconst adjustCanvasSize = () => {\n if (!canvas) return;\n const dpi = window.devicePixelRatio || 1;\n canvas.width = window.innerWidth * dpi;\n canvas.height = window.innerHeight * dpi;\n};\n\nconst initSpline = () => {\n if (!canvas || spline) return;\n adjustCanvasSize();\n spline = new Application(canvas);\n isSplineReady = false;\n\n spline\n .load(SCENE_URL)\n .then(() => {\n isSplineReady = true;\n removePreloader();\n })\n .catch((err) => {\n console.error(\"Error loading Spline scene:\", err);\n });\n};\n\nconst destroySpline = () => {\n if (!spline) return;\n try {\n spline.dispose();\n } catch (_) {}\n spline = null;\n isSplineReady = false;\n const gl = canvas && canvas.getContext && canvas.getContext(\"webgl\");\n if (gl) {\n gl.clear(gl.COLOR_BUFFER_BIT);\n }\n};\n\n// ---- Section scrolling + camera-state sync ----\nlet currentIndex = 0;\nlet animating = false;\nlet observerInstance = null;\n\nconst getScrollSpeed = () => {\n const el = document.querySelector(\"[data-scroll-speed]\");\n const val = el ? el.getAttribute(\"data-scroll-speed\") : \"1\";\n const num = parseFloat(val || \"1\");\n return Number.isFinite(num) ? num : 1;\n};\n\nconst sections = Array.from(document.querySelectorAll(\"section\"));\n\nconst applyCameraStateForSection = (section) => {\n if (!section || !isSplineReady || !spline) return;\n const attr = section.getAttribute(\"camera-state\");\n if (!attr) return;\n const value = parseInt(attr, 10);\n if (!Number.isFinite(value)) return;\n try {\n spline.setVariable(\"camera-states\", value);\n } catch (err) {\n console.warn(\"Failed to set Spline variable:\", err);\n }\n};\n\nconst gotoSection = (index) => {\n if (index < 0 || index >= sections.length) return;\n animating = true;\n\n applyCameraStateForSection(sections[index]);\n\n gsap.to(window, {\n scrollTo: { y: sections[index], autoKill: false },\n duration: getScrollSpeed(),\n ease: \"power1.inOut\",\n onComplete: () => {\n animating = false;\n },\n });\n\n currentIndex = index;\n};\n\nconst enableSectionScrolling = () => {\n if (!sections.length || observerInstance) return;\n observerInstance = Observer.create({\n type: \"wheel\", // wheel only; no touch/pointer\n wheelSpeed: -1,\n onDown: () => {\n if (!animating && currentIndex > 0) gotoSection(currentIndex - 1);\n },\n onUp: () => {\n if (!animating && currentIndex < sections.length - 1) {\n gotoSection(currentIndex + 1);\n }\n },\n tolerance: 10,\n preventDefault: true,\n });\n gotoSection(0);\n};\n\nconst disableSectionScrolling = () => {\n if (observerInstance) {\n try {\n observerInstance.kill();\n } catch (_) {}\n observerInstance = null;\n }\n};\n\n// ---- Responsive orchestration ----\nconst applyModeForViewport = () => {\n const isDesktop = window.innerWidth > MOBILE_MAX_WIDTH;\n if (isDesktop) {\n initSpline();\n enableSectionScrolling();\n } else {\n disableSectionScrolling();\n destroySpline();\n removePreloader();\n }\n};\n\nwindow.addEventListener(\"resize\", () => {\n adjustCanvasSize();\n applyModeForViewport();\n});\n\n// Kickoff\napplyModeForViewport();",[],[180],{"_102":188,"_95":189,"_152":190,"_154":-5,"_155":137,"_156":157,"_158":159,"_104":191,"_99":192,"_161":162,"_163":193,"_165":22,"_166":-5,"_167":194,"_98":195},"d5809afc-9463-11f0-aada-0224a6c84d84","main.tsx","98dadb22-532b-11f0-b1b1-f69ea79377d9",["D",1758181695299],6,"// boe changes\n// imported in the head code\n\n// import { Application } from \"https://esm.sh/@splinetool/runtime\";\nimport { Application } from \"@splinetool/runtime\";\n\nwindow.devicePixelRatio = 1;\n\nconst canvas = document.getElementById(\"spline-canvas\");\nlet spline = null;\nlet isInitialized = false;\n\nconst removePreloader = () => {\n const preloaderBtn = document.querySelector(\"[data-preload]\");\n if (preloaderBtn) preloaderBtn.click();\n};\n\nconst initSpline = () => {\n if (isInitialized) return;\n\n const adjustCanvasSize = () => {\n const dpi = window.devicePixelRatio || 1;\n canvas.width = window.innerWidth * dpi;\n canvas.height = window.innerHeight * dpi;\n };\n adjustCanvasSize();\n\n spline = new Application(canvas);\n\n const mapMouseToSpline = (event, rect) => {\n const mouseX = ((event.clientX - rect.left) / rect.width) * 2 - 1;\n const mouseY = -((event.clientY - rect.top) / rect.height) * 2 + 1;\n return { mouseX, mouseY };\n };\n\n const getAndRoundCSSVariable = (variableName) => {\n const rootStyles = getComputedStyle(document.documentElement);\n return parseFloat(rootStyles.getPropertyValue(variableName).trim());\n };\n\n spline\n .load(\"https://prod.spline.design/Bkeroiz-Iax5tfWn/scene.splinecode\")\n .then(() => {\n removePreloader();\n\n<<<<<<< main\n /*\n //Lookat Events\n=======\n /* \n //Lookat Events\n>>>>>>> main\n if (window.innerWidth <= 991) return;\n<<<<<<< main\n\n=======\n \n>>>>>>> main\n const targetObject = spline.findObjectByName(\"ObjectTo LookAt_Head\");\n const bodyTargetObject = spline.findObjectByName(\"ObjectTo LookAt_Body\");\n\n if (!targetObject || !bodyTargetObject) {\n console.error(\"Target objects not found.\");\n return;\n }\n\n<<<<<<< main\n\n=======\n \n>>>>>>> main\n setInterval(() => {\n spline.emitEvent(\"lookAt\", \"01_AdF_RobotHead\");\n spline.emitEvent(\"lookAt\", \"Top part\");\n }, 1000);\n */\n\n const cam_base = document.querySelector(\"[data-camera='base']\");\n const cam_face = document.querySelector(\"[data-camera='face']\");\n const cam_tail = document.querySelector(\"[data-camera='tail']\");\n const cam_top = document.querySelector(\"[data-camera='top']\");\n const cam_squids = document.querySelector(\"[data-camera='squids']\");\n const cam_epic = document.querySelector(\"[data-camera='epic']\");\n\n const syncCameraState = () => {\n const cssCameraState = getAndRoundCSSVariable(\"--camera-state\");\n\n if (cssCameraState >= 1 && cssCameraState <= 1.1) {\n spline.setVariable(\"camera-states\", 1);\n cam_base?.click();\n } else if (cssCameraState >= 1.9 && cssCameraState <= 2.1) {\n spline.setVariable(\"camera-states\", 2);\n cam_face?.click();\n } else if (cssCameraState >= 2.9 && cssCameraState <= 3.1) {\n spline.setVariable(\"camera-states\", 3);\n cam_tail?.click();\n } else if (cssCameraState >= 3.9 && cssCameraState <= 4.1) {\n spline.setVariable(\"camera-states\", 4);\n cam_top?.click();\n } else if (cssCameraState >= 4.9 && cssCameraState <= 5.1) {\n spline.setVariable(\"camera-states\", 5);\n cam_squids?.click();\n } else if (cssCameraState >= 5.9 && cssCameraState <= 6.1) {\n spline.setVariable(\"camera-states\", 6);\n cam_epic?.click();\n }\n };\n setInterval(syncCameraState, 100);\n\n /*\n document.addEventListener(\"mousemove\", (event) => {\n const rect = canvas.getBoundingClientRect();\n const { mouseX, mouseY } = mapMouseToSpline(event, rect);\n\n targetObject.position.x = mouseX * 500;\n targetObject.position.y = mouseY * 300 + 100;\n\n bodyTargetObject.position.x = mouseX * 300;\n bodyTargetObject.position.y = mouseY * 100 + 100;\n });\n<<<<<<< main\n */\n=======\n */\n \n>>>>>>> main\n })\n .catch((err) => {\n console.error(\"Error loading Spline scene:\", err);\n });\n\n isInitialized = true;\n};\n\nconst destroySpline = () => {\n if (!isInitialized || !spline) return;\n\n spline.dispose();\n spline = null;\n isInitialized = false;\n canvas.getContext(\"webgl\")?.clear(\n canvas.getContext(\"webgl\").COLOR_BUFFER_BIT,\n );\n};\n\nconst handleResize = () => {\n if (window.innerWidth > 991) {\n initSpline();\n } else {\n destroySpline();\n removePreloader();\n }\n};\n\nwindow.addEventListener(\"resize\", handleResize);\nhandleResize();",[],[189],{"_102":197,"_95":198,"_152":199,"_154":-5,"_155":137,"_156":200,"_158":159,"_104":201,"_99":117,"_161":162,"_163":202,"_165":22,"_166":-5,"_167":203,"_98":204},"dea61abc-9463-11f0-971b-0224a6c84d84","services.tsx","d5809836-9463-11f0-aada-0224a6c84d84",8,["D",1758181710649],"/* Open in Val Town: https://www.val.town/x/saCD/datenwal/code/main.tsx */\n// boe changes\n// imported in the head code\n\n// import { Application } from \"https://esm.sh/@splinetool/runtime\";\nimport { Application } from \"@splinetool/runtime\";\n\nwindow.devicePixelRatio = 1;\n\nconst canvas = document.getElementById(\"spline-canvas\");\nlet spline = null;\nlet isInitialized = false;\n\nconst removePreloader = () => {\n const preloaderBtn = document.querySelector(\"[data-preload]\");\n if (preloaderBtn) preloaderBtn.click();\n};\n\nconst initSpline = () => {\n if (isInitialized) return;\n\n const adjustCanvasSize = () => {\n const dpi = window.devicePixelRatio || 1;\n canvas.width = window.innerWidth * dpi;\n canvas.height = window.innerHeight * dpi;\n };\n adjustCanvasSize();\n\n spline = new Application(canvas);\n\n const mapMouseToSpline = (event, rect) => {\n const mouseX = ((event.clientX - rect.left) / rect.width) * 2 - 1;\n const mouseY = -((event.clientY - rect.top) / rect.height) * 2 + 1;\n return { mouseX, mouseY };\n };\n\n const getAndRoundCSSVariable = (variableName) => {\n const rootStyles = getComputedStyle(document.documentElement);\n return parseFloat(rootStyles.getPropertyValue(variableName).trim());\n };\n\n spline\n .load(\"https://prod.spline.design/i3Ie3BrAhVl2zvY6/scene.splinecode\")\n .then(() => {\n removePreloader();\n\n const cam_base = document.querySelector(\"[data-camera='base']\");\n const cam_face = document.querySelector(\"[data-camera='face']\");\n\n const syncCameraState = () => {\n const cssCameraState = getAndRoundCSSVariable(\"--camera-state\");\n console.log(\"cameraState ->\", cssCameraState);\n\n if (cssCameraState >= 1 && cssCameraState <= 1.1) {\n spline.setVariable(\"camera-states\", 1);\n cam_base?.click();\n } else if (cssCameraState >= 1.9 && cssCameraState <= 2.1) {\n spline.setVariable(\"camera-states\", 2);\n cam_face?.click();\n }\n };\n setInterval(syncCameraState, 100);\n })\n .catch((err) => {\n console.error(\"Error loading Spline scene:\", err);\n });\n\n isInitialized = true;\n};\n\nconst destroySpline = () => {\n if (!isInitialized || !spline) return;\n\n spline.dispose();\n spline = null;\n isInitialized = false;\n canvas.getContext(\"webgl\")?.clear(\n canvas.getContext(\"webgl\").COLOR_BUFFER_BIT,\n );\n};\n\nconst handleResize = () => {\n if (window.innerWidth > 991) {\n initSpline();\n } else {\n destroySpline();\n removePreloader();\n }\n};\n\nwindow.addEventListener(\"resize\", handleResize);\nhandleResize();",[],[198],"files",[149,170,178,187,196],"counts",{"_209":32,"_210":117,"_211":117,"_212":32},"pulls","branches","forks","envVars","contents",[215,218,221,224,227],{"_102":150,"_95":151,"_152":153,"_154":-5,"_155":137,"_156":157,"_158":159,"_104":216,"_99":32,"_161":162,"_163":164,"_165":22,"_166":-5,"_98":217},["D",1758181695299],[151],{"_102":171,"_95":172,"_152":173,"_154":-5,"_155":137,"_156":157,"_158":159,"_104":219,"_99":32,"_161":162,"_163":175,"_165":22,"_166":-5,"_98":220},["D",1758181695299],[172],{"_102":179,"_95":180,"_152":181,"_154":-5,"_155":137,"_156":136,"_158":159,"_104":222,"_99":183,"_161":162,"_163":184,"_165":22,"_166":-5,"_98":223},["D",1758185513196],[180],{"_102":188,"_95":189,"_152":190,"_154":-5,"_155":137,"_156":157,"_158":159,"_104":225,"_99":192,"_161":162,"_163":193,"_165":22,"_166":-5,"_98":226},["D",1758181695299],[189],{"_102":197,"_95":198,"_152":199,"_154":-5,"_155":137,"_156":200,"_158":159,"_104":228,"_99":117,"_161":162,"_163":202,"_165":22,"_166":-5,"_98":229},["D",1758181710649],[198],"file","upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name._index",{"_93":94,"_95":96,"_97":-7,"_99":-7,"_100":239,"_213":244,"_255":-7,"_256":-5,"_257":-5,"_205":258,"_274":275},{"_102":103,"_95":96,"_104":240,"_106":-5,"_107":22,"_108":109,"_110":-5,"_111":-5,"_14":112,"_113":-5,"_114":22,"_115":-5,"_116":117,"_16":118,"_119":120,"_121":120,"_122":123,"_124":123,"_125":123,"_126":120,"_127":120,"_23":241,"_131":242,"_134":243,"_146":22},["D",1751010716147],{"_93":94,"_129":130},{"_93":94,"_133":130},{"_99":136,"_95":43,"_102":137,"_138":103,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":96,"_145":94},[245,247,249,251,253],{"_102":150,"_95":151,"_152":153,"_154":-5,"_155":137,"_156":157,"_158":159,"_104":216,"_99":32,"_161":162,"_163":164,"_165":22,"_166":-5,"_98":246},[151],{"_102":171,"_95":172,"_152":173,"_154":-5,"_155":137,"_156":157,"_158":159,"_104":219,"_99":32,"_161":162,"_163":175,"_165":22,"_166":-5,"_98":248},[172],{"_102":179,"_95":180,"_152":181,"_154":-5,"_155":137,"_156":136,"_158":159,"_104":222,"_99":183,"_161":162,"_163":184,"_165":22,"_166":-5,"_98":250},[180],{"_102":188,"_95":189,"_152":190,"_154":-5,"_155":137,"_156":157,"_158":159,"_104":225,"_99":192,"_161":162,"_163":193,"_165":22,"_166":-5,"_98":252},[189],{"_102":197,"_95":198,"_152":199,"_154":-5,"_155":137,"_156":200,"_158":159,"_104":228,"_99":117,"_161":162,"_163":202,"_165":22,"_166":-5,"_98":254},[198],"readme","upstream","pull",[259,262,265,268,271],{"_102":150,"_95":151,"_152":153,"_154":-5,"_155":137,"_156":157,"_158":159,"_104":160,"_99":32,"_161":162,"_163":164,"_165":22,"_166":-5,"_167":260,"_98":261},[],[151],{"_102":171,"_95":172,"_152":173,"_154":-5,"_155":137,"_156":157,"_158":159,"_104":174,"_99":32,"_161":162,"_163":175,"_165":22,"_166":-5,"_167":263,"_98":264},[],[172],{"_102":179,"_95":180,"_152":181,"_154":-5,"_155":137,"_156":136,"_158":159,"_104":182,"_99":183,"_161":162,"_163":184,"_165":22,"_166":-5,"_167":266,"_98":267},[],[180],{"_102":188,"_95":189,"_152":190,"_154":-5,"_155":137,"_156":157,"_158":159,"_104":191,"_99":192,"_161":162,"_163":193,"_165":22,"_166":-5,"_167":269,"_98":270},[],[189],{"_102":197,"_95":198,"_152":199,"_154":-5,"_155":137,"_156":200,"_158":159,"_104":201,"_99":117,"_161":162,"_163":202,"_165":22,"_166":-5,"_167":272,"_98":273},[],[198],"previews",[],"actionData","errors"]