benkyd/scrabble-online
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
489c9ed3c999892faaa381f607ccbf209e22fbdf
scrabble-online/client/game.html
Ben Kyd 489c9ed3c9 styling
2021-03-20 21:54:24 +00:00

418 lines
20 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>
<div class="game-board-col-header 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 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-cell tripple-word" id="col-a">TW</div>
<div class="game-board-cell double-word" id="col-b">DW</div>
<div class="game-board-cell tripple-letter" id="col-c">TL</div>
<div class="game-board-cell double-letter" id="col-d">DL</div>
<div class="game-board-cell center-star" 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 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-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 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-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 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-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 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-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 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-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 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-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 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-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 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-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 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-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 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-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 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-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 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-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 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-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 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-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 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-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 game-board-col-header-cell"></div>
</div>
</div>
<p><p><p>
<div id="game-inventory-table">
<div class="game-inventory-cell">
<piece class="a" id="n1">A</piece>
</div>
<div class="game-inventory-cell">
<piece class="a" id="n2">A</piece>
</div>
<div class="game-inventory-cell">
<piece class="a" id="n3">A</piece>
</div>
<div class="game-inventory-cell">
<piece class="a" id="n4">A</piece>
</div>
<div class="game-inventory-cell">
<piece class="a" id="n5">A</piece>
</div>
<div class="game-inventory-cell">
<piece class="a" id="n6">A</piece>
</div>
<div class="game-inventory-cell">
<piece class="a" id="n7">A</piece>
</div>
</div>
</div>
<script src="dragable.js"></script>
<script src="board.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink