{"id":201,"date":"2026-10-08T22:36:11","date_gmt":"2026-10-08T22:36:11","guid":{"rendered":"https:\/\/hicsuntdracones.nl\/?page_id=201"},"modified":"2026-10-09T08:49:47","modified_gmt":"2026-10-09T08:49:47","slug":"roll-initiative","status":"publish","type":"page","link":"https:\/\/hicsuntdracones.nl\/index.php\/roll-initiative\/","title":{"rendered":"Home &#8211; Copy"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"201\" class=\"elementor elementor-201\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8fc5316 e-con e-atomic-element e-flexbox-base e-default-div e-8fc5316-52a327f \" data-id=\"8fc5316\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"8fc5316\">\n    <div class=\"e-background-video e-con e-atomic-element e-background-video-base e-background-video--playing e-default-div e-b69285e-609484f \"\n\tdata-id=\"b69285e\"\n\tdata-element_type=\"e-background-video\"\n\tdata-e-type=\"e-background-video\"\n\tdata-interaction-id=\"b69285e\"\n\tdata-interactions=\"null\"\n\tx-data=\"eBackgroundVideob69285e\"\n\tx-bind=\"rootState\"\n\tdata-e-settings=\"&#x7B;&quot;classes&quot;&#x3A;&#x5B;&quot;e-b69285e-609484f&quot;&#x5D;,&quot;tag&quot;&#x3A;&quot;div&quot;,&quot;source&quot;&#x3A;&#x7B;&quot;id&quot;&#x3A;98,&quot;url&quot;&#x3A;&quot;https&#x3A;&#x5C;&#x2F;&#x5C;&#x2F;hicsuntdracones.nl&#x5C;&#x2F;wp-content&#x5C;&#x2F;uploads&#x5C;&#x2F;2026&#x5C;&#x2F;10&#x5C;&#x2F;Seedance-2_5-Preserve-the-original-illustration-exactly_Static-camera_-No-zoom_-No-pan_-No-reframi.mov&quot;&#x7D;,&quot;start_time&quot;&#x3A;null,&quot;end_time&quot;&#x3A;null,&quot;autoplay&quot;&#x3A;true,&quot;mute&quot;&#x3A;true,&quot;loop&quot;&#x3A;true,&quot;show_controls&quot;&#x3A;false,&quot;state&quot;&#x3A;&quot;playing&quot;,&quot;attributes&quot;&#x3A;null,&quot;_cssid&quot;&#x3A;null,&quot;display-conditions&quot;&#x3A;null&#x7D;\"\n\t\t\t>\n\t\t\t<video class=\"e-background-video__media\"\n\t\t\taria-hidden=\"true\"\n\t\t\tautoplay\t\t\tmuted\t\t\tloop\t\t\tplaysinline\n\t\t\tpreload=\"auto\">\n\t\t\t<source src=\"https:\/\/hicsuntdracones.nl\/wp-content\/uploads\/2026\/10\/Seedance-2_5-Preserve-the-original-illustration-exactly_Static-camera_-No-zoom_-No-pan_-No-reframi.mov#t=0\">\n\t\t<\/video>\n\t\t<div class=\"e-background-video__content e-con e-atomic-element e-background-video-content-base e-default-div \"\n\tdata-id=\"52b491c\"\n\tdata-element_type=\"e-background-video-content\"\n\tdata-e-type=\"e-background-video-content\"\n\tdata-interaction-id=\"52b491c\"\n\tdata-interactions=\"null\"\n\t\t><div class=\"elementor-element elementor-element-9bd280e e-con e-atomic-element e-div-block-base e-default-div e-9bd280e-8db5b66 \" data-id=\"9bd280e\" data-element_type=\"e-div-block\" data-e-type=\"e-div-block\" data-interaction-id=\"9bd280e\">\n    \t\t<div class=\"elementor-element elementor-element-c060d1b elementor-widget elementor-widget-image\" data-id=\"c060d1b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/hicsuntdracones.nl\/\">\n\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"768\" height=\"576\" src=\"https:\/\/hicsuntdracones.nl\/wp-content\/uploads\/2026\/10\/Groen-Gouden-Drakenembleem-met-Kompas-768x576.png\" class=\"attachment-medium_large size-medium_large wp-image-19\" alt=\"\" srcset=\"https:\/\/hicsuntdracones.nl\/wp-content\/uploads\/2026\/10\/Groen-Gouden-Drakenembleem-met-Kompas-768x576.png 768w, https:\/\/hicsuntdracones.nl\/wp-content\/uploads\/2026\/10\/Groen-Gouden-Drakenembleem-met-Kompas-300x225.png 300w, https:\/\/hicsuntdracones.nl\/wp-content\/uploads\/2026\/10\/Groen-Gouden-Drakenembleem-met-Kompas-1024x768.png 1024w, https:\/\/hicsuntdracones.nl\/wp-content\/uploads\/2026\/10\/Groen-Gouden-Drakenembleem-met-Kompas.png 1448w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<h2 data-interaction-id=\"05fe1f2\" class=\"e-05fe1f2-c532d9e e-heading-base e-default-h2\">Roll for Initiative<\/h2>\n\t\t\t\t<div class=\"elementor-element elementor-element-78f64a0 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"78f64a0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<p class=\"e-37de03b-0d9b302 e-paragraph-base e-default-p\" data-interaction-id=\"37de03b\">Veel van wat we doen, gaat op de automatische piloot. We kiezen de bekende route, geven het verwachte antwoord of passen ons ongemerkt aan aan hoe iets \u2018hoort\u2019.<br><br><em>Roll for Initiative<\/em> gebruikt toeval om daar heel even tussen te komen. De twintig uitkomsten zijn kleine manieren om iets anders te doen: een grens trekken, een vraag stellen, plezier geen rechtvaardiging laten nodig hebben, een regel niet meteen als vanzelfsprekend aannemen. <br>Twintig vormen van klein verzet.&nbsp;<\/p>\n\t\t\t\t<div class=\"elementor-element elementor-element-422d405 elementor-widget elementor-widget-html\" data-id=\"422d405\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"rtr-wrap\" id=\"rtrWidget\">\r\n\r\n  <div class=\"rtr-stage\" id=\"rtrStage\">\r\n\r\n    <div\r\n      class=\"rtr-canvas-holder\"\r\n      id=\"rtrCanvasHolder\"\r\n    ><\/div>\r\n\r\n    <div\r\n      class=\"rtr-final-number\"\r\n      id=\"rtrFinalNumber\"\r\n    ><\/div>\r\n\r\n  <\/div>\r\n\r\n  <div\r\n    id=\"rtrRollResult\"\r\n    class=\"rtr-result\"\r\n    aria-live=\"polite\"\r\n  ><\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<style>\r\n\r\n\/* ==========================================\r\n   BASIS\r\n========================================== *\/\r\n\r\n#rtrWidget {\r\n  width: 100%;\r\n  max-width: 680px;\r\n\r\n  margin: 0 auto;\r\n  padding: 10px 20px;\r\n\r\n  text-align: center;\r\n  box-sizing: border-box;\r\n\r\n  background: transparent !important;\r\n}\r\n\r\n\r\n\/* ==========================================\r\n   STAGE\r\n========================================== *\/\r\n\r\n#rtrWidget .rtr-stage {\r\n  position: relative;\r\n\r\n  width: min(330px, 76vw);\r\n  aspect-ratio: 1 \/ 1.08;\r\n\r\n  margin: 0 auto;\r\n\r\n  overflow: visible;\r\n\r\n  background: transparent !important;\r\n}\r\n\r\n\r\n#rtrWidget .rtr-canvas-holder {\r\n  position: absolute;\r\n  inset: 0;\r\n\r\n  background: transparent !important;\r\n}\r\n\r\n\r\n#rtrWidget .rtr-canvas-holder canvas {\r\n  display: block;\r\n\r\n  width: 100% !important;\r\n  height: 100% !important;\r\n\r\n  background: transparent !important;\r\n\r\n  cursor: pointer;\r\n  outline: none;\r\n}\r\n\r\n\r\n#rtrWidget .rtr-canvas-holder canvas:focus-visible {\r\n  outline: 1px solid #A98448;\r\n  outline-offset: 5px;\r\n}\r\n\r\n\r\n\/* ==========================================\r\n   NUMMER NA DE WORP\r\n========================================== *\/\r\n\r\n#rtrWidget .rtr-final-number {\r\n  position: absolute;\r\n\r\n  left: 50%;\r\n  top: 42%;\r\n\r\n  transform:\r\n    translate(-50%, -50%)\r\n    scale(.9);\r\n\r\n  color: #EFE3D4;\r\n\r\n  font-family:\r\n    \"Libre Baskerville\",\r\n    Georgia,\r\n    serif;\r\n\r\n  font-size: clamp(42px, 9vw, 62px);\r\n  font-weight: 700;\r\n\r\n  line-height: 1;\r\n\r\n  text-shadow:\r\n    0 2px 4px rgba(0, 0, 0, .42);\r\n\r\n  opacity: 0;\r\n\r\n  pointer-events: none;\r\n\r\n  z-index: 5;\r\n}\r\n\r\n\r\n#rtrWidget .rtr-final-number.show {\r\n  animation:\r\n    rtrNumberAppear\r\n    360ms\r\n    cubic-bezier(.2,.8,.3,1)\r\n    forwards;\r\n}\r\n\r\n\r\n@keyframes rtrNumberAppear {\r\n\r\n  0% {\r\n    opacity: 0;\r\n\r\n    transform:\r\n      translate(-50%, -50%)\r\n      scale(.84);\r\n  }\r\n\r\n  70% {\r\n    opacity: 1;\r\n\r\n    transform:\r\n      translate(-50%, -50%)\r\n      scale(1.035);\r\n  }\r\n\r\n  100% {\r\n    opacity: 1;\r\n\r\n    transform:\r\n      translate(-50%, -50%)\r\n      scale(1);\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* ==========================================\r\n   RESULTAAT\r\n\r\n   Vaste hoogte zodat de pagina niet verspringt\r\n   bij langere of kortere teksten.\r\n========================================== *\/\r\n\r\n#rtrWidget .rtr-result {\r\n  max-width: 540px;\r\n\r\n  height: 260px;\r\n\r\n  margin: -35px auto 0;\r\n\r\n  box-sizing: border-box;\r\n\r\n  color: #2F2A25;\r\n\r\n  font-family:\r\n    \"Montserrat\",\r\n    Arial,\r\n    sans-serif;\r\n\r\n  font-size: 17px;\r\n  line-height: 1.65;\r\n\r\n  overflow: visible;\r\n}\r\n\r\n\r\n#rtrWidget .rtr-result-title {\r\n  display: block;\r\n\r\n  margin-bottom: 8px;\r\n\r\n  color: #173A38;\r\n\r\n  font-family:\r\n    \"Libre Baskerville\",\r\n    Georgia,\r\n    serif;\r\n\r\n  font-size: 27px;\r\n  font-weight: 700;\r\n\r\n  line-height: 1.25;\r\n}\r\n\r\n\r\n#rtrWidget .rtr-result-text {\r\n  display: block;\r\n}\r\n\r\n\r\n#rtrWidget .rtr-natural {\r\n  display: block;\r\n\r\n  margin-top: 14px;\r\n\r\n  color: #A98448;\r\n\r\n  font-family:\r\n    \"Libre Baskerville\",\r\n    Georgia,\r\n    serif;\r\n\r\n  font-size: 14px;\r\n  font-weight: 700;\r\n\r\n  letter-spacing: .13em;\r\n  text-transform: uppercase;\r\n}\r\n\r\n\r\n#rtrWidget .rtr-result.reveal {\r\n  animation:\r\n    rtrResultReveal\r\n    440ms\r\n    ease-out;\r\n}\r\n\r\n\r\n@keyframes rtrResultReveal {\r\n\r\n  from {\r\n    opacity: 0;\r\n    transform: translateY(7px);\r\n  }\r\n\r\n  to {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* ==========================================\r\n   NATURAL 20\r\n========================================== *\/\r\n\r\n#rtrWidget .rtr-stage.natural-20 {\r\n  animation:\r\n    rtrNatural20\r\n    900ms\r\n    ease-out;\r\n}\r\n\r\n\r\n@keyframes rtrNatural20 {\r\n\r\n  0% {\r\n    filter: none;\r\n  }\r\n\r\n  45% {\r\n    filter:\r\n      drop-shadow(\r\n        0 0 14px\r\n        rgba(169,132,72,.52)\r\n      );\r\n  }\r\n\r\n  100% {\r\n    filter: none;\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* ==========================================\r\n   MOBIEL\r\n========================================== *\/\r\n\r\n@media (max-width: 480px) {\r\n\r\n  #rtrWidget {\r\n    padding: 8px 10px;\r\n  }\r\n\r\n  #rtrWidget .rtr-stage {\r\n    width: min(275px, 78vw);\r\n  }\r\n\r\n  #rtrWidget .rtr-result {\r\n    height: 360px;\r\n\r\n    margin-top: -28px;\r\n\r\n    font-size: 16px;\r\n  }\r\n\r\n  #rtrWidget .rtr-result-title {\r\n    font-size: clamp(19px, 5.5vw, 23px);\r\n\r\n    white-space: nowrap;\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* ==========================================\r\n   REDUCED MOTION\r\n========================================== *\/\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n\r\n  #rtrWidget .rtr-final-number.show,\r\n  #rtrWidget .rtr-result.reveal,\r\n  #rtrWidget .rtr-stage.natural-20 {\r\n    animation: none;\r\n  }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n<script type=\"module\">\r\n\r\n(async () => {\r\n\r\n  const root =\r\n    document.getElementById(\"rtrWidget\");\r\n\r\n\r\n  if (\r\n    !root ||\r\n    root.dataset.rtrInitialized === \"1\"\r\n  ) {\r\n    return;\r\n  }\r\n\r\n\r\n  root.dataset.rtrInitialized = \"1\";\r\n\r\n\r\n  const holder =\r\n    document.getElementById(\"rtrCanvasHolder\");\r\n\r\n  const stage =\r\n    document.getElementById(\"rtrStage\");\r\n\r\n  const number =\r\n    document.getElementById(\"rtrFinalNumber\");\r\n\r\n  const result =\r\n    document.getElementById(\"rtrRollResult\");\r\n\r\n\r\n  const reducedMotion =\r\n    window.matchMedia(\r\n      \"(prefers-reduced-motion: reduce)\"\r\n    ).matches;\r\n\r\n\r\n\r\n  \/* ==========================================\r\n     THREE.JS\r\n  ========================================== *\/\r\n\r\n  let THREE;\r\n\r\n\r\n  try {\r\n\r\n    THREE =\r\n      await import(\r\n        \"https:\/\/cdn.jsdelivr.net\/npm\/three@0.160.0\/build\/three.module.js\"\r\n      );\r\n\r\n  }\r\n\r\n  catch (error) {\r\n\r\n    console.error(\r\n      \"Three.js kon niet worden geladen:\",\r\n      error\r\n    );\r\n\r\n\r\n    result.textContent =\r\n      \"De dobbelsteen kon niet worden geladen.\";\r\n\r\n    return;\r\n\r\n  }\r\n\r\n\r\n\r\n  \/* ==========================================\r\n     DE 20 UITKOMSTEN\r\n  ========================================== *\/\r\n\r\n  const rolls = [\r\n\r\n    {\r\n      title: \"Wees een keer onproductief\",\r\n      text: \"Doe vandaag iets dat nergens toe hoeft te leiden. Gun jezelf een half uur waarin je niets hoeft te bereiken, verbeteren of afvinken. Staar uit het raam, dwaal af of doe even niets. Niet alles hoeft nuttig te zijn.\"\r\n    },\r\n\r\n    {\r\n      title: \"Vergeef jezelf\",\r\n      text: \"Je hoeft niet alles goed te doen, altijd moedig te zijn of overal tegenin te gaan. Soms lukt het niet zoals je wilt. En je kan niet altijd perfect zijn. Kies vandaag \u00e9\u00e9n ding waar je jezelf nog op afrekent. Schrijf of zeg er \u00e9\u00e9n mildere zin over, alsof je die tegen een vriend zou zeggen.\"\r\n    },\r\n\r\n    {\r\n      title: \"Ere wie ere toekomt\",\r\n      text: \"Noem vandaag bij \u00e9\u00e9n idee, resultaat of succes expliciet wie eraan heeft bijgedragen. Zeker wanneer een ander met het idee pronkt. Zo maak je onzichtbare bijdragen opnieuw zichtbaar.\"\r\n    },\r\n\r\n    {\r\n      title: \"Geef anderen het woord\",\r\n      text: \"Let vandaag tijdens een vergadering op wie nauwelijks aan het woord komt. Vraag of diegene iets wil toevoegen, zonder aan te dringen. Zo krijgen ook stillere collega's gelegenheid om mee te praten.\"\r\n    },\r\n\r\n    {\r\n      title: \"Een klein stukje van jezelf dragen\",\r\n      text: \"Draag vandaag iets waarin je je helemaal thuis voelt, ook als het afwijkt van wat gebruikelijk is op kantoor. Wie zichzelf durft te tonen, geeft anderen daar ook ruimte voor.\"\r\n    },\r\n\r\n    {\r\n      title: \"Onderbreek de onderbreker\",\r\n      text: \"Probeer vandaag wanneer een collega wordt onderbroken te zeggen: 'Volgens mij was zij nog niet uitgesproken.' Een eenvoudige zin die ervoor zorgt dat iedereen de ruimte krijgt.\"\r\n    },\r\n\r\n    {\r\n      title: \"Maak je online bubbel diverser\",\r\n      text: \"Zoek vandaag \u00e9\u00e9n maker, schrijver, expert of organisatie met een perspectief dat je nog weinig tegenkomt en volg hun werk een tijdje.\"\r\n    },\r\n\r\n    {\r\n      title: \"Neem een side quest\",\r\n      text: \"Doe vandaag iets wat niet op de planning stond. Help een collega, volg je nieuwsgierigheid of probeer iets nieuws. Niet alles hoeft bij te dragen aan een doel of resultaat.\"\r\n    },\r\n\r\n    {\r\n      title: \"Vier je fouten\",\r\n      text: \"Benoem vandaag \u00e9\u00e9n kleine fout zonder hem meteen goed te praten of te verbergen. Vertel ook wat je ervan hebt geleerd. Zo laat je zien dat niemand perfect hoeft te zijn.\"\r\n    },\r\n\r\n    {\r\n      title: \"Zoek naar overeenkomsten\",\r\n      text: \"Voer vandaag \u00e9\u00e9n gesprek met iemand die anders denkt of leeft dan jij. Zoek bewust naar wat jullie verbindt in plaats van wat jullie verdeelt. Misschien hebben jullie meer gemeen dan je denkt.\"\r\n    },\r\n\r\n    {\r\n      title: \"Tweedehands treasures\",\r\n      text: \"Draag vandaag een tweedehands tas, jas of een ander kledingstuk en vertel trots waar je die gevonden hebt. Laat zien dat nieuw niet automatisch mooier, beter of waardevoller is.\"\r\n    },\r\n\r\n    {\r\n      title: \"Maak de norm zichtbaar\",\r\n      text: \"Kies vandaag \u00e9\u00e9n regel, gewoonte of verwachting die vanzelfsprekend lijkt en vraag jezelf of iemand anders: waarom doen we dit eigenlijk zo?\"\r\n    },\r\n\r\n    {\r\n      title: \"Geef emotie de ruimte\",\r\n      text: \"Noem vandaag in \u00e9\u00e9n gesprek eerlijk hoe iets voor je voelt, zonder het meteen kleiner, luchtiger of netter te maken. Je hoeft niet altijd vrolijk, sterk of kalm te zijn.\"\r\n    },\r\n\r\n    {\r\n      title: \"Luister naar een ander geluid\",\r\n      text: \"Besteed vandaag twintig minuten aan een verhaal, artikel, gesprek of podcast van iemand met een levenservaring die duidelijk verschilt van de jouwe. Zo maak je ruimte voor verhalen en perspectieven die je anders niet snel tegenkomt.\"\r\n    },\r\n\r\n    {\r\n      title: \"Wees vandaag niet de held\",\r\n      text: \"Je hoeft niet altijd degene te zijn die het oplost, het voortouw neemt of anderen redt. Laat vandaag \u00e9\u00e9n taak, antwoord of beslissing bewust bij iemand anders liggen, in plaats van hem meteen over te nemen.\"\r\n    },\r\n\r\n    {\r\n      title: \"Versla het ritueel van conformisme\",\r\n      text: \"Houd je tijdens een vergadering vandaag niet stil als je het ergens niet mee eens bent. Stel die lastige vraag of spreek je twijfel uit. Het mag best even ongemakkelijk worden.\"\r\n    },\r\n\r\n    {\r\n      title: \"Zoek een bondgenoot\",\r\n      text: \"Je hoeft niet in je eentje tegen de stroom in te zwemmen. Praat vandaag met \u00e9\u00e9n persoon waarvan je vermoed dat die hetzelfde ongemak voelt en bedenk samen hoe het anders kan.\"\r\n    },\r\n\r\n    {\r\n      title: \"Zeg wat je werkelijk bedoelt\",\r\n      text: \"Zeg vandaag op \u00e9\u00e9n moment wat je werkelijk denkt, in plaats van wat je denkt dat anderen willen horen. Durf eerlijk te zijn, ook als het schuurt. Je kunt duidelijk zijn zonder kwetsend te worden.\"\r\n    },\r\n\r\n    {\r\n      title: \"Omarm weerstand\",\r\n      text: \"Kies vandaag \u00e9\u00e9n klein ding dat je eigenlijk wilt doen, maar waar je vanaf ziet omdat je bang bent dat iemand het raar, overdreven of ongemakkelijk vindt. Noteer het tegengeluid dat je verwacht. En doe het dan toch.\"\r\n    },\r\n\r\n    {\r\n      title: \"#ZeDoenHetErMaarMee\",\r\n      text: \"Kies vandaag \u00e9\u00e9n moment waarop je je niet aanpast aan de verwachtingen van anderen. Zeg wat je denkt, draag wat je wilt of doe iets op jouw manier. Ze doen het er maar mee.\"\r\n    }\r\n\r\n  ];\r\n\r\n\r\n\r\n  \/* ==========================================\r\n     SCENE\r\n  ========================================== *\/\r\n\r\n  const scene =\r\n    new THREE.Scene();\r\n\r\n\r\n\r\n  \/* ==========================================\r\n     CAMERA\r\n  ========================================== *\/\r\n\r\n  const camera =\r\n    new THREE.PerspectiveCamera(\r\n      30,\r\n      1,\r\n      0.1,\r\n      100\r\n    );\r\n\r\n\r\n  camera.position.set(\r\n    0,\r\n    .18,\r\n    5.8\r\n  );\r\n\r\n\r\n  camera.lookAt(\r\n    0,\r\n    -.22,\r\n    0\r\n  );\r\n\r\n\r\n\r\n  \/* ==========================================\r\n     RENDERER\r\n  ========================================== *\/\r\n\r\n  const renderer =\r\n    new THREE.WebGLRenderer({\r\n\r\n      antialias: true,\r\n      alpha: true\r\n\r\n    });\r\n\r\n\r\n  renderer.setClearColor(\r\n    0x000000,\r\n    0\r\n  );\r\n\r\n\r\n  renderer.setPixelRatio(\r\n    Math.min(\r\n      window.devicePixelRatio || 1,\r\n      2\r\n    )\r\n  );\r\n\r\n\r\n  renderer.outputColorSpace =\r\n    THREE.SRGBColorSpace;\r\n\r\n\r\n  renderer.shadowMap.enabled =\r\n    true;\r\n\r\n\r\n  renderer.shadowMap.type =\r\n    THREE.PCFSoftShadowMap;\r\n\r\n\r\n  renderer.domElement.setAttribute(\r\n    \"role\",\r\n    \"button\"\r\n  );\r\n\r\n\r\n  renderer.domElement.setAttribute(\r\n    \"aria-label\",\r\n    \"Gooi de d20\"\r\n  );\r\n\r\n\r\n  renderer.domElement.setAttribute(\r\n    \"title\",\r\n    \"Klik om opnieuw te rollen\"\r\n  );\r\n\r\n\r\n  renderer.domElement.tabIndex =\r\n    0;\r\n\r\n\r\n  holder.appendChild(\r\n    renderer.domElement\r\n  );\r\n\r\n\r\n\r\n  \/* ==========================================\r\n     D20\r\n  ========================================== *\/\r\n\r\n  const rawGeometry =\r\n    new THREE.IcosahedronGeometry(\r\n      1,\r\n      0\r\n    );\r\n\r\n\r\n  const geometry =\r\n    rawGeometry.index\r\n      ? rawGeometry.toNonIndexed()\r\n      : rawGeometry;\r\n\r\n\r\n  const position =\r\n    geometry.getAttribute(\r\n      \"position\"\r\n    );\r\n\r\n\r\n  const faceCount =\r\n    position.count \/ 3;\r\n\r\n\r\n\r\n  \/* ==========================================\r\n     GROENTINTEN PER VLAK\r\n  ========================================== *\/\r\n\r\n  const faceColors = [\r\n\r\n    0x173A38,\r\n    0x1B403D,\r\n    0x123331,\r\n    0x204945,\r\n    0x153835,\r\n\r\n    0x1E4541,\r\n    0x102F2D,\r\n    0x1A3E3B,\r\n    0x224B47,\r\n    0x143634,\r\n\r\n    0x193C39,\r\n    0x0F2D2B,\r\n    0x204642,\r\n    0x173A38,\r\n    0x123230,\r\n\r\n    0x1D433F,\r\n    0x102E2C,\r\n    0x214844,\r\n    0x163936,\r\n    0x193F3B\r\n\r\n  ];\r\n\r\n\r\n  const colors =\r\n    new Float32Array(\r\n      position.count * 3\r\n    );\r\n\r\n\r\n  const color =\r\n    new THREE.Color();\r\n\r\n\r\n  for (\r\n    let face = 0;\r\n    face < faceCount;\r\n    face++\r\n  ) {\r\n\r\n    color.setHex(\r\n      faceColors[\r\n        face % faceColors.length\r\n      ]\r\n    );\r\n\r\n\r\n    for (\r\n      let vertex = 0;\r\n      vertex < 3;\r\n      vertex++\r\n    ) {\r\n\r\n      const index =\r\n        face * 3 + vertex;\r\n\r\n\r\n      colors[index * 3] =\r\n        color.r;\r\n\r\n      colors[index * 3 + 1] =\r\n        color.g;\r\n\r\n      colors[index * 3 + 2] =\r\n        color.b;\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n  geometry.setAttribute(\r\n\r\n    \"color\",\r\n\r\n    new THREE.BufferAttribute(\r\n      colors,\r\n      3\r\n    )\r\n\r\n  );\r\n\r\n\r\n\r\n  \/* ==========================================\r\n     NORMALEN VAN DE 20 VLAKKEN\r\n  ========================================== *\/\r\n\r\n  const faceNormals = [];\r\n\r\n\r\n  const a =\r\n    new THREE.Vector3();\r\n\r\n  const b =\r\n    new THREE.Vector3();\r\n\r\n  const c =\r\n    new THREE.Vector3();\r\n\r\n  const ab =\r\n    new THREE.Vector3();\r\n\r\n  const ac =\r\n    new THREE.Vector3();\r\n\r\n  const centroid =\r\n    new THREE.Vector3();\r\n\r\n\r\n  for (\r\n    let face = 0;\r\n    face < faceCount;\r\n    face++\r\n  ) {\r\n\r\n    a.fromBufferAttribute(\r\n      position,\r\n      face * 3\r\n    );\r\n\r\n\r\n    b.fromBufferAttribute(\r\n      position,\r\n      face * 3 + 1\r\n    );\r\n\r\n\r\n    c.fromBufferAttribute(\r\n      position,\r\n      face * 3 + 2\r\n    );\r\n\r\n\r\n    ab.subVectors(\r\n      b,\r\n      a\r\n    );\r\n\r\n\r\n    ac.subVectors(\r\n      c,\r\n      a\r\n    );\r\n\r\n\r\n    const normal =\r\n      new THREE.Vector3()\r\n        .crossVectors(\r\n          ab,\r\n          ac\r\n        )\r\n        .normalize();\r\n\r\n\r\n    centroid\r\n      .copy(a)\r\n      .add(b)\r\n      .add(c)\r\n      .divideScalar(3);\r\n\r\n\r\n    if (\r\n      normal.dot(centroid) < 0\r\n    ) {\r\n\r\n      normal.negate();\r\n\r\n    }\r\n\r\n\r\n    faceNormals.push(\r\n      normal.clone()\r\n    );\r\n\r\n  }\r\n\r\n\r\n\r\n  \/* ==========================================\r\n     DICE GROUP\r\n  ========================================== *\/\r\n\r\n  const dice =\r\n    new THREE.Group();\r\n\r\n\r\n  scene.add(\r\n    dice\r\n  );\r\n\r\n\r\n\r\n  \/* ==========================================\r\n     GROENE STEEN\r\n  ========================================== *\/\r\n\r\n  const diceMaterial =\r\n    new THREE.MeshStandardMaterial({\r\n\r\n      vertexColors: true,\r\n\r\n      roughness: .48,\r\n\r\n      metalness: .11,\r\n\r\n      flatShading: true\r\n\r\n    });\r\n\r\n\r\n  const diceMesh =\r\n    new THREE.Mesh(\r\n      geometry,\r\n      diceMaterial\r\n    );\r\n\r\n\r\n  diceMesh.castShadow =\r\n    true;\r\n\r\n\r\n  diceMesh.receiveShadow =\r\n    true;\r\n\r\n\r\n  dice.add(\r\n    diceMesh\r\n  );\r\n\r\n\r\n\r\n  \/* ==========================================\r\n     GOUDEN RANDEN\r\n  ========================================== *\/\r\n\r\n  const edgeGeometry =\r\n    new THREE.EdgesGeometry(\r\n      geometry,\r\n      1\r\n    );\r\n\r\n\r\n  const edgeMaterial =\r\n    new THREE.LineBasicMaterial({\r\n\r\n      color: 0xB18A4A,\r\n\r\n      transparent: true,\r\n\r\n      opacity: .96\r\n\r\n    });\r\n\r\n\r\n  const edges =\r\n    new THREE.LineSegments(\r\n      edgeGeometry,\r\n      edgeMaterial\r\n    );\r\n\r\n\r\n  edges.scale.setScalar(\r\n    1.006\r\n  );\r\n\r\n\r\n  dice.add(\r\n    edges\r\n  );\r\n\r\n\r\n\r\n  \/* ==========================================\r\n     STARTPOSITIE\r\n  ========================================== *\/\r\n\r\n  dice.rotation.set(\r\n    -.35,\r\n    .42,\r\n    -.08\r\n  );\r\n\r\n\r\n  const baseY =\r\n    .16;\r\n\r\n\r\n  dice.position.y =\r\n    baseY;\r\n\r\n\r\n\r\n  \/* ==========================================\r\n     LICHT\r\n  ========================================== *\/\r\n\r\n  const hemisphere =\r\n    new THREE.HemisphereLight(\r\n\r\n      0xF1E1C3,\r\n\r\n      0x092623,\r\n\r\n      1.55\r\n\r\n    );\r\n\r\n\r\n  scene.add(\r\n    hemisphere\r\n  );\r\n\r\n\r\n  const keyLight =\r\n    new THREE.DirectionalLight(\r\n\r\n      0xFFE0A7,\r\n\r\n      3.6\r\n\r\n    );\r\n\r\n\r\n  keyLight.position.set(\r\n    -3.8,\r\n    5,\r\n    4.5\r\n  );\r\n\r\n\r\n  keyLight.castShadow =\r\n    true;\r\n\r\n\r\n  keyLight.shadow.mapSize.set(\r\n    1024,\r\n    1024\r\n  );\r\n\r\n\r\n  keyLight.shadow.camera.near =\r\n    .1;\r\n\r\n\r\n  keyLight.shadow.camera.far =\r\n    15;\r\n\r\n\r\n  keyLight.shadow.camera.left =\r\n    -4;\r\n\r\n\r\n  keyLight.shadow.camera.right =\r\n    4;\r\n\r\n\r\n  keyLight.shadow.camera.top =\r\n    4;\r\n\r\n\r\n  keyLight.shadow.camera.bottom =\r\n    -4;\r\n\r\n\r\n  scene.add(\r\n    keyLight\r\n  );\r\n\r\n\r\n  const fillLight =\r\n    new THREE.PointLight(\r\n\r\n      0x6F9D95,\r\n\r\n      1.45,\r\n\r\n      12\r\n\r\n    );\r\n\r\n\r\n  fillLight.position.set(\r\n    3.5,\r\n    1,\r\n    3\r\n  );\r\n\r\n\r\n  scene.add(\r\n    fillLight\r\n  );\r\n\r\n\r\n  const rimLight =\r\n    new THREE.PointLight(\r\n\r\n      0xD7AA62,\r\n\r\n      1.15,\r\n\r\n      12\r\n\r\n    );\r\n\r\n\r\n  rimLight.position.set(\r\n    -1.5,\r\n    2.5,\r\n    -3\r\n  );\r\n\r\n\r\n  scene.add(\r\n    rimLight\r\n  );\r\n\r\n\r\n\r\n  \/* ==========================================\r\n     TRANSPARANTE SCHADUW\r\n  ========================================== *\/\r\n\r\n  const shadowPlane =\r\n    new THREE.Mesh(\r\n\r\n      new THREE.PlaneGeometry(\r\n        4,\r\n        4\r\n      ),\r\n\r\n      new THREE.ShadowMaterial({\r\n\r\n        color: 0x2F2923,\r\n\r\n        opacity: .19\r\n\r\n      })\r\n\r\n    );\r\n\r\n\r\n  shadowPlane.rotation.x =\r\n    -Math.PI \/ 2;\r\n\r\n\r\n  shadowPlane.position.y =\r\n    -.82;\r\n\r\n\r\n  shadowPlane.receiveShadow =\r\n    true;\r\n\r\n\r\n  scene.add(\r\n    shadowPlane\r\n  );\r\n\r\n\r\n\r\n  \/* ==========================================\r\n     RESPONSIVE\r\n  ========================================== *\/\r\n\r\n  function resizeRenderer() {\r\n\r\n    const width =\r\n      Math.max(\r\n        holder.clientWidth,\r\n        1\r\n      );\r\n\r\n\r\n    const height =\r\n      Math.max(\r\n        holder.clientHeight,\r\n        1\r\n      );\r\n\r\n\r\n    renderer.setSize(\r\n      width,\r\n      height,\r\n      false\r\n    );\r\n\r\n\r\n    camera.aspect =\r\n      width \/ height;\r\n\r\n\r\n    camera.updateProjectionMatrix();\r\n\r\n  }\r\n\r\n\r\n  resizeRenderer();\r\n\r\n\r\n  const resizeObserver =\r\n    new ResizeObserver(\r\n      resizeRenderer\r\n    );\r\n\r\n\r\n  resizeObserver.observe(\r\n    holder\r\n  );\r\n\r\n\r\n\r\n  \/* ==========================================\r\n     RENDER LOOP\r\n  ========================================== *\/\r\n\r\n  function render() {\r\n\r\n    renderer.render(\r\n      scene,\r\n      camera\r\n    );\r\n\r\n\r\n    requestAnimationFrame(\r\n      render\r\n    );\r\n\r\n  }\r\n\r\n\r\n  render();\r\n\r\n\r\n\r\n  \/* ==========================================\r\n     RANDOM D20\r\n  ========================================== *\/\r\n\r\n  function randomD20() {\r\n\r\n    return Math.floor(\r\n      Math.random() * 20\r\n    ) + 1;\r\n\r\n  }\r\n\r\n\r\n\r\n  \/* ==========================================\r\n     RESULTAAT\r\n  ========================================== *\/\r\n\r\n  function showResult(\r\n    roll\r\n  ) {\r\n\r\n    const chosen =\r\n      rolls[\r\n        roll - 1\r\n      ];\r\n\r\n\r\n    result.classList.remove(\r\n      \"reveal\"\r\n    );\r\n\r\n\r\n    void result.offsetWidth;\r\n\r\n\r\n    result.innerHTML = `\r\n\r\n      <span class=\"rtr-result-title\">\r\n        ${chosen.title}\r\n      <\/span>\r\n\r\n      <span class=\"rtr-result-text\">\r\n        ${chosen.text}\r\n      <\/span>\r\n\r\n      ${\r\n        roll === 20\r\n\r\n          ? `\r\n            <span class=\"rtr-natural\">\r\n              Natural 20\r\n            <\/span>\r\n          `\r\n\r\n          : \"\"\r\n      }\r\n\r\n    `;\r\n\r\n\r\n    result.classList.add(\r\n      \"reveal\"\r\n    );\r\n\r\n  }\r\n\r\n\r\n\r\n  \/* ==========================================\r\n     CAMERA-RICHTING\r\n  ========================================== *\/\r\n\r\n  const cameraNormal =\r\n    new THREE.Vector3(\r\n      0,\r\n      0,\r\n      1\r\n    );\r\n\r\n\r\n\r\n  \/* ==========================================\r\n     BEST PASSENDE VOORZIJDE\r\n  ========================================== *\/\r\n\r\n  function getBestFacingFace(\r\n    quaternion\r\n  ) {\r\n\r\n    let bestIndex =\r\n      0;\r\n\r\n\r\n    let bestDot =\r\n      -Infinity;\r\n\r\n\r\n    for (\r\n      let i = 0;\r\n      i < faceNormals.length;\r\n      i++\r\n    ) {\r\n\r\n      const worldNormal =\r\n        faceNormals[i]\r\n          .clone()\r\n          .applyQuaternion(\r\n            quaternion\r\n          )\r\n          .normalize();\r\n\r\n\r\n      const dot =\r\n        worldNormal.dot(\r\n          cameraNormal\r\n        );\r\n\r\n\r\n      if (\r\n        dot > bestDot\r\n      ) {\r\n\r\n        bestDot =\r\n          dot;\r\n\r\n\r\n        bestIndex =\r\n          i;\r\n\r\n      }\r\n\r\n    }\r\n\r\n\r\n    return bestIndex;\r\n\r\n  }\r\n\r\n\r\n\r\n  \/* ==========================================\r\n     NATUURLIJKE LANDINGSROTATIE\r\n  ========================================== *\/\r\n\r\n  function getNaturalLandingQuaternion(\r\n    currentQuaternion\r\n  ) {\r\n\r\n    const faceIndex =\r\n      getBestFacingFace(\r\n        currentQuaternion\r\n      );\r\n\r\n\r\n    const localNormal =\r\n      faceNormals[\r\n        faceIndex\r\n      ].clone();\r\n\r\n\r\n    const worldNormal =\r\n      localNormal\r\n        .applyQuaternion(\r\n          currentQuaternion\r\n        )\r\n        .normalize();\r\n\r\n\r\n    const correction =\r\n      new THREE.Quaternion();\r\n\r\n\r\n    correction.setFromUnitVectors(\r\n      worldNormal,\r\n      cameraNormal\r\n    );\r\n\r\n\r\n    return correction\r\n      .multiply(\r\n        currentQuaternion.clone()\r\n      )\r\n      .normalize();\r\n\r\n  }\r\n\r\n\r\n\r\n  \/* ==========================================\r\n     WORP\r\n  ========================================== *\/\r\n\r\n  let rolling =\r\n    false;\r\n\r\n\r\n  const rollDuration =\r\n    1950;\r\n\r\n\r\n\r\n  function rollDice() {\r\n\r\n    if (rolling) {\r\n      return;\r\n    }\r\n\r\n\r\n    const finalRoll =\r\n      randomD20();\r\n\r\n\r\n\r\n    \/* REDUCED MOTION *\/\r\n\r\n    if (reducedMotion) {\r\n\r\n      number.textContent =\r\n        finalRoll;\r\n\r\n\r\n      number.classList.add(\r\n        \"show\"\r\n      );\r\n\r\n\r\n      showResult(\r\n        finalRoll\r\n      );\r\n\r\n\r\n      return;\r\n\r\n    }\r\n\r\n\r\n\r\n    rolling =\r\n      true;\r\n\r\n\r\n    result.innerHTML =\r\n      \"\";\r\n\r\n\r\n    number.textContent =\r\n      \"\";\r\n\r\n\r\n    number.classList.remove(\r\n      \"show\"\r\n    );\r\n\r\n\r\n    stage.classList.remove(\r\n      \"natural-20\"\r\n    );\r\n\r\n\r\n\r\n    \/* =====================================\r\n       ROTATIESNELHEID\r\n    ===================================== *\/\r\n\r\n    const angularVelocity =\r\n      new THREE.Vector3(\r\n\r\n        5.4 +\r\n        Math.random() * 1.1,\r\n\r\n        6.1 +\r\n        Math.random() * 1.2,\r\n\r\n        (\r\n          Math.random() - .5\r\n        ) * 2.6\r\n\r\n      );\r\n\r\n\r\n    if (\r\n      Math.random() < .5\r\n    ) {\r\n\r\n      angularVelocity.x *=\r\n        -1;\r\n\r\n    }\r\n\r\n\r\n    if (\r\n      Math.random() < .5\r\n    ) {\r\n\r\n      angularVelocity.y *=\r\n        -1;\r\n\r\n    }\r\n\r\n\r\n\r\n    const angularDamping =\r\n      1.05;\r\n\r\n\r\n\r\n    \/* subtiele horizontale beweging *\/\r\n\r\n    const travelX =\r\n      (\r\n        Math.random() - .5\r\n      ) * .16;\r\n\r\n\r\n\r\n    const startTime =\r\n      performance.now();\r\n\r\n\r\n    let previousTime =\r\n      startTime;\r\n\r\n\r\n\r\n    const settleDuration =\r\n      300;\r\n\r\n\r\n    const settleStart =\r\n      rollDuration -\r\n      settleDuration;\r\n\r\n\r\n    let settling =\r\n      false;\r\n\r\n\r\n    let settleQuaternion =\r\n      null;\r\n\r\n\r\n    let targetQuaternion =\r\n      null;\r\n\r\n\r\n\r\n    function animateRoll(\r\n      now\r\n    ) {\r\n\r\n      const elapsed =\r\n        now -\r\n        startTime;\r\n\r\n\r\n      const deltaSeconds =\r\n        Math.min(\r\n\r\n          (\r\n            now -\r\n            previousTime\r\n          ) \/ 1000,\r\n\r\n          .04\r\n\r\n        );\r\n\r\n\r\n      previousTime =\r\n        now;\r\n\r\n\r\n      const progress =\r\n        Math.min(\r\n          elapsed \/\r\n          rollDuration,\r\n          1\r\n        );\r\n\r\n\r\n\r\n      \/* =====================================\r\n         VRIJE TUMBLE\r\n      ===================================== *\/\r\n\r\n      if (\r\n        elapsed <\r\n        settleStart\r\n      ) {\r\n\r\n        const speed =\r\n          angularVelocity.length();\r\n\r\n\r\n        if (\r\n          speed > .0001\r\n        ) {\r\n\r\n          const axis =\r\n            angularVelocity\r\n              .clone()\r\n              .normalize();\r\n\r\n\r\n          const deltaRotation =\r\n            new THREE.Quaternion();\r\n\r\n\r\n          deltaRotation.setFromAxisAngle(\r\n\r\n            axis,\r\n\r\n            speed *\r\n            deltaSeconds\r\n\r\n          );\r\n\r\n\r\n          dice.quaternion\r\n            .premultiply(\r\n              deltaRotation\r\n            );\r\n\r\n        }\r\n\r\n\r\n\r\n        const damping =\r\n          Math.exp(\r\n\r\n            -angularDamping *\r\n            deltaSeconds\r\n\r\n          );\r\n\r\n\r\n        angularVelocity.multiplyScalar(\r\n          damping\r\n        );\r\n\r\n      }\r\n\r\n\r\n\r\n      \/* =====================================\r\n         NATUURLIJK LANDEN\r\n      ===================================== *\/\r\n\r\n      else {\r\n\r\n        if (\r\n          !settling\r\n        ) {\r\n\r\n          settling =\r\n            true;\r\n\r\n\r\n          settleQuaternion =\r\n            dice.quaternion.clone();\r\n\r\n\r\n          targetQuaternion =\r\n            getNaturalLandingQuaternion(\r\n              settleQuaternion\r\n            );\r\n\r\n        }\r\n\r\n\r\n        const settleProgress =\r\n          Math.min(\r\n\r\n            (\r\n              elapsed -\r\n              settleStart\r\n            ) \/\r\n            settleDuration,\r\n\r\n            1\r\n\r\n          );\r\n\r\n\r\n        const smooth =\r\n          1 -\r\n          Math.pow(\r\n            1 - settleProgress,\r\n            3\r\n          );\r\n\r\n\r\n        dice.quaternion\r\n          .slerpQuaternions(\r\n\r\n            settleQuaternion,\r\n\r\n            targetQuaternion,\r\n\r\n            smooth\r\n\r\n          );\r\n\r\n      }\r\n\r\n\r\n\r\n      \/* =====================================\r\n         HORIZONTALE BEWEGING\r\n      ===================================== *\/\r\n\r\n      dice.position.x =\r\n\r\n        travelX *\r\n\r\n        Math.sin(\r\n          progress *\r\n          Math.PI\r\n        )\r\n\r\n        +\r\n\r\n        Math.sin(\r\n          progress *\r\n          Math.PI *\r\n          2.6\r\n        )\r\n\r\n        *\r\n\r\n        .025\r\n\r\n        *\r\n\r\n        (\r\n          1 -\r\n          progress\r\n        );\r\n\r\n\r\n\r\n      \/* =====================================\r\n         HOOGTE\r\n      ===================================== *\/\r\n\r\n      let height =\r\n        0;\r\n\r\n\r\n\r\n      if (\r\n        progress <\r\n        .55\r\n      ) {\r\n\r\n        const p =\r\n          progress \/\r\n          .55;\r\n\r\n\r\n        height =\r\n          Math.sin(\r\n            p *\r\n            Math.PI\r\n          ) *\r\n          .38;\r\n\r\n      }\r\n\r\n\r\n      else if (\r\n        progress <\r\n        .78\r\n      ) {\r\n\r\n        const p =\r\n          (\r\n            progress -\r\n            .55\r\n          ) \/\r\n          .23;\r\n\r\n\r\n        height =\r\n          Math.sin(\r\n            p *\r\n            Math.PI\r\n          ) *\r\n          .105;\r\n\r\n      }\r\n\r\n\r\n      else if (\r\n        progress <\r\n        .91\r\n      ) {\r\n\r\n        const p =\r\n          (\r\n            progress -\r\n            .78\r\n          ) \/\r\n          .13;\r\n\r\n\r\n        height =\r\n          Math.sin(\r\n            p *\r\n            Math.PI\r\n          ) *\r\n          .035;\r\n\r\n      }\r\n\r\n\r\n\r\n      dice.position.y =\r\n        baseY +\r\n        height;\r\n\r\n\r\n\r\n      \/* =====================================\r\n         DOORGAAN\r\n      ===================================== *\/\r\n\r\n      if (\r\n        progress < 1\r\n      ) {\r\n\r\n        requestAnimationFrame(\r\n          animateRoll\r\n        );\r\n\r\n\r\n        return;\r\n\r\n      }\r\n\r\n\r\n\r\n      \/* =====================================\r\n         DEFINITIEVE LANDING\r\n      ===================================== *\/\r\n\r\n      dice.position.x =\r\n        0;\r\n\r\n\r\n      dice.position.y =\r\n        baseY;\r\n\r\n\r\n      if (\r\n        targetQuaternion\r\n      ) {\r\n\r\n        dice.quaternion.copy(\r\n          targetQuaternion\r\n        );\r\n\r\n      }\r\n\r\n\r\n\r\n      \/* =====================================\r\n         GETAL NA DE LANDING\r\n      ===================================== *\/\r\n\r\n      number.textContent =\r\n        finalRoll;\r\n\r\n\r\n      number.classList.remove(\r\n        \"show\"\r\n      );\r\n\r\n\r\n      void number.offsetWidth;\r\n\r\n\r\n      number.classList.add(\r\n        \"show\"\r\n      );\r\n\r\n\r\n\r\n      setTimeout(() => {\r\n\r\n        showResult(\r\n          finalRoll\r\n        );\r\n\r\n      }, 100);\r\n\r\n\r\n\r\n      if (\r\n        finalRoll === 20\r\n      ) {\r\n\r\n        setTimeout(() => {\r\n\r\n          stage.classList.add(\r\n            \"natural-20\"\r\n          );\r\n\r\n        }, 150);\r\n\r\n      }\r\n\r\n\r\n\r\n      setTimeout(() => {\r\n\r\n        rolling =\r\n          false;\r\n\r\n      }, 220);\r\n\r\n    }\r\n\r\n\r\n\r\n    requestAnimationFrame(\r\n      animateRoll\r\n    );\r\n\r\n  }\r\n\r\n\r\n\r\n  \/* ==========================================\r\n     KLIK OP DOBBELSTEEN\r\n  ========================================== *\/\r\n\r\n  renderer.domElement.addEventListener(\r\n    \"click\",\r\n    rollDice\r\n  );\r\n\r\n\r\n\r\n  \/* ==========================================\r\n     TOETSENBORD\r\n  ========================================== *\/\r\n\r\n  renderer.domElement.addEventListener(\r\n    \"keydown\",\r\n    event => {\r\n\r\n      if (\r\n        event.key === \"Enter\" ||\r\n        event.key === \" \"\r\n      ) {\r\n\r\n        event.preventDefault();\r\n\r\n        rollDice();\r\n\r\n      }\r\n\r\n    }\r\n  );\r\n\r\n\r\n\r\n  \/* ==========================================\r\n     AUTOMATISCHE EERSTE WORP\r\n  ========================================== *\/\r\n\r\n  setTimeout(() => {\r\n\r\n    rollDice();\r\n\r\n  }, 450);\r\n\r\n\r\n})();\r\n\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<p class=\"e-2d97e63-b0a453a e-paragraph-base e-default-p\" data-interaction-id=\"2d97e63\">Klik op de dobbelsteen om hem opnieuw te gooien voor een extra of een ander idee.&nbsp;<\/p>\n\t\t\n<\/div>\n<\/div>\n\n<\/div>\n\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Roll for Initiative Veel van wat we doen, gaat op de automatische piloot. We kiezen de bekende route, geven het verwachte antwoord of passen ons ongemerkt aan aan hoe iets \u2018hoort\u2019. Roll for Initiative gebruikt toeval om daar heel even tussen te komen. De twintig uitkomsten zijn kleine manieren om iets anders te doen: een [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"ocean_front_end_style_editor":"no","ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","footnotes":""},"class_list":["post-201","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/hicsuntdracones.nl\/index.php\/wp-json\/wp\/v2\/pages\/201","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hicsuntdracones.nl\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hicsuntdracones.nl\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hicsuntdracones.nl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hicsuntdracones.nl\/index.php\/wp-json\/wp\/v2\/comments?post=201"}],"version-history":[{"count":70,"href":"https:\/\/hicsuntdracones.nl\/index.php\/wp-json\/wp\/v2\/pages\/201\/revisions"}],"predecessor-version":[{"id":293,"href":"https:\/\/hicsuntdracones.nl\/index.php\/wp-json\/wp\/v2\/pages\/201\/revisions\/293"}],"wp:attachment":[{"href":"https:\/\/hicsuntdracones.nl\/index.php\/wp-json\/wp\/v2\/media?parent=201"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}