Merge pull request #8 from JiahuiChen99/dev

Dev

README.md

@@ -1,92 +1,93 @@
-> ⚠️ **Targeted to students of my university - La Salle URL:** Refrain from copying this repository!
-# 🎮 League of Legends Champion Selector 
-
-LoL Champ Selector is a chat bot about the world's most [famous](https://na.leagueoflegends.com/) eSport game. The baseline is to help **summoner**(users) find a new champion to play with, based on the preferred difficulty.
-It also features like champions' description storytelling, items recommendations and much more, give it a try!
-
-<p align="center">
- <img src="https://github.com/JiahuiChen99/LoLChampSelector-Electron/blob/Client_Logic/assets/chatbot%20UI.png" width="auto">
-</p>
-
-## Architecture
-This client is build using NodeJS & Electron :electron: framework.
-
-It uses [gRPC](https://grpc.io/) protocol to communicate with the server. The underlying data sent to the back-end are Google's
-Protocol Buffers.
-
-
-> Structure for sending users' messages to the server. It is also used for champions' abilities retrieval.
-```
-// Simple message
-message Message {
-
-    string message = 1;
-
-}
-```
-
-
-> Fetch champions' abilities
-```
-// Request a champion's ability
-message championAbilityRequest {
-
-    string champion = 1;
-    string ability = 2;
-
-}
-```
-
-> Response from the server with the champion.
-```
-// Chatbot response
-message chatbotResponse {
-
-    string message = 1;
-    string champion = 2;
-
-}
-```
-
-
-Currently only 2 rpc are implemented
-
-> Sends the user message, awaits chatbot's response
-```
-rpc send_message(Message) returns (chatbotResponse);
-```
-
-> Fetches champion' abilities, the champion name and the ability are required.
-```
-rpc getChampionAbility(championAbilityRequest) returns (Message);
-```
-## Supported tokens
-- Champion recommendation based on **Difficulty**
-- Champion recommendation based on **Roles**
-- Items for **Roles**
-- Champion Description Storytelling 
-- Greetings
-- Bye
-- Thanking
-
-## Get it running
-Run `npm install` to install all dependencies.
-
-> ⚠️ **IMPORTANT: Please run the following**. The communication with the server won't work if it's not performed. 
-
-`electron-rebuild` to download core gRPC code and rebuild the library, due to Electron's nature. For more information
-refer to this [site](https://grpc.github.io/grpc/node/).
-
-## TODO ✔️
-### Front-end
-
-- [x] Chat Interface
-- [x] Champion Information Section
-- [x] gRPC calls
-- [ ] Improve UI
-
-### Back-end
-- [x] gRPC services
-- [ ] NLP (Natural Language Processing)
-- [ ] Chat bot Memory
-- [ ] More organic conversation
+> ⚠️ **Targeted to students of my university - La Salle URL:** Refrain from copying this repository!
+# 🎮 League of Legends Champion Selector 
+
+LoL Champ Selector is a chat bot about the world's most [famous](https://na.leagueoflegends.com/) eSport game. The baseline is to help **summoner**(users) find a new champion to play with, based on the preferred difficulty.
+It also features like champions' description storytelling, items recommendations and much more, give it a try!
+
+<p align="center">
+ <img src="https://github.com/JiahuiChen99/LoLChampSelector-Electron/blob/Client_Logic/assets/chatbot%20UI.png" width="auto">
+</p>
+
+## Architecture
+This client is build using NodeJS & Electron :electron: framework.
+
+It uses [gRPC](https://grpc.io/) protocol to communicate with the server. The underlying data sent to the back-end are Google's
+Protocol Buffers.
+
+
+> Structure for sending users' messages to the server. It is also used for champions' abilities retrieval.
+```
+// Simple message
+message Message {
+
+    string message = 1;
+
+}
+```
+
+
+> Fetch champions' abilities
+```
+// Request a champion's ability
+message championAbilityRequest {
+
+    string champion = 1;
+    string ability = 2;
+
+}
+```
+
+> Response from the server with the champion.
+```
+// Chatbot response
+message chatbotResponse {
+
+    string message = 1;
+    string champion = 2;
+
+}
+```
+
+
+Currently only 2 rpc are implemented
+
+> Sends the user message, awaits chatbot's response
+```
+rpc send_message(Message) returns (chatbotResponse);
+```
+
+> Fetches champion' abilities, the champion name and the ability are required.
+```
+rpc getChampionAbility(championAbilityRequest) returns (Message);
+```
+## Supported tokens
+- Champion recommendation based on **Difficulty**
+- Champion recommendation based on **Roles**
+- Items for **Roles**
+- Champion Description Storytelling 
+- Greetings
+- Bye
+- Thanking
+
+## Get it running
+Run `npm install` to install all dependencies.
+
+> ⚠️ **IMPORTANT: Please run the following**. The communication with the server won't work if it's not performed. 
+
+`electron-rebuild` to download core gRPC code and rebuild the library, due to Electron's nature. For more information
+refer to this [site](https://grpc.github.io/grpc/node/).
+
+## TODO ✔️
+### Front-end
+
+- [x] Chat Interface
+- [x] Champion Information Section
+- [x] gRPC calls
+- [ ] Improve UI
+
+### Back-end
+- [x] gRPC services
+- [ ] NLP (Natural Language Processing)
+- [ ] Chat bot Memory
+- [ ] More organic conversation
+

carousel.css

@@ -0,0 +1,55 @@
+.carousel-wrapper{
+    height: 100%;
+    width: 100%;
+    position:relative;
+    margin:0 auto;
+}
+.carousel-item{
+    position:absolute;
+    top:0;
+    bottom:0;
+    left:0;
+    right:0;
+    padding:25px 50px;
+    opacity:0;
+    transition: all 0.5s ease-in-out;
+}
+.arrow{
+    border: solid rgb(183, 149, 83);
+    border-width: 0 3px 3px 0;
+    display: inline-block;
+    padding: 12px;
+}
+
+.arrow-prev{
+    left: -30px;
+    position:absolute;
+    top:50%;
+    transform:translateY(-50%) rotate(135deg);
+}
+
+.arrow-next{
+    right: -30px;
+    position:absolute;
+    top:50%;
+    transform:translateY(-50%) rotate(-45deg);
+}
+
+.light{
+    color:white;
+}
+
+@media (max-width: 480px) {
+    .arrow, .light .arrow {
+        background-size: 10px;
+        background-position: 10px 50%;
+    }
+}
+
+
+.carousel-item {
+    z-index: 2;
+    opacity: 1;
+    background:url('https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Ahri_0.jpg');
+    background-size:cover;
+}