Much, much, prettier.

Show lobby name.
Case-insensitive lobby names.

package.json

@@ -9,7 +9,7 @@
     "express": "^4.17.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-scripts": "4.0.1",
+    "react-scripts": "5.0.1",
     "socket.io": "^3.0.5",
     "socket.io-client": "^3.0.5",
     "web-vitals": "^0.2.4"

public/gear.svg

@@ -1,77 +1,23 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<?xml version="1.0" encoding="UTF-8"?>
-<svg
+<svg version="1.1" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
+ <path d="m24.04 0.14285c-1.376 0-2.7263 0.12375-4.0386 0.34741l-0.64 6.7853c-1.3572 0.37831-2.6417 0.90728-3.8432 1.585l-5.244-4.3317c-2.2152 1.5679-4.1541 3.4955-5.7217 5.7101l4.3426 5.2437c-0.67695 1.2001-1.2177 2.4878-1.5959 3.8432l-6.7745 0.64053c-0.22379 1.3127-0.34741 2.6622-0.34741 4.0386 0 1.3788 0.12285 2.7238 0.34741 4.0386l6.7745 0.64056c0.37825 1.3554 0.91896 2.6431 1.5959 3.8432l-4.3317 5.2437c1.5648 2.2089 3.4908 4.1457 5.6997 5.7105l5.2545-4.3426c1.2023 0.67835 2.485 1.2174 3.8432 1.5959l0.64053 6.7853c1.3123 0.22368 2.6626 0.33658 4.0386 0.33658s2.7155-0.11289 4.0278-0.33658l0.64053-6.7853c1.3582-0.37847 2.6409-0.91755 3.8432-1.5959l5.2545 4.3426c2.2088-1.5649 4.1348-3.5017 5.6997-5.7105l-4.3317-5.2437c0.67695-1.2001 1.2177-2.4878 1.5959-3.8432l6.7744-0.64056c0.22456-1.3148 0.34741-2.6598 0.34741-4.0386 0-1.3765-0.12361-2.726-0.34741-4.0386l-6.7744-0.64053c-0.37825-1.3554-0.91896-2.6431-1.5959-3.8432l4.3426-5.2437c-1.568-2.2146-3.507-4.1422-5.722-5.7101l-5.2437 4.3317c-1.2015-0.67776-2.486-1.2067-3.8432-1.585l-0.641-6.7853c-1.3123-0.22366-2.6518-0.34741-4.0278-0.34741zm0 14.776c5.0178 0 9.076 4.0691 9.076 9.0869s-4.0582 9.0869-9.076 9.0869-9.0869-4.0691-9.0869-9.0869 4.0691-9.0869 9.0869-9.0869z"/>
-   xmlns:cc="http://creativecommons.org/ns#"
+ <metadata>
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+  <rdf:RDF>
-   xmlns:svg="http://www.w3.org/2000/svg"
+   <cc:Work>
-   xmlns="http://www.w3.org/2000/svg"
+    <dc:format>image/svg+xml</dc:format>
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+    <cc:license rdf:resource="http://creativecommons.org/licenses/publicdomain/"/>
-   id="svg2995"
+    <dc:publisher>
-   sodipodi:docname="gearYellow.svg"
+     <cc:Agent rdf:about="http://openclipart.org/">
-   inkscape:export-filename="/home/aztlek/Documentos/IDU/TOGAF IDU/TOGAF IDU V2.0/aplicacionEnDesuso-16x16.png"
+      <dc:title>Openclipart</dc:title>
-   viewBox="0 0 48 48"
+     </cc:Agent>
-   inkscape:export-xdpi="30.18"
+    </dc:publisher>
-   version="1.1"
+   </cc:Work>
-   inkscape:export-ydpi="30.18"
+   <cc:License rdf:about="http://creativecommons.org/licenses/publicdomain/">
-   inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)">
+    <cc:permits rdf:resource="http://creativecommons.org/ns#Reproduction"/>
-  <defs
+    <cc:permits rdf:resource="http://creativecommons.org/ns#Distribution"/>
-     id="defs60" />
+    <cc:permits rdf:resource="http://creativecommons.org/ns#DerivativeWorks"/>
-  <sodipodi:namedview
+   </cc:License>
-     id="base"
+  </rdf:RDF>
-     bordercolor="#666666"
+ </metadata>
-     inkscape:pageshadow="2"
-     inkscape:window-y="0"
-     pagecolor="#ffffff"
-     inkscape:window-height="1016"
-     inkscape:grid-bbox="true"
-     inkscape:window-maximized="1"
-     inkscape:zoom="11.291667"
-     inkscape:window-x="0"
-     showgrid="true"
-     borderopacity="1.0"
-     inkscape:current-layer="layer1"
-     inkscape:cx="7.8376389"
-     inkscape:cy="24"
-     inkscape:window-width="1920"
-     inkscape:pageopacity="0.0"
-     inkscape:document-units="px"
-     inkscape:document-rotation="0" />
-  <g
-     id="layer1"
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer">
-    <path
-       id="path2989"
-       style="fill:#7f7f7f;fill-opacity:1"
-       inkscape:connector-curvature="0"
-       d="m24.04 0.14285c-1.376 0-2.7263 0.12375-4.0386 0.34741l-0.64 6.7853c-1.3572 0.37831-2.6417 0.90728-3.8432 1.585l-5.244-4.3317c-2.2152 1.5679-4.1541 3.4955-5.7217 5.7101l4.3426 5.2437c-0.67695 1.2001-1.2177 2.4878-1.5959 3.8432l-6.7745 0.64053c-0.22379 1.3127-0.34741 2.6622-0.34741 4.0386 0 1.3788 0.12285 2.7238 0.34741 4.0386l6.7745 0.64056c0.37825 1.3554 0.91896 2.6431 1.5959 3.8432l-4.3317 5.2437c1.5648 2.2089 3.4908 4.1457 5.6997 5.7105l5.2545-4.3426c1.2023 0.67835 2.485 1.2174 3.8432 1.5959l0.64053 6.7853c1.3123 0.22368 2.6626 0.33658 4.0386 0.33658s2.7155-0.11289 4.0278-0.33658l0.64053-6.7853c1.3582-0.37847 2.6409-0.91755 3.8432-1.5959l5.2545 4.3426c2.2088-1.5649 4.1348-3.5017 5.6997-5.7105l-4.3317-5.2437c0.67695-1.2001 1.2177-2.4878 1.5959-3.8432l6.7744-0.64056c0.22456-1.3148 0.34741-2.6598 0.34741-4.0386 0-1.3765-0.12361-2.726-0.34741-4.0386l-6.7744-0.64053c-0.37825-1.3554-0.91896-2.6431-1.5959-3.8432l4.3426-5.2437c-1.568-2.2146-3.507-4.1422-5.722-5.7101l-5.2437 4.3317c-1.2015-0.67776-2.486-1.2067-3.8432-1.585l-0.641-6.7853c-1.3123-0.22366-2.6518-0.34741-4.0278-0.34741zm0 14.776c5.0178 0 9.076 4.0691 9.076 9.0869s-4.0582 9.0869-9.076 9.0869-9.0869-4.0691-9.0869-9.0869 4.0691-9.0869 9.0869-9.0869z" />
-  </g>
-  <metadata
-     id="metadata57">
-    <rdf:RDF>
-      <cc:Work>
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/publicdomain/" />
-        <dc:publisher>
-          <cc:Agent
-             rdf:about="http://openclipart.org/">
-            <dc:title>Openclipart</dc:title>
-          </cc:Agent>
-        </dc:publisher>
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/publicdomain/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
 </svg>

server.js

@@ -36,7 +36,8 @@ io.on("connection", (socket) => {
     clearInterval(interval);
   });
 
-  socket.on("find", (key) => {
+  socket.on("find", key => {
+    key = key?.toLowerCase()
     console.log(`Finding game '${key}'`);
     let game = games.get(key);
     if(game) {

src/board.js

@@ -59,17 +59,17 @@ function imageFromPiece(piece) {
   return null;
 }
 
-function Square(props) {
+const Square = ({ bgColor, onClick, piece, className = "" }) => {
   return (
     <button
-      className="square"
+      className={"square " + className}
-      onClick={props.onClick}
+      onClick={onClick}
       style={{
-        backgroundImage: `url(${imageFromPiece(props.piece)})`,
+        backgroundImage: `url(${imageFromPiece(piece)})`,
         backgroundSize: `100%`,
-        backgroundColor: props.bgColor,
+        backgroundColor: bgColor,
       }}
-      title={props.piece == null ? "" : props.piece.getInfoText()}
+      title={piece == null ? "" : piece.getInfoText()}
     >
     </button>
   );
@@ -145,6 +145,7 @@ class Board extends React.Component {
     super(props);
     if (props) {
       this.onMove = props.onMove;
+      this.lobbyName = props.lobbyName
     }
     this.state = (props && props.text) ?
       this.stateFromText(props.text) : this.originalState();
@@ -172,6 +173,8 @@ class Board extends React.Component {
     text = text.replace(/[\n]+/g, '');
     const squares = text.substring(1);
     return {
+      settings: {},
+      ...this.state,
       hand: {
         heldPiece: null,
       },
@@ -236,7 +239,7 @@ class Board extends React.Component {
         default:
           return '_';
       }
-    }).join('');;
+    }).join('');
   }
 
   doReset() {
@@ -595,14 +598,14 @@ class Board extends React.Component {
   }
 
   renderSquare(i) {
-    const plainBg = (i + (Math.floor(i / 8))) % 2 === 0 ? "white" : "#666";
+    const plainBg = (i + (Math.floor(i / 8))) % 2 === 0 ? "white" : "black";
-    const bgColor = this.heldPiece() === i ? "#5D98E6" : plainBg;
+    const bgColor = this.heldPiece() === i ? "held" : plainBg;
     return (
       <Square
         key={"square-" + i}
+        className={bgColor}
         piece={this.state.squares[i]}
         onClick={() => this.handleClick(i)}
-        bgColor={bgColor}
       />
     );
   }
@@ -728,7 +731,8 @@ class Board extends React.Component {
     return (
       <div>
         <div className="status">
-          <h1 style={{display: "inline-block", margin: "0"}}>{status}</h1>
+          <h2 style={{display: "inline-block", margin: "0"}}>{status}</h2>
+          <h1 style={{display: "inline-block", margin: "0"}}>{this.lobbyName}</h1>
           <img
             className="icon"
             alt="Settings icon: a gear"

src/index.css

@@ -1,7 +1,13 @@
 body {
   font: 14px "Century Gothic", Futura, sans-serif;
-  margin: 20px;
+  margin: 0;
-  background: #eee;
+  padding: 0;
+  background: radial-gradient(ellipse at top left, #e66465, transparent),
+  radial-gradient(ellipse at bottom right, #0c3b9f, transparent);
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 
 ol, ul {
@@ -15,8 +21,11 @@ ol, ul {
 }
 
 .status {
-  margin: 1em;
+  margin: 0 1em 1em;
-  margin-top: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
 }
 
 @media (orientation:landscape) {
@@ -47,7 +56,7 @@ ol, ul {
 
 .square {
   background: #fff;
-  border: 1px solid #999;
+  border: none;
   float: left;
   font-size: 24px;
   font-weight: bold;
@@ -57,15 +66,24 @@ ol, ul {
   padding: 0;
   text-align: center;
   outline: none;
+  transition: 50ms linear;
+  transition-property: background-color;
+}
+
+.white {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.black {
+  background: rgba(0, 0, 0, 0.2);
 }
 
 .square:hover {
-  background: lightblue;
+  background: rgba(150, 150, 255, 0.1);
-  transition: 50ms linear;
 }
 
-.square:focus {
+.held {
-  outline: none;
+  background: rgba(150, 150, 255, 0.4);
 }
 
 .kbd-navigation .square:focus {
@@ -93,3 +111,13 @@ ol, ul {
 .icon:hover {
   opacity: 0.6;
 }
+
+.big-input {
+  font-size: 150%;
+  padding: 0.5em;
+}
+
+.big-input[type="submit"] {
+  padding-left: 1em;
+  padding-right: 1em;
+}

src/index.js

@@ -29,12 +29,14 @@ class NameForm extends React.Component {
 
   render() {
     return (
-      <form onSubmit={this.handleSubmit}>
+      <form onSubmit={this.handleSubmit} style={{ marginBottom: '15em', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-        <label>
+        <label htmlFor='lobby-name'>
-          Name:
+          <h1 style={{ fontSize: '5rem' }}>Lobby Name:</h1>
-          <input type="text" value={this.state.value} onChange={this.handleChange} />
         </label>
-        <input type="submit" value="Submit" />
+        <div>
+          <input className='big-input' name='lobby-name' type="text" value={this.state.value} onChange={this.handleChange} />
+          <input className='big-input' style={{ marginLeft: '8px' }} type="submit" value="Submit" />
+        </div>
       </form>
     );
   }
@@ -58,6 +60,7 @@ class Game extends React.Component {
         board: (
           <Board
            text={data}
+           lobbyName={this.state.gameKey}
            onMove={(move) => {
              console.log("ON MOVE");
              this.state.socket.emit("move", this.state.gameKey, move);