Merge pull request #49 from Arquisoft/GameMenuView

Game menu view

docs/src/01_introduction_and_goals.adoc

@@ -18,9 +18,13 @@ These include
 ****
 
 === Requirements Overview
-The system will follow the functionality of the "Saber y Ganar" TV program, and so it will allow the users to select an answer between some options.
-The questions and answers will be automatically generated using the WikiData API, that will also determine which of the answers is in fact the correct one.
-The system will also store the historical data of the users and will be accessible through the web.
+The system will follow the functionality of the "Saber y Ganar" TV program, and so it will allow the users to select an answer between some options. +
+The questions and answers will be automatically generated using the WikiData API, that will also determine which of the answers is in fact the correct one. +
+In adition to this, the system will also store the historical data of the users, thanks to the login and registering service featured in the application, and users will be able to access their information. +
+The application will have at least English as an available language. +
+Moreover, the project will be stored and deployed through GitHub. +
+Lastly, the system will give access to non sensitive user's information through a public API as well as another API for the questions generated.
+
 
 [role="arc42help"]
 ****
@@ -53,7 +57,7 @@ See https://docs.arc42.org/section-1/[Introduction and Goals] in the arc42 docum
 |Quality attribute|Scenario
 | Usability | The user must be able to understand the function of the application before the minute mark.
 | Performance | The application will be able to operate within reasonable response times, taking into account the already present waiting times (time to answer, between questions, etc). 
-| Security | The information stored about a user can only be accessed by said user, never others.
+| Security & Privacy | The information stored about a user can only be accessed by said user, never others.
 | Robustness | The application will be able to handle any user error that could happen at runtime.
 | Accessibility | The application will be accessible by all users, even if the suffer from visual impediments such as colorblindness. 
 |===

docs/src/06_runtime_view.adoc

@@ -47,7 +47,7 @@ entity Backend as "Webapp Backend"
 database Wikidata
 User -> Frontend: next question
 Frontend -> Backend: get question
-Backend -> Wikidata: request data
+Backend -> Wikidata: request data\n(1s timeout)
 Wikidata -> Backend: receive data
 Backend -> Backend: generate question
 Backend -> Frontend: return question and answers
@@ -62,11 +62,11 @@ actor User
 entity Frontend as "Webapp Frontend"
 entity Backend as "Webapp Backend"
 database DB
-User -> Frontend: answer
-Frontend -> Backend: forward answer
-Backend -> Backend: process answer
-Backend -> DB: store result
-Backend -> Frontend: return correctness
+User -> Frontend: answer\n(30s timelimit)
+Frontend -> Frontend: process answer
+Frontend -> Backend: forward result
+Backend -> DB: store result\n(1s timeout)
+Backend -> Frontend: answer
 Frontend -> User: show correctness
 ----
 
@@ -80,7 +80,7 @@ entity Backend as "Webapp Backend"
 database DB
 User -> Frontend: send credentials
 Frontend -> Backend: forward credentials
-Backend -> DB: query for username
+Backend -> DB: query for username\n(1s timeout)
 DB -> Backend: retrieve user data
 Backend -> Backend: validate password
 Backend -> Frontend: login successful
@@ -97,7 +97,7 @@ entity Backend as "Webapp Backend"
 database DB
 User -> Frontend: send credentials
 Frontend -> Backend: forward credentials
-Backend -> DB: query for username
+Backend -> DB: query for username\n(1s timeout)
 DB -> Backend: retrieve user data
 Backend-> Backend: validate password
 Backend -> Frontend: wrong password
@@ -116,9 +116,9 @@ entity Backend as "Webapp Backend"
 database DB
 User -> Frontend: send signup form
 Frontend -> Backend: forward signup form
-Backend -> DB: check if username exists
+Backend -> DB: check if username exists\n(1s timeout)
 DB -> Backend: answer
-Backend -> DB: insert data
+Backend -> DB: insert data\n(1s timeout)
 Backend -> Frontend: signup successful
 Frontend -> User: signup successful
 ----
@@ -133,7 +133,7 @@ entity Backend as "Webapp Backend"
 database DB
 User -> Frontend: send signup form
 Frontend -> Backend: forward signup form
-Backend -> DB: check if username exists
+Backend -> DB: check if username exists\n(1s timeout)
 DB -> Backend: answer
 Backend -> Frontend: error: username in use
 Frontend -> User: username in use
@@ -153,7 +153,7 @@ database Wikidata
 User -> Frontend: next question
 Frontend -> Backend: get question
 Backend -> Wikidata: request data
-Wikidata -> Backend: error
+Wikidata -> Backend: error/timeout
 Backend -> Backend: error handling
 Backend -> Frontend: wikidata error
 Frontend -> User: show error message
@@ -170,7 +170,7 @@ database DB
 User -> Frontend: request
 Frontend -> Backend: request
 Backend -> DB: request
-DB -> Backend: error
+DB -> Backend: error/timeout
 Backend -> Backend: error handling
 Backend -> Frontend: DB error
 Frontend -> User: show error message

webapp/src/components/GameMenu/GameMenu.css

@@ -0,0 +1,22 @@
+button{
+    width: 100%;
+    height: 45px;
+    background: darkblue;
+    border: none;
+    outline: none;
+    border-radius: 40px;
+    box-shadow: 0 0 10px black;
+    cursor:pointer;
+    font-size: 16px;
+    color: white;
+    font-weight: 700;
+    margin: 0.5em;
+  }
+
+div{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+}

webapp/src/components/GameMenu/GameMenu.js

@@ -0,0 +1,27 @@
+import './GameMenu.css';
+export default function GameMenu() {
+  return (
+    <div>
+      <h2>Game</h2>
+      <ButtonHistoricalData />
+      <ButtonNewGame />
+    </div>
+  );
+  }
+
+  function ButtonHistoricalData() {
+    function handleClick() {
+      //ir a la vista de historical data
+      alert("Historical DAta");
+    }
+    return <button onClick={handleClick}>Historical Data</button>;
+  }
+
+  function ButtonNewGame() {
+    function handleClick() {
+      //ir a  la vista de la primera pregunta
+      alert("New game");
+    }
+    return <button onClick={handleClick}>Create New Game</button>;
+  }
+