Mysaa/NodeCames
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

More CSS, websockets authorized origins

Browse Source
This commit is contained in:
Mysaa Java
2026-08-30 15:57:42 +02:00
parent 142d08cc28
commit 26db1ac63a
6 changed files with 143 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/java/com/bernard/nodecames/frontend/WebSocketConfiguration.java
+5 -1
View File
@@ -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
+6
View File
@@ -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
src/main/resources/static/css/grid.css
+111 -41
View File
@@ -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
+2
View File
@@ -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
+13 -10
View File
@@ -9,23 +9,22 @@
<script th:src="@{/js/grid.js}" type="text/javascript"></script>
</head>
<body>
<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>
<main>
<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
+2
View File
@@ -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>