More CSS, websockets authorized origins

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

src/main/resources/application.yml

@@ -34,6 +34,9 @@ spring:
       ddl-auto: none
     generate-ddl: true
 
+app:
+  ws-allowed-origins: "localhost"
+
 logging:
   level:
     root: INFO

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;
 }

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()
 }

src/main/resources/templates/grid.html

@@ -9,23 +9,22 @@
     <script th:src="@{/js/grid.js}" type="text/javascript"></script>
 </head>
 <body>
+    <div id="player-selector">
+        Which player are you ? <br/>
+        <button id="select-player-a">Player A</button>
+        <button id="select-player-b">Player B</button>
+    </div>
     <main>
-        <div id="player-selector">
-            Which player are you ? <br/>
-            <button id="select-player-a">Player A</button>
-            <button id="select-player-b">Player B</button>
-        </div>
-        
         <div id="game-panel">
             <ul id="cards-list">
 
             </ul>
 
-            <div id="hint-text">
+            <div id="hint-text" class="centered-bar">
 
             </div>
 
-            <div id="submit-hint">
+            <div id="submit-hint" class="centered-bar">
                 <input type="text" id="submit-hint-text"/>
                 <select id="submit-hint-wordcount">
                     <option value="0">0</option>
@@ -34,20 +33,24 @@
                     <option value="3">3</option>
                     <option value="4">4</option>
                     <option value="5">5</option>
+                    <option value="6">6</option>
+                    <option value="7">7</option>
+                    <option value="8">8</option>
+                    <option value="9">9</option>
                 </select>
                 <button>Submit Hint</button>
             </div>
-            <div id="other-playing">
-                Waiting for the other side to play
-            </div>
-            <div id="end-guessing">
+            <div id="end-guessing" class="centered-bar">
                 <button id="end-guessing-button">End Guessing</button>
             </div>
-            <br/>
+        </div>
+        <div id="side-panel">
+            <div id="other-playing" class="centered-bar">
+                Waiting for the other side to play
+            </div>
             <ol id="event-log">
 
             </ol>
-
         </div>
     </main>
     <script>

src/main/resources/templates/index.html

@@ -7,6 +7,8 @@
 <body>
     <main>
         Vous voulez jouer à Node Cames ? Ben c'est pas encore prêt :/
+        <br/>
+        <a href="/create-room">(Bon, en vrai, vous pouvez créer une room en cliquant ici)</a>
     </main>
 </body>
 </html>