diff --git a/project-team-3.iml b/project-team-3.iml index 318ae04..0b6a316 100644 --- a/project-team-3.iml +++ b/project-team-3.iml @@ -4,14 +4,10 @@ - - - - diff --git a/src/main/back/account/Message.java b/src/main/back/account/Message.java index 345113a..e036738 100644 --- a/src/main/back/account/Message.java +++ b/src/main/back/account/Message.java @@ -1,6 +1,7 @@ package main.back.account; import java.time.LocalDate; +import java.time.LocalDateTime; import java.util.ArrayList; import java.util.HashMap; import java.util.Random; @@ -12,7 +13,7 @@ public class Message { private long messageID; private String player; private String message; - private LocalDate date; + private LocalDateTime date; static { messages = new HashMap<>(); @@ -23,7 +24,8 @@ public Message(String player, String message) { messages.put(messageID, this); this.player = player; this.message = message; - date = LocalDate.now(); + date = LocalDateTime.now(); + Player.getPlayers().get(player).getMessages().add(messageID); } public void addMessages(ArrayList messages) { @@ -43,4 +45,8 @@ public String getPlayer() { public String getMessage() { return message; } + + public LocalDateTime getDate() { + return date; + } } diff --git a/src/main/back/account/Player.java b/src/main/back/account/Player.java index e8725c6..4f5241b 100644 --- a/src/main/back/account/Player.java +++ b/src/main/back/account/Player.java @@ -94,6 +94,10 @@ public boolean declineFriendRequest(String username) { return false; } + public Set getFriendRequest() { + return friendRequest; + } + public void removeFriend(String username) { friends.remove(username); } diff --git a/src/main/back/account/User.java b/src/main/back/account/User.java index 10a3de8..603656e 100644 --- a/src/main/back/account/User.java +++ b/src/main/back/account/User.java @@ -1,8 +1,10 @@ package main.back.account; +import java.security.SecureRandom; import java.time.LocalDate; import java.time.LocalDateTime; import java.util.ArrayList; +import java.util.Base64; import java.util.HashMap; import java.util.Random; @@ -10,7 +12,7 @@ public class User { private static HashMap users; - private long userID; + private String token; private String firstName; private String lastName; private String username; @@ -25,7 +27,7 @@ public class User { } public User(String firstName, String lastName, String username, String password, String email, String phone) { - userID = (new Random()).nextLong(); + token = null; users.put(username, this); this.firstName = firstName; this.lastName = lastName; @@ -34,7 +36,12 @@ public User(String firstName, String lastName, String username, String password, this.email = email; this.phone = phone; date = LocalDateTime.now(); - logged = true; + } + + private static String generateToken() { + byte[] randomBytes = new byte[24]; + new SecureRandom().nextBytes(randomBytes); + return Base64.getUrlEncoder().encodeToString(randomBytes); } public static void addUsers(ArrayList users) { @@ -47,6 +54,10 @@ public static HashMap getUsers() { return users; } + public String getToken() { + return token; + } + public void setFirstName(String firstName) { this.firstName = firstName; } @@ -103,6 +114,16 @@ public void setLogged(boolean logged) { this.logged = logged; } + public void login() { + logged = true; + token = generateToken(); + } + + public void logout() { + logged = false; + token = null; + } + public boolean isLogged() { return logged; } diff --git a/src/main/back/controller/Server.java b/src/main/back/controller/Server.java index bcf6aaa..e8eca33 100644 --- a/src/main/back/controller/Server.java +++ b/src/main/back/controller/Server.java @@ -1,11 +1,13 @@ package main.back.controller; +import main.back.account.Player; import org.java_websocket.WebSocket; import org.java_websocket.handshake.ClientHandshake; import org.java_websocket.server.WebSocketServer; import java.net.InetSocketAddress; import java.util.Arrays; +import java.util.HashMap; import java.util.HashSet; import java.util.Set; diff --git a/src/main/back/controller/UserCommand.java b/src/main/back/controller/UserCommand.java index d56e0b3..9a82905 100644 --- a/src/main/back/controller/UserCommand.java +++ b/src/main/back/controller/UserCommand.java @@ -1,7 +1,9 @@ package main.back.controller; -import main.back.account.Player; -import main.back.account.User; +import main.back.account.*; + +import java.util.Map; +import java.util.Set; public interface UserCommand { static String resolve(String[] tokens) { @@ -14,6 +16,24 @@ static String resolve(String[] tokens) { } case "login": return login(tokens[1], tokens[2]); + case "allUsers": + return allUsers(tokens[1], tokens[2]); + case "sendSuggestion": + return addSuggestion(tokens[1], tokens[2], tokens[3], tokens[4]); + case "loadSuggestedGame": + return loadSuggestedGame(tokens[1], tokens[2]); + case "loadFriendsRequest": + return loadFriendsRequest(tokens[1], tokens[2]); + case "acceptFriend": + return acceptFriend(tokens[1], tokens[2], tokens[3]); + case "declineFriend": + return declineFriend(tokens[1], tokens[2], tokens[3]); + case "loadChatHistory": + return loadChatHistory(tokens[1], tokens[2], tokens[3]); + case "sendMessage": + return sendMessage(tokens[1], tokens[2], tokens[3], tokens[4]); + case "loadPlatoBotMessage": + return loadPlatoBotMessage(tokens[1], tokens[2]); default: return "failed command"; } @@ -43,8 +63,9 @@ static String register(String field, String value) { } static String register(String firstName, String lastName, String username, String password, String email, String phone) { - new Player(firstName, lastName, username, password, email, phone); - return "done"; + Player player = new Player(firstName, lastName, username, password, email, phone); + player.login(); + return player.getToken(); } static String login(String username, String password) { @@ -52,8 +73,14 @@ static String login(String username, String password) { if (user != null) { if (user.getPassword().equals(password)) { if (!user.isLogged()) { - user.setLogged(true); - return "done"; + user.login(); + if (user instanceof Admin) { + return "admin " + user.getToken() + user.getFirstName() + " " + user.getLastName() + " " + user.getUsername() + " " + user.getPhone() + " " + user.getEmail() + " " + + user.getDate().getYear() + " " + user.getDate().getMonthValue() + " " + user.getDate().getDayOfMonth(); + } else { + return "player " + user.getToken() + user.getFirstName() + " " + user.getLastName() + " " + user.getUsername() + " " + user.getPhone() + " " + user.getEmail() + " " + + user.getDate().getYear() + " " + user.getDate().getMonthValue() + " " + user.getDate().getDayOfMonth() + ((Player) user).getLevel() + " " + ((Player) user).getMoney(); + } } else { return "failed logging"; } @@ -64,4 +91,146 @@ static String login(String username, String password) { return "failed username"; } } + + static String allUsers(String username, String token) { + User user = User.getUsers().get(username); + String usersInfo = null; + if (user.getToken().equals(token)) { + for (Map.Entry entry : User.getUsers().entrySet()) { + usersInfo += entry.getValue().toString() + ("/"); + } + return usersInfo; +// return "amin lotfi aminlotfi 123456 amin@gmail.com 09304087303/mahdi hadi mahdihadiam 567890 mahdi@gmail.com 09126086363/mehran khaksar mehrankhaksar 654321 mehran@gmail.com 09122243286"; + } else { + return null; + } + } + + static String addSuggestion(String username, String token, String playerUsername, String game) { + User user = User.getUsers().get(username); + Player player = Player.getPlayers().get(playerUsername); + if (user.getToken().equals(token)) { + new Suggestion(player, game); + System.out.println(playerUsername + " added."); + return "send successfully"; + } else { + return "send suggestions unsuccessfully"; + } + } + + static String loadSuggestedGame(String username, String token) { + boolean isSeaBattle = false; + boolean isDotsAndBoxes = false; + Set suggestions = Player.getPlayers().get(username).getSuggestions(); + User user = User.getUsers().get(username); + + if (user.getToken().equals(token)) { + for (Long suggestionID : suggestions) { + if (Suggestion.getSuggestions().containsKey(suggestionID)) { + if (Suggestion.getSuggestions().get(suggestionID).getGame().equals("BattleSea")) { + isSeaBattle = true; + } else if (Suggestion.getSuggestions().get(suggestionID).getGame().equals("DotsAndBoxes")) { + isDotsAndBoxes = true; + } + } else { + return "fail No game suggested."; + } + } + if (isSeaBattle && isDotsAndBoxes) { + return "Battle Sea Dots And Boxes"; + } else if (isSeaBattle) { + return "Battle Sea"; + } else if (isDotsAndBoxes) { + return "Dots And Boxes"; + } else { + return "fail "; + } + } else { + return ""; + } + } + + static String loadFriendsRequest(String username, String token) { + User user = User.getUsers().get(username); + Set friendsRequestUsername = Player.getPlayers().get(username).getFriendRequest(); + String allUsernames = null; + if (user.getToken().equals(token)) { + for (String friendUsername : friendsRequestUsername) { + allUsernames += (Player.getPlayers().get(friendUsername).getUsername()) + (" "); + } + return allUsernames; + } else { + return ""; + } + } + + static String acceptFriend(String username, String token, String friendUsername) { + User user = User.getUsers().get(username); + Player player = Player.getPlayers().get(username); + if (user.getToken().equals(token)) { + player.getFriends().add(friendUsername); + player.getFriendRequest().remove(friendUsername); + return "accept successfully"; + } else { + return ""; + } + } + + static String declineFriend(String username, String token, String friendUsername) { + User user = User.getUsers().get(username); + Player player = Player.getPlayers().get(username); + if (user.getToken().equals(token)) { + player.getFriendRequest().remove(friendUsername); + return "decline successfully"; + } else { + return ""; + } + } + + static String loadChatHistory(String username, String token, String PlayerUsername) { + User user = User.getUsers().get(username); + Player player = Player.getPlayers().get(PlayerUsername); + String allMessages = null; + if (user.getToken().equals(token)) { + for (Long messageID : player.getMessages()) { + allMessages += Message.getMessages().get(messageID).getMessage() + "@" + + Message.getMessages().get(messageID).getDate().getHour() + ":" + + Message.getMessages().get(messageID).getDate().getMinute() + "/" + + Message.getMessages().get(messageID).getDate().getMonthValue() + "/" + + Message.getMessages().get(messageID).getDate().getDayOfMonth(); + } + return allMessages; + } else { + return null; + } + } + + static String sendMessage(String username, String token, String playerUsername, String messageContent) { + User user = User.getUsers().get(username); + if (user.getToken().equals(token)) { + Message message = new Message(playerUsername, messageContent); + return messageContent + "/" + message.getDate().getHour() + ":" + message.getDate().getMinute() + "/" + + message.getDate().getMonthValue() + "/" + message.getDate().getDayOfMonth(); + } else { + return null; + } + } + + static String loadPlatoBotMessage( String username, String token) { + Player player = Player.getPlayers().get(username); + User user = User.getUsers().get(username); + String allMessages = null; + if (user.getToken().equals(token)) { + for (Long messageID : player.getMessages()) { + allMessages += Message.getMessages().get(messageID).getMessage() + "@" + + Message.getMessages().get(messageID).getDate().getHour() + ":" + + Message.getMessages().get(messageID).getDate().getMinute() + "/" + + Message.getMessages().get(messageID).getDate().getMonthValue() + "/" + + Message.getMessages().get(messageID).getDate().getDayOfMonth(); + } + return allMessages; + } else { + return null; + } + } } diff --git a/src/main/front/css/account.css b/src/main/front/css/account.css index 6d1c240..a917d82 100644 --- a/src/main/front/css/account.css +++ b/src/main/front/css/account.css @@ -14,7 +14,7 @@ } section.account { - padding: calc(0.03 * 97vh); + padding: 0 calc(0.03 * 97vh); } section.account header { @@ -174,7 +174,7 @@ section.account .friends { align-items: center; position: relative; overflow-y: scroll; - margin: 0; + margin: 0 0 calc(0.03 * 97vh) 0; overflow-x: hidden; } @@ -184,6 +184,7 @@ section.account .friends::-webkit-scrollbar { section.account .friends h1 { border-radius: 6px; + height: 7vh; width: 100%; box-sizing: border-box; font-family: 'Product Bold'; diff --git a/src/main/front/css/common.css b/src/main/front/css/common.css index fd13ca3..331a49d 100644 --- a/src/main/front/css/common.css +++ b/src/main/front/css/common.css @@ -77,7 +77,7 @@ body>section>main>section { position: relative; display: block; box-sizing: border-box; - transition: transform linear 0.3s, visibility linear 0.3s; + transition: transform linear 0.3s; opacity: 0; height: 0; transform: translateY(5%) scale(1.05); diff --git a/src/main/front/css/dotsAndBoxes.css b/src/main/front/css/dotsAndBoxes.css new file mode 100644 index 0000000..7e00351 --- /dev/null +++ b/src/main/front/css/dotsAndBoxes.css @@ -0,0 +1,75 @@ +.dots-and-boxes-page { + background-color: #2f2822; +} + +.players-score { + transform: translateY(60%); +} + +.players-score, .scores{ + display: flex; +} + +.players-score { + width: 65%; + height: 45px; + margin: auto; + /*margin-left: 110px;*/ +} + +.user1-score { + display: flex; + width: 30%; + height: 35px; + border: #4cf38b 1px solid; + background-color: #2d2c34; + border-radius: 8px 0 0 8px; + color: #fff; + margin: auto; +} + +.user1-score span, .user2-score span { + display: flex; + vertical-align: middle; + alignment: center; + margin: auto; +} + +.user2-score { + display: flex; + width: 30%; + height: 35px; + border: #2963f6 1px solid; + background-color: #2d2c34; + border-radius: 0 8px 8px 0; + color: #ffffff; + margin: auto; +} + +.user1-score span, .user2-score span { + margin-top: 5px; + margin-left: 14px; +} + +.scores { + width: 40%; + height: 45px; + background-color: #4cf38b; + border-radius: 6px; +} + +.scores div:first-child, .scores div:last-child { + width: 100%; +} + +#player1-score, #player2-score { + margin-top: 10px; + font-size: 20px; + color: #ffffff; +} + +#DBcanvas { + position: absolute; + box-sizing: border-box; + transform: translateX(-15vw) translateY(23vh) +} \ No newline at end of file diff --git a/src/main/front/css/eventPage.css b/src/main/front/css/eventPage.css deleted file mode 100644 index 900455f..0000000 --- a/src/main/front/css/eventPage.css +++ /dev/null @@ -1,127 +0,0 @@ -@font-face { - src: url('../font/Product Sans Bold.ttf'); - font-family: 'Product Bold'; -} - -@font-face { - src: url('../font/Product Sans Regular.ttf'); - font-family: 'Product'; -} - -@font-face { - src: url('../font/Questrial-Regular.ttf'); - font-family: 'Questrial'; -} - -section.event-page { - padding: calc(0.03 * 97vh); -} - -.event-header-img { - display: block; - float: left; - width: 100%; - height: calc(0.25 * 0.94 * 97vh); -} - -.event-header-img img { - width: 100%; - height: 100%; - border-radius: 8px; -} - -section.event-page .money { - display: block; - font-family: 'Questrial'; - color: #485460; - font-size: 30px; -} - -section.event-page .box { - /*height: calc(0.25 * 0.94 * 97vh);*/ - height: 550px; - width: 100%; - border-radius: 9.4px; - background-color: rgb(221, 217, 210); - box-shadow: 0 5px 20px rgb(0, 0, 0, 0.08); - box-sizing: border-box; - padding: 4px; - display: block; - flex-flow: row nowrap; - justify-content: space-between; - align-items: center; - position: relative; -} - -.event-body { - display: block; - float: left; - clear: both; -} - -.first-prize img { - width: 80px; - height: 80px; -} - -.second-prize img { - width: 80px; - height: 80px; -} - -.first-prize, .second-prize { - display: flex; -} -.first-prize { - margin-left: 85px; - margin-bottom: 20px; -} - -.second-prize { - margin-left: 90px; -} - -.first-prize span, .second-prize span { - transform: translateY(35%) translateX(25%); -} - -.event-buttons { - margin-top: 50px; - margin-left: 80px; -} - -.event-buttons button { - width: 100%; - height: 40px; - display: block; - margin: 8px; - font-family: 'Product Bold'; - font-size: 15px; -} - -.event-buttons .join { - background-color: #05c46b; -} - -.event-buttons .join:hover { - background-color: #0be881; - cursor: pointer; -} - -.event-buttons .edit { - background-color: #ffd32a; -} - -.event-buttons .edit:hover { - background-color: #ffdd59; - cursor: pointer; -} - -.event-buttons .leave { - background-color: #ff3f34; -} - -.event-buttons .leave:hover { - background-color: #ff5e57; - cursor: pointer; -} \ No newline at end of file diff --git a/src/main/front/css/events.css b/src/main/front/css/events.css deleted file mode 100644 index 067e51f..0000000 --- a/src/main/front/css/events.css +++ /dev/null @@ -1,90 +0,0 @@ -@font-face { - src: url('../font/Product Sans Bold.ttf'); - font-family: 'Product Bold'; -} - -@font-face { - src: url('../font/Product Sans Regular.ttf'); - font-family: 'Product'; -} - -@font-face { - src: url('../font/Questrial-Regular.ttf'); - font-family: 'Questrial'; -} - -section.events { - padding: calc(0.03 * 97vh); -} - -section.events .money { - display: block; - font-family: 'Questrial'; - color: #eeeeee; - font-size: 20px; -} - -section.events .box { - height: calc(0.25 * 0.94 * 97vh); - width: 100%; - border-radius: 9.4px; - background-color: rgb(221, 217, 210); - box-shadow: 0 5px 20px rgb(0, 0, 0, 0.08); - box-sizing: border-box; - padding: 4px; - display: flex; - flex-flow: row nowrap; - justify-content: space-between; - align-items: center; - position: relative; -} - -.event-img { - position: relative; - background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("../jpg/battle-ship-event-back-ground.jpg"); - background-attachment:fixed; - background-repeat: no-repeat; - background-position: center; -} - -.box div:first-child { - flex-basis: 33.33%; - padding: 2%; -} - -section.events .box div #badge-icon { - width: 100%; - top: 50%; - left: 50%; -} - -.events-name { - /*float: left;*/ - alignment: center; - margin-left: 50px; -} - -.events-name span { - font-family: 'Questrial'; - font-size: 20px; - color: #ecf0f1; -} - -.events-name span:first-child { - font-weight: bold; - margin-bottom: 20px; - color: #f1c40f; -} - -.join-button { - display: flex; - transform: translateY(90%) translateX(70%); -} -#info-icon:hover { - cursor: pointer; - opacity: 60%; -} - -section.events .box .join-button #info-icon { - width: 30%; -} diff --git a/src/main/front/css/gamesPage.css b/src/main/front/css/gamesPage.css new file mode 100644 index 0000000..aa19db5 --- /dev/null +++ b/src/main/front/css/gamesPage.css @@ -0,0 +1,421 @@ +@font-face { + src: url('../font/Product Sans Bold.ttf'); + font-family: 'Product Bold'; +} + +@font-face { + src: url('../font/Product Sans Regular.ttf'); + font-family: 'Product'; +} + +@font-face { + src: url('../font/Questrial-Regular.ttf'); + font-family: 'Questrial'; +} + +section .games-menu, section .all-game, section .game-page { + padding: 0 calc(0.03 * 97vh); +} + +section .all-game, section .game-page { + height: calc(0.690 * 97vh); + width: 100%; + border-radius: 9.4px; + background-color: #f7f7f6; + box-shadow: 0 5px 20px rgb(0, 0, 0, 0.08); + box-sizing: border-box; + padding: 4px; + display: block; + flex-flow: row nowrap; + justify-content: space-between; + align-items: center; + position: relative; + overflow: hidden; + margin: 0 0 calc(0.03 * 97vh) 0; +} + +section .all-game { + height: auto; +} + +section .game-page { + height: calc(0.940 * 97vh); + display: none; +} + + +.history, .leaderboard, .How-to-Play, .availableGames { + height: calc(0.600 * 97vh); + width: 100%; + box-shadow: 0 5px 20px rgb(0, 0, 0, 0.08); + box-sizing: border-box; + display: flex; + padding: 4px; + flex-flow: column nowrap; + justify-content: flex-start; + align-items: center; + position: relative; + overflow-y: scroll; + margin: 0; + overflow-x: hidden; + width: 100%; + background-color: #e7e7e7; + border-radius: 0 0 9.4px 9.4px; +} + +.history, .leaderboard, .How-to-Play { + display: none; +} + +.availableGames::-webkit-scrollbar, .history::-webkit-scrollbar, .leaderboard::-webkit-scrollbar, .How-to-Play::-webkit-scrollbar { + display: none; +} + +.game { + display: block; + width: 100%; +} + +.battle-sea-photo { + margin: 20px auto 30px auto; +} + +.battle-sea-photo:hover { + cursor: pointer; +} + +.dots-and-boxes-photo:hover { + cursor: pointer; +} + +.battle-sea-photo img, .dots-and-boxes-photo img { + width: 80%; + height: 130px; + border-radius: 8px 8px 0 0; +} + +.battle-sea-photo span, .dots-and-boxes-photo span { + width: 100%; + display: block; +} + +.battle-sea-photo span, .dots-and-boxes-photo span { + width: 80%; + height: 27px; + margin: auto auto 30px auto; + background-color: #cac8c8; + border-radius: 0 0 8px 8px; + box-sizing: border-box; + vertical-align: center; + font-size: 20px; +} + +.battle-sea-photo img:hover, .dots-and-boxes-photo img:hover, +.battle-sea-photo span:hover, .dots-and-boxes-photo span:hover { + opacity: 0.9; +} + +.battle-sea-photo span:hover, .dots-and-boxes-photo span:hover { + background-color: #f13453; + color: #ffffff; +} + +.container { + display: block; + margin-left: 8px; + margin-top: 15px; + width: 280px; +} + +.gameLog { + display: flex; + width: 100%; +} + +.gameLog div:first-child { + text-align: left; + width: 50%; +} + +.gameLog div:last-child { + text-align: right; + width: 50%; +} + +.gameLog div span:first-child { + color: #f9bf24; +} + +.gameLog div span:last-child { + color: #ffffff; +} + +.progress { + padding: 6px; + background: rgba(0, 0, 0, 0.25); + border-radius: 6px; + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08); +} + +.progress-bar { + height: 18px; + background-color: #ee303c; + border-radius: 4px; + transition: 0.4s linear; + transition-property: width, background-color; +} + +.progress-striped .progress-bar { + background-color: #FCBC51; + width: 60%; + background-image: linear-gradient( + 45deg, rgb(252,163,17) 25%, + transparent 25%, transparent 50%, + rgb(252,163,17) 50%, rgb(252,163,17) 75%, + transparent 75%, transparent); + animation: progressAnimationStrike 4s; +} + +@keyframes progressAnimationStrike { + from { width: 0 } + to { width: 60% } +} + +.game-level { + display: flex; + background-color: #cd3700; + border-radius: 8px; + width: 100%; +} + +.game-level div svg { + width: 55px; + height: 55px; + margin-left: 5px; + margin-top: 3px; +} + +.game-level div img { + width: 55px; + height: 55px; + margin-left: 5px; + margin-top: 3px; +} + +.level-number { + display: flex; + width: 33px; + height: 33px; + background-color: #ffd700; + border-radius: 50%; + margin-left: 10px; + margin-bottom: 15px; + margin-top: 15px; +} + +.level-number span { + margin-left: 12px; + margin-top: 6px; +} + +.ribbon { + width: 100%; + display: flex; + margin-top: 8px; + height: 30px; +} + +.ribbon div { + width: 100%; + height: 25px; + margin: 3px; + background-color: #122948; + border-radius: 8px 8px 0 0; + display: inline-block; + vertical-align: middle; +} +.ribbon div:first-child { + background-color: #bb2d44; +} + +.ribbon div:hover { + cursor: pointer; +} + +.ribbon div span { + display: inline-block; + vertical-align: middle; + font-family: 'Product Bold'; + font-size: 12px; + color: rgb(239, 233, 224); + text-transform: uppercase; +} + +.ribbon div:first-child { + margin-left: 0; +} + +.ribbon div:last-child { + margin-right: 0; +} + +.SB-game, .DB-game, .game-history, .player-score { + display: flex; + background-color: #e1aa12; + border-radius: 8px; + width: 100%; + height: 48px; + margin-bottom: 8px; +} + +.SB-game, .DB-game { + background-color: #0b9cff; +} + +.game-icon { + width: 15%; +} + +.availableGames .game-icon img, .history .game-icon img, .player-avatar-rank svg { + width: 40px; + height: 40px; + margin-top: 4px; +} + +.history-info, .game-info { + display: block; + width: 65%; + margin-top: 4px; +} + +.history-info span, .game-info span { + display: flex; + font-size: 19px; +} + +.history-info div, .game-info div { + display: flex; + font-family: 'Product'; + font-size: 16px; +} + +.game-time, .join { + width: 20%; +} + +.join { + display: block; +} + +.join-button { + display: inline-block; + vertical-align: middle; + width: 85%; + height: 2.2em; + text-transform: uppercase; + margin-top: 9px; + border: none; + border-radius: 4px; + background-color: #ee303c; + color: #ffffff; + font-size: 14px; +} + +.join-button:hover { + cursor: pointer; + opacity: 0.9; +} + +.run-game { + border-radius: 6px; + width: 100%; + box-sizing: border-box; + font-family: 'Product Bold'; + font-size: 3vh; + line-height: 1em; + padding: 2vh 0; + margin-top: 10px; + background-color: #34f16e; + color: rgb(239, 233, 224); + margin-bottom: 1vh; +} + +.run-game:hover { + color: #222026; + opacity: 0.9; + cursor: pointer; +} + +.player-score { + width: 100%; + display: flex; +} + +.rank { + width: 10%; + font-size: 20px; + margin-top: 12px; +} + +.player-avatar-rank { + width: 70%; + display: flex; +} + +.player-avatar-rank span { + margin-top: 13px; + margin-left: 8px; +} + +.score { + width: 20%; + margin-top: 14px; +} + +.score span { + background-color: #222026; + color: #ffffff; + border-radius: 20px; + padding: 6px; +} + +.DB-content, .SB-content { + padding: 8px; +} + +.DB-content div h1, .DB-content div p, .DB-content div img, +.SB-content div h1,.SB-content div p,.SB-content div img { + text-align: left; +} + +.DB-content div h1, .SB-content div h1 { + font-family: 'Product Bold'; + margin-bottom: 6px; + font-size: 18px; +} + +.DB-content div p, .SB-content div p { + font-family: 'Questrial'; + width: 100%; + text-align: justify; + text-justify: inter-word; + margin-bottom: 4px; + line-height: 120%; +} + +.DB-content div, .SB-content div { + width: 100%; + text-align: justify; + text-justify: inter-word; +} + +.DB-content div img { + width: 40%; + height: 25%; + margin-left: 30%; + margin-bottom: 4px; +} + +.DB-content div p:last-child, .SB-content div p:last-child { + margin-bottom: 12px; +} \ No newline at end of file diff --git a/src/main/front/css/inbox.css b/src/main/front/css/inbox.css new file mode 100644 index 0000000..6c96d1a --- /dev/null +++ b/src/main/front/css/inbox.css @@ -0,0 +1,242 @@ +@font-face { + src: url('../font/Product Sans Bold.ttf'); + font-family: 'Product Bold'; +} + +@font-face { + src: url('../font/Product Sans Regular.ttf'); + font-family: 'Product'; +} + +@font-face { + src: url('../font/Questrial-Regular.ttf'); + font-family: 'Questrial'; +} + +section .inbox, section .admin-inbox { + padding: 0 calc(0.03 * 97vh); +} + +.chatBox { + height: calc(0.940 * 97vh); + width: 100%; + border-radius: 9.4px; + background-color: #ffffa5; + box-shadow: 0 5px 20px rgb(0, 0, 0, 0.08); + box-sizing: border-box; + padding: 4px; + display: block; + flex-flow: row nowrap; + justify-content: space-between; + align-items: center; + position: relative; + overflow: hidden; + margin: calc(0.03 * 97vh) 0; +} + +section .admin-inbox .chatBox { + margin: calc(0.0016 * 97vh) 0; + +} + +.inboxHeader p { + margin: 0; +} + +.inboxHeader { + border-radius: 6px; + width: 100%; + box-sizing: border-box; + font-family: 'Product Bold'; + font-size: 3.5vh; + line-height: 1em; + padding: 2vh 0; + margin: 0; + background-color: #122948; + color: rgb(239, 233, 224); + margin-bottom: 1vh; +} + +.messageHistory { + width: 100%; + display: block; + height: 1.5em; +} + +.messageHistory div { + text-align: center; + margin: auto; + width: 26%; + border: #313335 1px solid; + background-color: #313335; + border-radius: 10px; + opacity: 0.75; + color: white; + display: none; +} + +.messageHistory div span { + display: inline-block; + vertical-align: middle; + font-family: 'Product'; + font-size: 14px; +} + +.messageArea { + height: calc(0.770 * 97vh); + width: 100%; + box-sizing: border-box; + display: block; + padding: 4px; + flex-flow: column nowrap; + justify-content: flex-start; + align-items: center; + position: relative; + overflow-y: scroll; + margin: 0; + overflow-x: hidden; + background-color: #ffffa5; + border-radius: 0 0 9.4px 9.4px; +} + +.messageArea::-webkit-scrollbar { + width: 8px; +} + +.messageArea::-webkit-scrollbar-thumb { + border-radius: 8px; + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5); +} + +.messageField { + width: 100%; + box-sizing: border-box; + display: flex; + align-items: flex-start; + border-radius: 6px; + height: 50px; +} + +.messageField div:first-child { + width: 90%; +} + +.messageField div:first-child textarea { + width: 98%; + border: none; + resize: none; + background-color: #cd3700; + font-size: 16px; + font-family: 'Questrial'; + margin-top: 5px; + padding: 3px; + color: #ececec; + border-radius: 6px 6px 6px 6px; +} + +.messageField div:first-child textarea::-webkit-input-placeholder { + font-size: 15px; + color: #d2d2d2; + padding: 8px; + font-family: 'Product'; +} + +.messageField div:last-child { + width: 10%; + margin-top: 7px; + height: 40px; +} + +.messageField div svg { + width: 35px; + height: auto; +} + +.messageField div svg:hover { + opacity: 0.7; + cursor: pointer; +} + +.messageArea div svg { + width: 40px; + height: 40px; + border-radius: 50%; +} + +.avatar-message { + display: flex; + margin-top: 12px; +} + +.player-avatar-message { + display: flex; + margin-top: 12px; + justify-content: flex-end; + align-content: flex-end; +} + +.admin-avatar-message { + display: flex; + margin-top: 12px; + justify-content: flex-end; + align-content: flex-end; +} + +.messageBox div:first-child, .admin-messageBox div:first-child { + text-align: justify; + text-justify: inter-word; +} + +.messageBox div p, .admin-messageBox div p { + font-family: 'Product'; + font-size: 16px; + margin: 0; +} + +.messageBox { + height: auto; + width: 60%; + border-radius: 2px 8px 8px 8px; + background-color: #90EE90; + box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); + box-sizing: border-box; + padding: 4px; + display: block; + flex-flow: row nowrap; + justify-content: space-between; + align-items: center; + position: relative; + overflow: hidden; + margin-left: 6px; + opacity: 0.9; +} + +.player-messageBox { + border-radius: 8px 2px 8px 8px; + margin-left: 0; + margin-right: 6px; +} + +.admin-messageBox { + height: auto; + width: 60%; + background-color: #90EE90; + box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); + box-sizing: border-box; + padding: 4px; + display: block; + flex-flow: row nowrap; + justify-content: space-between; + align-items: center; + position: relative; + overflow: hidden; + margin-right: 6px; + opacity: 0.9; + border-radius: 8px 2px 8px 8px; +} + +.messageBox div:last-child, .admin-messageBox div:last-child { + text-align: right; + font-family: 'Questrial'; + font-size: 13px; +} \ No newline at end of file diff --git a/src/main/front/css/message.css b/src/main/front/css/message.css new file mode 100644 index 0000000..8d88862 --- /dev/null +++ b/src/main/front/css/message.css @@ -0,0 +1,187 @@ +@font-face { + src: url('../font/Product Sans Bold.ttf'); + font-family: 'Product Bold'; +} + +@font-face { + src: url('../font/Product Sans Regular.ttf'); + font-family: 'Product'; +} + +@font-face { + src: url('../font/Questrial-Regular.ttf'); + font-family: 'Questrial'; +} + +section .player-message { + padding: 0 calc(0.03 * 97vh); +} + +.player-suggestion { + height: calc(0.295 * 97vh); + width: 100%; + border-radius: 9.4px; + background-color: #f7f7f6; + box-shadow: 0 5px 20px rgb(0, 0, 0, 0.08); + box-sizing: border-box; + padding: 4px; + display: block; + flex-flow: row nowrap; + justify-content: space-between; + align-items: center; + position: relative; + overflow: hidden; + margin: 0 0 calc(0.03 * 97vh) 0; +} + +.request { + height: calc(0.705 * 97vh); + width: 100%; + border-radius: 9.4px 9.4px 0 0; + background-color: #f7f7f6; + box-shadow: 0 5px 20px rgb(0, 0, 0, 0.08); + box-sizing: border-box; + display: flex; + padding: 4px; + flex-flow: column nowrap; + justify-content: flex-start; + align-items: center; + position: relative; + overflow-y: scroll; + margin: 0; + overflow-x: hidden; +} + +.suggestion-title, .request-title, .game-title { + border-radius: 6px; + width: 100%; + box-sizing: border-box; + font-family: 'Product Bold'; + font-size: 3vh; + line-height: 1em; + padding: 2vh 0; + margin: 0; + background-color: #122948; + color: rgb(239, 233, 224); + margin-bottom: 1vh; +} + +section.player-message .request::-webkit-scrollbar { + display: none; +} + +.request-title { + margin-bottom: 20px; +} + +.suggestion-title span, .request-title span { + display: block; + font-family: 'Product Bold'; + font-size: 20px; + vertical-align: center; + alignment: center; + color: #ffffff; + text-transform: uppercase; +} + +.games { + display: flex; + margin-top: 19px; + align-content: center; +} + +.games small { + font-family: 'Questrial'; + margin: auto; + font-size: 17px; + color: #bb2d44; + display: none; +} + +.battle-sea img, .dots-and-boxes img { + width: 150px; + height: 95px; + border-radius: 8px; + display: block; +} + +.battle-sea img:hover, .dots-and-boxes img:hover { + opacity: 0.9; + cursor: pointer; +} + +.battle-sea img { + margin-right: 65px; + margin-left: 15px; +} + +.friend-request-container { + width: 100%; + margin: 0; + padding: 0; +} + +.friend-request { + margin-bottom: 8px; + margin-left: 6px; + display: flex; + width: 97%; + background-color: #122948; + height: 45px; + border-radius: 8px; +} + +.friend-avatar { + display: flex; + width: 55%; +} +.request-buttons { + display: flex; + width: 45%; +} + +.friend-avatar img { + width: 40px; + height: 40px; + margin-top: 4px; + margin-left: 8px; +} + +.friend-avatar span { + color: #ffffff; + font-family: 'Product Bold'; + font-size: 20px; + margin-top: 10px; + margin-left: 10px; +} + +.request-buttons { + display: flex; + margin-bottom: 0; +} + +.request-buttons .accept-button, .request-buttons .decline-button { + width: 50%; + font-family: 'Product Bold'; + font-size: 16px; + color: #ffffff; + text-transform: uppercase; + padding-top: 13px; +} + +.request-buttons .accept-button { + background-color: #34f16e; +} + +.request-buttons .decline-button { + background-color: #f13453; + border-radius: 0 6px 6px 0; +} + +.request-buttons .accept-button:hover, .request-buttons .decline-button:hover { + cursor: pointer; + opacity: 0.9; +} + + + diff --git a/src/main/front/css/primary.css b/src/main/front/css/primary.css index 90de894..667c57c 100644 --- a/src/main/front/css/primary.css +++ b/src/main/front/css/primary.css @@ -13,7 +13,7 @@ font-family: 'Product'; } -section.primary header { +section.primary .player header { display: flex; width: 100%; background-color: transparent; @@ -38,7 +38,7 @@ section.primary .player header .search { transition: opacity ease-in-out 0.1s; } -section.primary .player header .search:hover, section.primary header .search:focus { +section.primary .player header .search:hover, section.primary .player header .search:focus { opacity: 1; } @@ -117,7 +117,7 @@ section.primary .player .favorites { justify-content: space-between; align-items: center; gap: 2vh; - transform: translateY(-23vh); + transform: translateY(-5vh); } section.primary .player .favorites div { @@ -131,6 +131,10 @@ section.primary .player .favorites div { position: relative; } +section.primary .player .favorites div:hover { + filter: brightness(0.9); +} + section.primary .player .favorites .battle { background-image: url('../jpg/sea\ battle.jpg'); } @@ -139,11 +143,7 @@ section.primary .player .favorites .dots { background-image: url('../jpg/dots\ and\ boxes.jpeg'); } -section.primary .player .favorites div:hover { - filter: brightness(0.9); -} - -section.primary .player .favorites div .badge { +section.primary .player .favorites div div { height: 4vh; width: 4vh; box-sizing: border-box; @@ -155,14 +155,14 @@ section.primary .player .favorites div .badge { top: -2vh; } -section.primary .player .favorites div .badge svg { +section.primary .player .favorites div div svg { width: 2vh; height: 2vh; fill: #f9b060; } -section.primary .player .favorites div .title { - font-family: 'Product Bold'; +section.primary .player .favorites div span { + font-family: Redressed; font-size: 3vh; line-height: 1em; position: absolute; @@ -177,12 +177,13 @@ section.primary .player .favorites div .title { section.primary .player .events { display: flex; - flex-flow: row wrap; + flex-flow: row nowrap; box-sizing: border-box; width: 100%; padding: 2vh 7vh; gap: 7vh; background: transparent; + transform: translateY(15vh); } section.primary .player .events::-webkit-scrollbar { @@ -197,6 +198,7 @@ section.primary .player .events section .card { width: 100%; height: auto; border-radius: 5px; + position: relative; transform-origin: bottom center; box-shadow: 0 0 10px rgba(0, 0, 0, 0.329); transition: transform linear 0.2s; @@ -204,6 +206,30 @@ section.primary .player .events section .card { cursor: pointer; } +section.primary .player .events section .card .cover { + position: absolute; + visibility: hidden; + top: 0; + right: 0; + bottom: 0; + left: 0; + background-color: rgba(0, 0, 0, 0.7); + transition: visibility ease-in-out 0.1s; + backdrop-filter: blur(6px); + border-radius: 5px; +} + +section.primary .player .events section .card .cover span { + color: rgba(255, 255, 255, 0.8); + font-family: 'Questrial'; + font-size: 5vh; + position: absolute; + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); + font-weight: bold; +} + section.primary .player .events .dots .card { background-color: #6d6af7; } @@ -217,99 +243,523 @@ section.primary .player .events .dots .card:nth-child(1) { } section.primary .player .events .dots .card:nth-child(1):hover { - transform: translateY(-18vh); + transform: translateY(-80%); } section.primary .player .events .dots .card:nth-child(2) { - transform: translateY(-19vh) rotate(2deg) translateX(-0.5vh); + transform: translateY(-80%) rotate(2deg) translateX(-0.5vh); } section.primary .player .events .dots .card:nth-child(2):hover { - transform: translateY(-37vh); + transform: translateY(-160%); } -section.primary .player .events .dots .card:nth-child(3) { - transform: translateY(-38.2vh) rotate(-1.4deg) translateX(0.5vh); +section.primary .player .events .battle .card:nth-child(1):hover { + transform: translateY(-80%); } -section.primary .player .events .dots .card:nth-child(3):hover { - transform: translateY(-56.2vh); +section.primary .player .events .battle .card:nth-child(2) { + transform: translateY(-80%) rotate(2.5deg) translateX(-0.5vh); } -section.primary .player .events .dots .card:nth-child(4) { - transform: translateY(-57vh) rotate(1.8deg) translateX(-0.5vh); +section.primary .player .events .battle .card:nth-child(2):hover { + transform: translateY(-160%); } -section.primary .player .events .dots .card:nth-child(4):hover { - transform: translateY(-75vh); +section.primary .player .events section .card>span { + font-family: 'Product Bold'; + font-size: 1.5vh; + line-height: 1em; + text-align: center; + display: block; + padding: 0.5vh 0; + color: black; + width: 25%; + background-color: rgba(255, 255, 255, 0.5); } -section.primary .player .events .dots .card:nth-child(5) { - transform: translateY(-76vh) rotate(-2.5deg) translateX(0.5vh); +section.primary .player .events .dots .card>span { + float: left; } -section.primary .player .events .dots .card:nth-child(5):hover { - transform: translateY(-94vh); +section.primary .player .events .battle .card>span { + float: right; } -section.primary .player .events .battle .card:nth-child(1):hover { - transform: translateY(-18vh); +section.primary .player .events section .card .info { + width: 100%; + height: 20vh; + display: flex; + flex-flow: column nowrap; + color: rgb(239, 233, 224); } -section.primary .player .events .battle .card:nth-child(2) { - transform: translateY(-19.1vh) rotate(2.5deg) translateX(-0.5vh); +section.primary .player .events section .card .info>span { + font-family: 'Questrial'; + font-weight: bold; + font-size: 6vh; } -section.primary .player .events .battle .card:nth-child(2):hover { - transform: translateY(-37.1vh); + +section.primary .player .events section .card .info>div { + font-family: monospace; + height: 50%; + display: flex; + flex-flow: column nowrap; + justify-content: flex-end; + padding-bottom: 5px; + flex-grow: 1; } -section.primary .player .events .battle .card:nth-child(3) { - transform: translateY(-37.8vh) rotate(2.8deg) translateX(0.5vh); +section.primary .player .events section .card .info>div span span:nth-child(1) { + font-size: 1.5vh; + display: block; + background-color: rgba(0, 0, 0, 0.11); } -section.primary .player .events .battle .card:nth-child(3):hover { - transform: translateY(-55.8vh); +section.primary .player .events section .card .info>div span span:nth-child(2) { + font-size: 2vh; + display: block; + background-color: rgba(0, 0, 0, 0.11); } -section.primary .player .events .battle .card:nth-child(4) { - transform: translateY(-57.15vh) rotate(-1.8deg) translateX(-0.5vh); +section.primary .player .events section .card .info>div svg { + padding: 2px 0; + height: 10%; } -section.primary .player .events .battle .card:nth-child(4):hover { - transform: translateY(-75.15vh); +/* +** here +** player's +** primary +** page +** finished +*/ + +section.primary .admin { + width: 100%; + height: 100%; + box-sizing: border-box; + background: transparent; + padding: 0 calc(0.03 * 97vh); } -section.primary .player .events .battle .card:nth-child(5) { - transform: translateY(-75.9vh) rotate(1.1deg) translateX(0.5vh); +section.primary .admin .players { + height: calc(0.455 * 97vh); + width: 100%; + border-radius: 9.4px; + background-color: rgb(239, 233, 224); + box-shadow: 0 5px 20px rgb(0, 0, 0, 0.08); + box-sizing: border-box; + display: flex; + padding: 4px; + flex-flow: column nowrap; + justify-content: flex-start; + align-items: center; + position: relative; + overflow-y: scroll; + margin: calc(0.03 * 97vh) 0 calc(0.03 * 97vh) 0; + overflow-x: hidden; } -section.primary .player .events .battle .card:nth-child(5):hover { - transform: translateY(-93.9vh); +section.primary .admin .players::-webkit-scrollbar { + display: none; } -section.primary .player .events section .card .title { +section.primary .admin .players input { + border-radius: 6px; + height: 7vh; + width: 100%; + box-sizing: border-box; font-family: 'Product Bold'; - font-size: 1.5vh; + font-size: 3vh; line-height: 1em; + padding: 2vh 0; + margin: 0; + background-color: #122948; + color: rgb(239, 233, 224); + margin-bottom: 1vh; + border: none; + outline: none; + text-align: center; +} + +section.primary .admin .players input::placeholder { + color: rgba(239, 233, 224, 0.753); +} + +section.primary .admin .players ol { + list-style: none; + margin: 0; + box-sizing: border-box; + padding: 1vh 1vh 0 1vh; + display: flex; + flex-flow: row wrap; + width: 100%; + gap: 1vh; +} + +section.primary .admin .players ol .item { + flex-basis: 40%; + flex-grow: 1; + height: 6vh; + padding: 0.5vh 1vh; + box-sizing: border-box; + background-color: rgba(18, 41, 72, 0.204); + overflow: hidden; + display: flex; + flex-flow: row nowrap; + justify-content: space-between; + align-items: center; + border-radius: 6px; + text-align: left; + cursor: pointer; + position: relative; +} + +section.primary .admin .players ol .item:hover { + background-color: #122948; +} + +section.primary .admin .players ol .item img { + height: 100%; + width: auto; + margin-right: 1vh; +} + +section.primary .admin .players ol .item h2 { + display: inline; + text-align: left; + font-family: 'Questrial'; + font-size: 2.5vh; + line-height: 1em; + margin: 0; + flex-grow: 1; + transform: translateY(1px); +} + +section.primary .admin .players ol .item:hover h2 { + color: rgb(239, 233, 224); +} + +section.primary .admin header { + display: flex; + width: 100%; + background-color: transparent; + justify-content: center; + padding: calc(0.0155 * 97vh) 0; + flex-flow: column nowrap; + align-items: center; +} + +section.primary .admin header .search { + outline: none; + border: none; + border-bottom: 2px solid #222026; + color: #222026; + font-family: 'Product'; + width: 33.33%; + height: calc(0.045 * 97vh); + text-align: center; + background: transparent; + font-size: calc(0.4 * 0.7 * 0.075 * 97vh); + opacity: 0.5; + transition: opacity ease-in-out 0.1s; +} + +section.primary .admin header .search:hover, section.primary .admin header .search:focus { + opacity: 1; +} + +section.primary .admin .events { + height: calc(0.455 * 97vh); + width: 100%; + border-radius: 9.4px; + background-color: rgb(239, 233, 224); + box-shadow: 0 5px 20px rgb(0, 0, 0, 0.08); + box-sizing: border-box; + display: flex; + padding: 4px; + flex-flow: row wrap; + justify-content: flex-start; + position: relative; + overflow-y: scroll; + overflow-x: hidden; + margin: 0 0 calc(0.03 * 97vh) 0; +} + +section.primary .admin .events::-webkit-scrollbar { + display: none; +} + +section.primary .admin .events h1 { + border-radius: 6px; + height: 7vh; + width: 100%; + box-sizing: border-box; + font-family: 'Product Bold'; + font-size: 3vh; + line-height: 1em; + padding: 2vh 0; + margin: 0; + background-color: #122948; + color: rgb(239, 233, 224); + margin-bottom: 1vh; +} + +section.primary .admin .events .games { + flex-basis: 50%; + padding: 4vh; + margin-top: 2vh; + box-sizing: border-box; + max-height: 70vh; +} + + +section.primary .admin .events .template { + flex-basis: 50%; + box-sizing: border-box; + max-height: 31vh; + border-radius: 5px; + background-color: rgb(208, 208, 208); + box-shadow: 0 0 10px rgba(0, 0, 0, 0.329); + overflow: hidden; + position: relative; + margin-top: 2vh; +} + +section.primary .admin .events .template input { + outline: none; + border: none; + padding: 0.5em; + background-color: rgb(226, 226, 226); + color: rgb(32, 32, 32); + border-radius: 5px; + font-family: 'Questrial'; + text-align: center; + box-sizing: border-box; + font-weight: bold; +} + +section.primary .admin .events .template input::placeholder { + opacity: 0.5; +} + +section.primary .admin .events .template .game { + width: 50%; + font-size: 2vh; + line-height: 1.5em; text-align: center; display: block; - padding: 0.5vh 0; + padding: 0.33vh 0; + float: left; +} + +section.primary .admin .events .template .info { + width: 100%; + display: flex; + justify-content: center; + align-items: center; + flex-flow: column nowrap; + color: rgb(239, 233, 224); +} + +section.primary .admin .events .template button { + width: 100%; + position: absolute; + bottom: 0; + right: 0; + left: 0; + font-family: 'Product Bold'; + font-size: 3vh; + padding: 1vh 0; + border: none; + outline: none; + background-color: rgb(41, 193, 122); + color: white; + cursor: pointer; +} + +section.primary .admin .events .template button:hover { + background-color: rgb(38, 184, 115); +} + +section.primary .admin .events .template .info .prize { + margin: 1vh 0; + width: 70%; + font-size: 4vh; + line-height: 1em; +} + +section.primary .admin .events .template .info svg { + width: 5%; + fill: #7b7b7b; + margin: 1vh 0; +} + +section.primary .admin .events .template .info .start, +section.primary .admin .events .template .info .finish { + display: flex; + flex-flow: row nowrap; + justify-content: space-between; + width: 70%; + color: rgb(32, 32, 32); + line-height: 1.4em; +} + +section.primary .admin .events .template .info .start input, +section.primary .admin .events .template .info .finish input { + width: 50px; + flex-grow: 1; +} + +section.primary .admin .events .games .card { + width: 100%; + height: 17vh; + border-radius: 5px; + position: relative; + transform-origin: bottom center; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.329); + transition: transform linear 0.2s; + overflow: hidden; + cursor: pointer; +} + +section.primary .admin .events .games .card .cover { + position: absolute; + visibility: hidden; + top: 0; + right: 0; + bottom: 0; + left: 0; + background-color: rgba(0, 0, 0, 0.7); + transition: visibility ease-in-out 0.1s; + backdrop-filter: blur(6px); + border-radius: 5px; +} + +section.primary .admin .events .games .card .cover span { + color: rgba(255, 255, 255, 0.8); + font-family: 'Questrial'; + font-size: 5vh; + position: absolute; + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); + font-weight: bold; +} + +section.primary .admin .events .games .dots { + background-color: #6d6af7; +} + +section.primary .admin .events .games .battle { + background-color: #f55a5a; +} + +section.primary .admin .events .games .card:nth-child(1):hover { + transform: translateY(-80%); +} + +section.primary .admin .events .games .card:nth-child(2) { + transform: translateY(-80%); +} + +section.primary .admin .events .games .card:nth-child(2):hover { + transform: translateY(-160%); +} + +section.primary .admin .events .games .card:nth-child(3) { + transform: translateY(-160%); +} + +section.primary .admin .events .games .card:nth-child(3):hover { + transform: translateY(-240%); +} + +section.primary .admin .events .games .card:nth-child(4) { + transform: translateY(-240%); +} + +section.primary .admin .events .games .card:nth-child(4):hover { + transform: translateY(-320%); +} + +section.primary .admin .events .games .card:nth-child(5) { + transform: translateY(-320%); +} + +section.primary .admin .events .games .card:nth-child(5):hover { + transform: translateY(-400%); +} + +section.primary .admin .events .games .card:nth-child(6) { + transform: translateY(-400%); +} + +section.primary .admin .events .games .card:nth-child(6):hover { + transform: translateY(-480%); +} + +section.primary .admin .events .games .card:nth-child(7) { + transform: translateY(-480%); +} + +section.primary .admin .events .games .card:nth-child(7):hover { + transform: translateY(-560%); +} + +section.primary .admin .events .games .card>span { + font-family: 'Product Bold'; + font-size: 1vh; + line-height: 1em; + text-align: center; + display: block; + padding: 0.33vh 0; color: black; + float: left; width: 25%; background-color: rgba(255, 255, 255, 0.5); } -section.primary .player .events .dots .card .title { - float: left; +section.primary .admin .events .games .card .info { + width: 100%; + height: 14vh; + display: flex; + flex-flow: column nowrap; + color: rgb(239, 233, 224); } -section.primary .player .events .battle .card .title { - float: right; +section.primary .admin .events .games .card .info>span { + font-family: 'Questrial'; + font-weight: bold; + font-size: 4vh; } -section.primary .player .events section .card .info { - width: 100%; - height: 20vh; +section.primary .admin .events .games .card .info>div { + font-family: monospace; + height: 50%; + display: flex; + flex-flow: column nowrap; + justify-content: flex-end; + padding-bottom: 3.33px; + flex-grow: 1; +} + +section.primary .admin .events .games .card .info>div span span:nth-child(1) { + font-size: 1vh; + display: block; + background-color: rgba(0, 0, 0, 0.11); +} + +section.primary .admin .events .games .card .info>div span span:nth-child(2) { + font-size: 1.4vh; + display: block; + background-color: rgba(0, 0, 0, 0.11); +} + +section.primary .admin .events .games .card .info>div svg { + padding: 2px 0; + height: 10%; } \ No newline at end of file diff --git a/src/main/front/css/register.css b/src/main/front/css/register.css index 5177717..d25798a 100644 --- a/src/main/front/css/register.css +++ b/src/main/front/css/register.css @@ -63,15 +63,27 @@ section.login form ol .item { overflow: hidden; } +section.register form ol .item.show, +section.login form ol .item.show { + height: auto; + visibility: visible; +} + section.register form ol .item label, section.login form ol .item label { display: block; padding: 5px 10px; color: rgba(34, 32, 38, 0.5); font-size: calc(0.25 * 0.075 * 97vh); + opacity: 1; transform-origin: top center; transform: translateY(-100%); - transition: transform 0.4s; + transition: transform ease-in-out 0.3s, opacity ease-in-out 0.3s; +} + +section.register form ol .item.show label, +section.login form ol .item.show label { + transform: translateY(0); } section.register form ol .item label span, @@ -97,17 +109,6 @@ section.login form ol .item input { color: #464646; } -section.register form ol .item.show, -section.login form ol .item.show { - height: auto; - visibility: visible; -} - -section.register form ol .item.show label, -section.login form ol .item.show label { - transform: translateY(0); -} - section.register form .next, section.login form .next { width: calc(0.075 * 97vh); diff --git a/src/main/front/css/seaBattle.css b/src/main/front/css/seaBattle.css new file mode 100644 index 0000000..6a57633 --- /dev/null +++ b/src/main/front/css/seaBattle.css @@ -0,0 +1,228 @@ +@font-face { + src: url('../font/Questrial-Regular.ttf'); + font-family: 'Questrial'; +} + +section.battle { + perspective: 800px; +} + +section.battle>section { + box-sizing: border-box; + width: calc(0.630 * 97.0vh); + height: calc(0.070 * 97.0vh); + position: absolute; + left: calc(50% - 0.3150 * 97.0vh); + top: calc(0.0350 * 97.0vh); + background-color: rgba(0, 0, 0, 0.25); + border-radius: calc(0.010 * 97.0vh); + display: flex; + flex-flow: row nowrap; + overflow: hidden; +} + +section.battle>section .host, +section.battle>section .guest { + flex-basis: 50%; + flex-grow: 1; + display: flex; + flex-flow: row nowrap; + justify-content: start; + align-items: center; + background: transparent; + overflow: hidden; + transition: background-color 0.1s; +} + +section.battle>section .turn { + position: relative; + background-color: rgba(130, 255, 46, 0.2); +} + +section.battle>section .host .timer, +section.battle>section .guest .timer { + background: transparent; + transition: background-color 0.1s; +} + +section.battle>section .host.turn .timer { + position: absolute; + left: 0; + top: 0; + bottom: 0; + right: 40%; + background-color: rgba(130, 255, 46, 0.2); +} + +section.battle>section .guest.turn .timer { + position: absolute; + left: 40%; + top: 0; + bottom: 0; + right: 0; + background-color: rgba(130, 255, 46, 0.2); +} + +section.battle>section .host img, +section.battle>section .guest img { + flex-grow: 0; + height: calc(0.056 * 97.0vh); + padding: 0 calc(0.007 * 97.0vh); +} + +section.battle>section .host span, +section.battle>section .guest span { + flex-grow: 1; + padding: 0 calc(0.007 * 97.0vh); + font-size: 2.5vh; + line-height: 1em; + font-family: 'Questrial'; + color: white; +} + +section.battle>section .host span { + text-align: left; +} + +section.battle>section .guest span { + text-align: right; +} + +section.battle .board { + width: calc(0.560 * 97.0vh); + display: flex; + flex-flow: row wrap; + border: 1px solid white; + position: absolute; + left: calc(50% - 0.28 * 97.0vh); + transform-origin: bottom; + transform: rotateX(57deg); + bottom: calc(0.07 * 97.0vh); + perspective: 400px; + box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2); + transition: transform 0.3s, box-shadow 0.3s; +} + +section.battle .board.arrange { + box-shadow: 0 5px 5px rgba(0, 0, 0, 0); + transform: rotateX(0); +} + +section.battle .board .cell { + flex-basis: calc(0.0550 * 97.0vh); + max-width: calc(0.0560 * 97.0vh); + height: calc(0.0630 * 97.0vh); + box-sizing: border-box; + flex-grow: 1; + background-color: rgba(255, 255, 255, 0.6); + border: 1px solid white; + transition: background-color 0.1s, height 0.3s; +} + +section.battle .board.arrange .cell { + height: calc(0.0560 * 97.0vh); +} + +section.battle .board .cell.selected { + background-color: rgba(127, 127, 127, 0.6); + animation-name: update ; + animation-timing-function: ease; + animation-duration: 0.3s; + animation-iteration-count: 1; +} + +@keyframes update { + 0% {transform: scale(1);} + 50% {transform: scale(0.9);} + 100% {transform: scale(1);} +} + +section.battle .board .cell.destroyed { + background-color: rgba(255, 0, 0, 0.6); +} + +section.battle .board .cell.empty { + background-color: transparent; +} + +section.battle .board .start { + width: calc(4.0 * 0.0560 * 97.0vh); + height: calc(4.0 * 0.0560 * 97.0vh); + position: absolute; + left: calc(3.0 * 0.0560 * 97.0vh); + bottom: 0; + background-color: rgba(25, 49, 47, 0.8); + outline: none; + border: none; + cursor: pointer; + visibility: hidden; + transition: visibility 0.1s; +} + +section.battle .board .start span { + position: absolute; + bottom: 50%; + left: 50%; + transform: translateX(-50%) translateY(50%); + font-family: 'Questrial'; + font-size: 3vh; + line-height: 1em; + color: white; +} + +section.battle .board img { + position: absolute; + transform-origin: bottom left; + visibility: hidden; + transition: visibility 0.1s; +} + +section.battle .board img.xl { + width: calc(4.50 * 0.0560 * 97.0vh); + bottom: 2vh; + left: -1vh; +} + +section.battle .board img.l { + width: calc(4.0 * 0.0560 * 97.0vh); + bottom: 3vh; + left: 0.1vh; +} + +section.battle .board img.m { + width: calc(4.10 * 0.0560 * 97.0vh); + bottom: 0vh; + left: -0.2vh; +} + +section.battle .board img.s { + width: calc(2.70 * 0.0560 * 97.0vh); + bottom: 1vh; + left: -3.6vh; +} + +section.battle .control { + color: white; + font-family: 'Questrial'; + font-size: 1.5vh; + position: absolute; + bottom: calc(0.035 * 97.0vh); + transform: translateY(50%); + width: 100%; + text-align: center; +} + +section.battle .control .size { + opacity: 0.5; + transition: opacity 0.1s; +} + +section.battle .control .size.used { + opacity: 1; +} + +#canvas { + position: absolute; + box-sizing: border-box; + cursor: crosshair; +} \ No newline at end of file diff --git a/src/main/front/css/suggestion.css b/src/main/front/css/suggestion.css new file mode 100644 index 0000000..14c4289 --- /dev/null +++ b/src/main/front/css/suggestion.css @@ -0,0 +1,233 @@ +@font-face { + src: url('../font/Product Sans Bold.ttf'); + font-family: 'Product Bold'; +} + +@font-face { + src: url('../font/Product Sans Regular.ttf'); + font-family: 'Product'; +} + +@font-face { + src: url('../font/Questrial-Regular.ttf'); + font-family: 'Questrial'; +} + +section .suggestion { + padding: 0 calc(0.03 * 97vh); +} + +.all-games { + height: calc(0.295 * 97vh); + width: 100%; + border-radius: 9.4px; + background-color: #f7f7f6; + box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); + box-sizing: border-box; + padding: 4px; + display: block; + flex-flow: row nowrap; + justify-content: space-between; + align-items: center; + position: relative; + overflow: hidden; + margin: 0 0 calc(0.03 * 97vh) 0; +} + +.games-title, .player-title { + border-radius: 6px; + width: 100%; + box-sizing: border-box; + font-family: 'Product Bold'; + text-transform: uppercase; + font-size: 3vh; + line-height: 1em; + padding: 2vh 0; + margin: 0; + background-color: #122948; + color: rgb(239, 233, 224); + margin-bottom: 1vh; +} + +.games { + width: 100%; + display: flex; +} + +.battle-sea-sugg, .dots-and-boxes-sugg { + /*display: block;*/ + width: 100%; +} + + +.game-pic { + /*box-sizing: border-box;*/ + width: 100%; +} + +.game-pic img { + width: 140px; + height: 90px; + border-radius: 8px 8px 0 0; + /*margin-top: 8px;*/ +} + +.select-game { + margin-left: 30px; + width: 140px; + height: 18%; + background-color: #ddddd9; + font-family: 'Product Bold'; + font-size: 17px; + border-radius: 0 0 8px 8px; +} + +.select-game:hover { + cursor: pointer; +} + +.all-players { + height: calc(0.705 * 97vh); + width: 100%; + border-radius: 9.4px 9.4px 0 0; + background-color: #f7f7f6; + box-shadow: 0 5px 20px rgb(0, 0, 0, 0.08); + box-sizing: border-box; + display: flex; + padding: 4px; + flex-flow: column nowrap; + justify-content: flex-start; + align-items: center; + position: relative; + overflow-y: scroll; + margin: 0; + overflow-x: hidden; +} + +.all-players::-webkit-scrollbar { + display: none; +} + +.players-area { + width: 100%; + margin: 0; + padding: 0; +} + +.player-box { + margin: 0 auto 8px; + display: flex; + width: 97%; + background-color: rgba(18, 41, 72, 0.204); + height: 45px; + border-radius: 8px; +} + +.suggestion-buttons { + margin-bottom: 8px; + margin-left: 1px; + display: flex; + width: 97%; + background-color: rgb(233, 233, 233); + height: 45px; + border-radius: 8px; +} + +.send-suggestion, .unSend-suggestion { + width: 50%; + background-color: #34f16e; + border-radius: 8px 0 0 8px; + box-sizing: border-box; + font-family: 'Product Bold'; + text-transform: uppercase; + font-size: 3vh; + line-height: 1em; + padding: 2vh 0; + margin: 0; +} + +.unSend-suggestion { + border-radius: 0 8px 8px 0; + background-color: #bb2d44; +} +.send-suggestion:hover, .unSend-suggestion:hover { + cursor: pointer; + border: #122948 3px solid; +} + + +.player-avatar img { + width: 40px; + height: 40px; + margin-top: 2px; + margin-left: 4px; +} + +.player-avatar { + width: 76%; + display: flex; +} + +.player-avatar span { + color: #122948; + font-family: 'Product Bold'; + font-size: 20px; + margin-top: 10px; + margin-left: 10px; +} + +.message-icon img { + width: 43px; + height: 43px; + padding: 2px; + margin-top: 1px; +} + +.message-icon { + width: 14%; + background-color: #122948; + border-radius: 8px 0 0 8px; +} + +.message-icon:hover { + background-color: rgba(18, 41, 72, 0.204); + +} + +.suggestion-checkbox { + display: block; + width: 10%; + margin-top: 10px; + +} + +.regular-checkbox { + -webkit-appearance: none; + background-color: #fafafa; + border: 1px solid #cacece; + box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05); + padding: 9px; + border-radius: 3px; + display: inline-block; + position: relative; +} + +.regular-checkbox:active, .regular-checkbox:checked:active { + box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1); +} + +.regular-checkbox:checked { + background-color: #e9ecee; + border: 1px solid #adb8c0; + box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1); + color: #99a1a7; +} + +.regular-checkbox:checked:after { + content: '\2714'; + font-size: 14px; + position: absolute; + top: 0px; + left: 3px; + color: #99a1a7; +} \ No newline at end of file diff --git a/src/main/front/css/Flaticon.ttf b/src/main/front/flaticon/Flaticon.ttf similarity index 100% rename from src/main/front/css/Flaticon.ttf rename to src/main/front/flaticon/Flaticon.ttf diff --git a/src/main/front/css/Flaticon.woff b/src/main/front/flaticon/Flaticon.woff similarity index 100% rename from src/main/front/css/Flaticon.woff rename to src/main/front/flaticon/Flaticon.woff diff --git a/src/main/front/css/Flaticon.woff2 b/src/main/front/flaticon/Flaticon.woff2 similarity index 100% rename from src/main/front/css/Flaticon.woff2 rename to src/main/front/flaticon/Flaticon.woff2 diff --git a/src/main/front/css/flaticon.css b/src/main/front/flaticon/flaticon.css similarity index 82% rename from src/main/front/css/flaticon.css rename to src/main/front/flaticon/flaticon.css index 9d4b2ad..dcc761b 100644 --- a/src/main/front/css/flaticon.css +++ b/src/main/front/flaticon/flaticon.css @@ -6,7 +6,7 @@ @font-face { font-family: "Flaticon"; src: url("./Flaticon.eot"); - src: url("./Flaticon.eot?#iefix") format("embedded-opentype"), url("./Flaticon.woff2") format("woff2"), url("./Flaticon.woff") format("woff"), url("./Flaticon.ttf") format("truetype"), url("./Flaticon.svg#Flaticon") format("svg"); + src: url("./Flaticon.eot?#iefix") format("embedded-opentype"), url("Flaticon.woff2") format("woff2"), url("Flaticon.woff") format("woff"), url("Flaticon.ttf") format("truetype"), url("./Flaticon.svg#Flaticon") format("svg"); font-weight: normal; font-style: normal; } diff --git a/src/main/front/index.html b/src/main/front/index.html index 72f6958..b1b1437 100644 --- a/src/main/front/index.html +++ b/src/main/front/index.html @@ -6,11 +6,17 @@ Plato - + + + + + + +