{"version":3,"file":"BLEXK9b9.js","sources":["../../../../pages/index.vue"],"sourcesContent":["<template>\n  <div class=\"scrollable\">\n    <div class=\"welcome\">\n      <div class=\"left-column\">\n        <h3 class=\"disclaimer\">\n          <div>\n            Plus que\n            <span class=\"days\" :class=\"{ 'animate-color': animationsActive }\"\n              >{{ diffDays }} jours</span\n            >,\n            <span class=\"hours\" :class=\"{ 'animate-color': animationsActive }\"\n              >{{ diffHours }} heures</span\n            >,\n            <span class=\"minutes\" :class=\"{ 'animate-color': animationsActive }\"\n              >{{ diffMinutes }} minutes</span\n            >\n            et\n            <span class=\"seconds\" :class=\"{ 'animate-color': animationsActive }\"\n              >{{ diffSeconds }} secondes</span\n            >\n          </div>\n          <div>\n            avant la {{ isPremiere ? \"première\" : \"prochaine date\" }} à\n            <span class=\"theatre\"> {{ nextShow.theatre_text }} </span> de :\n          </div>\n\n          <div\n            class=\"titre\"\n            :class=\"{\n              'animate-size': animationsActive,\n              'animate-color': animationsActive,\n            }\"\n          >\n            La\n            <span class=\"big\" :class=\"{ 'animate-uppercase': animationsActive }\"\n              >grosse</span\n            >\n            déprime\n            <span\n              :class=\"{ 'exclamation animate-exclamation': animationsActive }\"\n            ></span>\n          </div>\n        </h3>\n      </div>\n      <div class=\"right-column\">\n        <div\n          :class=\"{\n            cartoon: true,\n            'animate-rotate': animationsActive,\n          }\"\n        >\n          <div ref=\"bubble\" class=\"bubble bubble-bottom-left\">\n            Si seulement nous avions un bouton pour moins stresser...\n          </div>\n\n          <NuxtPicture\n            :src=\"img.src\"\n            format=\"avif,webp\"\n            sizes=\"450px md:650px xl:900px\"\n            densities=\"x1 x2\"\n            quality=\"90\"\n            loading=\"lazy\"\n            :imgAttrs=\"{\n              alt: img.caption,\n              className:\n                'show-img' + (animationsActive ? ' animate-rotate' : ''),\n              loading: 'lazy',\n            }\"\n          />\n        </div>\n      </div>\n      <button\n        ref=\"stressButton\"\n        class=\"stress-button\"\n        @click=\"\n          () => {\n            animationsActive = !animationsActive;\n            idxText++;\n          }\n        \"\n      >\n        Bouton pour moins stresser\n      </button>\n    </div>\n\n    <div class=\"footer\">\n      <h3>\n        retrouvez nous sur :\n        <a\n          href=\"https://www.instagram.com/collectifmoitiemoitiemoitie/\"\n          target=\"_blank\"\n          rel=\"noopener\"\n          >instagram\n        </a>\n        /\n        <a\n          href=\"https://www.facebook.com/moitiemoitiemoitie/?locale=fr_FR\"\n          target=\"_blank\"\n          rel=\"noopener\"\n          >facebook\n        </a>\n        /\n        <a href=\"/contact\" rel=\"noopener\">newsletter</a>\n      </h3>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, useTemplateRef } from \"vue\";\n\nconst diffDays = ref(0);\nconst diffHours = ref(0);\nconst diffMinutes = ref(0);\nconst diffSeconds = ref(0);\n\nconst animationsActive = ref(false);\n\nconst { data: show } = await useAsyncData(\"welcome\", () =>\n  queryCollection(\"spectacles\").order(\"navigation\", \"ASC\").first()\n);\nconst images = show.value.images;\nconst img = images.length > 3 ? images[3] : images[0];\n\nconst nextShowIndex = show.value.dates.findIndex(\n  (date) => new Date(date.date_start) > new Date()\n);\n\nconsole.log(\"Next show index\", nextShowIndex);\n\nconst nextShow = show.value.dates[nextShowIndex];\n\nconst isPremiere = nextShowIndex === 0;\n\nconst nextShowDate = new Date(nextShow.date_start);\n\nfunction updateCountdown() {\n  const today = new Date();\n  const diffTime = Math.max(nextShowDate - today, 0);\n  diffDays.value = Math.floor(diffTime / (1000 * 60 * 60 * 24));\n  const remainderAfterDays = diffTime % (1000 * 60 * 60 * 24);\n  diffHours.value = Math.floor(remainderAfterDays / (1000 * 60 * 60));\n  const remainderAfterHours = remainderAfterDays % (1000 * 60 * 60);\n  diffMinutes.value = Math.floor(remainderAfterHours / (1000 * 60));\n  const remainderAfterMinutes = remainderAfterHours % (1000 * 60);\n  diffSeconds.value = Math.floor(remainderAfterMinutes / 1000);\n}\n\nconst idxText = ref(0);\nconst stressButton = useTemplateRef(\"stressButton\");\nconst bubble = useTemplateRef(\"bubble\");\nwatch(idxText, (idx) => {\n  if (idx >= listTexts.length - 1) {\n    stressButton.value.style.visibility = \"hidden\";\n  }\n\n  if (idx >= listTexts.length) {\n    bubble.value.innerHTML = \"Mais ???? Vous êtes un HACKER ????\";\n  } else bubble.value.innerHTML = listTexts[idx];\n});\n\nconst listTexts = [\n  \"Ça va beaucoup mieux !!!!!!!!\",\n  \"Ça va beaucoup mieux !!!!!!!!\",\n  \"Oooooh.... Pourquoi ? C'était si bien !\",\n  \"Ouiiiii, la joie à nouveau !!\",\n  \"Mais ??? Ça commence à bien faire cette histoire !\",\n  \"Aaaaaaaah... On savait que vous finiriez par être raisonnable !\",\n  \"Non mais là on va se fâcher vous savez ?\",\n  \"On vous l'enlève parce que vraiment c'est trop bon !\",\n];\n\nonMounted(() => {\n  updateCountdown();\n  const interval = setInterval(updateCountdown, 1000);\n  onUnmounted(() => clearInterval(interval));\n});\n</script>\n\n<style scoped>\n.footer {\n  padding-top: 4rem;\n  padding-bottom: 4rem;\n  margin-top: 8rem;\n  border-top: solid rgba(0, 0, 0, 0.6) 2px;\n}\n\n.welcome {\n  display: flex;\n  padding-bottom: 2rem;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  gap: 2rem;\n  overflow-y: hidden;\n  overflow-x: hidden;\n}\n\n.left-column {\n  text-align: left;\n}\n\n.theatre {\n  font-weight: bold;\n}\n\n:deep(.show-img) {\n  width: 100%;\n  max-height: 50vh;\n  height: auto;\n}\n\n.cartoon {\n  position: relative;\n  overflow: hidden;\n  max-width: 100vw;\n  max-height: 100%;\n}\n\n.bubble {\n  font-size: small;\n  max-width: 120px;\n  position: absolute;\n  background-color: white;\n  border: solid 1px;\n  border-radius: 20px;\n  padding: 10px;\n  left: 40%;\n  top: 30%;\n}\n.bubble-bottom-left:before {\n  content: \"\";\n  width: 0px;\n  height: 0px;\n  position: absolute;\n  border-left: 16px solid #fff;\n  border-right: 12px solid transparent;\n  border-top: 4px solid #fff;\n  border-bottom: 20px solid transparent;\n  left: 32px;\n  bottom: -20px;\n}\n\n.disclaimer {\n  text-align: left;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 2rem;\n}\n\n.exclamation {\n  position: relative;\n  display: inline-block;\n}\n\n/* Generate animated exclamation marks */\n.exclamation.animate-exclamation::after {\n  content: \"!\";\n  animation: exclamationAnimation 3s steps(3, end) infinite;\n}\n\n.stress-button {\n  background-color: white;\n  cursor: pointer;\n}\n\n.animate-color {\n  animation: colorPulse 3s ease-in-out infinite;\n}\n\n:deep(.animate-rotate) {\n  animation: rotate 2s linear infinite;\n}\n\n/* Shared animation on time units */\n.animate-size {\n  animation: sizePulse 3s linear infinite;\n}\n\n.animate-color,\n.animate-size {\n  font-size: 1.5em;\n  font-weight: bold;\n  /* Apply animations */\n}\n\n.days,\n.hours,\n.minutes,\n.seconds {\n  display: inline-block;\n  min-width: fit-content;\n}\n\n.seconds {\n  width: 50px;\n}\n\n.titre {\n  padding-top: 2rem;\n  font-size: 1.5em;\n  font-weight: bold;\n}\n\n/* Additional styling for the big part if needed */\n.animate-uppercase {\n  animation: uppercase 3s linear infinite;\n}\n\n@keyframes rotate {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes exclamationAnimation {\n  0% {\n    content: \"\";\n  }\n  50% {\n    content: \"!!!\";\n  }\n  100% {\n    content: \"\";\n  }\n}\n@keyframes uppercase {\n  0% {\n    text-transform: lowercase;\n  }\n  50% {\n    text-transform: uppercase;\n  }\n  100% {\n    text-transform: lowercase;\n  }\n}\n\n@keyframes colorPulse {\n  0% {\n    color: #000000;\n  }\n  25% {\n    color: #ff0000;\n  }\n  50% {\n    color: #00ff00;\n  }\n  75% {\n    color: #0000ff;\n  }\n  100% {\n    color: #000000;\n  }\n}\n\n@keyframes sizePulse {\n  0% {\n    font-size: 1.5em;\n  }\n  50% {\n    font-size: 2.3em;\n  }\n  100% {\n    font-size: 1.5em;\n  }\n}\n\n@media screen and (max-width: 1100px) {\n  .welcome {\n    flex-direction: column;\n    gap: 4rem;\n  }\n}\n\n@media screen and (max-width: 600px) {\n  .disclaimer {\n    text-align: left;\n  }\n}\n</style>\n"],"names":["diffDays","ref","diffHours","diffMinutes","diffSeconds","animationsActive","show","__temp","__restore","_withAsyncContext","useAsyncData","queryCollection","images","img","nextShowIndex","date","nextShow","isPremiere","nextShowDate","updateCountdown","diffTime","remainderAfterDays","remainderAfterHours","remainderAfterMinutes","idxText","stressButton","useTemplateRef","bubble","watch","idx","listTexts","onMounted","interval","onUnmounted"],"mappings":"2XA+GA,MAAMA,EAAWC,EAAI,CAAC,EAChBC,EAAYD,EAAI,CAAC,EACjBE,EAAcF,EAAI,CAAC,EACnBG,EAAcH,EAAI,CAAC,EAEnBI,EAAmBJ,EAAI,EAAK,EAE5B,CAAE,KAAMK,CAAM,GAAS,CAAAC,EAAAC,CAAA,EAAAC,EAAA,IAAAC,EAAa,UAAW,IACnDC,EAAgB,YAAY,EAAE,MAAM,aAAc,KAAK,EAAE,MAAK,CAChE,CAAA,mBACMC,EAASN,EAAK,MAAM,OACpBO,EAAMD,EAAO,OAAS,EAAIA,EAAO,CAAC,EAAIA,EAAO,CAAC,EAE9CE,EAAgBR,EAAK,MAAM,MAAM,UACpCS,GAAS,IAAI,KAAKA,EAAK,UAAU,EAAI,IAAI,IAC5C,EAEA,QAAQ,IAAI,kBAAmBD,CAAa,EAE5C,MAAME,EAAWV,EAAK,MAAM,MAAMQ,CAAa,EAEzCG,EAAaH,IAAkB,EAE/BI,EAAe,IAAI,KAAKF,EAAS,UAAU,EAEjD,SAASG,GAAkB,CAEzB,MAAMC,EAAW,KAAK,IAAIF,EADZ,IAAI,KAC8B,CAAC,EACjDlB,EAAS,MAAQ,KAAK,MAAMoB,GAAY,IAAO,GAAK,GAAK,GAAG,EAC5D,MAAMC,EAAqBD,GAAY,IAAO,GAAK,GAAK,IACxDlB,EAAU,MAAQ,KAAK,MAAMmB,GAAsB,IAAO,GAAK,GAAG,EAClE,MAAMC,EAAsBD,GAAsB,IAAO,GAAK,IAC9DlB,EAAY,MAAQ,KAAK,MAAMmB,GAAuB,IAAO,GAAG,EAChE,MAAMC,EAAwBD,GAAuB,IAAO,IAC5DlB,EAAY,MAAQ,KAAK,MAAMmB,EAAwB,GAAI,CAC7D,CAEA,MAAMC,EAAUvB,EAAI,CAAC,EACfwB,EAAeC,EAAe,cAAc,EAC5CC,EAASD,EAAe,QAAQ,EACtCE,EAAMJ,EAAUK,GAAQ,CAClBA,GAAOC,EAAU,OAAS,IAC5BL,EAAa,MAAM,MAAM,WAAa,UAGpCI,GAAOC,EAAU,OACnBH,EAAO,MAAM,UAAY,qCACpBA,EAAO,MAAM,UAAYG,EAAUD,CAAG,CAC/C,CAAC,EAED,MAAMC,EAAY,CAChB,gCACA,gCACA,0CACA,gCACA,qDACA,kEACA,2CACA,sDACF,EAEA,OAAAC,EAAU,IAAM,CACdZ,EAAiB,EACjB,MAAMa,EAAW,YAAYb,EAAiB,GAAI,EAClDc,EAAY,IAAM,cAAcD,CAAQ,CAAC,CAC3C,CAAC"}