Much, much, prettier.
Show lobby name. Case-insensitive lobby names.
This commit is contained in:
Sage Vaillancourt
parent
83e1e9c19c
commit
259174358b
File diff suppressed because it is too large
Load Diff
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -1,77 +1,23 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
id="svg2995"
|
||||
sodipodi:docname="gearYellow.svg"
|
||||
inkscape:export-filename="/home/aztlek/Documentos/IDU/TOGAF IDU/TOGAF IDU V2.0/aplicacionEnDesuso-16x16.png"
|
||||
viewBox="0 0 48 48"
|
||||
inkscape:export-xdpi="30.18"
|
||||
version="1.1"
|
||||
inkscape:export-ydpi="30.18"
|
||||
inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)">
|
||||
<defs
|
||||
id="defs60" />
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
bordercolor="#666666"
|
||||
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>
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<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#">
|
||||
<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"/>
|
||||
<metadata>
|
||||
<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>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 2.2 KiB |
|
|
@ -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) {
|
||||
|
|
|
|||
26
src/board.js
26
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"
|
||||
onClick={props.onClick}
|
||||
className={"square " + className}
|
||||
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 bgColor = this.heldPiece() === i ? "#5D98E6" : plainBg;
|
||||
const plainBg = (i + (Math.floor(i / 8))) % 2 === 0 ? "white" : "black";
|
||||
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"
|
||||
|
|
|
|||
|
|
@ -1,7 +1,13 @@
|
|||
body {
|
||||
font: 14px "Century Gothic", Futura, sans-serif;
|
||||
margin: 20px;
|
||||
background: #eee;
|
||||
margin: 0;
|
||||
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-top: 0;
|
||||
margin: 0 1em 1em;
|
||||
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;
|
||||
transition: 50ms linear;
|
||||
background: rgba(150, 150, 255, 0.1);
|
||||
}
|
||||
|
||||
.square:focus {
|
||||
outline: none;
|
||||
.held {
|
||||
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;
|
||||
}
|
||||
13
src/index.js
13
src/index.js
|
|
@ -29,12 +29,14 @@ class NameForm extends React.Component {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<form onSubmit={this.handleSubmit}>
|
||||
<label>
|
||||
Name:
|
||||
<input type="text" value={this.state.value} onChange={this.handleChange} />
|
||||
<form onSubmit={this.handleSubmit} style={{ marginBottom: '15em', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
|
||||
<label htmlFor='lobby-name'>
|
||||
<h1 style={{ fontSize: '5rem' }}>Lobby Name:</h1>
|
||||
</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);
|
||||
|
|
|
|||
Loading…
Reference in New Issue