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/ client/node_modules/
server/node_modules/ server/node_modules/
*.log *.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 { piece {
display: flex; display: flex;
@@ -20,8 +11,8 @@ piece {
font-size: 5vw; font-size: 5vw;
width: 10%; width: 10vw;
height: 10%; height: 10vw; /* for square have realtive to width */
position: absolute; position: absolute;
} }
@@ -40,56 +31,54 @@ score {
position: absolute; 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 { #game-board {
display: table; display: table;
table-layout: fixed; table-layout: fixed;
position: static; position: static;
width: 100%; width: 100%;
height: 100%; height: 200%;
max-width: 70%;
max-height: 70%;
text-align: center; text-align: center;
font-size: 3vw; /* roughly 15 / table width */ font-size: 3vw; /* roughly 15 / table width */
} }
.game-board-header { .game-board-header-row {
display: table-row-group; display: table-row;
height: 2vw;
} }
.game-board-header-cell { .game-board-header-cell {
display: table-cell; display: table-cell;
width: 100%;
height: 0;
padding-bottom: 0%;
}
.game-board-col-header {
display: table-column-group;
} }
.game-board-col-header-cell { .game-board-col-header-cell {
display: table-cell; isplay: table-cell;
width: 100%;
height: 0;
padding-bottom: 0%;
} }
.game-board-row { .game-board-row {
display: table-row; display: table-row;
height: 0;
} }
.game-board-cell { .game-board-cell {
display: table-cell; display: table-cell;
/* width: 100%; */ width: inherit;
height: 4vw;
/* width: 10vw; */
/* padding-bottom: 0%; */
font-size: 2vw; /* roughly 15 / table width */ font-size: 2vw; /* roughly 15 / table width */
vertical-align: middle; vertical-align: middle;

72
client/game.html
View File

@@ -24,8 +24,8 @@
<div id="game-board"> <div id="game-board">
<div class=game-board-header> <div class="game-board-header-row">
<div class="game-board-col-header game-board-col-header-cell"></div> <div class="game-board-col-header-cell"></div>
<div class="game-board-header-cell">A</div> <div class="game-board-header-cell">A</div>
<div class="game-board-header-cell">B</div> <div class="game-board-header-cell">B</div>
<div class="game-board-header-cell">C</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">M</div>
<div class="game-board-header-cell">N</div> <div class="game-board-header-cell">N</div>
<div class="game-board-header-cell">O</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>
<div class="game-board-row" id="row-1"> <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-a"></div>
<div class="game-board-cell" id="col-b"></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-n"></div>
<div class="game-board-cell" id="col-o"></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>
<div class="game-board-row" id="row-2"> <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-a"></div>
<div class="game-board-cell" id="col-b"></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-n"></div>
<div class="game-board-cell" id="col-o"></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>
<div class="game-board-row" id="row-3"> <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-a"></div>
<div class="game-board-cell" id="col-b"></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-n"></div>
<div class="game-board-cell" id="col-o"></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>
<div class="game-board-row" id="row-4"> <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-a"></div>
<div class="game-board-cell" id="col-b"></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-n"></div>
<div class="game-board-cell" id="col-o"></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>
<div class="game-board-row" id="row-5"> <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-a"></div>
<div class="game-board-cell" id="col-b"></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-n"></div>
<div class="game-board-cell" id="col-o"></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>
<div class="game-board-row" id="row-6"> <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-a"></div>
<div class="game-board-cell" id="col-b"></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-n"></div>
<div class="game-board-cell" id="col-o"></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>
<div class="game-board-row" id="row-7"> <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-a"></div>
<div class="game-board-cell" id="col-b"></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-n"></div>
<div class="game-board-cell" id="col-o"></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>
<div class="game-board-row" id="row-8"> <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-a"></div>
<div class="game-board-cell" id="col-b"></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-n"></div>
<div class="game-board-cell" id="col-o"></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>
<div class="game-board-row" id="row-9"> <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-a"></div>
<div class="game-board-cell" id="col-b"></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-n"></div>
<div class="game-board-cell" id="col-o"></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>
<div class="game-board-row" id="row-10"> <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-a"></div>
<div class="game-board-cell" id="col-b"></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-n"></div>
<div class="game-board-cell" id="col-o"></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>
<div class="game-board-row" id="row-11"> <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-a"></div>
<div class="game-board-cell" id="col-b"></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-n"></div>
<div class="game-board-cell" id="col-o"></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>
<div class="game-board-row" id="row-12"> <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-a"></div>
<div class="game-board-cell" id="col-b"></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-n"></div>
<div class="game-board-cell" id="col-o"></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>
<div class="game-board-row" id="row-13"> <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-a"></div>
<div class="game-board-cell" id="col-b"></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-n"></div>
<div class="game-board-cell" id="col-o"></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>
<div class="game-board-row" id="row-14"> <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-a"></div>
<div class="game-board-cell" id="col-b"></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-n"></div>
<div class="game-board-cell" id="col-o"></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>
<div class="game-board-row" id="row-15"> <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-a"></div>
<div class="game-board-cell" id="col-b"></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-n"></div>
<div class="game-board-cell" id="col-o"></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>
<div class=game-board-header> <div class="game-board-header-row">
<div class="game-board-col-header game-board-col-header-cell"></div> <div class="game-board-col-header-cell"></div>
<div class="game-board-header-cell">A</div> <div class="game-board-header-cell">A</div>
<div class="game-board-header-cell">B</div> <div class="game-board-header-cell">B</div>
<div class="game-board-header-cell">C</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">M</div>
<div class="game-board-header-cell">N</div> <div class="game-board-header-cell">N</div>
<div class="game-board-header-cell">O</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>
</div> </div>

2
client/package.json
View File

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