diff --git a/client/board.js b/client/board.js new file mode 100644 index 0000000..e6e5b11 --- /dev/null +++ b/client/board.js @@ -0,0 +1,18 @@ +// traverse HTML and fill in table + +const BoardLookup = { + '3LS': 'x3 Letter Score', + '2LS': 'x2 Letter Score', + '3WS': 'x3 Word Score', + '2WS': 'x2 Word Scre', + '★': 'x2 Word Score' +}; + +const BoardLocations = { + 'A1': '2WS' + + +}; + + + diff --git a/client/dragable.js b/client/dragable.js new file mode 100644 index 0000000..35b048f --- /dev/null +++ b/client/dragable.js @@ -0,0 +1,29 @@ +// I decided not to use the drag and drop API +// purely because its very ugly + +document.querySelector('#game-container').addEventListener('mousemove', mouseMove); +document.querySelector('#game-container').addEventListener('mouseup', mouseUp); + +document.querySelectorAll('piece').forEach(element => { + element.addEventListener('mousedown', e => mouseDown(e, element)); +}); + +function mouseDown(event, element = 'none') +{ + event.preventDefault(); + + console.log(element, event); +} + +function mouseMove(event, element = 'none') +{ + event.preventDefault(); + +} + +function mouseUp(event, element = 'none') +{ + event.preventDefault(); + + console.log(element, event); +} diff --git a/client/game.css b/client/game.css index dfcba50..63dd82e 100644 --- a/client/game.css +++ b/client/game.css @@ -1,28 +1,68 @@ +#game-container { + border: 1px dotted black; + padding-bottom: 20%; +} + +#game-inventory-table { + display: table; + + max-width: 70%; + + text-align: center; + font-size: 3.2vw; +} + +.game-inventory-cell { + display: table-cell; +} + +piece { + cursor: move; + border: 1px solid black; + background-color: blanchedalmond; + width: 100%; + height: 0; + padding-bottom: 5%; +} + #game-board { display: table; - text-align: center; - font-size: 10px; + table-layout: fixed; - width: 50%; + position: static; + width: 100%; + height: 100%; + + max-height: 70%; + max-width: 70%; + + text-align: center; + font-size: 3.2vw; /* roughly 15 / table width */ } .game-board-header { display: table-row-group; - background-color: gray; } .game-board-header-cell { display: table-cell; + + width: 100%; + height: 0; + padding-bottom: 1%; } .game-board-col-header { display: table-column-group; - background-color: gray; } .game-board-col-header-cell { display: table-cell; + + width: 100%; + height: 0; + padding-bottom: 1%; } .game-board-row { @@ -31,21 +71,31 @@ .game-board-cell { display: table-cell; - /* width: 5%; */ + + width: 100%; + height: 0; + padding-bottom: 1%; + + font-size: 2vw; /* roughly 15 / table width */ + background: radial-gradient(circle, rgba(255,255,255,1) 38%, rgba(244,244,244,1) 94%); } .double-word { - + background: radial-gradient(circle, rgba(255,180,243,1) 32%, rgba(255,159,245,1) 84%); } .tripple-word { - + background: radial-gradient(circle, rgba(249,129,117,1) 32%, rgba(252,101,101,1) 84%); } .tripple-letter { - + background: radial-gradient(circle, rgba(185,180,255,1) 32%, rgba(180,159,255,1) 84%); } .double-letter { - + background: radial-gradient(circle, rgba(170,230,255,1) 32%, rgba(159,204,255,1) 84%); +} + +.center-star { + background: lightsalmon; } diff --git a/client/game.html b/client/game.html index b090b11..63a3126 100644 --- a/client/game.html +++ b/client/game.html @@ -6,6 +6,7 @@ + Scrabble! @@ -19,6 +20,8 @@ --> +
+
@@ -45,315 +48,315 @@
1
-
1a
-
1b
-
1c
-
1d
-
1e
-
1f
-
1g
-
1h
-
1i
-
1j
-
1k
-
1l
-
1m
-
1n
-
1o
+
TW
+
DW
+
TL
+
DL
+
★
+
+
+
+
+
+
+
+
+
+
1
2
-
2a
-
2b
-
2c
-
2d
-
2e
-
2f
-
2g
-
2h
-
2i
-
2j
-
2k
-
2l
-
2m
-
2n
-
2o
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
2
3
-
3a
-
3b
-
3c
-
3d
-
3e
-
3f
-
3g
-
3h
-
3i
-
3j
-
3k
-
3l
-
3m
-
3n
-
3o
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
3
4
-
4a
-
4b
-
4c
-
4d
-
4e
-
4f
-
4g
-
4h
-
4i
-
4j
-
4k
-
4l
-
4m
-
4n
-
4o
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
4
5
-
5a
-
5b
-
5c
-
5d
-
5e
-
5f
-
5g
-
5h
-
5i
-
5j
-
5k
-
5l
-
5m
-
5n
-
5o
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
5
6
-
6a
-
6b
-
6c
-
6d
-
6e
-
6f
-
6g
-
6h
-
6i
-
6j
-
6k
-
6l
-
6m
-
6n
-
6o
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
6
7
-
7a
-
7b
-
7c
-
7d
-
7e
-
7f
-
7g
-
7h
-
7i
-
7j
-
7k
-
7l
-
7m
-
7n
-
7o
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
7
8
- -
8a
-
8b
-
8c
-
8d
-
8e
-
8f
-
8g
-
8h
-
8i
-
8j
-
8k
-
8l
-
8m
-
8n
-
8o
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
8
9
-
9a
-
9b
-
9c
-
9d
-
9e
-
9f
-
9g
-
9h
-
9i
-
9j
-
9k
-
9l
-
9m
-
9n
-
9o
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
9
10
-
10a
-
10b
-
10c
-
10d
-
10e
-
10f
-
10g
-
10h
-
10i
-
10j
-
10k
-
10l
-
10m
-
10n
-
10o
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
10
11
-
11a
-
11b
-
11c
-
11d
-
11e
-
11f
-
11g
-
11h
-
11i
-
11j
-
11k
-
11l
-
11m
-
11n
-
11o
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
11
12
-
12a
-
12b
-
12c
-
12d
-
12e
-
12f
-
12g
-
12h
-
12i
-
12j
-
12k
-
12l
-
12m
-
12n
-
12o
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
12
13
-
13a
-
13b
-
13c
-
13d
-
13e
-
13f
-
13g
-
13h
-
13i
-
13j
-
13k
-
13l
-
13m
-
13n
-
13o
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
13
14
-
14a
-
14b
-
14c
-
14d
-
14e
-
14f
-
14g
-
14h
-
14i
-
14j
-
14k
-
14l
-
14m
-
14n
-
14o
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
14
15
-
15a
-
15b
-
15c
-
15d
-
15e
-
15f
-
15g
-
15h
-
15i
-
15j
-
15k
-
15l
-
15m
-
15n
-
15o
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
15
@@ -380,5 +383,36 @@
+

+ +

+
+ A +
+
+ A +
+
+ A +
+
+ A +
+
+ A +
+
+ A +
+
+ A +
+
+ +
+ + + + \ No newline at end of file diff --git a/client/public/main.css b/client/public/main.css index cd6dbbc..1a31d0b 100644 --- a/client/public/main.css +++ b/client/public/main.css @@ -8,3 +8,12 @@ body { .red { color: red; } + +.unselectable { + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +}