benkyd/scrabble-online
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

that's better

Browse Source
This commit is contained in:
Ben Kyd
2021-04-01 18:13:17 +01:00
parent 5e619de564
commit 2abdee69f9
2 changed files with 46 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
client/game.css
View File

@@ -9,10 +9,10 @@ piece {
justify-content: center;
align-items: center;
font-size: 5vw;
font-size: 50px;
width: 10vw;
height: 10vw; /* for square have realtive to width */
width: 80px;
height: 80px;
position: absolute;
}
@@ -21,12 +21,12 @@ score {
display: inline-block;
text-align: right;
right: 1vw;
right: 5px;
width: 100%;
height: 100%;
font-size: 3vw;
font-size: 20px;
position: absolute;
}
@@ -41,7 +41,7 @@ score {
margin: auto;
width: 600px;
height: 600px;
height: 700px;
}
@@ -50,37 +50,25 @@ score {
table-layout: fixed;
position: static;
width: 100%;
height: 200%;
width: 600px;
height: 600px;
text-align: center;
font-size: 3vw; /* roughly 15 / table width */
}
.game-board-header-row {
display: table-row;
height: 2vw;
}
.game-board-header-cell {
display: table-cell;
}
.game-board-col-header-cell {
isplay: table-cell;
}
.game-board-row {
display: table-row;
height: 0;
height: 40px;
}
.game-board-cell {
display: table-cell;
width: inherit;
width: 40px;
height: 40px;
font-size: 2vw; /* roughly 15 / table width */
font-size: 15px; /* roughly 15 / table width */
vertical-align: middle;
background: radial-gradient(circle, rgba(255,255,255,1) 38%, rgba(244,244,244,1) 94%);

68
client/game.html
View File

@@ -24,7 +24,7 @@
<div id="game-board">
<div class="game-board-header-row">
<!-- <div class="game-board-header-row">
<div class="game-board-col-header-cell"></div>
<div class="game-board-header-cell">A</div>
<div class="game-board-header-cell">B</div>
@@ -42,11 +42,11 @@
<div class="game-board-header-cell">N</div>
<div class="game-board-header-cell">O</div>
<div class="game-board-col-header-cell"></div>
</div>
</div> -->
<div class="game-board-row" id="row-1">
<div class="game-board-col-header-cell">1</div>
<!-- <div class="game-board-col-header-cell">1</div> -->
<div class="game-board-cell" id="col-a"></div>
<div class="game-board-cell" id="col-b"></div>
@@ -64,10 +64,10 @@
<div class="game-board-cell" id="col-n"></div>
<div class="game-board-cell" id="col-o"></div>
<div class="game-board-col-header-cell">1</div>
<!-- <div class="game-board-col-header-cell">1</div> -->
</div>
<div class="game-board-row" id="row-2">
<div class="game-board-col-header-cell">2</div>
<!-- <div class="game-board-col-header-cell">2</div> -->
<div class="game-board-cell" id="col-a"></div>
<div class="game-board-cell" id="col-b"></div>
@@ -85,10 +85,10 @@
<div class="game-board-cell" id="col-n"></div>
<div class="game-board-cell" id="col-o"></div>
<div class="game-board-col-header-cell">2</div>
<!-- <div class="game-board-col-header-cell">2</div> -->
</div>
<div class="game-board-row" id="row-3">
<div class="game-board-col-header-cell">3</div>
<!-- <div class="game-board-col-header-cell">3</div> -->
<div class="game-board-cell" id="col-a"></div>
<div class="game-board-cell" id="col-b"></div>
@@ -106,10 +106,10 @@
<div class="game-board-cell" id="col-n"></div>
<div class="game-board-cell" id="col-o"></div>
<div class="game-board-col-header-cell">3</div>
<!-- <div class="game-board-col-header-cell">3</div> -->
</div>
<div class="game-board-row" id="row-4">
<div class="game-board-col-header-cell">4</div>
<!-- <div class="game-board-col-header-cell">4</div> -->
<div class="game-board-cell" id="col-a"></div>
<div class="game-board-cell" id="col-b"></div>
@@ -127,10 +127,10 @@
<div class="game-board-cell" id="col-n"></div>
<div class="game-board-cell" id="col-o"></div>
<div class="game-board-col-header-cell">4</div>
<!-- <div class="game-board-col-header-cell">4</div> -->
</div>
<div class="game-board-row" id="row-5">
<div class="game-board-col-header-cell">5</div>
<!-- <div class="game-board-col-header-cell">5</div> -->
<div class="game-board-cell" id="col-a"></div>
<div class="game-board-cell" id="col-b"></div>
@@ -148,10 +148,10 @@
<div class="game-board-cell" id="col-n"></div>
<div class="game-board-cell" id="col-o"></div>
<div class="game-board-col-header-cell">5</div>
<!-- <div class="game-board-col-header-cell">5</div> -->
</div>
<div class="game-board-row" id="row-6">
<div class="game-board-col-header-cell">6</div>
<!-- <div class="game-board-col-header-cell">6</div> -->
<div class="game-board-cell" id="col-a"></div>
<div class="game-board-cell" id="col-b"></div>
@@ -169,10 +169,10 @@
<div class="game-board-cell" id="col-n"></div>
<div class="game-board-cell" id="col-o"></div>
<div class="game-board-col-header-cell">6</div>
<!-- <div class="game-board-col-header-cell">6</div> -->
</div>
<div class="game-board-row" id="row-7">
<div class="game-board-col-header-cell">7</div>
<!-- <div class="game-board-col-header-cell">7</div> -->
<div class="game-board-cell" id="col-a"></div>
<div class="game-board-cell" id="col-b"></div>
@@ -190,10 +190,10 @@
<div class="game-board-cell" id="col-n"></div>
<div class="game-board-cell" id="col-o"></div>
<div class="game-board-col-header-cell">7</div>
<!-- <div class="game-board-col-header-cell">7</div> -->
</div>
<div class="game-board-row" id="row-8">
<div class="game-board-col-header-cell">8</div>
<!-- <div class="game-board-col-header-cell">8</div> -->
<div class="game-board-cell" id="col-a"></div>
<div class="game-board-cell" id="col-b"></div>
@@ -211,10 +211,10 @@
<div class="game-board-cell" id="col-n"></div>
<div class="game-board-cell" id="col-o"></div>
<div class="game-board-col-header-cell">8</div>
<!-- <div class="game-board-col-header-cell">8</div> -->
</div>
<div class="game-board-row" id="row-9">
<div class="game-board-col-header-cell">9</div>
<!-- <div class="game-board-col-header-cell">9</div> -->
<div class="game-board-cell" id="col-a"></div>
<div class="game-board-cell" id="col-b"></div>
@@ -232,10 +232,10 @@
<div class="game-board-cell" id="col-n"></div>
<div class="game-board-cell" id="col-o"></div>
<div class="game-board-col-header-cell">9</div>
<!-- <div class="game-board-col-header-cell">9</div> -->
</div>
<div class="game-board-row" id="row-10">
<div class="game-board-col-header-cell">10</div>
<!-- <div class="game-board-col-header-cell">10</div> -->
<div class="game-board-cell" id="col-a"></div>
<div class="game-board-cell" id="col-b"></div>
@@ -253,10 +253,10 @@
<div class="game-board-cell" id="col-n"></div>
<div class="game-board-cell" id="col-o"></div>
<div class="game-board-col-header-cell">10</div>
<!-- <div class="game-board-col-header-cell">10</div> -->
</div>
<div class="game-board-row" id="row-11">
<div class="game-board-col-header-cell">11</div>
<!-- <div class="game-board-col-header-cell">11</div> -->
<div class="game-board-cell" id="col-a"></div>
<div class="game-board-cell" id="col-b"></div>
@@ -274,10 +274,10 @@
<div class="game-board-cell" id="col-n"></div>
<div class="game-board-cell" id="col-o"></div>
<div class="game-board-col-header-cell">11</div>
<!-- <div class="game-board-col-header-cell">11</div> -->
</div>
<div class="game-board-row" id="row-12">
<div class="game-board-col-header-cell">12</div>
<!-- <div class="game-board-col-header-cell">12</div> -->
<div class="game-board-cell" id="col-a"></div>
<div class="game-board-cell" id="col-b"></div>
@@ -295,10 +295,10 @@
<div class="game-board-cell" id="col-n"></div>
<div class="game-board-cell" id="col-o"></div>
<div class="game-board-col-header-cell">12</div>
<!-- <div class="game-board-col-header-cell">12</div> -->
</div>
<div class="game-board-row" id="row-13">
<div class="game-board-col-header-cell">13</div>
<!-- <div class="game-board-col-header-cell">13</div> -->
<div class="game-board-cell" id="col-a"></div>
<div class="game-board-cell" id="col-b"></div>
@@ -316,10 +316,10 @@
<div class="game-board-cell" id="col-n"></div>
<div class="game-board-cell" id="col-o"></div>
<div class="game-board-col-header-cell">13</div>
<!-- <div class="game-board-col-header-cell">13</div> -->
</div>
<div class="game-board-row" id="row-14">
<div class="game-board-col-header-cell">14</div>
<!-- <div class="game-board-col-header-cell">14</div> -->
<div class="game-board-cell" id="col-a"></div>
<div class="game-board-cell" id="col-b"></div>
@@ -337,10 +337,10 @@
<div class="game-board-cell" id="col-n"></div>
<div class="game-board-cell" id="col-o"></div>
<div class="game-board-col-header-cell">14</div>
<!-- <div class="game-board-col-header-cell">14</div> -->
</div>
<div class="game-board-row" id="row-15">
<div class="game-board-col-header-cell">15</div>
<!-- <div class="game-board-col-header-cell">15</div> -->
<div class="game-board-cell" id="col-a"></div>
<div class="game-board-cell" id="col-b"></div>
@@ -358,10 +358,10 @@
<div class="game-board-cell" id="col-n"></div>
<div class="game-board-cell" id="col-o"></div>
<div class="game-board-col-header-cell">15</div>
<!-- <div class="game-board-col-header-cell">15</div> -->
</div>
<!--
<div class="game-board-header-row">
<div class="game-board-col-header-cell"></div>
<div class="game-board-header-cell">A</div>
@@ -380,7 +380,7 @@
<div class="game-board-header-cell">N</div>
<div class="game-board-header-cell">O</div>
<div class="game-board-col-header-cell"></div>
</div>
</div> -->
</div>
<p><p><p>