Technigo · JohLeo · Mar 17, 2023 · Mar 18, 2023 · Mar 18, 2023 · Mar 19, 2023
diff --git a/code/package-lock.json b/code/package-lock.json
diff --git a/code/public/index.html b/code/public/index.html
@@ -13,7 +13,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Technigo React App</title>
+    <title>Relax and start breathing v.6</title>
   </head>
 
   <body>

diff --git a/code/src/App.js b/code/src/App.js
@@ -1,9 +1,85 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { Name } from './components/Name'
+import { Start } from './components/Start'
+import { Activity } from './components/Activity'
+import { Colour } from './components/Colour'
+import { Place } from './components/Place'
+import { Temp } from './components/Temp'
+import { Who } from './components/Who'
+import { Summary } from './components/Summary'
+import { Breathe } from './components/Breathe'
+import hug from './img/hug.svg';
 
 export const App = () => {
+  const [step, setStep] = useState(0);
+  const [name, setName] = useState('');
+  const [activity, setActivity] = useState('');
+  const [colour, setColour] = useState('');
+  const [place, setPlace] = useState('');
+  const [temp, setTemp] = useState('');
+  const [who, setWho] = useState('');
+
+  const handleStepIncrease = () => {
+    setStep(step + 1);
+  };
+  const handleStepReset = () => {
+    setStep(0);
+    setName('');
+  };
   return (
-    <div>
-      Find me in src/app.js!
+    <div className="main-container">
+      <img src={hug} alt="A hug" className="hugImg" />
+      {step === 0 && (
+        <Start onButtonClick={() => handleStepIncrease(0)} />
+      )}
+      {step === 1 && (
+        <Name name={name} setName={setName} step={step} />
+      )}
+      {step === 2 && (
+        <Activity activity={activity} setActivity={setActivity} step={step} />
+      )}
+      {step === 3 && (
+        <Colour colour={colour} setColour={setColour} step={step} />
+      )}
+      {step === 4 && (
+        <Place place={place} setPlace={setPlace} step={step} />
+      )}
+      {step === 5 && (
+        <Temp temp={temp} setTemp={setTemp} step={step} />
+      )}
+      {step === 6 && (
+        <Who who={who} setWho={setWho} step={step} />
+      )}
+      {step === 7 && (
+        <>
+          <Summary
+            name={name}
+            activity={activity}
+            colour={colour}
+            place={place}
+            temp={temp}
+            who={who} />
+          <div className="button-container">
+            <button type="button" onClick={handleStepIncrease} className="submitBtn">Yes please</button>
+            <button type="button" onClick={handleStepReset} className="restartBtn">No, restart</button>
+          </div>
+        </>
+      )}
+      {step === 8 && (
+        <>
+          <Breathe
+            name={name}
+            activity={activity}
+            colour={colour}
+            place={place}
+            temp={temp}
+            who={who} />
+          <button type="button" onClick={handleStepReset} className="restartBtn"> I need a new scenario</button>
+        </>
+      )}
+      {step < 7 && step !== 0 && (
+        <button type="button" onClick={handleStepIncrease} className="submitBtn"> Next question </button>
+      )}
     </div>
   );
 }
diff --git a/code/src/components/Activity.js b/code/src/components/Activity.js
@@ -0,0 +1,43 @@
+import React from 'react';
+
+const activechoice = ['running 🏃🏻', 'breathing 🌬', 'stretching 🧘🏽', 'walking 🚶🏽', 'biking 🚵🏽'];
+
+export const Activity = ({ activity, setActivity, step }) => {
+  return (
+    <>
+      <div className="content-container">
+        <div>
+          <p className="p-step">Current step: {step} / 7</p>
+        </div>
+        <h4> Ok, what activity sparks your joy and makes your ears wiggle?
+        </h4>
+      </div>
+      <div>
+        <form className="radio-activity">
+          {activechoice.map((item) => (
+            <label key={item} htmlFor="activeradio">
+              <div
+                className="radioBtn"
+                role="button"
+                onClick={(event) => setActivity(event.target.value)}
+                onKeyDown={(event) => {
+                  if (event.key === 'Enter' || event.key === ' ') {
+                    setActivity(item);
+                  }
+                }}
+                tabIndex={0}>
+                <input
+                  type="radio"
+                  className="radioActiveBtn"
+                  onChange={(event) => setActivity(event.target.value)}
+                  value={item}
+                  checked={activity === item} />
+                <span>{item}</span>
+              </div>
+            </label>
+          ))}
+        </form>
+      </div>
+    </>
+  );
+}
diff --git a/code/src/components/Breathe.js b/code/src/components/Breathe.js
@@ -0,0 +1,38 @@
+import React from 'react';
+
+export const Breathe = ({ name, activity, colour, place, temp, who }) => {
+  return (
+    <div className="content-container">
+      <svg width="180" height="180">
+        <rect
+          x="20"
+          y="20"
+          width="170"
+          height="170"
+          fill="none"
+          strokeDasharray="20 20" />
+        <circle cx="10" cy="10" r="8" fill={colour} className="blurryCircle">
+          <animateMotion
+            dur="9s"
+            repeatCount="indefinite"
+            path="M 10,10 L 160,10 L 160,160 L 10,160 Z" />
+        </circle>
+      </svg>
+      <h4 className="sumh4">Keep your happy scenario in your mind and let&apos;s slow down...</h4>
+      <p>
+        Remember, you are by the {place} and you&apos;re going to start {activity} soon. <br />
+        It&apos;s around {temp} degrees, {who} is next to you and already looking at
+        the {colour} light. Let&apos;s do this, focus {name}!
+        <br /><br />
+        One breath is illustated by the dot.<br />
+        Each step is one side of the square.<br />
+        Start by breathing out slowly, releasing the air from your lungs. <br /><br />
+        1. Breathe in through your nose<br />
+        2. Hold your breath  <br />
+        3. Exhale slowly <br />
+        4. Hold your breath again <br /><br />
+        Repeat as many times as you need.
+      </p>
+    </div>
+  );
+}
diff --git a/code/src/components/Colour.js b/code/src/components/Colour.js
@@ -0,0 +1,24 @@
+import React from 'react';
+
+export const Colour = ({ colour, setColour, step }) => {
+  return (
+    <div className="content-container">
+      <p className="p-step">Current step: {step} / 7</p>
+      <h4> What&apos;s your favourite color?</h4>
+      <form className="colourForm">
+        <select
+          onChange={(event) => setColour(event.target.value)}
+          value={colour}
+          aria-label="dropdown for your favourite colours">
+          <option value="" disabled>Choose colour</option>
+          <option value="white">White</option>
+          <option value="pink">Pink</option>
+          <option value="yellow">Yellow</option>
+          <option value="green">Green</option>
+          <option value="purple">Purple</option>
+          <option value="orange">Blue</option>
+        </select>
+      </form>
+    </div>
+  )
+}
diff --git a/code/src/components/Name.js b/code/src/components/Name.js
@@ -0,0 +1,22 @@
+import React from 'react';
+
+export const Name = ({ name, setName, step }) => {
+  const handleNameChange = (event) => {
+    setName(event.target.value);
+  }
+  return (
+    <div className="content-container">
+      <p className="p-step">Current step: {step} / 7</p>
+      <h4>Let&apos;s start of by introducing ourselves!
+        What&apos;s your name?
+      </h4>
+      <input
+        aria-label="name-input"
+        type="text"
+        value={name}
+        className="name-input"
+        placeholder="Type name here"
+        onChange={handleNameChange} />
+    </div>
+  );
+}
diff --git a/code/src/components/Place.js b/code/src/components/Place.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import ocean from '../img/ocean.png';
+import forest from '../img/forest.png';
+import home from '../img/home.png';
+
+export const Place = ({ place, setPlace, step }) => {
+  const handlePlaceChange = (event) => {
+    setPlace(event.target.value);
+  }
+  return (
+    <div className="place-container">
+      <div>
+        <p className="p-step">Current step: {step} / 7</p>
+      </div>
+      <h4> Where do you feel the most at ease?</h4>
+      <div className="place-img-container">
+        <img src={ocean} alt="The ocean" />
+        <img src={forest} alt="The Forest" />
+        <img src={home} alt="In my home" />
+      </div>
+      <form className="radio-container">
+        <label htmlFor="ocean">
+            The ocean
+          <input
+            type="radio"
+            value="ocean"
+            onChange={handlePlaceChange}
+            checked={place === 'ocean'} />
+        </label>
+        <label htmlFor="forest">
+            In the forest
+          <input
+            type="radio"
+            value="forest"
+            onChange={handlePlaceChange}
+            checked={place === 'forest'} />
+        </label>
+        <label htmlFor="home">
+            At home
+          <input
+            type="radio"
+            value="home"
+            onChange={handlePlaceChange}
+            checked={place === 'home'} />
+        </label>
+      </form>
+    </div>
+  );
+}
diff --git a/code/src/components/Start.js b/code/src/components/Start.js
@@ -0,0 +1,21 @@
+import React from 'react';
+
+export const Start = (begin) => {
+  const handleClick = () => {
+    begin.onButtonClick();
+  }
+  return (
+    <div className="content-container">
+      <div>
+        <h3>Hello!</h3>
+      </div>
+      <div>
+        <p className="start-p">Have you been feeling a little bit stressed lately? <br />
+        I would like to help you feel better,
+        let&apos;s take our first steps together...
+        </p>
+      </div>
+      <button className="startBtn" type="button" onClick={handleClick}>Start</button>
+    </div>
+  )
+}
diff --git a/code/src/components/Summary.js b/code/src/components/Summary.js
@@ -0,0 +1,20 @@
+import React from 'react';
+
+export const Summary = ({ name, activity, colour, place, temp, who }) => {
+  return (
+    <div className="content-container">
+      <p className="p-step">Complete 7 / 7</p>
+      <h4 className="sumh4">So...</h4>
+      <p>
+        {name}, picture yourself by the {place} where you are about to start your {activity}. <br />
+        You feel the atmosphere beeing just the way you want, it is around {temp} degrees.  <br />
+        By your side you have {who} looking at you with a smile.  <br />
+        In the distance you see a beautiful {colour} light.
+      </p>
+      <p>
+        {who} want you to move on now.
+        Are you ready to take the next step {name}?
+      </p>
+    </div>
+  )
+}