Prima prova sintesi vocale

src/ActionCard.jsx

@@ -0,0 +1,34 @@
+import { useEffect, useState } from "react"
+import Card from "@material-ui/core/Card"
+import Typography from "@material-ui/core/Typography"
+
+export default ({ action, idx, voices }) => {
+    //usEffect serve fargli leggere soltanto la prima card 
+    useEffect(() => {
+        if (idx === 0) {
+            let message = new SpeechSynthesisUtterance(action)
+            message.voice = voices.find(voice => voice.name === "Luca")
+            speechSynthesis.speak(message)
+        }
+    }, [idx])
+
+    return (
+        <Card style={{
+            height: idx === 0 ? "448px" : "128px",
+            width: idx === 0 ? "calc(100% - 32px)" : "calc(100% - 512px)",
+            margin: idx === 0 ? "16px" : "16px 256px",
+            backgroundColor: idx === 0 ? "#0057cb" : "white",
+            display: "grid",
+            placeContent: "center",
+            borderRadius: "8px"
+        }}
+            elevation={4} >
+            <Typography style={{
+                fontSize: idx === 0 ? "128px" : "64px",
+                fontWeight: 300,
+                color: idx === 0 ? "white" : "black",
+            }}>
+                {action}
+            </Typography></Card>
+    )
+}

src/App.tsx

@@ -1,41 +1,30 @@
+import { useState } from "react"
 import Counter from './Counter'
 import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles';
-
-/*
-const App = () => <ThemeProvider theme={createMuiTheme({
-  palette: {
-    primary: {
-      main: "#0057cb",
-    },
-  },
-})} > 
-{if index <=  Vestire.actions.length
-  <AppStyled>
-      <Timeline
-      />
-      <Vestire />
-    </AppStyled>
-    else
-    <AppStyled>
-      <Timeline
-      />
-      <Mangiare />
-    </AppStyled>
-}
-</ ThemeProvider>
-*/
+import CircularProgress from "@material-ui/core/CircularProgress"
 
 
 const App = () => {
+  //listener che si accorge quando le voci sono caricate
+  const [voices, setVoices] = useState([])
+  ///@ts-ignore
+  speechSynthesis.addEventListener('voiceschanged', () => setVoices(speechSynthesis.getVoices()))
+
   return <ThemeProvider theme={createMuiTheme({
     palette: {
       primary: {
         main: "#0057cb",
       },
     },
   })} >
-<Counter />
-</ThemeProvider>;
+    {voices[0] ? <Counter voices={voices}/> : <CircularProgress size={60} style={{
+      //centra il caricamento
+      position: "absolute",
+      top: "50%",
+      left: "50%",
+      transform: "translate(-50%, -50%)"
+    }} />}
+  </ThemeProvider>;
 }
 
-export default App
+export default App

src/Counter.jsx

@@ -1,36 +1,61 @@
 import styled from '@emotion/styled';
 import { Timeline } from './Timeline';
-import {Vestire} from './Vestire';
-import {Mangiare} from './Mangiare'
+import {Displayer} from './Displayer';
 import { useEffect, useState } from 'react';
 import {tasks} from "./tasks"
 
-
-
 const AppStyled = styled.div`
   display: grid;
   grid-template-rows: auto 1fr;
   height: 100vh;
 `;
 
-function App() {
+function App({voices}) {
+  const [tasks, setTasks] = useState([])
   const [index, setIndex] = useState(0)
   useEffect(() => {
     setInterval(() => setIndex(index => ++index), 3000)
   }, [])
+  useEffect(() => {
+    fetch("https://a6a36ec8cdfb.ngrok.io/api/tasks/findDay").then(res => {return res.json()}).then(data => {setTasks(data)})
+  }, [])
+/*useEffect(() => {
+    console.log(currentHour)
+  }, [])
+*/
 
-  if (index < tasks.vestire.length) {
-    return <AppStyled>
-        <Timeline />
-        <Vestire actions={tasks.vestire} index={index} />
-      </AppStyled>;
-  } else {
-    return <AppStyled >
-        <Timeline
-        />
-        <Mangiare actions={tasks.mangiare} index={index - tasks.mangiare.length} />
-      </AppStyled>;
+  //console.log(tasks)
+  if (tasks.length === 0){
+    return <h1>"vuoto"</h1>
   }
+  var currentHour = new Date().getHours();
+  console.log(currentHour)
+  for (let j=0; j<tasks.length; j++) {
+  if (tasks[j].start<=currentHour && tasks[j].end>=currentHour) {
+      //for (let i = 0; i < tasks[j].actions.length; i++){
+        return <AppStyled>
+              <Timeline/>
+              <Displayer nome={tasks[j].name} actions={tasks[j].actions} index={index} voices={voices}/>
+            </AppStyled>;
+      //}      
+    }    
+  }
+  return <h1>"fine"</h1>
+
+
+
+
+  // if (index < tasks.vestire.length) {
+  //   return <AppStyled>
+  //       <Timeline/>
+  //       <Vestire actions={tasks.vestire} index={index} voices={voices}/>
+  //     </AppStyled>;
+  // } else {
+  //   return <AppStyled>
+  //       <Timeline/>
+  //       <Mangiare actions={tasks.mangiare} index={index - tasks.vestire.length} voices={voices}/>
+  //     </AppStyled>;
+  // }
 }
 
 export default App

src/Displayer.jsx

@@ -0,0 +1,33 @@
+import styled from '@emotion/styled';
+import Typography from "@material-ui/core/Typography"
+import ActionCard from "./ActionCard"
+
+const VStyled = styled.div`
+  height: 100%;
+  width: 100%;
+  background-color: white;
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+`;
+
+
+export const Displayer = ({ nome, actions, index, voices }) => {
+  const filteredActions = actions.filter((_, indice) => indice >= index)
+  return (
+    <VStyled>
+      <div style={{
+        paddingTop: "32px",
+        textAlign: "center"
+      }}
+      >
+        <Typography variant="h2">È ora di {nome}:</Typography>
+      </div>
+      <div >
+        {filteredActions.map((action, idx) => (
+          <ActionCard idx={idx} action={action} key={action} voices={voices} />
+        ))
+        }
+      </div>
+    </VStyled>
+  );
+};

src/Mangiare.jsx

@@ -1,7 +1,6 @@
 import styled from '@emotion/styled';
-import { useEffect, useState } from 'react';
-import Card from "@material-ui/core/Card"
 import Typography from "@material-ui/core/Typography"
+import ActionCard from "./ActionCard"
 
 const VStyled = styled.div`
   height: 100%;
@@ -12,8 +11,7 @@ const VStyled = styled.div`
 `;
 
 
-export const Mangiare = ({ actions, index }) => {
-
+export const Mangiare = ({ actions, index, voices }) => {
   const filteredActions = actions.filter((_, indice) => indice >= index)
   return (
     <VStyled>
@@ -24,29 +22,12 @@ export const Mangiare = ({ actions, index }) => {
       >
         <Typography variant="h2">È ora di mangiare:</Typography>
       </div>
-
       <div >
         {filteredActions.map((action, idx) => (
-          <Card style={{
-            height: idx === 0 ? "448px" : "128px",
-            width: idx === 0 ? "calc(100% - 32px)" : "calc(100% - 512px)",
-            margin: idx === 0 ? "16px" : "16px 256px",
-            backgroundColor: idx === 0 ? "#0057cb" : "white",
-            display: "grid",
-            placeContent: "center",
-            borderRadius: "8px"
-          }}
-            key={idx}
-            elevation={4}>
-            <Typography style={{
-              fontSize: idx === 0 ? "128px" : "64px",
-              fontWeight: 300,
-              color: idx === 0 ? "white" : "black",
-            }}>
-              {action}
-            </Typography></Card>
-        ))}
+          <ActionCard idx={idx} action={action} key={action} voices={voices} />
+        ))
+        }
       </div>
     </VStyled>
   );
-};
+}

src/tasks.ts

@@ -1,16 +1,22 @@
 export const tasks = {
     "vestire": [
-        "Pippo camicia",
-        "Pluto",
-        "Topolino",
-        "Silvestro",
-        "Titti"
+        /*"Mutande",
+        "Pantaloni",
+        "Maglietta",
+        "Felpa",
+        "Calzini"*/
     ],
 
     "mangiare": [
-        "Pizza",
+        /*"Pizza",
         "Pasta",
         "Broccoletti",
-        "Insalata"
+        "Insalata"*/
     ]
-}
+}
+
+
+const tasks2 = [{ "actions": ["action1", "action2", "action3"], "_id": "609d4d5cd973f830040e1e05", "name": "nome1", "createdAt": "2021-05-13T16:01:32.028Z", "updatedAt": "2021-05-13T16:01:32.028Z", "__v": 0 },
+{ "actions": ["asdasd"], "_id": "609d544b59a646eb79cd0671", "name": "asdasd", "createdAt": "2021-05-13T16:31:07.867Z", "updatedAt": "2021-05-13T16:31:07.867Z", "__v": 0 },
+{ "actions": ["asdasd"], "_id": "609d545359a646eb79cd0672", "name": "asdasd", "createdAt": "2021-05-13T16:31:15.104Z", "updatedAt": "2021-05-13T16:31:15.104Z", "__v": 0 },
+{ "actions": ["action2"], "_id": "609d5bb1c3053ded64a043ad", "name": "nome2", "createdAt": "2021-05-13T17:02:41.559Z", "updatedAt": "2021-05-13T17:02:41.559Z", "__v": 0 }]