Converting to stand alone board render for optimized loading
Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>
This commit is contained in:
James Ketrenos
parent
98755b5bd0
commit
cdd5e0358f
1
client/public/assets/dice-six-faces-five.svg
Executable file
1
client/public/assets/dice-six-faces-five.svg
Executable file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height: 512px; width: 512px;"><path d="M0 0h512v512H0z" fill="#000000" fill-opacity="0.01"></path><g class="" transform="translate(0,0)" style=""><path d="M74.5 36A38.5 38.5 0 0 0 36 74.5v363A38.5 38.5 0 0 0 74.5 476h363a38.5 38.5 0 0 0 38.5-38.5v-363A38.5 38.5 0 0 0 437.5 36h-363zm48.97 36.03A50 50 0 0 1 172 122a50 50 0 0 1-100 0 50 50 0 0 1 51.47-49.97zm268 0A50 50 0 0 1 440 122a50 50 0 0 1-100 0 50 50 0 0 1 51.47-49.97zM256 206a50 50 0 0 1 0 100 50 50 0 0 1 0-100zM123.47 340.03A50 50 0 0 1 172 390a50 50 0 0 1-100 0 50 50 0 0 1 51.47-49.97zm268 0A50 50 0 0 1 440 390a50 50 0 0 1-100 0 50 50 0 0 1 51.47-49.97z" fill="#fff" fill-opacity="1"></path></g></svg>
|
||||||
|
After Width: | Height: | Size: 734 B |
1
client/public/assets/dice-six-faces-four.svg
Executable file
1
client/public/assets/dice-six-faces-four.svg
Executable file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height: 512px; width: 512px;"><path d="M0 0h512v512H0z" fill="#000000" fill-opacity="0.01"></path><g class="" transform="translate(0,0)" style=""><path d="M74.5 36A38.5 38.5 0 0 0 36 74.5v363A38.5 38.5 0 0 0 74.5 476h363a38.5 38.5 0 0 0 38.5-38.5v-363A38.5 38.5 0 0 0 437.5 36h-363zm48.97 36.03A50 50 0 0 1 172 122a50 50 0 0 1-100 0 50 50 0 0 1 51.47-49.97zm268 0A50 50 0 0 1 440 122a50 50 0 0 1-100 0 50 50 0 0 1 51.47-49.97zm-268 268A50 50 0 0 1 172 390a50 50 0 0 1-100 0 50 50 0 0 1 51.47-49.97zm268 0A50 50 0 0 1 440 390a50 50 0 0 1-100 0 50 50 0 0 1 51.47-49.97z" fill="#fff" fill-opacity="1"></path></g></svg>
|
||||||
|
After Width: | Height: | Size: 684 B |
1
client/public/assets/dice-six-faces-one.svg
Executable file
1
client/public/assets/dice-six-faces-one.svg
Executable file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height: 512px; width: 512px;"><path d="M0 0h512v512H0z" fill="#000000" fill-opacity="0.01"></path><g class="" transform="translate(0,0)" style=""><path d="M74.5 36A38.5 38.5 0 0 0 36 74.5v363A38.5 38.5 0 0 0 74.5 476h363a38.5 38.5 0 0 0 38.5-38.5v-363A38.5 38.5 0 0 0 437.5 36h-363zM256 206a50 50 0 0 1 0 100 50 50 0 0 1 0-100z" fill="#fff" fill-opacity="1"></path></g></svg>
|
||||||
|
After Width: | Height: | Size: 444 B |
1
client/public/assets/dice-six-faces-six.svg
Executable file
1
client/public/assets/dice-six-faces-six.svg
Executable file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height: 512px; width: 512px;"><path d="M0 0h512v512H0z" fill="#000000" fill-opacity="0.01"></path><g class="" transform="translate(0,0)" style=""><path d="M74.5 36A38.5 38.5 0 0 0 36 74.5v363A38.5 38.5 0 0 0 74.5 476h363a38.5 38.5 0 0 0 38.5-38.5v-363A38.5 38.5 0 0 0 437.5 36h-363zm48.97 36.03A50 50 0 0 1 172 122a50 50 0 0 1-100 0 50 50 0 0 1 51.47-49.97zm268 0A50 50 0 0 1 440 122a50 50 0 0 1-100 0 50 50 0 0 1 51.47-49.97zM122 206a50 50 0 0 1 0 100 50 50 0 0 1 0-100zm268 0a50 50 0 0 1 0 100 50 50 0 0 1 0-100zM123.47 340.03A50 50 0 0 1 172 390a50 50 0 0 1-100 0 50 50 0 0 1 51.47-49.97zm268 0A50 50 0 0 1 440 390a50 50 0 0 1-100 0 50 50 0 0 1 51.47-49.97z" fill="#fff" fill-opacity="1"></path></g></svg>
|
||||||
|
After Width: | Height: | Size: 777 B |
1
client/public/assets/dice-six-faces-three.svg
Executable file
1
client/public/assets/dice-six-faces-three.svg
Executable file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height: 512px; width: 512px;"><path d="M0 0h512v512H0z" fill="#000000" fill-opacity="0.01"></path><g class="" transform="translate(0,0)" style=""><path d="M74.5 36A38.5 38.5 0 0 0 36 74.5v363A38.5 38.5 0 0 0 74.5 476h363a38.5 38.5 0 0 0 38.5-38.5v-363A38.5 38.5 0 0 0 437.5 36h-363zm316.97 36.03A50 50 0 0 1 440 122a50 50 0 0 1-100 0 50 50 0 0 1 51.47-49.97zM256 206a50 50 0 0 1 0 100 50 50 0 0 1 0-100zM123.47 340.03A50 50 0 0 1 172 390a50 50 0 0 1-100 0 50 50 0 0 1 51.47-49.97z" fill="#fff" fill-opacity="1"></path></g></svg>
|
||||||
|
After Width: | Height: | Size: 597 B |
1
client/public/assets/dice-six-faces-two.svg
Executable file
1
client/public/assets/dice-six-faces-two.svg
Executable file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height: 512px; width: 512px;"><path d="M0 0h512v512H0z" fill="#000000" fill-opacity="0.01"></path><g class="" transform="translate(0,0)" style=""><path d="M74.5 36A38.5 38.5 0 0 0 36 74.5v363A38.5 38.5 0 0 0 74.5 476h363a38.5 38.5 0 0 0 38.5-38.5v-363A38.5 38.5 0 0 0 437.5 36h-363zm316.97 36.03A50 50 0 0 1 440 122a50 50 0 0 1-100 0 50 50 0 0 1 51.47-49.97zm-268 268A50 50 0 0 1 172 390a50 50 0 0 1-100 0 50 50 0 0 1 51.47-49.97z" fill="#fff" fill-opacity="1"></path></g></svg>
|
||||||
|
After Width: | Height: | Size: 547 B |
BIN
client/public/assets/gfx/tabletop.png
Normal file
BIN
client/public/assets/gfx/tabletop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 385 KiB |
BIN
client/public/assets/original/tabletop.png
Normal file
BIN
client/public/assets/original/tabletop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
@ -15,7 +15,7 @@ import {
|
|||||||
//import 'typeface-roboto';
|
//import 'typeface-roboto';
|
||||||
|
|
||||||
//import history from "./history.js";
|
//import history from "./history.js";
|
||||||
import Board from "./Board.js";
|
import Table from "./Table.js";
|
||||||
import "./App.css";
|
import "./App.css";
|
||||||
|
|
||||||
let base = process.env.PUBLIC_URL;
|
let base = process.env.PUBLIC_URL;
|
||||||
@ -25,8 +25,8 @@ function App() {
|
|||||||
return (
|
return (
|
||||||
<Router>
|
<Router>
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route exact element={<Board/>} path={`${base}/games/:id`}/>
|
<Route exact element={<Table/>} path={`${base}/games/:id`}/>
|
||||||
<Route exact element={<Board/>} path={`${base}`}/>
|
<Route exact element={<Table/>} path={`${base}`}/>
|
||||||
</Routes>
|
</Routes>
|
||||||
</Router>
|
</Router>
|
||||||
);
|
);
|
||||||
|
|||||||
330
client/src/Board.css
Executable file → Normal file
330
client/src/Board.css
Executable file → Normal file
@ -7,333 +7,3 @@
|
|||||||
justify-content: right;
|
justify-content: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.Display {
|
|
||||||
display: inline-block;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
.PlayerColor {
|
|
||||||
display: inline-flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
width: 1em;
|
|
||||||
height: 1em;
|
|
||||||
padding: 0.125em;
|
|
||||||
margin: 0 0.25em;
|
|
||||||
border-radius: 0.625em;
|
|
||||||
border-width: 1px;
|
|
||||||
border-style: solid;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.PlayerColor > div {
|
|
||||||
font-weight: bold;
|
|
||||||
overflow: hidden;
|
|
||||||
font-size: 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Cards {
|
|
||||||
display: inline-block;
|
|
||||||
position: absolute;
|
|
||||||
text-align: right;
|
|
||||||
vertical-align: bottom;
|
|
||||||
padding: 0.5em;
|
|
||||||
box-sizing: border-box;
|
|
||||||
max-height: 100%;
|
|
||||||
max-width: 100%;
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Stack {
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Stack:not(:first-child) {
|
|
||||||
margin-left: -3em;
|
|
||||||
transition: margin-left 1s ease-in-out 0.25s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Stack > * {
|
|
||||||
transition: margin-left 1s ease-in-out 0.25s, margin-right 1s ease-in-out 0.25s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Development:hover,
|
|
||||||
.Placard:hover,
|
|
||||||
.Resource:hover {
|
|
||||||
filter: brightness(150%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.Dice {
|
|
||||||
width: 1rem;
|
|
||||||
height: 1rem;
|
|
||||||
background-color: black;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Game {
|
|
||||||
display: inline-flex;
|
|
||||||
flex-direction: column;
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 40vw;
|
|
||||||
max-height: 100vh;
|
|
||||||
overflow: hidden;
|
|
||||||
max-width: 40vw;
|
|
||||||
z-index: 100;
|
|
||||||
padding: 0.5em;
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Game > * {
|
|
||||||
/* for Firefox */
|
|
||||||
min-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Game > *:not(:last-child) {
|
|
||||||
margin-bottom: 0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Game .lobby {
|
|
||||||
width: 100vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Chat {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
flex: 1;
|
|
||||||
padding: 0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Chat > * {
|
|
||||||
/* for Firefox */
|
|
||||||
min-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#ChatList {
|
|
||||||
flex: 1;
|
|
||||||
overflow: auto;
|
|
||||||
scroll-behavior: smooth;
|
|
||||||
align-items: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
#ChatList .MuiListItem-gutters {
|
|
||||||
padding: 2px 0 2px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#ChatList .MuiTypography-body1 {
|
|
||||||
font-size: 0.8rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
#ChatList .MuiTypography-body2 {
|
|
||||||
font-size: 0.7rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
#ChatList .MuiListItemText-multiline {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 0;
|
|
||||||
padding: 4px 0px 4px 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#ChatList .PlayerColor {
|
|
||||||
width: 1em;
|
|
||||||
height: 1em;
|
|
||||||
padding: 0;
|
|
||||||
margin-top: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Players {
|
|
||||||
padding: 0.5em;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.PlayerSelector .PlayerColor {
|
|
||||||
width: 1em;
|
|
||||||
height: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.PlayerSelector {
|
|
||||||
display: inline-flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.PlayerSelector.MuiList-padding {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.PlayerSelector .PlayerEntry {
|
|
||||||
flex: 1 1 0px;
|
|
||||||
align-items: center;
|
|
||||||
display: inline-flex;
|
|
||||||
flex-direction: row;
|
|
||||||
min-width: 10em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.PlayerSelector .MuiTypography-body1 {
|
|
||||||
font-size: 0.8rem;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.PlayerSelector .MuiTypography-body2 {
|
|
||||||
font-size: 0.7rem;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Players .PlayerEntry {
|
|
||||||
border: 1px solid rgba(0,0,0,0);
|
|
||||||
border-radius: 0.5em;
|
|
||||||
min-width: 10em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Players .PlayerEntry[data-selectable=true]:hover {
|
|
||||||
border-color: rgba(0,0,0,0.5);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Players .PlayerEntry[data-selected=true] {
|
|
||||||
background-color: rgba(255, 255, 0, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.Players .PlayerToggle {
|
|
||||||
min-width: 5em;
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: end;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.PlayerName {
|
|
||||||
padding: 0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Players > * {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Players .nameInput {
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Stack > *:not(:first-child) {
|
|
||||||
margin-left: -4.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Hand {
|
|
||||||
min-height: calc(7.2em + 0.5em);
|
|
||||||
}
|
|
||||||
|
|
||||||
.Hand:hover .Stack:hover > *:not(:first-child) {
|
|
||||||
margin-left: -2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Hand:hover .Stack:hover:not(:last-child) > *:last-child {
|
|
||||||
margin-right: 3em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Placard {
|
|
||||||
position: relative;
|
|
||||||
width: 9.4em;
|
|
||||||
height: 11.44em;
|
|
||||||
background-position: center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: cover;
|
|
||||||
margin: 0.25em;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Development {
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
width: 4.9em;
|
|
||||||
height: 7.2em;
|
|
||||||
background-position: center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: cover;
|
|
||||||
margin: 0.25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Resource {
|
|
||||||
position: relative;
|
|
||||||
width: 4.9em;
|
|
||||||
height: 7.2em;
|
|
||||||
display: inline-block;
|
|
||||||
background-position: center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: cover;
|
|
||||||
margin: 0.25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Action {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-evenly;
|
|
||||||
background-color: rgba(16, 16, 16, 0.25);
|
|
||||||
padding: 0.25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
margin: 0.25em;
|
|
||||||
background-color: white;
|
|
||||||
border: 1px solid black !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Error {
|
|
||||||
display: flex;
|
|
||||||
position: absolute;
|
|
||||||
top: calc(50vh - 1.5em);
|
|
||||||
left: 0px;
|
|
||||||
right: 0px;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
background-color: yellow;
|
|
||||||
text-align: left;
|
|
||||||
font-size: 12pt;
|
|
||||||
padding: 1em;
|
|
||||||
margin: 1em;
|
|
||||||
z-index: 10000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Message {
|
|
||||||
display: inline;
|
|
||||||
justify-content: left;
|
|
||||||
background-color: rgba(224, 224, 224);
|
|
||||||
text-align: left;
|
|
||||||
font-size: 12pt;
|
|
||||||
padding: 0.5em;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Message .PlayerColor {
|
|
||||||
width: 1em;
|
|
||||||
height: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Message div {
|
|
||||||
display: inline-flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.PlayerName {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
|
|
||||||
.PlayerName > .nameInput {
|
|
||||||
margin-right: 1em;
|
|
||||||
flex: 1;
|
|
||||||
max-width: 30em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.PlayerName > Button {
|
|
||||||
background: lightblue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Statistics > div:nth-child(2) {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
border: 1px solid black;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Statistics div:nth-child(2) div {
|
|
||||||
padding: 0.25em 0.5em;
|
|
||||||
}
|
|
||||||
|
|||||||
1424
client/src/Board.js
Executable file → Normal file
1424
client/src/Board.js
Executable file → Normal file
File diff suppressed because it is too large
Load Diff
339
client/src/Table.css
Executable file
339
client/src/Table.css
Executable file
@ -0,0 +1,339 @@
|
|||||||
|
.Table {
|
||||||
|
display: flex;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
height: 100%;
|
||||||
|
justify-content: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Display {
|
||||||
|
display: inline-block;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.PlayerColor {
|
||||||
|
display: inline-flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 1em;
|
||||||
|
height: 1em;
|
||||||
|
padding: 0.125em;
|
||||||
|
margin: 0 0.25em;
|
||||||
|
border-radius: 0.625em;
|
||||||
|
border-width: 1px;
|
||||||
|
border-style: solid;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.PlayerColor > div {
|
||||||
|
font-weight: bold;
|
||||||
|
overflow: hidden;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Cards {
|
||||||
|
display: inline-block;
|
||||||
|
position: absolute;
|
||||||
|
text-align: right;
|
||||||
|
vertical-align: bottom;
|
||||||
|
padding: 0.5em;
|
||||||
|
box-sizing: border-box;
|
||||||
|
max-height: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Stack {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Stack:not(:first-child) {
|
||||||
|
margin-left: -3em;
|
||||||
|
transition: margin-left 1s ease-in-out 0.25s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Stack > * {
|
||||||
|
transition: margin-left 1s ease-in-out 0.25s, margin-right 1s ease-in-out 0.25s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Development:hover,
|
||||||
|
.Placard:hover,
|
||||||
|
.Resource:hover {
|
||||||
|
filter: brightness(150%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.Dice {
|
||||||
|
width: 1rem;
|
||||||
|
height: 1rem;
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Game {
|
||||||
|
display: inline-flex;
|
||||||
|
flex-direction: column;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 40vw;
|
||||||
|
max-height: 100vh;
|
||||||
|
overflow: hidden;
|
||||||
|
max-width: 40vw;
|
||||||
|
z-index: 100;
|
||||||
|
padding: 0.5em;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Game > * {
|
||||||
|
/* for Firefox */
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Game > *:not(:last-child) {
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Game .lobby {
|
||||||
|
width: 100vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Chat {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex: 1;
|
||||||
|
padding: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Chat > * {
|
||||||
|
/* for Firefox */
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ChatList {
|
||||||
|
flex: 1;
|
||||||
|
overflow: auto;
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ChatList .MuiListItem-gutters {
|
||||||
|
padding: 2px 0 2px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ChatList .MuiTypography-body1 {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ChatList .MuiTypography-body2 {
|
||||||
|
font-size: 0.7rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ChatList .MuiListItemText-multiline {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 0;
|
||||||
|
padding: 4px 0px 4px 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ChatList .PlayerColor {
|
||||||
|
width: 1em;
|
||||||
|
height: 1em;
|
||||||
|
padding: 0;
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Players {
|
||||||
|
padding: 0.5em;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.PlayerSelector .PlayerColor {
|
||||||
|
width: 1em;
|
||||||
|
height: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.PlayerSelector {
|
||||||
|
display: inline-flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.PlayerSelector.MuiList-padding {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.PlayerSelector .PlayerEntry {
|
||||||
|
flex: 1 1 0px;
|
||||||
|
align-items: center;
|
||||||
|
display: inline-flex;
|
||||||
|
flex-direction: row;
|
||||||
|
min-width: 10em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.PlayerSelector .MuiTypography-body1 {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.PlayerSelector .MuiTypography-body2 {
|
||||||
|
font-size: 0.7rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Players .PlayerEntry {
|
||||||
|
border: 1px solid rgba(0,0,0,0);
|
||||||
|
border-radius: 0.5em;
|
||||||
|
min-width: 10em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Players .PlayerEntry[data-selectable=true]:hover {
|
||||||
|
border-color: rgba(0,0,0,0.5);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Players .PlayerEntry[data-selected=true] {
|
||||||
|
background-color: rgba(255, 255, 0, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.Players .PlayerToggle {
|
||||||
|
min-width: 5em;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.PlayerName {
|
||||||
|
padding: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Players > * {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Players .nameInput {
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Stack > *:not(:first-child) {
|
||||||
|
margin-left: -4.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Hand {
|
||||||
|
min-height: calc(7.2em + 0.5em);
|
||||||
|
}
|
||||||
|
|
||||||
|
.Hand:hover .Stack:hover > *:not(:first-child) {
|
||||||
|
margin-left: -2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Hand:hover .Stack:hover:not(:last-child) > *:last-child {
|
||||||
|
margin-right: 3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Placard {
|
||||||
|
position: relative;
|
||||||
|
width: 9.4em;
|
||||||
|
height: 11.44em;
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
margin: 0.25em;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Development {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
width: 4.9em;
|
||||||
|
height: 7.2em;
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
margin: 0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Resource {
|
||||||
|
position: relative;
|
||||||
|
width: 4.9em;
|
||||||
|
height: 7.2em;
|
||||||
|
display: inline-block;
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
margin: 0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Action {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
background-color: rgba(16, 16, 16, 0.25);
|
||||||
|
padding: 0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
margin: 0.25em;
|
||||||
|
background-color: white;
|
||||||
|
border: 1px solid black !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Error {
|
||||||
|
display: flex;
|
||||||
|
position: absolute;
|
||||||
|
top: calc(50vh - 1.5em);
|
||||||
|
left: 0px;
|
||||||
|
right: 0px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background-color: yellow;
|
||||||
|
text-align: left;
|
||||||
|
font-size: 12pt;
|
||||||
|
padding: 1em;
|
||||||
|
margin: 1em;
|
||||||
|
z-index: 10000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Message {
|
||||||
|
display: inline;
|
||||||
|
justify-content: left;
|
||||||
|
background-color: rgba(224, 224, 224);
|
||||||
|
text-align: left;
|
||||||
|
font-size: 12pt;
|
||||||
|
padding: 0.5em;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Message .PlayerColor {
|
||||||
|
width: 1em;
|
||||||
|
height: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Message div {
|
||||||
|
display: inline-flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.PlayerName {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.PlayerName > .nameInput {
|
||||||
|
margin-right: 1em;
|
||||||
|
flex: 1;
|
||||||
|
max-width: 30em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.PlayerName > Button {
|
||||||
|
background: lightblue;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Statistics > div:nth-child(2) {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
border: 1px solid black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Statistics div:nth-child(2) div {
|
||||||
|
padding: 0.25em 0.5em;
|
||||||
|
}
|
||||||
1026
client/src/Table.js
Executable file
1026
client/src/Table.js
Executable file
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user