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

css is bad

Browse Source
This commit is contained in:
Ben Kyd
2021-04-01 03:10:44 +01:00
parent e19dc7e195
commit 5e619de564
6 changed files with 1668 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -1,3 +1,4 @@
/node_modules/
client/node_modules/
server/node_modules/
*.log

57
client/game.css
View File

@@ -1,13 +1,4 @@
#game-container {
border: 1px dotted black;
padding-bottom: 20%;
position: absolute;
height: 80%;
overflow: hidden;
}
piece {
display: flex;
@@ -20,8 +11,8 @@ piece {
font-size: 5vw;
width: 10%;
height: 10%;
width: 10vw;
height: 10vw; /* for square have realtive to width */
position: absolute;
}
@@ -40,56 +31,54 @@ score {
position: absolute;
}
#game-container {
border: 1px dotted black;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin: auto;
width: 600px;
height: 600px;
}
#game-board {
display: table;
table-layout: fixed;
position: static;
width: 100%;
height: 100%;
max-width: 70%;
max-height: 70%;
height: 200%;
text-align: center;
font-size: 3vw; /* roughly 15 / table width */
}
.game-board-header {
display: table-row-group;
.game-board-header-row {
display: table-row;
height: 2vw;
}
.game-board-header-cell {
display: table-cell;
width: 100%;
height: 0;
padding-bottom: 0%;
}
.game-board-col-header {
display: table-column-group;
}
.game-board-col-header-cell {
display: table-cell;
width: 100%;
height: 0;
padding-bottom: 0%;
isplay: table-cell;
}
.game-board-row {
display: table-row;
height: 0;
}
.game-board-cell {
display: table-cell;
/* width: 100%; */
height: 4vw;
/* width: 10vw; */
/* padding-bottom: 0%; */
width: inherit;
font-size: 2vw; /* roughly 15 / table width */
vertical-align: middle;

72
client/game.html
View File

@@ -24,8 +24,8 @@
<div id="game-board">
<div class=game-board-header>
<div class="game-board-col-header game-board-col-header-cell"></div>
<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>
<div class="game-board-header-cell">C</div>
@@ -41,12 +41,12 @@
<div class="game-board-header-cell">M</div>
<div class="game-board-header-cell">N</div>
<div class="game-board-header-cell">O</div>
<div class="game-board-col-header game-board-col-header-cell"></div>
<div class="game-board-col-header-cell"></div>
</div>
<div class="game-board-row" id="row-1">
<div class="game-board-col-header 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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,12 +358,12 @@
<div class="game-board-cell" id="col-n"></div>
<div class="game-board-cell" id="col-o"></div>
<div class="game-board-col-header game-board-col-header-cell">15</div>
<div class="game-board-col-header-cell">15</div>
</div>
<div class=game-board-header>
<div class="game-board-col-header game-board-col-header-cell"></div>
<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>
<div class="game-board-header-cell">C</div>
@@ -379,7 +379,7 @@
<div class="game-board-header-cell">M</div>
<div class="game-board-header-cell">N</div>
<div class="game-board-header-cell">O</div>
<div class="game-board-col-header game-board-col-header-cell"></div>
<div class="game-board-col-header-cell"></div>
</div>
</div>

2
client/package.json
View File

@@ -2,7 +2,7 @@
"name": "scrabble_client",
"version": "1.0.0",
"description": "G600 L4 Application Programming Coursework 2020",
"main": "launchserver.js",
"main": "n/a",
"scripts": {
"start": "node launchserver.js",
"setup": "npm i",

1584
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

22
package.json Normal file
View File

@@ -0,0 +1,22 @@
{
"name": "scrabble",
"version": "1.0.0",
"description": "G600 L4 Application Programming Coursework 2020",
"main": "n/a",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Ben Kyd <benjaminkyd@gmail.com> (https://benkyd.co.uk)",
"license": "UNLICENSED",
// "eslintConfig": {
// "extends": "portsoc",
// "root": true,
// "env": {
// "browser": true
// }
// },
"dependencies": {
"eslint": "^7.23.0",
"eslint-config-portsoc": "^0.8.1"
}
}