- - -
+
diff --git a/src/main/java/com/bernard/nodecames/frontend/WebSocketConfiguration.java b/src/main/java/com/bernard/nodecames/frontend/WebSocketConfiguration.java index 25105e2..76d2373 100644 --- a/src/main/java/com/bernard/nodecames/frontend/WebSocketConfiguration.java +++ b/src/main/java/com/bernard/nodecames/frontend/WebSocketConfiguration.java @@ -1,5 +1,6 @@ package com.bernard.nodecames.frontend; +import org.springframework.beans.factory.annotation.Value; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.messaging.simp.config.MessageBrokerRegistry; @@ -13,6 +14,9 @@ import org.springframework.web.socket.server.standard.ServletServerContainerFact @EnableWebSocketMessageBroker public class WebSocketConfiguration implements WebSocketMessageBrokerConfigurer { + @Value("${app.ws-allowed-origins}") + public String wsAllowedOrigins; + @Bean public ServletServerContainerFactoryBean createWebSocketContainer() { ServletServerContainerFactoryBean container = new ServletServerContainerFactoryBean(); @@ -23,7 +27,7 @@ public class WebSocketConfiguration implements WebSocketMessageBrokerConfigurer @Override public void registerStompEndpoints(StompEndpointRegistry registry) { - registry.addEndpoint("/socket").withSockJS(); + registry.addEndpoint("/socket").setAllowedOrigins(wsAllowedOrigins).withSockJS(); } @Override diff --git a/src/main/resources/application.yml b/src/main/resources/application.yml index 095a9f0..493f0f7 100644 --- a/src/main/resources/application.yml +++ b/src/main/resources/application.yml @@ -34,6 +34,12 @@ spring: ddl-auto: none generate-ddl: true +app: + ws-allowed-origins: "localhost" + +server: + forward-headers-strategy: NATIVE + logging: level: root: INFO \ No newline at end of file diff --git a/src/main/resources/static/css/grid.css b/src/main/resources/static/css/grid.css index 1cc2030..37dc152 100644 --- a/src/main/resources/static/css/grid.css +++ b/src/main/resources/static/css/grid.css @@ -1,5 +1,82 @@ +* { + --bg-green-1: #40DD62; + --bg-green-2: #5CE279; + --bg-black-1: #151515; + --bg-black-2: #222222; + --bg-black-3: #1b1b1b; + --bg-white-1: #DDDDDD; + --bg-white-2: #EEEEEE; +} + +.green { + color: #111111; + border-color: #28ab51; + background: + linear-gradient(63deg, var(--bg-green-1) 23%, transparent 23%) 7px 0, + linear-gradient(63deg, transparent 74%, var(--bg-green-1) 78%), + linear-gradient(63deg, transparent 34%, var(--bg-green-1) 38%, var(--bg-green-1) 58%, transparent 62%), + var(--bg-green-2); + background-size: 16px 48px; +} + +.black { + color: #EEEEEE; + border-color: black; + background: + linear-gradient(27deg, var(--bg-black-1) 5px, transparent 5px) 0 5px, + linear-gradient(207deg, var(--bg-black-1) 5px, transparent 5px) 10px 0px, + linear-gradient(27deg, var(--bg-black-2) 5px, transparent 5px) 0px 10px, + linear-gradient(207deg, var(--bg-black-2) 5px, transparent 5px) 10px 5px, + linear-gradient(90deg, var(--bg-black-3) 10px, transparent 10px), + linear-gradient(var(--bg-black-3) 25%, var(--bg-black-3) 25%, var(--bg-black-3) 50%, transparent 50%, transparent 75%, var(--bg-black-2) 75%, var(--bg-black-2)); + background-color: var(--bg-black-1); + background-size: 20px 20px; +} + +.white { + border-color: #c0c0c0; + color: #222222; + background-color:var(--bg-white-1); + background-image: + radial-gradient(circle at 100% 150%, var(--bg-white-1) 24%, var(--bg-white-2) 24%, var(--bg-white-2) 28%, var(--bg-white-1) 28%, var(--bg-white-1) 36%, var(--bg-white-2) 36%, var(--bg-white-2) 40%, transparent 40%, transparent), + radial-gradient(circle at 0 150%, var(--bg-white-1) 24%, var(--bg-white-2) 24%, var(--bg-white-2) 28%, var(--bg-white-1) 28%, var(--bg-white-1) 36%, var(--bg-white-2) 36%, var(--bg-white-2) 40%, transparent 40%, transparent), + radial-gradient(circle at 50% 100%, var(--bg-white-2) 10%, var(--bg-white-1) 10%, var(--bg-white-1) 23%, var(--bg-white-2) 23%, var(--bg-white-2) 30%, var(--bg-white-1) 30%, var(--bg-white-1) 43%, var(--bg-white-2) 43%, var(--bg-white-2) 50%, var(--bg-white-1) 50%, var(--bg-white-1) 63%, var(--bg-white-2) 63%, var(--bg-white-2) 71%, transparent 71%, transparent), + radial-gradient(circle at 100% 50%, var(--bg-white-2) 5%, var(--bg-white-1) 5%, var(--bg-white-1) 15%, var(--bg-white-2) 15%, var(--bg-white-2) 20%, var(--bg-white-1) 20%, var(--bg-white-1) 29%, var(--bg-white-2) 29%, var(--bg-white-2) 34%, var(--bg-white-1) 34%, var(--bg-white-1) 44%, var(--bg-white-2) 44%, var(--bg-white-2) 49%, transparent 49%, transparent), + radial-gradient(circle at 0 50%, var(--bg-white-2) 5%, var(--bg-white-1) 5%, var(--bg-white-1) 15%, var(--bg-white-2) 15%, var(--bg-white-2) 20%, var(--bg-white-1) 20%, var(--bg-white-1) 29%, var(--bg-white-2) 29%, var(--bg-white-2) 34%, var(--bg-white-1) 34%, var(--bg-white-1) 44%, var(--bg-white-2) 44%, var(--bg-white-2) 49%, transparent 49%, transparent); + background-size: 100px 50px; +} + +main { + display: flex; + flex-direction: row; +} +#game-panel { + flex: 80%; +} +#hint-text { + border: black solid 4pt; + border-radius: 12pt; + padding: 2ex; + margin: 2ex; +} +div#side-panel { + flex: 20%; + display: flex; + flex-direction: column; + border: black solid 2pt; + border-radius: 12pt; + padding: 1ex; + margin: 1ex; +} +ol#event-log { + list-style-type: none; + font-size: 14pt; +} + li.card { - border: purple solid 2pt; + border-style: solid; + border-width: 2pt; + border-radius: 12pt; list-style-type: none; padding: 1ex; margin: .2ex; @@ -7,11 +84,12 @@ li.card { height: 12ex; line-break: anywhere; text-align: center; - font-size: 16px; + font-size: 11pt; } ul#cards-list { display: flex; flex-flow: row wrap; + justify-content: center; } span.card-word { @@ -19,41 +97,6 @@ span.card-word { font-size: 30px; } -.green { - color: #111111; - background: - linear-gradient(63deg, #40DD62 23%, transparent 23%) 7px 0, - linear-gradient(63deg, transparent 74%, #40DD62 78%), - linear-gradient(63deg, transparent 34%, #40DD62 38%, #40DD62 58%, transparent 62%), - #5CE279; - background-size: 16px 48px; -} - -.black { - color: #EEEEEE; - background: - linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px, - linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px, - linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px, - linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px, - linear-gradient(90deg, #1b1b1b 10px, transparent 10px), - linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424); - background-color: #131313; - background-size: 20px 20px; -} - -.white { - color: #222222; - background-color:#EEEEEE; - background-image: - radial-gradient(circle at 100% 150%, #EEEEEE 24%, white 24%, white 28%, #EEEEEE 28%, #EEEEEE 36%, white 36%, white 40%, transparent 40%, transparent), - radial-gradient(circle at 0 150%, #EEEEEE 24%, white 24%, white 28%, #EEEEEE 28%, #EEEEEE 36%, white 36%, white 40%, transparent 40%, transparent), - radial-gradient(circle at 50% 100%, white 10%, #EEEEEE 10%, #EEEEEE 23%, white 23%, white 30%, #EEEEEE 30%, #EEEEEE 43%, white 43%, white 50%, #EEEEEE 50%, #EEEEEE 63%, white 63%, white 71%, transparent 71%, transparent), - radial-gradient(circle at 100% 50%, white 5%, #EEEEEE 5%, #EEEEEE 15%, white 15%, white 20%, #EEEEEE 20%, #EEEEEE 29%, white 29%, white 34%, #EEEEEE 34%, #EEEEEE 44%, white 44%, white 49%, transparent 49%, transparent), - radial-gradient(circle at 0 50%, white 5%, #EEEEEE 5%, #EEEEEE 15%, white 15%, white 20%, #EEEEEE 20%, #EEEEEE 29%, white 29%, white 34%, #EEEEEE 34%, #EEEEEE 44%, white 44%, white 49%, transparent 49%, transparent); - background-size: 100px 50px; -} - .card-bottom-bar { display: grid; grid-template-columns: 5ex 17ex 5ex; @@ -63,16 +106,43 @@ span.card-word { .card-bottom-bar div { width: 3ex; height: 3ex; - font-size: 20pt; - border: black solid 2pt; + font-size: 16pt; + border-style: solid; + border-width: 2pt; + border-radius: 12pt; font-weight: bold; } .card-bottom-bar button { - margin-left: 1ex; - margin-right: 1ex; + margin-left: 3ex; + margin-right: 3ex; + margin-bottom: 1ex; } .card.card-done { opacity: 70%; +} + +#game-panel .centered-bar { + text-align: center; + margin: 3ex; + display: flex; + justify-content: center; +} + +#game-panel .centered-bar * { + margin-left: 1ex; + margin-right: 1ex; +} + +#submit-hint input { + font-size: 20pt; + font-weight: bold; + border-radius: 7pt; + padding: 5pt 10pt 5pt 10pt; +} + + +#submit-hint select { + width: 8ex; } \ No newline at end of file diff --git a/src/main/resources/static/js/grid.js b/src/main/resources/static/js/grid.js index deab79e..b7a42d8 100644 --- a/src/main/resources/static/js/grid.js +++ b/src/main/resources/static/js/grid.js @@ -107,6 +107,7 @@ function selectPlayer(e) { $('#player-selector').hide() $('#game-panel').show() + $('#side-panel').show() $.ajax({ contentType: 'application/json', type: "GET", @@ -187,4 +188,5 @@ function initialize() { roomId = getRoomId() $('#game-panel').hide() + $('#side-panel').hide() } \ No newline at end of file diff --git a/src/main/resources/templates/grid.html b/src/main/resources/templates/grid.html index d3eb6ae..cc6dc57 100644 --- a/src/main/resources/templates/grid.html +++ b/src/main/resources/templates/grid.html @@ -9,23 +9,22 @@
+