benkyd/scrabble-online
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
5e619de564d7b36c9650ab29cda458734c4d6b81
scrabble-online/client/game.html
Ben Kyd 5e619de564 css is bad
2021-04-01 03:10:44 +01:00

402 lines
19 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./game.css">
<link rel="stylesheet" href="./public/main.css">
<title>Scrabble!</title>
</head>
<body>
<!--
Tile's have classes
Tile's go in table boxes
-->
<div id="game-container">
<div id="game-board">
<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>
<div class="game-board-header-cell">D</div>
<div class="game-board-header-cell">E</div>
<div class="game-board-header-cell">F</div>
<div class="game-board-header-cell">G</div>
<div class="game-board-header-cell">H</div>
<div class="game-board-header-cell">I</div>
<div class="game-board-header-cell">J</div>
<div class="game-board-header-cell">K</div>
<div class="game-board-header-cell">L</div>
<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-cell"></div>
</div>
<div class="game-board-row" id="row-1">
<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>
<div class="game-board-cell" id="col-c"></div>
<div class="game-board-cell" id="col-d"></div>
<div class="game-board-cell" id="col-e"></div>
<div class="game-board-cell" id="col-f"></div>
<div class="game-board-cell" id="col-g"></div>
<div class="game-board-cell" id="col-h"></div>
<div class="game-board-cell" id="col-i"></div>
<div class="game-board-cell" id="col-j"></div>
<div class="game-board-cell" id="col-k"></div>
<div class="game-board-cell" id="col-l"></div>
<div class="game-board-cell" id="col-m"></div>
<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>
<div class="game-board-row" id="row-2">
<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>
<div class="game-board-cell" id="col-c"></div>
<div class="game-board-cell" id="col-d"></div>
<div class="game-board-cell" id="col-e"></div>
<div class="game-board-cell" id="col-f"></div>
<div class="game-board-cell" id="col-g"></div>
<div class="game-board-cell" id="col-h"></div>
<div class="game-board-cell" id="col-i"></div>
<div class="game-board-cell" id="col-j"></div>
<div class="game-board-cell" id="col-k"></div>
<div class="game-board-cell" id="col-l"></div>
<div class="game-board-cell" id="col-m"></div>
<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>
<div class="game-board-row" id="row-3">
<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>
<div class="game-board-cell" id="col-c"></div>
<div class="game-board-cell" id="col-d"></div>
<div class="game-board-cell" id="col-e"></div>
<div class="game-board-cell" id="col-f"></div>
<div class="game-board-cell" id="col-g"></div>
<div class="game-board-cell" id="col-h"></div>
<div class="game-board-cell" id="col-i"></div>
<div class="game-board-cell" id="col-j"></div>
<div class="game-board-cell" id="col-k"></div>
<div class="game-board-cell" id="col-l"></div>
<div class="game-board-cell" id="col-m"></div>
<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>
<div class="game-board-row" id="row-4">
<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>
<div class="game-board-cell" id="col-c"></div>
<div class="game-board-cell" id="col-d"></div>
<div class="game-board-cell" id="col-e"></div>
<div class="game-board-cell" id="col-f"></div>
<div class="game-board-cell" id="col-g"></div>
<div class="game-board-cell" id="col-h"></div>
<div class="game-board-cell" id="col-i"></div>
<div class="game-board-cell" id="col-j"></div>
<div class="game-board-cell" id="col-k"></div>
<div class="game-board-cell" id="col-l"></div>
<div class="game-board-cell" id="col-m"></div>
<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>
<div class="game-board-row" id="row-5">
<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>
<div class="game-board-cell" id="col-c"></div>
<div class="game-board-cell" id="col-d"></div>
<div class="game-board-cell" id="col-e"></div>
<div class="game-board-cell" id="col-f"></div>
<div class="game-board-cell" id="col-g"></div>
<div class="game-board-cell" id="col-h"></div>
<div class="game-board-cell" id="col-i"></div>
<div class="game-board-cell" id="col-j"></div>
<div class="game-board-cell" id="col-k"></div>
<div class="game-board-cell" id="col-l"></div>
<div class="game-board-cell" id="col-m"></div>
<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>
<div class="game-board-row" id="row-6">
<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>
<div class="game-board-cell" id="col-c"></div>
<div class="game-board-cell" id="col-d"></div>
<div class="game-board-cell" id="col-e"></div>
<div class="game-board-cell" id="col-f"></div>
<div class="game-board-cell" id="col-g"></div>
<div class="game-board-cell" id="col-h"></div>
<div class="game-board-cell" id="col-i"></div>
<div class="game-board-cell" id="col-j"></div>
<div class="game-board-cell" id="col-k"></div>
<div class="game-board-cell" id="col-l"></div>
<div class="game-board-cell" id="col-m"></div>
<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>
<div class="game-board-row" id="row-7">
<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>
<div class="game-board-cell" id="col-c"></div>
<div class="game-board-cell" id="col-d"></div>
<div class="game-board-cell" id="col-e"></div>
<div class="game-board-cell" id="col-f"></div>
<div class="game-board-cell" id="col-g"></div>
<div class="game-board-cell" id="col-h"></div>
<div class="game-board-cell" id="col-i"></div>
<div class="game-board-cell" id="col-j"></div>
<div class="game-board-cell" id="col-k"></div>
<div class="game-board-cell" id="col-l"></div>
<div class="game-board-cell" id="col-m"></div>
<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>
<div class="game-board-row" id="row-8">
<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>
<div class="game-board-cell" id="col-c"></div>
<div class="game-board-cell" id="col-d"></div>
<div class="game-board-cell" id="col-e"></div>
<div class="game-board-cell" id="col-f"></div>
<div class="game-board-cell" id="col-g"></div>
<div class="game-board-cell" id="col-h"></div>
<div class="game-board-cell" id="col-i"></div>
<div class="game-board-cell" id="col-j"></div>
<div class="game-board-cell" id="col-k"></div>
<div class="game-board-cell" id="col-l"></div>
<div class="game-board-cell" id="col-m"></div>
<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>
<div class="game-board-row" id="row-9">
<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>
<div class="game-board-cell" id="col-c"></div>
<div class="game-board-cell" id="col-d"></div>
<div class="game-board-cell" id="col-e"></div>
<div class="game-board-cell" id="col-f"></div>
<div class="game-board-cell" id="col-g"></div>
<div class="game-board-cell" id="col-h"></div>
<div class="game-board-cell" id="col-i"></div>
<div class="game-board-cell" id="col-j"></div>
<div class="game-board-cell" id="col-k"></div>
<div class="game-board-cell" id="col-l"></div>
<div class="game-board-cell" id="col-m"></div>
<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>
<div class="game-board-row" id="row-10">
<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>
<div class="game-board-cell" id="col-c"></div>
<div class="game-board-cell" id="col-d"></div>
<div class="game-board-cell" id="col-e"></div>
<div class="game-board-cell" id="col-f"></div>
<div class="game-board-cell" id="col-g"></div>
<div class="game-board-cell" id="col-h"></div>
<div class="game-board-cell" id="col-i"></div>
<div class="game-board-cell" id="col-j"></div>
<div class="game-board-cell" id="col-k"></div>
<div class="game-board-cell" id="col-l"></div>
<div class="game-board-cell" id="col-m"></div>
<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>
<div class="game-board-row" id="row-11">
<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>
<div class="game-board-cell" id="col-c"></div>
<div class="game-board-cell" id="col-d"></div>
<div class="game-board-cell" id="col-e"></div>
<div class="game-board-cell" id="col-f"></div>
<div class="game-board-cell" id="col-g"></div>
<div class="game-board-cell" id="col-h"></div>
<div class="game-board-cell" id="col-i"></div>
<div class="game-board-cell" id="col-j"></div>
<div class="game-board-cell" id="col-k"></div>
<div class="game-board-cell" id="col-l"></div>
<div class="game-board-cell" id="col-m"></div>
<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>
<div class="game-board-row" id="row-12">
<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>
<div class="game-board-cell" id="col-c"></div>
<div class="game-board-cell" id="col-d"></div>
<div class="game-board-cell" id="col-e"></div>
<div class="game-board-cell" id="col-f"></div>
<div class="game-board-cell" id="col-g"></div>
<div class="game-board-cell" id="col-h"></div>
<div class="game-board-cell" id="col-i"></div>
<div class="game-board-cell" id="col-j"></div>
<div class="game-board-cell" id="col-k"></div>
<div class="game-board-cell" id="col-l"></div>
<div class="game-board-cell" id="col-m"></div>
<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>
<div class="game-board-row" id="row-13">
<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>
<div class="game-board-cell" id="col-c"></div>
<div class="game-board-cell" id="col-d"></div>
<div class="game-board-cell" id="col-e"></div>
<div class="game-board-cell" id="col-f"></div>
<div class="game-board-cell" id="col-g"></div>
<div class="game-board-cell" id="col-h"></div>
<div class="game-board-cell" id="col-i"></div>
<div class="game-board-cell" id="col-j"></div>
<div class="game-board-cell" id="col-k"></div>
<div class="game-board-cell" id="col-l"></div>
<div class="game-board-cell" id="col-m"></div>
<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>
<div class="game-board-row" id="row-14">
<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>
<div class="game-board-cell" id="col-c"></div>
<div class="game-board-cell" id="col-d"></div>
<div class="game-board-cell" id="col-e"></div>
<div class="game-board-cell" id="col-f"></div>
<div class="game-board-cell" id="col-g"></div>
<div class="game-board-cell" id="col-h"></div>
<div class="game-board-cell" id="col-i"></div>
<div class="game-board-cell" id="col-j"></div>
<div class="game-board-cell" id="col-k"></div>
<div class="game-board-cell" id="col-l"></div>
<div class="game-board-cell" id="col-m"></div>
<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>
<div class="game-board-row" id="row-15">
<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>
<div class="game-board-cell" id="col-c"></div>
<div class="game-board-cell" id="col-d"></div>
<div class="game-board-cell" id="col-e"></div>
<div class="game-board-cell" id="col-f"></div>
<div class="game-board-cell" id="col-g"></div>
<div class="game-board-cell" id="col-h"></div>
<div class="game-board-cell" id="col-i"></div>
<div class="game-board-cell" id="col-j"></div>
<div class="game-board-cell" id="col-k"></div>
<div class="game-board-cell" id="col-l"></div>
<div class="game-board-cell" id="col-m"></div>
<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>
<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>
<div class="game-board-header-cell">D</div>
<div class="game-board-header-cell">E</div>
<div class="game-board-header-cell">F</div>
<div class="game-board-header-cell">G</div>
<div class="game-board-header-cell">H</div>
<div class="game-board-header-cell">I</div>
<div class="game-board-header-cell">J</div>
<div class="game-board-header-cell">K</div>
<div class="game-board-header-cell">L</div>
<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-cell"></div>
</div>
</div>
<p><p><p>
<piece class="unselectable">A<score>4</score></piece>
<piece class="unselectable">A<score>4</score></piece>
<piece class="unselectable">A<score>4</score></piece>
<piece class="unselectable">A<score>4</score></piece>
<piece class="unselectable">A<score>4</score></piece>
<piece class="unselectable">A<score>4</score></piece>
<piece class="unselectable">A<score>4</score></piece>
</div>
<script src="dragable.js"></script>
<script src="board.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink