From 0c0ef7fe990c6ae3895826466b1b232640e400dc Mon Sep 17 00:00:00 2001 From: Katja Lutz Date: Wed, 22 Jun 2022 21:50:45 +0200 Subject: [PATCH] feat: implement WelcomeModal component --- src/components/WelcomeModal.tsx | 325 ++++++++++++++++++++++++++++++++ 1 file changed, 325 insertions(+) create mode 100644 src/components/WelcomeModal.tsx diff --git a/src/components/WelcomeModal.tsx b/src/components/WelcomeModal.tsx new file mode 100644 index 0000000..e0394b8 --- /dev/null +++ b/src/components/WelcomeModal.tsx @@ -0,0 +1,325 @@ +import { + Component, + createEffect, + createMemo, + onCleanup, + onMount, + useContext, +} from "solid-js"; +import LufraiLogo from "~icons/custom/lufrai-logo"; +import AppIcon from "~icons/custom/icon"; +import ExternalLinkIcon from "~icons/carbon/launch"; +import LaunchIcon from "~icons/carbon/edit"; +import Modal, { ModalCloseButton } from "./Modal"; +import { LocalStoreContext } from "~/stores"; +import createAccordion from "./Accordion"; +import typer from "typer-js"; +import "typer-js/dist/typer.min.css"; +import { shuffle } from "~/util"; + +const WelcomeModal: Component = (props) => { + const [localState, setLocalState, localStateMounted] = + useContext(LocalStoreContext)!; + const [AcordionItem] = createAccordion(); + let subtitleEl: HTMLSpanElement = undefined!; + const isOpen = createMemo(() => { + return localStateMounted() && localState.showWelcome; + }); + + onMount(function () { + let adjectives = [ + "schweizerischen", + "anständigen", + "umfassenden", + "erfrischenden", + "erfreulichen", + "sauberen", + "übersichtlichen", + ]; + let nouns = ["Rechnung", "Auftragsbestätigung", "Offerte"]; + + let combinations: [string, string][] = []; + for (const adjective of adjectives) { + for (const noun of nouns) { + combinations.push([adjective, noun]); + } + } + const firstCombination = combinations.splice(0, 1)[0]; + combinations = shuffle(combinations); + combinations.unshift(firstCombination!); + + let typerInstance = typer(subtitleEl, { min: 60, max: 160 }); + + let lastAdjective = ""; + let lastNoun = ""; + for (const [adjective, noun] of combinations) { + const first = lastAdjective === ""; + + if (lastAdjective === adjective) { + typerInstance.back(lastNoun.length, 80).continue(noun); + } else { + const method = first ? "line" : "continue"; + typerInstance + .back("all", 65) + [method]( + `${adjective} ${noun}`, + first ? { min: 60, max: 70 } : undefined + ); + } + + typerInstance.pause(first ? 4181 : 6765); + + lastNoun = noun; + lastAdjective = adjective; + } + + typerInstance.back("all", 50).repeat(Infinity); + + let halted = false; + + createEffect(function () { + if (!isOpen()) { + halted = typerInstance.halt() === undefined; + } else { + try { + // typer-js has some weird logic how it handles halt / resume. Essentially if halt wasn't executed before of resume, resume breaks completely + halted && typerInstance.resume(); + } catch (err) { + console.log(err); + } + halted = false; + } + }); + + onCleanup(function () { + typerInstance.kill(); + }); + }); + + return ( + + setLocalState("showWelcome", false)} /> +
+
+ +
+ +
+
+

Einleitung

+

+ Sit aute excepteur labore eu non eiusmod nulla irure irure + officia. Veniam pariatur dolore fugiat mollit cillum. Et id + occaecat occaecat non duis. Veniam excepteur do labore sit nulla + veniam non ad nisi qui proident adipisicing esse adipisicing ea. + Officia do esse magna dolore irure voluptate pariatur consequat + esse voluptate. Incididunt incididunt mollit nostrud laborum + cupidatat proident tempor reprehenderit officia exercitation + labore. Commodo minim fugiat mollit commodo. Sit anim est aute. + Ullamco non deserunt deserunt aliquip labore sunt esse Lorem aute + in nisi mollit irure deserunt labore. Lorem veniam in consequat + ipsum consequat sint consectetur ex anim magna. +

+
+ +
+

+ Wieso ist Räppli komplett{" "} + kostenlos? +

+

+ Consectetur id magna labore commodo exercitation laboris est + laboris consectetur irure minim. Officia anim tempor adipisicing + irure labore tempor reprehenderit culpa consequat ea esse + exercitation. Consectetur labore velit nulla excepteur eiusmod sit + fugiat do proident. Ex non consectetur mollit dolor dolore Lorem + ut et incididunt pariatur sunt deserunt tempor magna ullamco. +

+
+ +
+

+ Was ist Lufrai? +

+

+ Quis occaecat pariatur laborum do ad esse. Mollit excepteur duis + nulla proident nostrud tempor ad ullamco. Amet id magna aute esse + tempor incididunt pariatur veniam ipsum qui. Sunt laboris in + laborum reprehenderit qui sint consectetur nostrud excepteur + proident proident laboris qui dolor ea. Reprehenderit tempor elit + consequat dolore quis ad voluptate consequat. Eiusmod ad quis + dolore dolore ea ipsum commodo eu aliquip veniam. Consequat + pariatur est do sint nisi duis enim tempor occaecat elit non. +

+
+ +
+

Das Projekt unterstützen

+

+ Irure laboris quis consequat enim tempor dolor. Esse velit + occaecat dolore aute cillum pariatur reprehenderit irure duis eu + nulla pariatur fugiat consectetur ipsum. Commodo ad aliquip nulla + non incididunt. Officia veniam cillum cillum. Velit ex aliquip + mollit deserunt nostrud id amet voluptate ea duis cupidatat + officia culpa consequat enim. Voluptate anim fugiat anim et elit + aute cupidatat. Duis aliquip laboris adipisicing dolore elit + voluptate proident occaecat excepteur culpa exercitation velit. + Veniam esse quis voluptate aliquip culpa. Aute cupidatat sunt amet + ad fugiat id elit. Officia proident ea deserunt quis anim elit + cupidatat pariatur. Aliqua dolore ad eiusmod qui eu ea enim qui + enim incididunt aute irure tempor fugiat sunt. Consequat magna + culpa Lorem nostrud cillum eu cillum adipisicing eu aute duis + excepteur. In anim mollit amet elit ex. +

+
+ +
+

Häufig gestellte Fragen

+
+ + test + + + + test + + + + Ich habe einen Anpassungswunsch! +
+ Kann die App bitte gratis angepasst werden? +
+ } + > + test + + + + test + + + test + + + test + + + + Können Fliesstexte formatiert werden? +
+ Was ist Markdown? +
+ } + > + test + +
+ + + +
+
+ + setLocalState("showLufraiWatermark", evt.currentTarget.checked) + } + /> + +
+ +
+ + ); +}; + +export default WelcomeModal;