Skip to content
Snippets Groups Projects
Commit 3af11fb7 authored by Katarína Sieklová's avatar Katarína Sieklová
Browse files

feat: translate of everything, useAnimate, useTranslate, opening texts +... 

feat: translate of everything, useAnimate, useTranslate, opening texts + continue animation of opening
parent abba0955
No related branches found
No related tags found
No related merge requests found
Pipeline #
Hide whitespace changes
Inline Side-by-side
Showing
with 758 additions and 391 deletions
public/lit/texts.tsx
+ 47
− 7
View file @ 3af11fb7
interface IntroTexts { export const intro = [
EN: string;
SK: string;
}
export const intro: IntroTexts[] = [
{ {
EN: 'Hey there, super awesome friends!', EN: 'Hey there, super awesome friends!',
SK: 'Ahojte, super skvelí priatelia!', SK: 'Ahojte, super skvelí priatelia!',
...@@ -53,7 +48,7 @@ export const opening = [ ...@@ -53,7 +48,7 @@ export const opening = [
}, },
{ {
EN: "You probably don't even know what insulin is. I'll explain.", 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.", 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 = [ ...@@ -75,4 +70,49 @@ export const opening = [
EN: "This is where the insulin comes into play!", EN: "This is where the insulin comes into play!",
SK: "Preto v tomto bode prichádza do hry inzulín!", 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 "
}
src/assets/backgrounds/chapters.svg 0 → 100644
+ 548
− 0
View file @ 3af11fb7
<?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>
src/assets/icons/levels.svg deleted 100644 → 0
+ 0
− 244
View file @ abba0955
<?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>
src/components/Chapters.tsx
+ 30
− 8
View file @ 3af11fb7
import levels from '../assets/icons/levels.svg'; import chapters from '../assets/backgrounds/chapters.svg';
const Chapters = () => { const Chapters = () => {
return ( const handleChapterClick = (chapterId: string) => {
<> console.log("Clicked");
<div className="align-center mx-2 mt-4 flex justify-center"> // Handle the click event for each chapter and navigate accordingly
<img src={levels} alt={levels} className="" /> switch (chapterId) {
</div> 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; export default Chapters;
src/components/HomePage.tsx
+ 10
− 7
View file @ 3af11fb7
...@@ -2,21 +2,23 @@ import {useNavigate} from "react-router-dom"; ...@@ -2,21 +2,23 @@ import {useNavigate} from "react-router-dom";
import {useState} from "react"; import {useState} from "react";
import {useRecoilState} from "recoil"; import {useRecoilState} from "recoil";
import {languageAtom} from "../atoms/languageAtom"; import {languageAtom} from "../atoms/languageAtom";
import {startButton} from "../../public/lit/texts";
import {Texts} from "../hooks/useAnimate";
const Intro = () => { const Intro = () => {
const navigate = useNavigate(); const navigate = useNavigate();
const [showLangMenu, setShowLangMenu] = useState(false); const [showLangMenu, setShowLangMenu] = useState(false);
const [language, setLanguage] = useRecoilState(languageAtom); const [language, setLanguage] = useRecoilState(languageAtom);
const startButtonText = startButton[language as keyof Texts]
const handleLanguageChange = (newLanguage: string) => { const handleLanguageChange = (newLanguage: string) => {
setLanguage(newLanguage); setLanguage(newLanguage);
console.log(languageAtom);
setShowLangMenu(false); setShowLangMenu(false);
}; };
const handleClick = () => { const handleClick = () => {
navigate('/intro'); navigate('/intro');
} }
return ( return (
<> <>
<div <div
...@@ -27,24 +29,25 @@ const Intro = () => { ...@@ -27,24 +29,25 @@ const Intro = () => {
<div> <div>
<button <button
onClick={handleClick} 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>
<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)} onClick={() => setShowLangMenu(!showLangMenu)}
> >
{language === 'EN' ? 'English' : 'Slovenčina'} {language === 'EN' ? 'English' : 'Slovenčina'}
</button> </button>
{showLangMenu && ( {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 <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')} onClick={() => handleLanguageChange('EN')}
> >
English English
</button> </button>
<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')} onClick={() => handleLanguageChange('SK')}
> >
Slovenčina Slovenčina
......
src/components/Intro.tsx
+ 13
− 53
View file @ 3af11fb7
import {SetStateAction, useEffect, useRef, useState} from 'react'; import {useRef} from 'react';
import {AnimateCC} from 'react-adobe-animate'; import {AnimateCC} from 'react-adobe-animate';
import Typewriter, {TypewriterClass} from "typewriter-effect"; import Typewriter, {TypewriterClass} from "typewriter-effect";
import {intro} from "../../public/lit/texts"; import {intro, nextButton, toChapter} from "../../public/lit/texts";
import {useNavigate} from "react-router-dom"; import {useAnimate} from "../hooks/useAnimate";
import {useRecoilValue} from "recoil"; import {useTranslate} from "../hooks/useTranslate";
import {languageAtom} from "../atoms/languageAtom";
interface IntroTexts {
EN: string;
SK: string;
}
const Intro = () => { const Intro = () => {
const language = useRecoilValue(languageAtom); const nextButtonText = useTranslate(nextButton);
const chapter1Text = useTranslate(toChapter) + "1";
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 typewriterRef = useRef<TypewriterClass>(); const typewriterRef = useRef<TypewriterClass>();
const navigate = useNavigate();
useEffect(() => { const {getAnimationObject, handleClick, isAnimationComplete, isLast, onInit, paused} = useAnimate({
if (typewriterRef.current) { typewriterRef,
typewriterRef.current.deleteAll(0.0000000000000000000001); link: '/opening',
typewriterRef.current text: intro
.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);
}
};
return ( return (
<> <>
...@@ -57,16 +26,7 @@ const Intro = () => { ...@@ -57,16 +26,7 @@ const Intro = () => {
options={{ options={{
delay: 40, delay: 40,
}} }}
onInit={(typewriter) => { onInit={(typewriter) => onInit({ typewriter, pauseFor: 0 })}
typewriterRef.current = typewriter;
typewriter
.typeString(line[language as keyof IntroTexts])
.start()
.callFunction(() => {
setIsAnimationComplete(true);
setPaused(true);
});
}}
/> />
</div> </div>
<div className="mt-12 ml-44 flex justify-center"> <div className="mt-12 ml-44 flex justify-center">
...@@ -89,7 +49,7 @@ const Intro = () => { ...@@ -89,7 +49,7 @@ const Intro = () => {
!isAnimationComplete ? 'bg-gray-main' : 'bg-yellow-main' !isAnimationComplete ? 'bg-gray-main' : 'bg-yellow-main'
}`} }`}
> >
{currentIndex == intro.length -1 ? 'To Chapter 1' : 'Next'} {isLast ? chapter1Text : nextButtonText}
</button> </button>
</div> </div>
</div> </div>
......
src/components/Navbar.tsx
+ 16
− 18
View file @ 3af11fb7
...@@ -10,24 +10,22 @@ const Navbar = () => { ...@@ -10,24 +10,22 @@ const Navbar = () => {
return ( return (
<nav className="bg-primary-main"> <nav className="bg-primary-main">
<div className="p-2 flex justify-between"> <div className="p-2 flex justify-between">
<div> <div>
<img src={logo} alt="Logo" <img src={logo} alt="Logo"
onClick={() => navigate("/")} onClick={() => navigate("/")}
className="w-52 mt-4 ml-4"/> className="w-52 mt-4 ml-4 hover:cursor-pointer"/>
</div> </div>
<div className="flex items-center justify-end"> <div className="flex items-center justify-end">
<Link to="/chapters"> <Link to="/chapters">
<img <img src={menuIcon} onClick={() => {
src={menuIcon} setLevelsShown(!levelsShown);
onClick={() => { const page = levelsShown ? '/intro' : '/chapters';
setLevelsShown(!levelsShown); navigate(page);
const page = levelsShown ? '/intro' : '/chapters'; }}
navigate(page); alt="Chapters Icon"/>
}} </Link>
alt="Chapters Icon"/> </div>
</Link>
</div>
</div> </div>
</nav> </nav>
) )
......
src/components/Opening.tsx
+ 17
− 50
View file @ 3af11fb7
import {SetStateAction, useEffect, useRef, useState} from 'react'; import {useRef} from 'react';
import {AnimateCC} from 'react-adobe-animate'; import {AnimateCC} from 'react-adobe-animate';
import Typewriter, {TypewriterClass} from "typewriter-effect"; import Typewriter, {TypewriterClass} from "typewriter-effect";
import {opening} from "../../public/lit/texts"; import {diabetesTheorem, nextButton, opening, toChapter} from "../../public/lit/texts";
import {useNavigate} from "react-router-dom"; import {useAnimate} from "../hooks/useAnimate";
import {useTranslate} from "../hooks/useTranslate";
const Opening = () => { const Opening = () => {
const [paused, setPaused] = useState(false); const firstTheoremText = useTranslate(diabetesTheorem);
const [, setAnimationObject] = useState(null); const nextButtonText = useTranslate(nextButton);
const getAnimationObject = (obj: SetStateAction<null>) => setAnimationObject(obj); const chapter2Text = useTranslate(toChapter) + "2";
const [currentIndex, setCurrentIndex] = useState(0);
const [isAnimationComplete, setIsAnimationComplete] = useState(false);
const {EN} = opening[currentIndex];
const typewriterRef = useRef<TypewriterClass>(); 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 = () => { const {getAnimationObject, handleClick, isAnimationComplete, isLast, onInit, paused} = useAnimate({
if(currentIndex == opening.length -1) { typewriterRef,
navigate('/opening'); link: '/opening',
} text: opening
if (isAnimationComplete) { });
setCurrentIndex((prevIndex) => (prevIndex + 1) % opening.length);
setIsAnimationComplete(false);
setPaused(false);
}
};
return ( return (
<> <>
<div className=" mt-8 "> <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"> <p className="text-2xl bg-red-200 font-primary 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. {firstTheoremText}
</p> </p>
</div> </div>
...@@ -51,23 +29,13 @@ const Opening = () => { ...@@ -51,23 +29,13 @@ const Opening = () => {
<div className="w-screen"> <div className="w-screen">
<div className="text mt-12"> <div className="text mt-12">
<div id="intro-text" className="font-speech max-w-md" <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 <Typewriter
options={{ options={{
delay: 40, delay: 40,
}} }}
onInit={(typewriter) => { onInit={(typewriter) => onInit({ typewriter, pauseFor: 3400 })}
typewriterRef.current = typewriter;
typewriter
.pauseFor(3500)
.typeString(EN)
.start()
.callFunction(() => {
setIsAnimationComplete(true);
setPaused(true);
});
}}
/> />
</div> </div>
<div className="flex justify-center"> <div className="flex justify-center">
...@@ -83,14 +51,13 @@ const Opening = () => { ...@@ -83,14 +51,13 @@ const Opening = () => {
</div> </div>
</div> </div>
<div className="flex justify-center"> <div className="flex justify-center">
{currentIndex == 0}
<button <button
onClick={handleClick} onClick={handleClick}
className={`border-4 border-black font-primary ${ className={`border-4 border-black font-primary ${
!isAnimationComplete ? 'bg-gray-main' : 'bg-yellow-main' !isAnimationComplete ? 'bg-gray-main' : 'bg-yellow-main'
}`} }`}
> >
{currentIndex == opening.length -1 ? 'To Chapter 2' : 'Next'} {isLast ? chapter2Text : nextButtonText}
</button> </button>
</div> </div>
</div> </div>
......
src/hooks/useAnimate.tsx 0 → 100644
+ 65
− 0
View file @ 3af11fb7
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}
}
src/hooks/useTranslate.tsx 0 → 100644
+ 8
− 0
View file @ 3af11fb7
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];
}
src/index.css
+ 1
− 1
View file @ 3af11fb7
@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap'); @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 base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
......
tailwind.config.js
+ 3
− 3
View file @ 3af11fb7
...@@ -4,10 +4,10 @@ export default { ...@@ -4,10 +4,10 @@ export default {
extend: { extend: {
colors: { colors: {
primary: { primary: {
light: '#97FFF4', light: '#5599ff',
main: '#3D348B', main: '#3D348B',
// main: '#B7F0AD', // main: '#B7F0AD',
dark: '#aaccffff', dark: '#aaccff',
}, },
beige: { beige: {
light: '#e3c99f', light: '#e3c99f',
...@@ -35,7 +35,7 @@ export default { ...@@ -35,7 +35,7 @@ export default {
}, },
}, },
fontFamily: { fontFamily: {
speech: ["'Indie Flower'", 'cursive'], speech: ["'Inconsolata'", 'monospace'],
primary: ["'Ysabeau SC'", 'sans-serif'], primary: ["'Ysabeau SC'", 'sans-serif'],
}, },
}, },
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment