diff --git a/docs/images/QualityAttributesTree.PNG b/docs/images/QualityAttributesTree.PNG index c025fd2..4ff6c39 100644 Binary files a/docs/images/QualityAttributesTree.PNG and b/docs/images/QualityAttributesTree.PNG differ diff --git a/docs/images/WikiDataQuery.png b/docs/images/WikiDataQuery.png index bdb5898..b058a93 100644 Binary files a/docs/images/WikiDataQuery.png and b/docs/images/WikiDataQuery.png differ diff --git a/docs/index.adoc b/docs/index.adoc index 468be5f..5c1d95f 100644 --- a/docs/index.adoc +++ b/docs/index.adoc @@ -6,7 +6,7 @@ // configure EN settings for asciidoc include::src/config.adoc[] -= image:arc42-logo.png[arc42] Template += image:arc42-logo.png[arc42] Wiq_en2a :revnumber: 8.2 EN :revdate: January 2023 :revremark: (based upon AsciiDoc version) diff --git a/docs/src/01_introduction_and_goals.adoc b/docs/src/01_introduction_and_goals.adoc index 01879ed..7fc1d7c 100644 --- a/docs/src/01_introduction_and_goals.adoc +++ b/docs/src/01_introduction_and_goals.adoc @@ -7,9 +7,6 @@ The project is a quizz game based on the Spanish TV show "Saber y ganar", the us === Requirements Overview - - - * Users will be able to create an account and log in * Each question must have a prize associated to it * Accesible through the web @@ -21,18 +18,10 @@ The project is a quizz game based on the Spanish TV show "Saber y ganar", the us * Se habilitarán salas de juego en tiempo real para el modo multijugador - - - === Quality Goals - - - //This table is just a placeholder, replace it with real quality goals once discussed !!! - - image::01_2_iso-25010-topics-EN.drawio.png["Categories of Quality Requirements"] (based upon the ISO 25010 standard): @@ -45,23 +34,13 @@ image::01_2_iso-25010-topics-EN.drawio.png["Categories of Quality Requirements"] |=== - - - === Stakeholders - - [options="header"] |=== |Role/Name|Contact|Expectations | _Wikidata_ | _Wikidata.org_ | _Public exposure by the use of their services deriving in a greater demand of said services_ -| _Uniovi's Software Architecture Teacher council_ | _jelabra@gmail.com_ | _Provide their students (development team) with a practical experience about the use of Software architecture in projects and making sure the have understood the concepts of it_ +| _Uniovi's Software Architecture Teacher council_ | | _Provide their students (development team) with a practical experience about the use of Software architecture in projects and making sure the have understood the concepts of it_ |_Development Team_||_Acquire experience in the development process of Software Architecture and pass the subject to complete their studies_ |_Users_|_Anyone who uses the app_|_Test their knowledge on a functional and easy to use quizz game app_ -|=== - - - -=== End - +|=== \ No newline at end of file diff --git a/docs/src/04_solution_strategy.adoc b/docs/src/04_solution_strategy.adoc index 10ead79..76e7784 100644 --- a/docs/src/04_solution_strategy.adoc +++ b/docs/src/04_solution_strategy.adoc @@ -7,14 +7,12 @@ This section aims to describe the strategies decided by the team. === Technologies The following list names the technologies selected: -- *Arc42:* this is a template for documentation and communication of software and system architectures - *TypeScript:* free and open-source high-level programming languaage deriving from JavaScript. The former provides tools that JavaScript does not. It will be used to program the client part of the application. - *React:* free and open-source front-end JavaScript library for building user interfaces based in components. It allows building complex interfaces in a simpler way, being flexible and easy to maintain. -- *Docker:* set of platform as a service products that use OS-level virtualization to deliver software in packages called containers. It will be used to deploy the application. - *MongoDB:* non-relational document database that provides support for JSON-like storage. It has drivers for major programming languages and development environments. - *NodeJS:* cross-platform, opens-source JavaScript library for the server layer that provides the tools to implement the application. It has a large and active community that may be usefull in difficult times. - *ExpressJS:* nodejs web application framework that provides a robust set of features for web and mobile applications. -- *Wikidata:* collaboratively edited multilingual knowledge graph. It's a common source of open data that anyone can use. It also can be read and edited by both humans and machines. +- *Wikidata Query Service:* Wikimedia implementation of SPARQL server to service queries for Wikidata and other data sets. === Organizational - *Weekly meetings:* to maintain a well communicated team so all are aware of the decissions and team progress. diff --git a/docs/src/08_concepts.adoc b/docs/src/08_concepts.adoc index 638bf5b..7b3c399 100644 --- a/docs/src/08_concepts.adoc +++ b/docs/src/08_concepts.adoc @@ -4,62 +4,13 @@ ifndef::imagesdir[:imagesdir: ../images] == Cross-cutting Concepts -[role="arc42help"] -**** -.Content -This section describes overall, principal regulations and solution ideas that are relevant in multiple parts (= cross-cutting) of your system. -Such concepts are often related to multiple building blocks. -They can include many different topics, such as - -* models, especially domain models -* architecture or design patterns -* rules for using specific technology -* principal, often technical decisions of an overarching (= cross-cutting) nature -* implementation rules - - -.Motivation -Concepts form the basis for _conceptual integrity_ (consistency, homogeneity) of the architecture. -Thus, they are an important contribution to achieve inner qualities of your system. - -Some of these concepts cannot be assigned to individual building blocks, e.g. security or safety. - - -.Form -The form can be varied: - -* concept papers with any kind of structure -* cross-cutting model excerpts or scenarios using notations of the architecture views -* sample implementations, especially for technical concepts -* reference to typical usage of standard frameworks (e.g. using Hibernate for object/relational mapping) - -.Structure -A potential (but not mandatory) structure for this section could be: - -* Domain concepts -* User Experience concepts (UX) -* Safety and security concepts -* Architecture and design patterns -* "Under-the-hood" -* development concepts -* operational concepts - -Note: it might be difficult to assign individual concepts to one specific topic -on this list. - -image::08-Crosscutting-Concepts-Structure-EN.png["Possible topics for crosscutting concepts"] - - -.Further Information - -See https://docs.arc42.org/section-8/[Concepts] in the arc42 documentation. -**** - - === WikiData Query Service image::WikiDataQuery.png["WikiData Query Service"] +* Image obtained from link:https://wikitech.wikimedia.org/wiki/Wikidata_Query_Service/Runbook[Wikitech] +The Wikidata Query Service (WDQS) is a powerful tool that provides access to the data contained in Wikidata. It uses SPARQL, a semantic query language for database. +We used this service to generate random questions from a template. === Design and UI diff --git a/docs/src/10_quality_requirements.adoc b/docs/src/10_quality_requirements.adoc index f6f598d..fcde8b0 100644 --- a/docs/src/10_quality_requirements.adoc +++ b/docs/src/10_quality_requirements.adoc @@ -34,10 +34,9 @@ image::QualityAttributesTree.PNG["Quality Attributes Tree"] |Usability(QG1)| Ease of use| Ease of use for the user| | |Ease of Learning| The standard functions should be as easy and intuitive to use as possible without the need for lengthy prior instruction| SC1 +| |Compressible questions| The system shall generate compressible questions using information from Wikidata|SC2 |Performance(QG2)| Responsiveness| Pages shoud load at a resonable time.\n During the game the answers to the questions must be processed by the system quickly| | |Robustness| The system shall work reliable under all specified environment and operating conditions.| -|Question Generation|Compressible questions| The system shall generate compressible questions using information fomr Wikidata|SC2 -| |Question Variety| The system shall generate questions based on different fields of knowledge keeping the from getting repetitive| |Security(QG3)|Data Protection|The user’s data should be protected and not accesible by anyone else| |=== diff --git a/docs/src/12_glossary.adoc b/docs/src/12_glossary.adoc index 7806b34..001438a 100644 --- a/docs/src/12_glossary.adoc +++ b/docs/src/12_glossary.adoc @@ -2,43 +2,13 @@ ifndef::imagesdir[:imagesdir: ../images] [[section-glossary]] == Glossary - -[role="arc42help"] -**** -.Contents -The most important domain and technical terms that your stakeholders use when discussing the system. - -You can also see the glossary as source for translations if you work in multi-language teams. - -.Motivation -You should clearly define your terms, so that all stakeholders - -* have an identical understanding of these terms -* do not use synonyms and homonyms - - -.Form - -A table with columns and . - -Potentially more columns in case you need translations. - - -.Further Information - -See https://docs.arc42.org/section-12/[Glossary] in the arc42 documentation. -**** -[role="arc42help"] -**** -[cols="e,2e" options="header"] +[options="header",cols="1,3"] |=== -|Term |Definition - -| -| - -| -| -|=== - -**** +|Term|Definition +|Gateway|Converst information, data or other communications from one protocol or format to another. +|Facade pattern|Analogous to a facade in architecture, a facade is an object that serves as a front-facing interface masking more complex underlying or structural code. +|JavaScript|An object-oriented computer proframming language commonly used to create interactive effects within web browsers. +|Database|Structured set of data held in a computer. +|Prototipe|A model of the views for the web application. +|Query|Question or request for information expressed in a formal manner. The retrieved information comes from a database. +|=== \ No newline at end of file diff --git a/game/groupservice/GroupController.js b/game/groupservice/GroupController.js index b8dcf86..3f41e60 100644 --- a/game/groupservice/GroupController.js +++ b/game/groupservice/GroupController.js @@ -129,6 +129,15 @@ let GroupController = { } catch(error){ res.status(500).json({error: error.message}) } + }, + getGroups: async (req, res) => { + try{ + // get all the groups + const groups = await Group.find() + res.json(groups) + } catch(error){ + res.status(500).json({error: error.message}) + } } } diff --git a/game/groupservice/group-service.js b/game/groupservice/group-service.js index 8366e90..ddf87c7 100644 --- a/game/groupservice/group-service.js +++ b/game/groupservice/group-service.js @@ -19,6 +19,7 @@ app.post('/joinGroup', GroupController.joinGroup); app.post('/leaveGroup', GroupController.leaveGroup); app.post('/createGroup', GroupController.createGroup); app.get('/getGroup/:uuid', GroupController.getGroup); +app.get('/getGroups', GroupController.getGroups); const server = app.listen(port, () => { console.log(`Group Service listening at http://localhost:${port}`); diff --git a/game/groupservice/postman/Groups.postman_collection.json b/game/groupservice/postman/Groups.postman_collection.json index 0aed4fb..572f29f 100644 --- a/game/groupservice/postman/Groups.postman_collection.json +++ b/game/groupservice/postman/Groups.postman_collection.json @@ -49,14 +49,14 @@ } }, "url": { - "raw": "http://localhost:8005/join", + "raw": "http://localhost:8005/joinGroup", "protocol": "http", "host": [ "localhost" ], "port": "8005", "path": [ - "join" + "joinGroup" ] } }, @@ -109,6 +109,14 @@ } }, "response": [] + }, + { + "name": "Get all groups", + "request": { + "method": "GET", + "header": [] + }, + "response": [] } ] } \ No newline at end of file diff --git a/gatewayservice/gateway-service.js b/gatewayservice/gateway-service.js index 3d101fc..ab0c9ac 100644 --- a/gatewayservice/gateway-service.js +++ b/gatewayservice/gateway-service.js @@ -170,6 +170,15 @@ app.get('/getGroup/:uuid', async (req, res) => { } }) +app.get('/getGroups', async (req, res) => { + try{ + const groupResponse = await axios.get(groupServiceUrl+'/getGroups'); + res.json(groupResponse.data); + }catch(error){ + res.status(500).json({ error: error.message }); + } +}) + // Start the gateway service const server = app.listen(port, () => { diff --git a/gatewayservice/postman/Gateway.postman_collection.json b/gatewayservice/postman/Gateway.postman_collection.json index 0616426..f56ff32 100644 --- a/gatewayservice/postman/Gateway.postman_collection.json +++ b/gatewayservice/postman/Gateway.postman_collection.json @@ -77,7 +77,7 @@ "header": [], "body": { "mode": "raw", - "raw": "{\r\n \"creatorUUID\": \"445541d7-aa01-46a5-8a08-506ae8609b91\",\r\n \"groupName\": \"Grupo17\",\r\n \"description\": \"grupo tekila oleole\",\r\n \"isPublic\": false\r\n}", + "raw": "{\r\n \"creatorUUID\": \"905aa11b-fd0c-4567-8fe4-e64dac7d96e8\",\r\n \"groupName\": \"GrupoMESSI\",\r\n \"description\": \"grupo tekila oleole\",\r\n \"isPublic\": false\r\n}", "options": { "raw": { "language": "json" @@ -105,7 +105,7 @@ "header": [], "body": { "mode": "raw", - "raw": "{\r\n \"uuid\": \"4af4d73c-6d45-47b5-bfc8-5f530e621fa6\",\r\n \"groupName\": \"Grupo 2\",\r\n \"joinCode\": \"ppf4\"\r\n}", + "raw": "{\r\n \"uuid\": \"58cd0585-e578-4f97-bfe9-eacdaee33ddc\",\r\n \"groupName\": \"GrupoMESSI\",\r\n \"joinCode\": \"bxUs\"\r\n}", "options": { "raw": { "language": "json" @@ -130,7 +130,19 @@ "name": "Get group", "request": { "method": "GET", - "header": [] + "header": [], + "url": { + "raw": "http://localhost:8000/getGroup/180e8f22-fc4d-4de4-bfe1-e4c244e3b7dd", + "protocol": "http", + "host": [ + "localhost" + ], + "port": "8000", + "path": [ + "getGroup", + "180e8f22-fc4d-4de4-bfe1-e4c244e3b7dd" + ] + } }, "response": [] }, @@ -141,7 +153,7 @@ "header": [], "body": { "mode": "raw", - "raw": "{\r\n \"expelledUUID\": \"4af4d73c-6d45-47b5-bfc8-5f530e621fa6\",\r\n \"adminUUID\": \"c77b2bde-1834-49f3-9775-3569eb1e1c6d\",\r\n \"groupName\": \"Grupo 2\"\r\n}", + "raw": "{\r\n \"expelledUUID\": \"58cd0585-e578-4f97-bfe9-eacdaee33ddc\",\r\n \"adminUUID\": \"905aa11b-fd0c-4567-8fe4-e64dac7d96e8\",\r\n \"groupName\": \"GrupoMESSI\"\r\n}", "options": { "raw": { "language": "json" @@ -161,6 +173,14 @@ } }, "response": [] + }, + { + "name": "Get groups", + "request": { + "method": "GET", + "header": [] + }, + "response": [] } ] } \ No newline at end of file diff --git a/webapp/src/components/game/LobbyGame.css b/webapp/src/components/game/LobbyGame.css index 322f9e0..fbfceca 100644 --- a/webapp/src/components/game/LobbyGame.css +++ b/webapp/src/components/game/LobbyGame.css @@ -1,14 +1,9 @@ -.lobby-container { - border: 1px solid #ccc; - padding: 20px; - border-radius: 5px; - } + + + +/** Deprecated**/ + - .lobby-title { - font-size: 24px; - font-weight: bold; - margin-bottom: 15px; - } .player-item { display: flex; @@ -19,53 +14,7 @@ padding: 10px; } - .add-bot-button { - background-color: #4CAF50; - color: white; - padding: 10px 20px; - border: none; - border-radius: 5px; - cursor: pointer; - margin-top: 10px; - } - .add-bot-button:disabled { - opacity: 0.5; - cursor: default; - } - .delete-button { - background-color: #f44336; - color: white; - padding: 5px 10px; - border: none; - border-radius: 3px; - cursor: pointer; - margin-left: 10px; - } - .delete-button:hover { - opacity: 0.8; - } - - .button-container { - display: flex; - justify-content: space-between; - } - - .start-game-button { - background-color: #007bff; - color: white; - padding: 10px 20px; - border: none; - border-radius: 5px; - cursor: pointer; - margin-left: 10px; - } - - .start-game-button:disabled { - background-color: #cccccc; /* Change background color for disabled state */ - color: #666666; /* Change text color for disabled state */ - cursor: not-allowed; /* Change cursor for disabled state */ - } \ No newline at end of file diff --git a/webapp/src/components/game/LobbyGame.scss b/webapp/src/components/game/LobbyGame.scss new file mode 100644 index 0000000..2e70893 --- /dev/null +++ b/webapp/src/components/game/LobbyGame.scss @@ -0,0 +1,90 @@ +table { + width: 100%; + border-collapse: collapse; + + th, td { + padding: 8px; + text-align: center; + } + + tr:nth-child(even) { + background-color: #f2f2f2; + } + + &:hover { + tr { + background-color: #ddd; + } + } + + img { + max-width: 100px; // Cambia el tamaño máximo de la imagen según sea necesario + height: auto; + display: block; + margin: 0 auto; // Centra la imagen horizontalmente + } + } + + .lobby-title { + font-size: 24px; + font-weight: bold; + margin-bottom: 15px; + } + + .add-bot-button { + background-color: #4CAF50; + color: white; + padding: 10px 20px; + border: none; + border-radius: 5px; + cursor: pointer; + margin-top: 10px; + } + + .add-bot-button:disabled { + opacity: 0.5; + cursor: default; + } + + .delete-button { + background-color: #f44336; + color: white; + padding: 5px 10px; + border: none; + border-radius: 3px; + cursor: pointer; + margin-left: 10px; + } + + .delete-button:hover { + opacity: 0.8; + } + + .button-container { + display: flex; + justify-content: space-between; + } + + .start-game-button { + background-color: #007bff; + color: white; + padding: 10px 20px; + border: none; + border-radius: 5px; + cursor: pointer; + margin-left: 10px; + } + + .start-game-button:disabled { + background-color: #cccccc; /* Change background color for disabled state */ + color: #666666; /* Change text color for disabled state */ + cursor: not-allowed; /* Change cursor for disabled state */ + } + + .lobby-container { + border: 1px solid #ccc; + padding: 20px; + border-radius: 5px; + } + + \ No newline at end of file diff --git a/webapp/src/components/game/singleplayer/LobbyGameSinglePlayer.tsx b/webapp/src/components/game/singleplayer/LobbyGameSinglePlayer.tsx index df35e7e..1ff8f01 100644 --- a/webapp/src/components/game/singleplayer/LobbyGameSinglePlayer.tsx +++ b/webapp/src/components/game/singleplayer/LobbyGameSinglePlayer.tsx @@ -1,6 +1,6 @@ import { FC } from 'react' import { Player } from './GameSinglePlayer'; -import '../LobbyGame.css'; +import '../LobbyGame.scss'; interface LobbyGameProps { setPlayers: (players:Player[]) => void;