modifiche layout home

ulteriori modifiche e aggiunte

src/main/app/src/component/layout/Aside.js

@@ -13,7 +13,7 @@ function Aside() {
               <Nav.Link href="#play-host">Play as Host</Nav.Link>
               <Nav.Link href="#play-guest">Play as Guest</Nav.Link>
               <span className="nav-category">Learn</span>
-              <Nav.Link href="#rules">Rules</Nav.Link>
+              <Nav.Link href="#novita">Novità del gioco</Nav.Link>
               <span className="nav-category">Community</span>
               <Nav.Link href="#news">News</Nav.Link>
             </Nav>

src/main/app/src/component/layout/Istruzioni.js

@@ -1,18 +1,36 @@
 import React from 'react';
 import { Container } from 'react-bootstrap';
+import ListGroup from 'react-bootstrap/ListGroup';
 
 function Istruzioni() {
   return (
-	<Container className="">
-      <h2 className= "text-center display-3" > Istruzioni</h2>
+	  <row>
+    <Container>
+      <h3 className="display" > Istruzioni gioco Risiko</h3>
+
       <p>
-        1. Scopo del gioco: Si parte sempre dall’obiettivo segreto scritto sulla carta che ogni giocatore riceverà ad inizio partita: la vittoria sarà del primo giocatore che raggiunge il suo obiettivo segreto.<br />
-        2. Tabellone: Il tabellone di gioco è una mappa di 6 continenti divisi in 42 territori. Ogni continente è di un colore diverso e comprende da 4 a 12 territori.<br />
-        3. Armate: Ci sono 6 set completi di eserciti, ciascuno dei quali contiene 3 tipi di armata: Fanteria (valore 1), Cavalleria (del valore di 5 fanteria), Artiglieria (del valore di 10 Fanteria, o 2 Cavalleria).<br />
-        4. Impostazione della partita: Selezionare un colore e, a seconda del numero di giocatori, contare le “armate”. Partendo dal giocatore più giovane, vengono distribuite a ogni giocatore le carte territorio coperte. Si continua fino a quando tutti i 42 territori sono stati distribuiti.<br />
-        5. Turno di gioco: Durante il proprio turno ogni giocatore può svolgere tre attività principali: rinforzare le proprie armate, attaccare, spostare.<br />
+        1. Scopo del gioco: Si parte sempre dall’obiettivo segreto scritto sulla carta che ogni giocatore riceverà ad inizio partita: la vittoria sarà del primo giocatore che raggiunge il suo obiettivo segreto. <br />
+        2. Tabellone: Il tabellone di gioco è una mappa di 6 continenti divisi in 42 territori. Ogni continente è di un colore diverso e comprende da 4 a 12 territori. <br />
+        3. Armate: Ci sono 6 set completi di eserciti, ciascuno dei quali contiene 3 tipi di armata: Fanteria (valore 1), Cavalleria (del valore di 5 fanteria), Artiglieria (del valore di 10 Fanteria, o 2 Cavalleria). <br />
+        4. Impostazione della partita: Selezionare un colore e, a seconda del numero di giocatori, contare le “armate”. Partendo dal giocatore più giovane, vengono distribuite a ogni giocatore le carte territorio coperte. Si continua fino a quando tutti i 42 territori sono stati distribuiti. <br />
+        5. Turno di gioco: Durante il proprio turno ogni giocatore può svolgere tre attività principali: rinforzare le proprie armate, attaccare, spostare. <br />
       </p>
+      <h3 > Legenda Difficoltà</h3>
+      <ListGroup as="ol" numbered>
+      <ListGroup.Item as="li">Facile: la mappa si adatta riducendo i territori a 1/3, consentendo partite da 2 a 4 giocatori. </ListGroup.Item>
+      <ListGroup.Item as="li">Media: la mappa si adatta a 2/3 dei territori originali, per partite da 2 a 6 giocatori. </ListGroup.Item>
+      <ListGroup.Item as="li">Difficile: la mappa non subisce modifiche, consentendo partite complete da 2 a 6 giocatori.</ListGroup.Item>
+    </ListGroup>
+
+    <h3 id ="novita"> Novità del gioco</h3>
+      <ListGroup as="ol">
+      <ListGroup.Item as="li">Possibilità di creazione mappa personalizzata: solo l'utente loggato può accedere a questa funzione </ListGroup.Item>
+      <ListGroup.Item as="li">Adattabilità mappa in base alla difficoltà</ListGroup.Item>
+    </ListGroup>
+
     </Container>
+      </row>
+
   );
 }
 

src/main/app/src/component/layout/Main.js

@@ -4,6 +4,7 @@ import Login from "../Login";
 import SignUp from "../SignUp";
 import { Navigate } from "react-router-dom";
 import Istruzioni from './Istruzioni';
+import TopBar from './TopBar';
 
 function Main() {
   const [renderLogin, setRenderLogin] = useState(false);
@@ -35,8 +36,10 @@ function Main() {
 
   return (
     <Col xs={9} sm={9} md={9} lg={10} xl={10}>
+	 <TopBar/>
+
       {renderMain && (
-
+	
             <Container>
               <Row>
                   <Container className="m-4">
@@ -81,13 +84,11 @@ function Main() {
               </button>
               </Container>
 
-       <row>
-
+       <Row>
 	  <Container>
 		  <Istruzioni/>
 	  </Container>
-
-       </row>
+       </Row>
     </Col>
 
   );

src/main/app/src/component/layout/TopBar.js

@@ -0,0 +1,17 @@
+
+		import React from 'react';
+import { Navbar, Nav } from 'react-bootstrap';
+
+function TopBar() {
+  return (
+    <Navbar bg="dark" variant="dark">
+     <Navbar.Collapse className="justify-content-end">
+        <Navbar.Text style = {{marginRight: '20px'}}>
+          Utente
+        </Navbar.Text>
+      </Navbar.Collapse>
+    </Navbar>
+  );
+}
+
+export default TopBar;