From 3af11fb7a591c785623c52d49d8a37bc43900e77 Mon Sep 17 00:00:00 2001
From: xsieklov <xsieklov@fi.muni.cz>
Date: Mon, 4 Sep 2023 18:27:16 +0200
Subject: [PATCH] feat: translate of everything, useAnimate, useTranslate,
opening texts + continue animation of opening
---
public/lit/texts.tsx | 54 ++-
src/assets/backgrounds/chapters.svg | 548 ++++++++++++++++++++++++++++
src/assets/icons/levels.svg | 244 -------------
src/components/Chapters.tsx | 38 +-
src/components/HomePage.tsx | 17 +-
src/components/Intro.tsx | 66 +---
src/components/Navbar.tsx | 34 +-
src/components/Opening.tsx | 67 +---
src/hooks/useAnimate.tsx | 65 ++++
src/hooks/useTranslate.tsx | 8 +
src/index.css | 2 +-
tailwind.config.js | 6 +-
12 files changed, 758 insertions(+), 391 deletions(-)
create mode 100644 src/assets/backgrounds/chapters.svg
delete mode 100644 src/assets/icons/levels.svg
create mode 100644 src/hooks/useAnimate.tsx
create mode 100644 src/hooks/useTranslate.tsx
diff --git a/public/lit/texts.tsx b/public/lit/texts.tsx
index 5ed1ede..fa1f584 100644
--- a/public/lit/texts.tsx
+++ b/public/lit/texts.tsx
@@ -1,9 +1,4 @@
-interface IntroTexts {
- EN: string;
- SK: string;
-}
-
-export const intro: IntroTexts[] = [
+export const intro = [
{
EN: 'Hey there, super awesome friends!',
SK: 'Ahojte, super skvelĂ priatelia!',
@@ -53,7 +48,7 @@ export const opening = [
},
{
EN: "You probably don't even know what insulin is. I'll explain.",
- SK: "Asi pravdepodobne nevieš, ÄŤo je to inzulĂn. VysvetlĂm ti to.",
+ SK: "Asi pravdepodobne netušĂš, ÄŤo je inzulĂn. VysvetlĂm ti to.",
},
{
EN: "When we eat or drink, our body breaks down the sugar molecules and releases parts of it called glucose into our blood.",
@@ -75,4 +70,49 @@ export const opening = [
EN: "This is where the insulin comes into play!",
SK: "Preto v tomto bode prichádza do hry inzulĂn!",
},
+ {
+ EN: "Insulin allows glucose to get into our cells where it can be used.",
+ SK: "VÄŹaka inzuĂnu sa glukĂłza dostane do vnĂştra bunky, kde sa vyuĹľije.",
+ },
+ {
+ EN: "If that didn't happen, many unpleasant symptoms would start to show.",
+ SK: "Keby sa tak nedialo, zaÄŤali by sa prejavovaĹĄ rĂ´zne symptĂłmy cukrovky.",
+ },
+ {
+ EN: "But we will discuss those in later chapters.",
+ SK: "Ale o tom si povieme v neskoršĂch kapitolách.",
+ },
+ {
+ EN: "All you need to understand for now is what glucose, insulin and diabetes is.",
+ SK: "ZatiaÄľ potrebuješ rozumieĹĄ len tomu, ÄŤo je to glukĂłza, inzulĂn a cukrovka.",
+ },
+ {
+ EN: "Let's see if you remembered something! ",
+ SK: "Poďme teraz spolu zistiť, čo si pamätáš!",
+ },
]
+
+export const diabetesTheorem =
+ {
+ EN: "Diabetes is a disease in which the body is unable to produce a sufficient amount of insulin.\n",
+ SK: "Cukrovka je ochorenie, pri ktorom telo nedokáže produkovaĹĄ dostatoÄŤnĂ© mnoĹľstvo inzulĂnu."
+ }
+
+export const startButton =
+ {
+ EN: "Start",
+ SK: "ZaÄŤaĹĄ"
+ }
+
+export const nextButton =
+ {
+ EN: "Next",
+ SK: "ÄŽalej"
+ }
+
+export const toChapter =
+ {
+ EN: "To Chapter ",
+ SK: "Na kapitolu "
+ }
+
diff --git a/src/assets/backgrounds/chapters.svg b/src/assets/backgrounds/chapters.svg
new file mode 100644
index 0000000..c36c072
--- /dev/null
+++ b/src/assets/backgrounds/chapters.svg
@@ -0,0 +1,548 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ width="1921.594mm"
+ height="832.53101mm"
+ viewBox="0 0 1921.594 832.53101"
+ version="1.1"
+ id="svg5"
+ inkscape:export-filename="girly.svg"
+ inkscape:export-xdpi="96"
+ inkscape:export-ydpi="96"
+ inkscape:version="1.2.2 (732a01da63, 2022-12-09)"
+ sodipodi:docname="prototype2.svg"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:svg="http://www.w3.org/2000/svg">
+ <sodipodi:namedview
+ id="namedview7"
+ pagecolor="#ffffff"
+ bordercolor="#000000"
+ borderopacity="0.25"
+ inkscape:showpageshadow="2"
+ inkscape:pageopacity="0.0"
+ inkscape:pagecheckerboard="0"
+ inkscape:deskcolor="#d1d1d1"
+ inkscape:document-units="mm"
+ showgrid="false"
+ inkscape:zoom="0.125"
+ inkscape:cx="6248"
+ inkscape:cy="2632"
+ inkscape:window-width="1920"
+ inkscape:window-height="1009"
+ inkscape:window-x="-8"
+ inkscape:window-y="-8"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="layer1"
+ showguides="true" />
+ <defs
+ id="defs2" />
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1"
+ transform="translate(-38.269704,-1975.5681)">
+ <g
+ id="g35056"
+ inkscape:label="CHAPTERS"
+ inkscape:export-filename="insu-learn\src\assets\icons\chapters.svg"
+ inkscape:export-xdpi="96"
+ inkscape:export-ydpi="96"
+ transform="matrix(1.0000035,0,0,0.98992506,-0.00341349,19.906897)">
+ <rect
+ style="fill:#aaccff;stroke:#000000;stroke-width:1.29958"
+ id="rect1580-4"
+ width="1920.2877"
+ height="839.70441"
+ x="38.922775"
+ y="1976.2146"
+ ry="1.8058158" />
+ <rect
+ style="fill:#80b3ff;stroke:none;stroke-width:4.96031"
+ id="rect33996-6"
+ width="50.667835"
+ height="75.649628"
+ x="-1431.3712"
+ y="1832.8981"
+ ry="24.574085"
+ transform="matrix(0.81833259,-0.57474496,0.71519473,0.69892524,0,0)" />
+ <rect
+ style="fill:#80b3ff;stroke:none;stroke-width:4.96031"
+ id="rect33996-7"
+ width="50.667835"
+ height="75.649628"
+ x="-196.83994"
+ y="2332.3101"
+ ry="24.574085"
+ transform="matrix(0.99827115,-0.0587768,0.2410241,0.97051913,0,0)" />
+ <rect
+ style="fill:#80b3ff;stroke:none;stroke-width:4.96031"
+ id="rect33996-1"
+ width="50.667835"
+ height="75.649628"
+ x="1478.0034"
+ y="1631.5844"
+ ry="24.574085"
+ transform="matrix(0.7809617,0.62457892,-0.47061002,0.88234132,0,0)" />
+ <rect
+ style="fill:#80b3ff;stroke:none;stroke-width:4.96031"
+ id="rect33996-3"
+ width="50.667835"
+ height="75.649628"
+ x="1531.7756"
+ y="1690.3934"
+ ry="24.574085"
+ transform="matrix(0.76417383,0.64501035,-0.49377591,0.86958919,0,0)" />
+ <rect
+ style="fill:#80b3ff;stroke:none;stroke-width:4.96031"
+ id="rect33996-9"
+ width="50.667835"
+ height="75.649628"
+ x="-2180.2642"
+ y="2116.1729"
+ ry="24.574085"
+ transform="matrix(0.67897428,-0.73416206,0.84632191,0.53267178,0,0)" />
+ <rect
+ style="fill:#80b3ff;stroke:none;stroke-width:4.96031"
+ id="rect33996-10"
+ width="50.667835"
+ height="75.649628"
+ x="-2384.6013"
+ y="1968.8939"
+ ry="24.574085"
+ transform="matrix(0.57962102,-0.81488617,0.90743673,0.42018875,0,0)" />
+ <rect
+ style="fill:#80b3ff;stroke:none;stroke-width:4.96031"
+ id="rect33996-10-7"
+ width="50.667835"
+ height="75.649628"
+ x="-2910.0925"
+ y="422.76633"
+ ry="24.574085"
+ transform="matrix(-0.07724159,-0.99701241,0.96589232,-0.25894407,0,0)" />
+ <rect
+ style="fill:#80b3ff;stroke:none;stroke-width:4.96031"
+ id="rect33996-63"
+ width="50.667835"
+ height="75.649628"
+ x="-2843.5171"
+ y="1047.2593"
+ ry="24.574085"
+ transform="matrix(0.18668404,-0.98242001,0.99999496,0.00317553,0,0)" />
+ <rect
+ style="fill:#80b3ff;stroke:none;stroke-width:4.96031"
+ id="rect33996-79"
+ width="50.667835"
+ height="75.649628"
+ x="-561.73871"
+ y="-2569.0688"
+ ry="24.574085"
+ transform="matrix(-0.99712495,-0.07577488,-0.10854834,-0.99409117,0,0)" />
+ <rect
+ style="fill:#80b3ff;stroke:none;stroke-width:4.96031"
+ id="rect33996-5"
+ width="50.667835"
+ height="75.649628"
+ x="1025.0618"
+ y="-2599.8848"
+ ry="24.574085"
+ transform="matrix(-0.86606121,0.49993798,-0.6504201,-0.75957468,0,0)" />
+ <rect
+ style="fill:#80b3ff;stroke:none;stroke-width:4.96031"
+ id="rect33996-75"
+ width="50.667835"
+ height="75.649628"
+ x="1334.9751"
+ y="1647.504"
+ ry="24.574085"
+ transform="matrix(0.86728418,0.49781337,-0.33015283,0.94392749,0,0)" />
+ <rect
+ style="fill:#80b3ff;stroke:none;stroke-width:4.96031"
+ id="rect33996-75-7"
+ width="50.667835"
+ height="75.649628"
+ x="1875.0415"
+ y="899.89191"
+ ry="24.574085"
+ transform="matrix(0.65885167,0.75227288,-0.6185491,0.78574615,0,0)" />
+ <rect
+ style="fill:#80b3ff;stroke:none;stroke-width:4.96031"
+ id="rect33996-36"
+ width="50.667835"
+ height="75.649628"
+ x="-2287.7422"
+ y="616.729"
+ ry="24.574085"
+ transform="matrix(-0.05732342,-0.99835566,0.97086899,-0.23961093,0,0)" />
+ <rect
+ style="fill:#80b3ff;stroke:none;stroke-width:4.96031"
+ id="rect33996-36-4"
+ width="50.667835"
+ height="75.649628"
+ x="-1642.4863"
+ y="1891.9688"
+ ry="24.574085"
+ transform="matrix(0.55154378,-0.83414595,0.92121528,0.38905321,0,0)" />
+ <rect
+ style="fill:#80b3ff;stroke:none;stroke-width:4.96031"
+ id="rect33996-77"
+ width="50.667835"
+ height="75.649628"
+ x="-294.28336"
+ y="2586.9812"
+ ry="24.574085"
+ transform="matrix(0.93796219,-0.34673756,0.51302128,0.85837589,0,0)" />
+ <rect
+ style="fill:#80b3ff;stroke:none;stroke-width:4.96031"
+ id="rect33996-4"
+ width="50.667835"
+ height="75.649628"
+ x="1162.5551"
+ y="2173.0376"
+ ry="24.574085"
+ transform="matrix(0.97964407,0.20074238,-0.01750454,0.99984678,0,0)" />
+ <rect
+ style="fill:#80b3ff;stroke:none;stroke-width:4.96031"
+ id="rect33996-16"
+ width="50.667835"
+ height="75.649628"
+ x="2104.5754"
+ y="1391.8398"
+ ry="24.574085"
+ transform="matrix(0.8050314,0.5932322,-0.43537762,0.90024793,0,0)" />
+ <rect
+ style="fill:#80b3ff;stroke:none;stroke-width:4.96031"
+ id="rect33996-71"
+ width="50.667835"
+ height="75.649628"
+ x="2545.4956"
+ y="-908.99744"
+ ry="24.574085"
+ transform="matrix(0.2665004,0.96383481,-0.89853749,0.43889678,0,0)" />
+ <rect
+ style="fill:#80b3ff;stroke:none;stroke-width:4.96031"
+ id="rect33996-94"
+ width="50.667835"
+ height="75.649628"
+ x="1892.5319"
+ y="1385.8184"
+ ry="24.574085"
+ transform="matrix(0.90969338,0.41528058,-0.24123766,0.97046607,0,0)" />
+ <rect
+ style="fill:#80b3ff;stroke:none;stroke-width:4.96031"
+ id="rect33996-94-5"
+ width="50.667835"
+ height="75.649628"
+ x="443.7261"
+ y="2896.1069"
+ ry="24.574085"
+ transform="matrix(0.97029634,-0.24191943,0.4159196,0.90940139,0,0)"
+ inkscape:transform-center-x="-7.4735432"
+ inkscape:transform-center-y="9.3549007" />
+ <rect
+ style="fill:#80b3ff;stroke:none;stroke-width:4.96031"
+ id="rect33996-8"
+ width="50.667835"
+ height="75.649628"
+ x="-3005.6848"
+ y="472.06958"
+ ry="24.574085"
+ transform="matrix(-0.2605761,-0.96545331,0.90121597,-0.43337025,0,0)" />
+ <rect
+ style="fill:#80b3ff;stroke:none;stroke-width:4.96031"
+ id="rect33996-84"
+ width="50.667835"
+ height="75.649628"
+ x="-3007.7664"
+ y="507.11258"
+ ry="24.574085"
+ transform="matrix(-0.28524618,-0.95845429,0.88980735,-0.45633636,0,0)" />
+ <rect
+ style="fill:#80b3ff;stroke:none;stroke-width:4.96031"
+ id="rect33996-95"
+ width="50.667835"
+ height="75.649628"
+ x="-2457.7051"
+ y="2174.1421"
+ ry="24.574085"
+ transform="matrix(0.3091404,-0.95101641,0.99160348,0.12931564,0,0)" />
+ <rect
+ style="fill:#80b3ff;stroke:none;stroke-width:4.96031"
+ id="rect33996-31"
+ width="50.667835"
+ height="75.649628"
+ x="-671.63129"
+ y="2871.0374"
+ ry="24.574085"
+ transform="matrix(0.81833259,-0.57474496,0.71519473,0.69892524,0,0)" />
+ <rect
+ style="fill:#80b3ff;stroke:none;stroke-width:4.96031"
+ id="rect33996-49"
+ width="50.667835"
+ height="75.649628"
+ x="-1880.7231"
+ y="2746.9656"
+ ry="24.574085"
+ transform="matrix(0.54921373,-0.83568192,0.92229745,0.38648081,0,0)" />
+ <rect
+ style="fill:#80b3ff;stroke:none;stroke-width:4.96031"
+ id="rect33996-72"
+ width="50.667835"
+ height="75.649628"
+ x="-666.66241"
+ y="2965.9771"
+ ry="24.574085"
+ transform="matrix(0.81833259,-0.57474496,0.71519473,0.69892524,0,0)" />
+ <rect
+ style="fill:#80b3ff;stroke:none;stroke-width:4.96031"
+ id="rect33996-798"
+ width="50.667835"
+ height="75.649628"
+ x="-1025.3118"
+ y="2565.7197"
+ ry="24.574085"
+ transform="matrix(0.65968338,-0.75154363,0.85986703,0.51051806,0,0)" />
+ <rect
+ style="fill:#80b3ff;stroke:none;stroke-width:4.96031"
+ id="rect33996-0"
+ width="50.667835"
+ height="75.649628"
+ x="-379.21136"
+ y="2941.9084"
+ ry="24.574085"
+ transform="matrix(0.81833259,-0.57474496,0.71519473,0.69892524,0,0)" />
+ <rect
+ style="fill:#80b3ff;stroke:none;stroke-width:4.96031"
+ id="rect33996-05"
+ width="50.667835"
+ height="75.649628"
+ x="-380.4025"
+ y="3043.8967"
+ ry="24.574085"
+ transform="matrix(0.81833259,-0.57474496,0.71519473,0.69892524,0,0)" />
+ <rect
+ style="fill:#80b3ff;stroke:none;stroke-width:4.96031"
+ id="rect33996"
+ width="50.667835"
+ height="75.649628"
+ x="-1434.8351"
+ y="1739.1959"
+ ry="24.574085"
+ transform="matrix(0.81833259,-0.57474496,0.71519473,0.69892524,0,0)" />
+ <a
+ id="a39681"
+ xlink:href="http://localhost:5173/opening">
+ <g
+ id="chpt1"
+ inkscape:label="chpt1">
+ <ellipse
+ style="fill:#0044aa;stroke:none;stroke-width:21.4606"
+ id="path34420"
+ cx="314.32501"
+ cy="2196.0417"
+ rx="94.191666"
+ ry="89.958336" />
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:117.951px;font-family:'Bauhaus 93';-inkscape-font-specification:'Bauhaus 93, ';fill:#f7faff;fill-opacity:1;stroke:none;stroke-width:49.8288"
+ x="241.49048"
+ y="2545.0378"
+ id="text34914"
+ transform="scale(1.1429339,0.87494122)"><tspan
+ sodipodi:role="line"
+ id="tspan34912"
+ style="font-size:117.951px;stroke-width:49.8288"
+ x="241.49048"
+ y="2545.0378">1</tspan></text>
+ </g>
+ </a>
+ <g
+ id="g37326"
+ inkscape:label="chpt2">
+ <ellipse
+ style="fill:#0044aa;stroke:none;stroke-width:21.4606"
+ id="path34420-0"
+ cx="234.95001"
+ cy="2643.7166"
+ rx="94.191666"
+ ry="89.958336" />
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:116.676px;font-family:'Bauhaus 93';-inkscape-font-specification:'Bauhaus 93, ';fill:#f7faff;fill-opacity:1;stroke:none;stroke-width:49.29"
+ x="200.23006"
+ y="2669.0283"
+ id="text34968"
+ transform="scale(0.99366294,1.0063775)"><tspan
+ sodipodi:role="line"
+ id="tspan34966"
+ style="stroke-width:49.29"
+ x="200.23006"
+ y="2669.0283">2</tspan></text>
+ </g>
+ <g
+ id="g37331"
+ inkscape:label="chpt3">
+ <ellipse
+ style="fill:#0044aa;stroke:none;stroke-width:21.4606"
+ id="path34420-02"
+ cx="817.03339"
+ cy="2709.3335"
+ rx="94.191666"
+ ry="89.958336" />
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:129.407px;font-family:'Bauhaus 93';-inkscape-font-specification:'Bauhaus 93, ';fill:#f7faff;fill-opacity:1;stroke:none;stroke-width:54.6684"
+ x="731.18695"
+ y="2942.96"
+ id="text34972"
+ transform="scale(1.0702498,0.9343613)"><tspan
+ sodipodi:role="line"
+ id="tspan34970"
+ style="stroke-width:54.6684"
+ x="731.18695"
+ y="2942.96">3</tspan></text>
+ </g>
+ <g
+ id="g37336"
+ inkscape:label="chpt4">
+ <ellipse
+ style="fill:#0044aa;stroke:none;stroke-width:21.4606"
+ id="path34420-9"
+ cx="611.71667"
+ cy="2408.7668"
+ rx="94.191666"
+ ry="89.958336" />
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:133.985px;font-family:'Bauhaus 93';-inkscape-font-specification:'Bauhaus 93, ';fill:#f7faff;fill-opacity:1;stroke:none;stroke-width:56.6025"
+ x="554.00641"
+ y="2495.2522"
+ id="text34976"
+ transform="scale(1.0178015,0.98250987)"><tspan
+ sodipodi:role="line"
+ id="tspan34974"
+ style="stroke-width:56.6025"
+ x="554.00641"
+ y="2495.2522">4</tspan></text>
+ </g>
+ <g
+ id="g37341"
+ inkscape:label="chpt5">
+ <ellipse
+ style="fill:#0044aa;stroke:none;stroke-width:21.4606"
+ id="path34420-8"
+ cx="982.13336"
+ cy="2222.5"
+ rx="94.191666"
+ ry="89.958336" />
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:136.771px;font-family:'Bauhaus 93';-inkscape-font-specification:'Bauhaus 93, ';fill:#f7faff;fill-opacity:1;stroke:none;stroke-width:57.7794"
+ x="896.5127"
+ y="2387.0181"
+ id="text34980"
+ transform="scale(1.0547038,0.9481335)"><tspan
+ sodipodi:role="line"
+ id="tspan34978"
+ style="stroke-width:57.7794"
+ x="896.5127"
+ y="2387.0181">5</tspan></text>
+ </g>
+ <g
+ id="g37346"
+ inkscape:label="chpt6">
+ <ellipse
+ style="fill:#0044aa;stroke:none;stroke-width:21.4606"
+ id="path34420-3"
+ cx="1098.5499"
+ cy="2713.5667"
+ rx="94.191666"
+ ry="89.958336" />
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:138.593px;font-family:'Bauhaus 93';-inkscape-font-specification:'Bauhaus 93, ';fill:#f7faff;fill-opacity:1;stroke:none;stroke-width:58.5488"
+ x="1056.5385"
+ y="2769.1133"
+ id="text34984"
+ transform="scale(1.0033095,0.99670141)"><tspan
+ sodipodi:role="line"
+ id="tspan34982"
+ style="stroke-width:58.5488"
+ x="1056.5385"
+ y="2769.1133">6</tspan></text>
+ </g>
+ <g
+ id="g37351"
+ inkscape:label="chpt7">
+ <ellipse
+ style="fill:#0044aa;stroke:none;stroke-width:21.4606"
+ id="path34420-2"
+ cx="1697.5667"
+ cy="2700.8667"
+ rx="94.191666"
+ ry="89.958336" />
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:139.259px;font-family:'Bauhaus 93';-inkscape-font-specification:'Bauhaus 93, ';fill:#f7faff;fill-opacity:1;stroke:none;stroke-width:58.8305"
+ x="1567.8684"
+ y="2900.6326"
+ id="text34988"
+ transform="scale(1.0578638,0.94530126)"><tspan
+ sodipodi:role="line"
+ id="tspan34986"
+ style="stroke-width:58.8305"
+ x="1567.8684"
+ y="2900.6326">7</tspan></text>
+ </g>
+ <g
+ id="g37356"
+ inkscape:label="chpt8">
+ <ellipse
+ style="fill:#0044aa;stroke:none;stroke-width:21.4606"
+ id="path34420-21"
+ cx="1416.0499"
+ cy="2317.7498"
+ rx="94.191666"
+ ry="89.958336" />
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:138.937px;font-family:'Bauhaus 93';-inkscape-font-specification:'Bauhaus 93, ';fill:#f7faff;fill-opacity:1;stroke:none;stroke-width:58.6941"
+ x="1372.9524"
+ y="2369.271"
+ id="text34992"
+ transform="scale(1.0031428,0.99686703)"><tspan
+ sodipodi:role="line"
+ id="tspan34990"
+ style="stroke-width:58.6941"
+ x="1372.9524"
+ y="2369.271">8</tspan></text>
+ </g>
+ <g
+ id="g37361"
+ inkscape:label="chpt9">
+ <ellipse
+ style="fill:#0044aa;stroke:none;stroke-width:21.4606"
+ id="path34420-21-7"
+ cx="1714.5"
+ cy="2167.4666"
+ rx="94.191666"
+ ry="89.958336" />
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:132.455px;font-family:'Bauhaus 93';-inkscape-font-specification:'Bauhaus 93, ';fill:#f7faff;fill-opacity:1;stroke:none;stroke-width:55.9558"
+ x="1670.8499"
+ y="2223.9648"
+ id="text34996"
+ transform="scale(1.0053854,0.99464346)"><tspan
+ sodipodi:role="line"
+ id="tspan34994"
+ style="stroke-width:55.9558"
+ x="1670.8499"
+ y="2223.9648">9</tspan></text>
+ </g>
+ </g>
+ </g>
+</svg>
diff --git a/src/assets/icons/levels.svg b/src/assets/icons/levels.svg
deleted file mode 100644
index 0361f37..0000000
--- a/src/assets/icons/levels.svg
+++ /dev/null
@@ -1,244 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
- width="170.07379mm"
- height="218.53604mm"
- viewBox="0 0 170.07379 218.53604"
- version="1.1"
- id="svg5"
- inkscape:export-filename="girly.svg"
- inkscape:export-xdpi="96"
- inkscape:export-ydpi="96"
- inkscape:version="1.2.2 (732a01da63, 2022-12-09)"
- sodipodi:docname="prototype2.svg"
- xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
- xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
- xmlns="http://www.w3.org/2000/svg"
- xmlns:svg="http://www.w3.org/2000/svg">
- <sodipodi:namedview
- id="namedview7"
- pagecolor="#ffffff"
- bordercolor="#000000"
- borderopacity="0.25"
- inkscape:showpageshadow="2"
- inkscape:pageopacity="0.0"
- inkscape:pagecheckerboard="0"
- inkscape:deskcolor="#d1d1d1"
- inkscape:document-units="mm"
- showgrid="false"
- inkscape:zoom="1.4770342"
- inkscape:cx="402.49575"
- inkscape:cy="2086.6138"
- inkscape:window-width="1680"
- inkscape:window-height="979"
- inkscape:window-x="131"
- inkscape:window-y="-8"
- inkscape:window-maximized="1"
- inkscape:current-layer="layer1"
- showguides="true" />
- <defs
- id="defs2" />
- <g
- inkscape:label="Layer 1"
- inkscape:groupmode="layer"
- id="layer1"
- transform="translate(-248.95377,-350.38338)">
- <g
- id="g14340"
- inkscape:label="levels"
- inkscape:export-filename="girly-svgs\levels.svg"
- inkscape:export-xdpi="96"
- inkscape:export-ydpi="96"
- transform="matrix(2.0409197,0,0,1.8591525,85.935815,-559.42879)">
- <rect
- style="opacity:1;fill:#165016;stroke:#000000;stroke-width:0.394057"
- id="rect12950"
- width="82.937874"
- height="117.15199"
- x="80.071777"
- y="489.56635"
- ry="5.3199334" />
- <circle
- style="fill:#c6e9af;stroke:none;stroke-width:0.394057"
- id="path13959-8"
- cx="132.49168"
- cy="552.82977"
- r="4.3382792" />
- <circle
- style="fill:#c6e9af;stroke:none;stroke-width:0.394057"
- id="path13959-0"
- cx="111.14861"
- cy="578.85944"
- r="4.3382792" />
- <rect
- style="opacity:1;fill:#a05a2c;stroke:none;stroke-width:0.286199"
- id="rect13673"
- width="2.2391434"
- height="5.9113393"
- x="-119.98187"
- y="495.00076"
- ry="0.5699929"
- transform="rotate(-28.468097)" />
- <rect
- style="fill:#a05a2c;stroke:none;stroke-width:0.286199"
- id="rect13673-7"
- width="2.2391434"
- height="5.9113393"
- x="-359.16855"
- y="374.57693"
- ry="0.5699929"
- transform="matrix(-0.87908266,-0.47666935,-0.47666935,0.87908266,0,0)" />
- <rect
- style="fill:#a05a2c;stroke:none;stroke-width:0.286199"
- id="rect13673-9"
- width="2.2391434"
- height="5.9113393"
- x="-462.29947"
- y="249.64458"
- ry="0.5699929"
- transform="matrix(-0.68109374,-0.73219623,-0.73219623,0.68109374,0,0)" />
- <rect
- style="fill:#a05a2c;stroke:none;stroke-width:0.286199"
- id="rect13673-1"
- width="2.2391434"
- height="5.9113393"
- x="307.24805"
- y="434.9137"
- ry="0.5699929"
- transform="rotate(22.578338)" />
- <rect
- style="fill:#a05a2c;stroke:none;stroke-width:0.286199"
- id="rect13673-98"
- width="2.2391434"
- height="5.9113393"
- x="-27.043148"
- y="540.6319"
- ry="0.5699929"
- transform="rotate(-15.055625)" />
- <rect
- style="fill:#a05a2c;stroke:none;stroke-width:0.286199"
- id="rect13673-4"
- width="2.2391434"
- height="5.9113393"
- x="-353.07779"
- y="421.99036"
- ry="0.5699929"
- transform="rotate(-52.367582)" />
- <rect
- style="fill:#a05a2c;stroke:none;stroke-width:0.286199"
- id="rect13673-6"
- width="2.2391434"
- height="5.9113393"
- x="-148.02373"
- y="536.85138"
- ry="0.5699929"
- transform="rotate(-28.468097)" />
- <rect
- style="fill:#a05a2c;stroke:none;stroke-width:0.286199"
- id="rect13673-0"
- width="2.2391434"
- height="5.9113393"
- x="248.75851"
- y="517.80157"
- ry="0.5699929"
- transform="rotate(12.411674)" />
- <rect
- style="fill:#a05a2c;stroke:none;stroke-width:0.286199"
- id="rect13673-5"
- width="2.2391434"
- height="5.9113393"
- x="-449.37079"
- y="371.85568"
- ry="0.5699929"
- transform="matrix(-0.79364136,-0.6083859,-0.6083859,0.79364136,0,0)" />
- <rect
- style="fill:#a05a2c;stroke:none;stroke-width:0.286199"
- id="rect13673-47"
- width="2.2391434"
- height="5.9113393"
- x="572.15906"
- y="128.53099"
- ry="0.5699929"
- transform="rotate(65.236598)" />
- <rect
- style="fill:#a05a2c;stroke:none;stroke-width:0.286199"
- id="rect13673-50"
- width="2.2391434"
- height="5.9113393"
- x="-523.01886"
- y="276.36606"
- ry="0.5699929"
- transform="matrix(-0.61687714,-0.78705946,-0.78705946,0.61687714,0,0)" />
- <rect
- style="fill:#a05a2c;stroke:none;stroke-width:0.286199"
- id="rect13673-8"
- width="2.2391434"
- height="5.9113393"
- x="-215.08092"
- y="555.15173"
- ry="0.5699929"
- transform="matrix(-0.97926527,-0.20258216,-0.20258216,0.97926527,0,0)" />
- <rect
- style="fill:#a05a2c;stroke:none;stroke-width:0.286199"
- id="rect13673-3"
- width="2.2391434"
- height="5.9113393"
- x="-318.82529"
- y="513.57349"
- ry="0.5699929"
- transform="rotate(-40.979173)" />
- <rect
- style="fill:#a05a2c;stroke:none;stroke-width:0.286199"
- id="rect13673-59"
- width="2.2391434"
- height="5.9113393"
- x="-448.18402"
- y="415.82974"
- ry="0.5699929"
- transform="rotate(-56.797095)" />
- <circle
- style="opacity:1;fill:#c6e9af;stroke:none;stroke-width:0.394057"
- id="path13959"
- cx="122.07346"
- cy="515.55853"
- r="4.3382792" />
- <text
- xml:space="preserve"
- style="font-size:4.48658px;opacity:1;fill:#222b00;stroke:#222b00;stroke-width:0.556841"
- x="115.26611"
- y="542.34424"
- id="text14102"
- transform="scale(1.0488735,0.95340381)"><tspan
- sodipodi:role="line"
- id="tspan14100"
- style="fill:#222b00;stroke:#222b00;stroke-width:0.556842"
- x="115.26611"
- y="542.34424">1</tspan></text>
- <text
- xml:space="preserve"
- style="font-size:4.37459px;opacity:1;fill:#222b00;stroke:#222b00;stroke-width:0.542942"
- x="128.44441"
- y="566.39227"
- id="text14260"
- transform="scale(1.0217441,0.97871863)"><tspan
- sodipodi:role="line"
- id="tspan14258"
- style="stroke-width:0.542943"
- x="128.44441"
- y="566.39227">2</tspan></text>
- <text
- xml:space="preserve"
- style="font-size:4.30613px;opacity:1;fill:#222b00;stroke:#222b00;stroke-width:0.534445"
- x="110.34848"
- y="578.53491"
- id="text14264"
- transform="scale(0.99652711,1.003485)"><tspan
- sodipodi:role="line"
- id="tspan14262"
- style="stroke-width:0.534446"
- x="110.34848"
- y="578.53491">3</tspan></text>
- </g>
- </g>
-</svg>
diff --git a/src/components/Chapters.tsx b/src/components/Chapters.tsx
index 6d26cb0..2215412 100644
--- a/src/components/Chapters.tsx
+++ b/src/components/Chapters.tsx
@@ -1,13 +1,35 @@
-import levels from '../assets/icons/levels.svg';
+import chapters from '../assets/backgrounds/chapters.svg';
const Chapters = () => {
- return (
- <>
- <div className="align-center mx-2 mt-4 flex justify-center">
- <img src={levels} alt={levels} className="" />
- </div>
- </>
- );
+ const handleChapterClick = (chapterId: string) => {
+ console.log("Clicked");
+ // Handle the click event for each chapter and navigate accordingly
+ switch (chapterId) {
+ case 'chpt1':
+ window.location.href = '/opening';
+ break;
+ case 'chpt2':
+ window.location.href = '/overview';
+ break;
+ // Add more cases for other chapters as needed
+ default:
+ break;
+ }
+ };
+
+ return (
+ <>
+ <img src={chapters} alt={chapters}
+ onClick={(e: React.MouseEvent<HTMLImageElement>) => {
+ const target = e.target as HTMLImageElement;
+ console.log(target.src);
+ if (target.id) {
+ handleChapterClick(target.id);
+ }
+ }}
+ />
+ </>
+ );
};
export default Chapters;
diff --git a/src/components/HomePage.tsx b/src/components/HomePage.tsx
index cc74fc5..cbd5c0d 100644
--- a/src/components/HomePage.tsx
+++ b/src/components/HomePage.tsx
@@ -2,21 +2,23 @@ import {useNavigate} from "react-router-dom";
import {useState} from "react";
import {useRecoilState} from "recoil";
import {languageAtom} from "../atoms/languageAtom";
+import {startButton} from "../../public/lit/texts";
+import {Texts} from "../hooks/useAnimate";
const Intro = () => {
const navigate = useNavigate();
const [showLangMenu, setShowLangMenu] = useState(false);
const [language, setLanguage] = useRecoilState(languageAtom);
-
+ const startButtonText = startButton[language as keyof Texts]
const handleLanguageChange = (newLanguage: string) => {
setLanguage(newLanguage);
- console.log(languageAtom);
setShowLangMenu(false);
};
const handleClick = () => {
navigate('/intro');
}
+
return (
<>
<div
@@ -27,24 +29,25 @@ const Intro = () => {
<div>
<button
onClick={handleClick}
- className="mt-20 border-4 border-black font-primary bg-primary-light z-10 absolute top-28 left-28">Start
+ className="mt-20 border-2 border-black font-primary bg-primary-light z-10 absolute top-28 left-28">
+ {startButtonText}
</button>
<button
- className="mt-20 border-4 border-black font-primary bg-primary-light z-10 absolute top-44 left-28"
+ className="mt-20 border-2 border-black font-primary bg-primary-light z-10 absolute top-44 left-28"
onClick={() => setShowLangMenu(!showLangMenu)}
>
{language === 'EN' ? 'English' : 'SlovenÄŤina'}
</button>
{showLangMenu && (
- <div className="mt-2 p-2 border-4 border-black font-primary bg-primary-light z-10 absolute top-60 left-28">
+ <div className="mt-2 p-2 border-4 border-black font-primary bg-primary-main z-10 absolute top-60 left-28">
<button
- className="block mt-1 border-4 border-black font-primary bg-primary-light hover:bg-primary-dark"
+ className="block mt-1 border-2 border-black font-primary bg-primary-light hover:bg-primary-dark"
onClick={() => handleLanguageChange('EN')}
>
English
</button>
<button
- className="block mt-1 border-4 border-black font-primary bg-primary-light hover:bg-primary-dark"
+ className="block mt-1 border-2 border-black font-primary bg-primary-light hover:bg-primary-dark"
onClick={() => handleLanguageChange('SK')}
>
SlovenÄŤina
diff --git a/src/components/Intro.tsx b/src/components/Intro.tsx
index d1da73c..532bebe 100644
--- a/src/components/Intro.tsx
+++ b/src/components/Intro.tsx
@@ -1,51 +1,20 @@
-import {SetStateAction, useEffect, useRef, useState} from 'react';
+import {useRef} from 'react';
import {AnimateCC} from 'react-adobe-animate';
import Typewriter, {TypewriterClass} from "typewriter-effect";
-import {intro} from "../../public/lit/texts";
-import {useNavigate} from "react-router-dom";
-import {useRecoilValue} from "recoil";
-import {languageAtom} from "../atoms/languageAtom";
+import {intro, nextButton, toChapter} from "../../public/lit/texts";
+import {useAnimate} from "../hooks/useAnimate";
+import {useTranslate} from "../hooks/useTranslate";
-interface IntroTexts {
- EN: string;
- SK: string;
-}
const Intro = () => {
- const language = useRecoilValue(languageAtom);
-
- const [paused, setPaused] = useState(false);
- const [, setAnimationObject] = useState(null);
- const getAnimationObject = (obj: SetStateAction<null>) => setAnimationObject(obj);
-
- const [currentIndex, setCurrentIndex] = useState(0);
- const [isAnimationComplete, setIsAnimationComplete] = useState(false);
- const line = intro[currentIndex];
+ const nextButtonText = useTranslate(nextButton);
+ const chapter1Text = useTranslate(toChapter) + "1";
const typewriterRef = useRef<TypewriterClass>();
- const navigate = useNavigate();
- useEffect(() => {
- if (typewriterRef.current) {
- typewriterRef.current.deleteAll(0.0000000000000000000001);
- typewriterRef.current
- .typeString(line[language as keyof IntroTexts])
- .start()
- .callFunction(() => {
- setIsAnimationComplete(true);
- setPaused(true)
- });
- }
- }, [language, currentIndex]);
-
- const handleClick = () => {
- if(currentIndex == intro.length -1) {
- navigate('/opening');
- }
- if (isAnimationComplete) {
- setCurrentIndex((prevIndex) => (prevIndex + 1) % intro.length);
- setIsAnimationComplete(false);
- setPaused(false);
- }
- };
+ const {getAnimationObject, handleClick, isAnimationComplete, isLast, onInit, paused} = useAnimate({
+ typewriterRef,
+ link: '/opening',
+ text: intro
+ });
return (
<>
@@ -57,16 +26,7 @@ const Intro = () => {
options={{
delay: 40,
}}
- onInit={(typewriter) => {
- typewriterRef.current = typewriter;
- typewriter
- .typeString(line[language as keyof IntroTexts])
- .start()
- .callFunction(() => {
- setIsAnimationComplete(true);
- setPaused(true);
- });
- }}
+ onInit={(typewriter) => onInit({ typewriter, pauseFor: 0 })}
/>
</div>
<div className="mt-12 ml-44 flex justify-center">
@@ -89,7 +49,7 @@ const Intro = () => {
!isAnimationComplete ? 'bg-gray-main' : 'bg-yellow-main'
}`}
>
- {currentIndex == intro.length -1 ? 'To Chapter 1' : 'Next'}
+ {isLast ? chapter1Text : nextButtonText}
</button>
</div>
</div>
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 975040a..97d953e 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -10,24 +10,22 @@ const Navbar = () => {
return (
<nav className="bg-primary-main">
- <div className="p-2 flex justify-between">
- <div>
- <img src={logo} alt="Logo"
- onClick={() => navigate("/")}
- className="w-52 mt-4 ml-4"/>
- </div>
- <div className="flex items-center justify-end">
- <Link to="/chapters">
- <img
- src={menuIcon}
- onClick={() => {
- setLevelsShown(!levelsShown);
- const page = levelsShown ? '/intro' : '/chapters';
- navigate(page);
- }}
- alt="Chapters Icon"/>
- </Link>
- </div>
+ <div className="p-2 flex justify-between">
+ <div>
+ <img src={logo} alt="Logo"
+ onClick={() => navigate("/")}
+ className="w-52 mt-4 ml-4 hover:cursor-pointer"/>
+ </div>
+ <div className="flex items-center justify-end">
+ <Link to="/chapters">
+ <img src={menuIcon} onClick={() => {
+ setLevelsShown(!levelsShown);
+ const page = levelsShown ? '/intro' : '/chapters';
+ navigate(page);
+ }}
+ alt="Chapters Icon"/>
+ </Link>
+ </div>
</div>
</nav>
)
diff --git a/src/components/Opening.tsx b/src/components/Opening.tsx
index 94b4e37..6c804ca 100644
--- a/src/components/Opening.tsx
+++ b/src/components/Opening.tsx
@@ -1,49 +1,27 @@
-import {SetStateAction, useEffect, useRef, useState} from 'react';
+import {useRef} from 'react';
import {AnimateCC} from 'react-adobe-animate';
import Typewriter, {TypewriterClass} from "typewriter-effect";
-import {opening} from "../../public/lit/texts";
-import {useNavigate} from "react-router-dom";
+import {diabetesTheorem, nextButton, opening, toChapter} from "../../public/lit/texts";
+import {useAnimate} from "../hooks/useAnimate";
+import {useTranslate} from "../hooks/useTranslate";
const Opening = () => {
- const [paused, setPaused] = useState(false);
- const [, setAnimationObject] = useState(null);
- const getAnimationObject = (obj: SetStateAction<null>) => setAnimationObject(obj);
-
- const [currentIndex, setCurrentIndex] = useState(0);
- const [isAnimationComplete, setIsAnimationComplete] = useState(false);
- const {EN} = opening[currentIndex];
+ const firstTheoremText = useTranslate(diabetesTheorem);
+ const nextButtonText = useTranslate(nextButton);
+ const chapter2Text = useTranslate(toChapter) + "2";
const typewriterRef = useRef<TypewriterClass>();
- const navigate = useNavigate();
-
- useEffect(() => {
- if (typewriterRef.current) {
- typewriterRef.current.deleteAll(0.0000000000000000000001);
- typewriterRef.current
- .typeString(EN)
- .start()
- .callFunction(() => {
- setIsAnimationComplete(true);
- setPaused(true)
- });
- }
- }, [EN]);
- const handleClick = () => {
- if(currentIndex == opening.length -1) {
- navigate('/opening');
- }
- if (isAnimationComplete) {
- setCurrentIndex((prevIndex) => (prevIndex + 1) % opening.length);
- setIsAnimationComplete(false);
- setPaused(false);
- }
- };
+ const {getAnimationObject, handleClick, isAnimationComplete, isLast, onInit, paused} = useAnimate({
+ typewriterRef,
+ link: '/opening',
+ text: opening
+ });
return (
<>
<div className=" mt-8 ">
- <p className="text-2xl bg-red-200 border border-red-800 w-max justify-self-center inline p-4 animate-fade-in">
- Diabetes is a disease in which the body is unable to produce a sufficient amount of insulin.
+ <p className="text-2xl bg-red-200 font-primary border border-red-800 w-max justify-self-center inline p-4 animate-fade-in">
+ {firstTheoremText}
</p>
</div>
@@ -51,23 +29,13 @@ const Opening = () => {
<div className="w-screen">
<div className="text mt-12">
<div id="intro-text" className="font-speech max-w-md"
- style={{ position: 'absolute', top: 350, left: 200, right: 900 }}>
+ style={{position: 'absolute', top: 300, left: 200, right: 900}}>
<Typewriter
options={{
delay: 40,
}}
- onInit={(typewriter) => {
- typewriterRef.current = typewriter;
- typewriter
- .pauseFor(3500)
- .typeString(EN)
- .start()
- .callFunction(() => {
- setIsAnimationComplete(true);
- setPaused(true);
- });
- }}
+ onInit={(typewriter) => onInit({ typewriter, pauseFor: 3400 })}
/>
</div>
<div className="flex justify-center">
@@ -83,14 +51,13 @@ const Opening = () => {
</div>
</div>
<div className="flex justify-center">
- {currentIndex == 0}
<button
onClick={handleClick}
className={`border-4 border-black font-primary ${
!isAnimationComplete ? 'bg-gray-main' : 'bg-yellow-main'
}`}
>
- {currentIndex == opening.length -1 ? 'To Chapter 2' : 'Next'}
+ {isLast ? chapter2Text : nextButtonText}
</button>
</div>
</div>
diff --git a/src/hooks/useAnimate.tsx b/src/hooks/useAnimate.tsx
new file mode 100644
index 0000000..6bb924f
--- /dev/null
+++ b/src/hooks/useAnimate.tsx
@@ -0,0 +1,65 @@
+import {SetStateAction, useEffect, useState} from "react";
+import {TypewriterClass} from "typewriter-effect";
+import {useNavigate} from "react-router-dom";
+import {useRecoilValue} from "recoil";
+import {languageAtom} from "../atoms/languageAtom";
+
+export interface Texts {
+ EN: string;
+ SK: string;
+}
+interface AnimateProps {
+ typewriterRef: React.MutableRefObject<TypewriterClass | undefined>,
+ link: string,
+ text: Texts[]
+}
+export const useAnimate = ({link, text, typewriterRef}: AnimateProps) => {
+ const language = useRecoilValue(languageAtom);
+
+ const [paused, setPaused] = useState(false);
+ const [, setAnimationObject] = useState(null);
+ const getAnimationObject = (obj: SetStateAction<null>) => setAnimationObject(obj);
+
+ const [currentIndex, setCurrentIndex] = useState(0);
+ const [isAnimationComplete, setIsAnimationComplete] = useState(false);
+ const line = text[currentIndex];
+ const navigate = useNavigate();
+
+ useEffect(() => {
+ if (typewriterRef.current) {
+ typewriterRef.current.deleteAll(0.0000000000000000000001);
+ typewriterRef.current
+ .typeString(line[language as keyof Texts])
+ .start()
+ .callFunction(() => {
+ setIsAnimationComplete(true);
+ setPaused(true)
+ });
+ }
+ }, [language, currentIndex]);
+
+ const handleClick = () => {
+ if(currentIndex == text.length -1) {
+ navigate(link);
+ }
+ if (isAnimationComplete) {
+ setCurrentIndex((prevIndex) => (prevIndex + 1) % text.length);
+ setIsAnimationComplete(false);
+ setPaused(false);
+ }
+ };
+
+ const onInit = ({ typewriter, pauseFor }: { typewriter: TypewriterClass; pauseFor: number }) => {
+ typewriterRef.current = typewriter;
+ typewriter
+ .pauseFor(pauseFor)
+ .typeString(line[language as keyof Texts])
+ .start()
+ .callFunction(() => {
+ setIsAnimationComplete(true);
+ setPaused(true);
+ });
+ }
+
+ return {paused, isAnimationComplete, isLast: currentIndex == text.length - 1, getAnimationObject, handleClick, onInit}
+}
diff --git a/src/hooks/useTranslate.tsx b/src/hooks/useTranslate.tsx
new file mode 100644
index 0000000..09ff699
--- /dev/null
+++ b/src/hooks/useTranslate.tsx
@@ -0,0 +1,8 @@
+import {useRecoilValue} from "recoil";
+import {languageAtom} from "../atoms/languageAtom";
+import {Texts} from "./useAnimate";
+
+export const useTranslate = ( textLine: {EN: string, SK: string}) => {
+ const language = useRecoilValue(languageAtom);
+ return textLine[language as keyof Texts];
+}
diff --git a/src/index.css b/src/index.css
index 0165dbd..f8d566e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,5 +1,5 @@
@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Ysabeau+SC:wght@500&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inconsolata&family=Ysabeau+SC:wght@500&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;
diff --git a/tailwind.config.js b/tailwind.config.js
index 8edba60..92870c2 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,10 +4,10 @@ export default {
extend: {
colors: {
primary: {
- light: '#97FFF4',
+ light: '#5599ff',
main: '#3D348B',
// main: '#B7F0AD',
- dark: '#aaccffff',
+ dark: '#aaccff',
},
beige: {
light: '#e3c99f',
@@ -35,7 +35,7 @@ export default {
},
},
fontFamily: {
- speech: ["'Indie Flower'", 'cursive'],
+ speech: ["'Inconsolata'", 'monospace'],
primary: ["'Ysabeau SC'", 'sans-serif'],
},
},
--
GitLab