{"version":3,"file":"static/chunks/216-085565d63fb237ff.js","mappings":"qKAGO,SAASA,EAAYC,CAY3B,KAZ2B,CAC1BC,UAAAA,CAAS,CACTC,MAAAA,CAAK,CACLC,KAAAA,CAAI,CACJC,YAAAA,CAAW,CACXC,WAAAA,CAAU,CAOX,CAZ2BL,EAa1B,MACE,GAAAM,EAAAC,IAAA,EAACC,IAAIA,CACHC,UAAW,gRAEVC,MAAA,CADCL,EAAa,6CAA+C,aAE9DM,KAAM,sBAAgCD,MAAA,CAAVT,aAE5B,GAAAK,EAAAC,IAAA,EAACK,MAAAA,CAAIH,UAAU,0EACb,GAAAH,EAAAO,GAAA,EAACC,MAAAA,CAAIL,UAAU,2CAA2CM,IAAKb,EAAOc,IAAKb,IAC3E,GAAAG,EAAAO,GAAA,EAACD,MAAAA,CAAIH,UAAU,sNAA6M,mBAI9N,GAAAH,EAAAO,GAAA,EAACI,IAAAA,CAAER,UAAU,yCAAiCL,MAGpD,iEC9BO,IAAMc,EAAwB,CACnCf,KAAM,cACNC,YAAa,sCACbe,KAAO,s4BAkBPjB,MAAO,4BACT,ECtBakB,EAAwB,CACnCjB,KAAM,QACNC,YAAa,iBACbe,KAAO,26BAyBPjB,MAAO,4BACT,EC7BamB,EAAuB,CAClClB,KAAM,OACNC,YAAa,+BACbe,KAAO,q4FAyFPjB,MAAO,2BACT,EC7FaoB,EAA6B,CACxCnB,KAAM,eACNC,YAAa,wBACbe,KAAO,itDAkEPjB,MAAO,0BACT,ECtEaqB,EAAqB,CAChCpB,KAAM,cACNC,YAAa,+BACbF,MAAO,mCACPsB,UAAW,GACXL,KAAO,mzJAmIT,ECxIaM,EAA8B,CACzCtB,KAAM,eACNC,YAAa,oBACbe,KAAO,m/GAoIPjB,MAAO,kCACT,ECxIawB,EAA0B,CACrCvB,KAAM,UACNC,YAAa,iCACbe,KAAO,++FAuEPjB,MAAO,8BACT,ECrEayB,EAAW,CACtB,CAACT,EAAaf,IAAI,CAAC,CAAEe,EACrB,CAACG,EAAYlB,IAAI,CAAC,CAAEkB,EACpB,CAACI,EAAmBtB,IAAI,CAAC,CAAEsB,EAC3B,CAACC,EAAevB,IAAI,CAAC,CAAEuB,EACvB,CAACN,EAAajB,IAAI,CAAC,CAAEiB,EACrB,CAACE,EAAkBnB,IAAI,CAAC,CAAEmB,EAC1B,CAACC,EAAUpB,IAAI,CAAC,CAAEoB,CACpB","sources":["webpack://_N_E/./src/components/ExampleLink/ExampleLink.tsx","webpack://_N_E/./src/content/examples/basic/index.ts","webpack://_N_E/./src/content/examples/clock/index.ts","webpack://_N_E/./src/content/examples/dice/index.ts","webpack://_N_E/./src/content/examples/game-of-life/index.ts","webpack://_N_E/./src/content/examples/tic-tac-toe/index.ts","webpack://_N_E/./src/content/examples/videoplayer/index.ts","webpack://_N_E/./src/content/examples/weather/index.ts","webpack://_N_E/./src/content/examples/index.ts"],"sourcesContent":["import Link from \"next/link\";\nimport * as React from \"react\";\n\nexport function ExampleLink({\n  exampleId,\n  image,\n  name,\n  description,\n  isSelected,\n}: {\n  exampleId: string;\n  image: string;\n  name: string;\n  description: string;\n  isSelected: boolean;\n}) {\n  return (\n    <Link\n      className={`block border-box rounded mt-4 cursor-pointer bg-[radial-gradient(50%_100%_at_75%_75%,_rgb(209_209_209_/_40%)_0%,_rgba(0,_0,_0,_0.24)_150%)] dark:bg-[radial-gradient(50%_100%_at_75%_75%,_rgb(130_130_130_/_40%)_0%,_rgba(0,_0,_0,_0.10)_150%)] xl:h-[225px] overflow-hidden ${\n        isSelected ? \"shadow-[0_0px_0px_2px_rgba(255,255,255,1)]\" : \"shadow-lg\"\n      }`}\n      href={`/examples/?example=${exampleId}`}\n    >\n      <div className=\"relative aspect-[1.60738255] h-[181px] w-full overflow-hidden\">\n        <img className=\"absolute top-1/2 w-full -translate-y-1/2\" src={image} alt={name} />\n        <div className=\"hover absolute bottom-0 left-0 right-0 top-0 flex items-center justify-center bg-black bg-transparent text-2xl font-medium text-white text-opacity-0 hover:bg-[#00000080] hover:text-opacity-100 shadow-xl\">\n          See example\n        </div>\n      </div>\n      <p className=\"mt-3 px-4 text-sm font-medium\">{description}</p>\n    </Link>\n  );\n}\n","import { Example } from \"@/types/example\";\n\nexport const basicExample: Example = {\n  name: \"Basic Scene\",\n  description: \"A basic scene with models and cubes\",\n  code: `<!-- Battle Damaged Sci-fi Helmet - PBR by theblueturtle_\nhttps://sketchfab.com/models/b81008d513954189a063ff901f7abfe4 -->\n<m-model x=\"-2\" collide=\"true\" src=\"https://public.mml.io/damaged-helmet.glb\" z=\"-2\" y=\"1.2\" sx=\"0.5\" sy=\"0.5\" sz=\"0.5\"></m-model>\n\n<m-cube id=\"clickable-cube\" y=\"1\" color=\"red\" collide=\"true\" z=\"-2\"></m-cube>\n\n<m-model x=\"2\" z=\"-2\" id=\"duck\" src=\"https://public.mml.io/duck.glb\" y=\"0.37872010769124587\" collide=\"true\">\n  <m-attr-anim attr=\"ry\" start=\"0\" end=\"360\" duration=\"3000\"></m-attr-anim>\n</m-model>\n\n<m-cube id=\"color-cube\" x=\"4\" y=\"1\" width=\"1\" color=\"green\" collide=\"true\" z=\"-2\" castshadow=\"true\"></m-cube>\n\n<script>\n  const clickableCube = document.getElementById(\"clickable-cube\");\n  clickableCube.addEventListener(\"click\", () => {\n    clickableCube.setAttribute(\"color\", \\`#\\${Math.floor(Math.random() * 16777215).toString(16)}\\`);\n  });\n</script>`,\n  image: \"/images/examples/basic.png\",\n};\n","import { Example } from \"@/types/example\";\n\nexport const clockExample: Example = {\n  name: \"clock\",\n  description: \"A simple clock\",\n  code: `<m-group y=\"4\">\n  <m-cylinder color=\"lightgrey\" radius=\"4\" height=\"0.1\" rx=\"90\"></m-cylinder>\n  <m-group id=\"hour\" rz=\"0\" z=\"0.1\">\n    <m-cube sx=\"0.14\" sy=\"1.2\" sz=\"0.08\" z=\"0.04\" color=\"#000000\" y=\"0.2\"></m-cube>\n  </m-group>\n  <m-group id=\"minute\" rz=\"0\" z=\"0.11\">\n    <m-cube sx=\"0.1\" sy=\"2.4\" sz=\"0.08\" z=\"0.04\" color=\"#000000\" y=\"0.3\"></m-cube>\n  </m-group>\n  <m-group id=\"second\" rz=\"0\" z=\"0.12\">\n    <m-cube sx=\"0.08\" sy=\"3.2\" sz=\"0.08\" z=\"0.04\" color=\"#ff0000\" y=\"0.8\"></m-cube>\n  </m-group>\n</m-group>\n\n<script>\n  function setTime() {\n    const d = new Date();\n    document.getElementById(\"hour\").setAttribute(\"rz\", (d.getHours() / 12) * -360);\n    document.getElementById(\"minute\").setAttribute(\"rz\", (d.getMinutes() / 60) * -360);\n    document.getElementById(\"second\").setAttribute(\"rz\", (d.getSeconds() / 60) * -360);\n  }\n\n  setTime();\n\n  setInterval(setTime, 1000); // update every second\n</script>`,\n  image: \"/images/examples/clock.png\",\n};\n","import { Example } from \"@/types/example\";\n\nexport const diceExample: Example = {\n  name: \"Dice\",\n  description: \"A dice with animated rolling\",\n  code: `<m-model id=\"dice\" src=\"https://public.mml.io/dice.glb\" y=\"1\" collide=\"true\" onclick=\"rollDice()\">\n  <m-attr-anim id=\"rx\" attr=\"rx\" ping-pong=\"false\" easing=\"linear\" start=\"0\" end=\"0\" loop=\"false\" start-time=\"0\" duration=\"1\"></m-attr-anim>\n  <m-attr-anim id=\"ry\" attr=\"ry\" ping-pong=\"false\" easing=\"linear\" start=\"0\" end=\"0\" loop=\"false\" start-time=\"0\" duration=\"1\"></m-attr-anim>\n  <m-attr-anim id=\"rz\" attr=\"rz\" ping-pong=\"false\" easing=\"linear\" start=\"0\" end=\"0\" loop=\"false\" start-time=\"0\" duration=\"1\"></m-attr-anim>\n  <m-attr-anim id=\"y\" attr=\"y\" ping-pong=\"false\" easing=\"linear\" start=\"1\" end=\"1\" loop=\"false\" start-time=\"0\" duration=\"1\"></m-attr-anim>\n</m-model>\n<script>\n  let rolling = false;\n  let rollResult = 1;\n  let rollDuration = 750;\n  let rollHeight = 3.1;\n\n  function radToDeg(radians) {\n    return radians * (180 / Math.PI);\n  }\n\n  function animate(attr, easing, targetRotation, duration) {\n    rolling = true;\n    const mAttrAnim = document.getElementById(attr);\n    const newStart = mAttrAnim.getAttribute(\"end\");\n    mAttrAnim.setAttribute(\"easing\", easing);\n    mAttrAnim.setAttribute(\"start\", newStart);\n    mAttrAnim.setAttribute(\"end\", targetRotation);\n    mAttrAnim.setAttribute(\"loop\", \"false\");\n    mAttrAnim.setAttribute(\"duration\", duration);\n    mAttrAnim.setAttribute(\"start-time\", document.timeline.currentTime);\n    setTimeout(() => {\n      rolling = false;\n    }, duration + 10);\n  }\n\n  function rollDice() {\n    if (rolling) return;\n    const rollMap = {\n      1: {\n        rx: 0,\n        ry: 0,\n        rz: 0\n      },\n      2: {\n        rx: 0,\n        ry: 0,\n        rz: radToDeg(-Math.PI / 2)\n      },\n      3: {\n        rx: radToDeg(-Math.PI / 2),\n        ry: 0,\n        rz: 0\n      },\n      4: {\n        rx: radToDeg(Math.PI / 2),\n        ry: 0,\n        rz: 0\n      },\n      5: {\n        rx: 0,\n        ry: 0,\n        rz: radToDeg(Math.PI / 2)\n      },\n      6: {\n        rx: radToDeg(Math.PI),\n        ry: 0,\n        rz: 0\n      },\n    };\n    const diceElement = document.getElementById(\"dice\");\n\n    let newRoll = Math.floor(Math.random() * 6) + 1;\n    while (newRoll === rollResult) {\n      newRoll = Math.floor(Math.random() * 6) + 1;\n    }\n    rollResult = newRoll;\n\n    const targetRotation = rollMap[rollResult];\n    const startRotation = {\n      rx: parseFloat(diceElement.getAttribute(\"rx\")),\n      ry: parseFloat(diceElement.getAttribute(\"ry\")),\n      rz: parseFloat(diceElement.getAttribute(\"rz\")),\n    };\n\n    animate(\"rx\", \"easeOutCubic\", targetRotation.rx, rollDuration);\n    animate(\"ry\", \"easeOutCubic\", targetRotation.ry, rollDuration);\n    animate(\"rz\", \"easeOutCubic\", targetRotation.rz, rollDuration);\n    animate(\"y\", \"easeOutQuint\", rollHeight, rollDuration * 0.35);\n    setTimeout(() => {\n      animate(\"y\", \"easeOutBounce\", 1, rollDuration * 0.65);\n    }, rollDuration * 0.35);\n  }\n</script>`,\n  image: \"/images/examples/dice.png\",\n};\n","import { Example } from \"@/types/example\";\n\nexport const gameOfLifeExample: Example = {\n  name: \"game-of-life\",\n  description: \"Conway's Game of Life\",\n  code: `<m-group></m-group>\n<script>\n  let world = [];\n  const worldSize = 20,\n    cellSize = 0.5;\n\n  for (let x = 0; x < worldSize; x++) {\n    world[x] = [];\n    for (let y = 0; y < worldSize; y++) {\n      world[x][y] = Math.random() < 0.25 ? 1 : 0;\n      if (world[x][y]) createCube(x, y);\n    }\n  }\n\n  function createCube(x, y) {\n    const cube = document.createElement(\"m-cube\");\n    cube.setAttribute(\"x\", (x - worldSize / 2) * cellSize);\n    cube.setAttribute(\"y\", y * cellSize + 1);\n    cube.setAttribute(\"z\", 0);\n    cube.setAttribute(\"color\", \"skyblue\");\n    cube.setAttribute(\"id\", x + \":\" + y);\n    document.body.appendChild(cube);\n  }\n\n  function update() {\n    const newWorld = [];\n\n    for (let x = 0; x < worldSize; x++) {\n      newWorld[x] = [];\n      for (let y = 0; y < worldSize; y++) {\n        const nn = countNeighbours(x, y);\n        const alive = world[x][y] === 1;\n\n        if (alive && (nn < 2 || nn > 3)) {\n          newWorld[x][y] = 0;\n        } else if (!alive && nn === 3) {\n          newWorld[x][y] = 1;\n        } else {\n          newWorld[x][y] = world[x][y];\n        }\n\n        if (newWorld[x][y]) {\n          if (!alive) createCube(x, y);\n        } else if (alive) document.getElementById(x + \":\" + y).remove();\n      }\n    }\n\n    world = newWorld;\n  }\n\n  function countNeighbours(x, y) {\n    let count = 0;\n\n    for (let dx = -1; dx <= 1; dx++) {\n      for (let dy = -1; dy <= 1; dy++) {\n        if (dx === 0 && dy === 0) continue;\n        const nx = (x + dx + worldSize) % worldSize;\n        const ny = (y + dy + worldSize) % worldSize;\n        count += world[nx][ny];\n      }\n    }\n    return count;\n  }\n\n  window.setInterval(update, 200);\n</script>`,\n  image: \"/images/examples/gol.png\",\n};\n","import { Example } from \"@/types/example\";\n\nexport const ticTacToe: Example = {\n  name: \"Tic Tac Toe\",\n  description: \"A simple game of tic tac toe\",\n  image: \"/images/examples/tic-tac-toe.png\",\n  baseScene: false,\n  code: `<m-group id=\"board\" z=\"-20\" y=\"0\">\n  <m-label id=\"winner\" width=\"22\" y=\"-5\" height=\"5\" content=\"\" font-size=\"200\" alignment=\"center\"></m-label>\n\n  <!--  horizontal lines -->\n  <m-cube id=\"line-horizontal-1\" width=\"22\" z=\"1\" y=\"21.5\" color=\"black\"></m-cube>\n  <m-cube id=\"line-horizontal-2\" width=\"22\" z=\"1\" y=\"14.5\" color=\"black\"></m-cube>\n  <m-cube id=\"line-horizontal-3\" width=\"22\" z=\"1\" y=\"7.5\" color=\"black\"></m-cube>\n  <m-cube id=\"line-horizontal-4\" width=\"22\" z=\"1\" y=\"0.5\" color=\"black\"></m-cube>\n\n  <!--  vertical lines -->\n  <m-cube id=\"line-vertical-1\" height=\"22\" z=\"1\" x=\"-10.5\" y=\"11\" color=\"black\"></m-cube>\n  <m-cube id=\"line-vertical-2\" height=\"22\" z=\"1\" x=\"-3.5\" y=\"11\" color=\"black\"></m-cube>\n  <m-cube id=\"line-vertical-3\" height=\"22\" z=\"1\" x=\"3.5\" y=\"11\" color=\"black\"></m-cube>\n  <m-cube id=\"line-vertical-4\" height=\"22\" z=\"1\" x=\"10.5\" y=\"11\" color=\"black\"></m-cube>\n\n  <!--  interactive cubes -->\n  <!--  first row -->\n  <m-label id=\"cell-1\" width=\"6\" height=\"6\" x=\"-7\" y=\"18\" z=\"1\" font-size=\"450\" color=\"#ffffff\" alignment=\"center\"></m-label>\n  <m-label id=\"cell-2\" width=\"6\" height=\"6\" x=\"0\" y=\"18\" z=\"1\" font-size=\"450\" color=\"#ffffff\" alignment=\"center\"></m-label>\n  <m-label id=\"cell-3\" width=\"6\" height=\"6\" x=\"7\" y=\"18\" z=\"1\" font-size=\"450\" color=\"#ffffff\" alignment=\"center\"></m-label>\n\n  <!--  second row -->\n  <m-label id=\"cell-4\" width=\"6\" height=\"6\" x=\"-7\" y=\"11\" z=\"1\" font-size=\"450\" color=\"#ffffff\" alignment=\"center\"></m-label>\n  <m-label id=\"cell-5\" width=\"6\" height=\"6\" x=\"0\" y=\"11\" z=\"1\" font-size=\"450\" color=\"#ffffff\" alignment=\"center\"></m-label>\n  <m-label id=\"cell-6\" width=\"6\" height=\"6\" x=\"7\" y=\"11\" z=\"1\" font-size=\"450\" color=\"#ffffff\" alignment=\"center\"></m-label>\n\n  <!--  third row -->\n  <m-label id=\"cell-7\" width=\"6\" height=\"6\" x=\"-7\" y=\"4\" z=\"1\" font-size=\"450\" color=\"#ffffff\" alignment=\"center\"></m-label>\n  <m-label id=\"cell-8\" width=\"6\" height=\"6\" x=\"0\" y=\"4\" z=\"1\" font-size=\"450\" color=\"#ffffff\" alignment=\"center\"></m-label>\n  <m-label id=\"cell-9\" width=\"6\" height=\"6\" x=\"7\" y=\"4\" z=\"1\" font-size=\"450\" color=\"#ffffff\" alignment=\"center\"></m-label>\n</m-group>\n\n<script>\n  let isGameOver = false;\n  // Create tic-tac-toe board status\n  let board = [\n    [\"\", \"\", \"\"],\n    [\"\", \"\", \"\"],\n    [\"\", \"\", \"\"],\n  ];\n  \n  const label = document.querySelector(\"#winner\");\n  \n  // Track current player\n  let currentPlayer = \"X\";\n  \n  const setMove = (selectedCell) => {\n    selectedCell.setAttribute(\"content\", currentPlayer);\n  }\n  \n  // Function to update board status\n  function updateBoard(x, y, player) {\n    board[y][x] = player;\n  }\n  \n  // Function to check for a win\n  function checkForWin() {\n    const winConditions = [\n      [[0, 0], [1, 0], [2, 0]], // rows\n      [[0, 1], [1, 1], [2, 1]],\n      [[0, 2], [1, 2], [2, 2]],\n      [[0, 0], [0, 1], [0, 2]], // columns\n      [[1, 0], [1, 1], [1, 2]],\n      [[2, 0], [2, 1], [2, 2]],\n      [[0, 0], [1, 1], [2, 2]], // diagonals\n      [[0, 2], [1, 1], [2, 0]],\n    ];\n  \n    return winConditions.some(condition =>\n      condition.every(([x, y]) => board[y][x] === currentPlayer)\n    );\n  }\n  \n  function resetBoard() {\n    isGameOver = false;\n    board = [\n      [\"\", \"\", \"\"],\n      [\"\", \"\", \"\"],\n      [\"\", \"\", \"\"],\n    ];\n    const boardNode = document.getElementById(\"board\");\n    const labels = boardNode.querySelectorAll(\"m-label\");\n    labels.forEach((child) => {\n        child.setAttribute(\"content\", \"\");\n    });\n  }\n  \n  // Add click event listeners to cubes\n  for (let y = 0; y < 3; y++) {\n    for (let x = 0; x < 3; x++) {\n      const cell = document.getElementById(\\`cell-\\${y * 3 + x + 1}\\`);\n      cell.addEventListener(\"click\", () => {\n        if (isGameOver) return;\n        \n        if (board[y][x] === \"\") {\n          // Update board status\n          updateBoard(x, y, currentPlayer);\n          setMove(cell)\n  \n          // Visualize move\n          cell.textContent = currentPlayer;\n  \n          // Check for win\n          if (checkForWin()) {\n            isGameOver = true;          \n            label.setAttribute(\"content\", \\`\\${currentPlayer} wins!\\nClick to restart!\\`);\n            label.addEventListener(\"click\", () => {\n              resetBoard();\n            });\n            return;\n          }\n          \n          // Check for tie\n          if (board.every(row => row.every(cell => cell !== \"\"))) {\n            isGameOver = true;\n            label.setAttribute(\"content\", \"It's a tie!\\\\nClick to restart!\");\n            label.addEventListener(\"click\", () => {\n              resetBoard();\n            });\n            return;\n          }\n  \n          // Switch players\n          currentPlayer = currentPlayer === \"X\" ? \"O\" : \"X\";\n         \n        }\n      });\n    }\n  }\n</script>\n<m-light type=\"point\" intensity=\"500\" x=\"10\" y=\"10\" z=\"10\"></m-light>`,\n};\n","import { Example } from \"@/types/example\";\n\nexport const videoPlayerExample: Example = {\n  name: \"Video player\",\n  description: \"A 3d video player\",\n  code: `<m-group sx=\"0.4\" sy=\"0.4\" y=\"2\">\n  <m-video\n    z=\"3\"\n    y=\"7\"\n    width=\"25\"\n    rx=\"0\"\n    ry=\"0\"\n    start-time=\"0\"\n    loop=\"true\"\n    src=\"https://public.mml.io/charge.mp4\"\n  >\n    <m-label\n      onclick=\"restart(event.currentTarget.parentNode)\"\n      content=\"restart\"\n      x=\"10\"\n      y=\"-6\"\n      font-size=\"100\"\n      width=\"4.5\"\n      alignment=\"center\"\n      height=\"1.5\"\n      color=\"#cccccc\"\n    ></m-label>\n    <m-label\n      onclick=\"pause(event.currentTarget.parentNode)\"\n      content=\"pause\"\n      x=\"-10\"\n      y=\"-6\"\n      font-size=\"100\"\n      width=\"4.5\"\n      alignment=\"center\"\n      height=\"1.5\"\n      color=\"#cccccc\"\n    ></m-label>\n    <m-label\n      onclick=\"unpause(event.currentTarget.parentNode)\"\n      content=\"unpause\"\n      x=\"-5\"\n      y=\"-6\"\n      font-size=\"100\"\n      width=\"4.5\"\n      alignment=\"center\"\n      height=\"1.5\"\n      color=\"#cccccc\"\n    ></m-label>\n    <m-label\n      onclick=\"resume(event.currentTarget.parentNode)\"\n      content=\"resume\"\n      x=\"5\"\n      y=\"-6\"\n      font-size=\"100\"\n      width=\"4.5\"\n      alignment=\"center\"\n      height=\"1.5\"\n      color=\"#cccccc\"\n    ></m-label>\n    <m-label\n      onclick=\"toggleEnabled(event.currentTarget.parentNode)\"\n      content=\"enable\"\n      x=\"0\"\n      y=\"-6\"\n      font-size=\"100\"\n      width=\"4.5\"\n      alignment=\"center\"\n      height=\"1.5\"\n      color=\"#cccccc\"\n    ></m-label>\n    <m-label\n      class=\"attributes-label\"\n      content=\"attrs:\"\n      x=\"0\"\n      y=\"6.5\"\n      padding=\"20\"\n      font-size=\"50\"\n      width=\"25\"\n      alignment=\"center\"\n      height=\"2\"\n      color=\"green\"\n      font-color=\"white\"\n    ></m-label>\n  </m-video>\n</m-group>\n<script>\n  function updateAttributesLabel(videoTag) {\n    const attributes = [];\n    for (const attr of videoTag.getAttributeNames()) {\n      const val = videoTag.getAttribute(attr);\n      attributes.push(\\`\\${attr}=\"\\${val}\"\\`);\n    }\n    const attributesLabel = videoTag.querySelector(\".attributes-label\");\n    if (attributesLabel) {\n      attributesLabel.setAttribute(\"content\", \\`<m-video \\${attributes.join(\" \")}></m-video>\\`);\n    }\n  }\n\n  function restart(videoTag) {\n    videoTag.setAttribute(\"pause-time\", document.timeline.currentTime);\n    videoTag.setAttribute(\"start-time\", document.timeline.currentTime);\n    videoTag.removeAttribute(\"pause-time\");\n    updateAttributesLabel(videoTag);\n  }\n\n  function toggleEnabled(videoTag) {\n    const enabled = videoTag.getAttribute(\"enabled\") !== \"false\";\n    videoTag.setAttribute(\"enabled\", (!enabled).toString());\n    updateAttributesLabel(videoTag);\n  }\n\n  function pause(videoTag) {\n    videoTag.setAttribute(\"pause-time\", document.timeline.currentTime);\n    updateAttributesLabel(videoTag);\n  }\n\n  function unpause(videoTag) {\n    videoTag.removeAttribute(\"pause-time\");\n    updateAttributesLabel(videoTag);\n  }\n\n  function resume(videoTag) {\n    if (!videoTag.hasAttribute(\"pause-time\")) return;\n    const startTime = parseFloat(videoTag.getAttribute(\"start-time\")) || 0;\n    const pauseTime = parseFloat(videoTag.getAttribute(\"pause-time\")) || 0;\n    const playedDuration = pauseTime - startTime;\n    const newStartTime = document.timeline.currentTime - playedDuration;\n    videoTag.removeAttribute(\"pause-time\");\n    videoTag.setAttribute(\"start-time\", newStartTime);\n    updateAttributesLabel(videoTag);\n  }\n\n  for (const video of document.querySelectorAll(\"m-video\")) {\n    updateAttributesLabel(video);\n  }\n</script>`,\n  image: \"/images/examples/videoplayer.png\",\n};\n","import { Example } from \"@/types/example\";\n\nexport const weatherExample: Example = {\n  name: \"Weather\",\n  description: \"Integration with a weather API\",\n  code: `<m-label id=\"latitude\" content=\"latitude\" y=\"4.5\" font-size=\"50\" width=\"5.5\" alignment=\"center\" height=\"1\" color=\"#dddddd\"></m-label>\n<m-label id=\"longitude\" content=\"longitude\" y=\"3.5\" font-size=\"50\" width=\"5.5\" alignment=\"center\" height=\"1\" color=\"#dddddd\"></m-label>\n<m-label id=\"windspeed\" content=\"wind speed\" x=\"0\" y=\"2.5\" font-size=\"60\" width=\"11\" alignment=\"center\" height=\"1\" color=\"#dddddd\"></m-label>\n<m-label id=\"temperature\" content=\"temperature\" x=\"0\" y=\"1.5\" font-size=\"60\" width=\"11\" alignment=\"center\" height=\"1\" color=\"#dddddd\"></m-label>\n<m-label id=\"weather\" content=\"weather\" x=\"0\" y=\"0.5\" font-size=\"60\" width=\"11\" alignment=\"center\" height=\"1\" color=\"#ddddff\"></m-label>\n\n<script>\n  const latLabel = document.getElementById(\"latitude\");\n  const longLabel = document.getElementById(\"longitude\");\n  const windSpeedLabel = document.getElementById(\"windspeed\");\n  const temperatureLabel = document.getElementById(\"temperature\");\n  const weatherLabel = document.getElementById(\"weather\");\n\n  const weatherCode = {\n    0: \"Clear sky\",\n    1: \"Mainly clear\",\n    2: \"Partly cloudy\",\n    3: \"Overcast\",\n    45: \"Fog\",\n    48: \"Depositing rime fog\",\n    51: \"Light drizzle\",\n    53: \"Moderate drizzle\",\n    55: \"Dense drizzle\",\n    56: \"Light freezing drizzle\",\n    57: \"Dense freezing drizzle\",\n    61: \"Light rain\",\n    63: \"Moderate rain\",\n    65: \"Heavy rain\",\n    66: \"Light freezing rain\",\n    67: \"Heavy freezing rain\",\n    71: \"Light snow fall\",\n    73: \"Moderate snow fall\",\n    75: \"Heavy snow fall\",\n    77: \"Snow grains\",\n    80: \"Light rain showers\",\n    81: \"Moderate rain showers\",\n    82: \"Violent rain showers\",\n    85: \"Light snow showers\",\n    86: \"Heavy snow showers\",\n    95: \"Thunderstorm\",\n    96: \"Thunderstorm\",\n    97: \"Thunderstorm\",\n    98: \"Thunderstorm\",\n    99: \"Thunderstorm\",\n  };\n\n  async function fetchAPIData() {\n    const latitude = 51.5;\n    const longitude = 0.11;\n    const res = await fetch(\n      \\`https://api.open-meteo.com/v1/forecast?latitude=\\${latitude}&longitude=\\${longitude}&current_weather=true&hourly=temperature_2m,relativehumidity_2m,windspeed_10m\\`,\n    );\n    const json = await res.json();\n    latLabel.setAttribute(\"content\", \\`Latitude: \\${latitude}°N\\`);\n    longLabel.setAttribute(\"content\", \\`Longitude: \\${longitude}°W\\`);\n    const floatTemp = parseFloat(json[\"current_weather\"].temperature);\n    const color = floatTemp > 15 ? (floatTemp > 25 ? \"#ffcccc\" : \"#ccffcc\") : \"#ccccff\";\n    const temperature = \\`\\${floatTemp}°C\\`;\n    temperatureLabel.setAttribute(\"content\", \\`Temp: \\${temperature}\\`);\n    temperatureLabel.setAttribute(\"color\", color);\n    const windSpeed = \\`\\${json[\"current_weather\"].windspeed} km/h\\`;\n    windSpeedLabel.setAttribute(\"content\", \\`Wind: \\${windSpeed}\\`);\n    const weather = parseInt(json[\"current_weather\"].weathercode);\n    weatherLabel.setAttribute(\"content\", weatherCode[weather]);\n  }\n  fetchAPIData();\n\n  setInterval(() => {\n    fetchAPIData();\n  }, 5 * 60 * 1000);\n</script>`,\n  image: \"/images/examples/weather.png\",\n};\n","import { basicExample } from \"@/src/content/examples/basic\";\nimport { clockExample } from \"@/src/content/examples/clock\";\nimport { diceExample } from \"@/src/content/examples/dice\";\nimport { gameOfLifeExample } from \"@/src/content/examples/game-of-life\";\nimport { ticTacToe } from \"@/src/content/examples/tic-tac-toe\";\nimport { videoPlayerExample } from \"@/src/content/examples/videoplayer\";\nimport { weatherExample } from \"@/src/content/examples/weather\";\n\nexport const examples = {\n  [basicExample.name]: basicExample,\n  [diceExample.name]: diceExample,\n  [videoPlayerExample.name]: videoPlayerExample,\n  [weatherExample.name]: weatherExample,\n  [clockExample.name]: clockExample,\n  [gameOfLifeExample.name]: gameOfLifeExample,\n  [ticTacToe.name]: ticTacToe,\n};\n"],"names":["ExampleLink","param","exampleId","image","name","description","isSelected","react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__","jsxs","Link","className","concat","href","div","jsx","img","src","alt","p","basicExample","code","clockExample","diceExample","gameOfLifeExample","ticTacToe","baseScene","videoPlayerExample","weatherExample","examples"],"sourceRoot":""}