Began implementing the frontend

author: Julien Dessaux 2022-09-29 23:55:14 +0200
committer: Julien Dessaux 2022-09-29 23:55:14 +0200
commit: e541eac94632390bef7deb168f699f35d6faac2e (patch)
tree: 40b918988dbd67a515f528210f8aba4882766b63
parent: Initial import (diff)
download: jeux-de-mots-e541eac94632390bef7deb168f699f35d6faac2e.tar.gz
jeux-de-mots-e541eac94632390bef7deb168f699f35d6faac2e.tar.bz2
jeux-de-mots-e541eac94632390bef7deb168f699f35d6faac2e.zip
3 files changed, 275 insertions, 0 deletions
diff --git a/index.css b/index.css
new file mode 100644
index 0000000..84fab2f
--- /dev/null
+++ b/index.css
@@ -0,0 +1,88 @@
+* {
+	box-sizing: border-box;
+	scrollbar-gutter: stable both-edges;
+}
+
+aside {
+	float: right;
+}
+
+body {
+	background: #126623;
+	display: grid;
+	grid-template-rows: auto 1fr auto;
+	font-family: -apple-system, BlinkMacSystemFont,
+	"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
+	"Fira Sans", "Droid Sans", "Helvetica Neue",
+	sans-serif;
+	font-feature-settings: "kern" 1;
+	font-kerning: normal;
+}
+
+button {
+	box-shadow: rgb(202, 239, 171) 0px 1px 0px 0px inset;
+	border-radius: 3px;
+	border: 1px solid rgb(38, 138, 22);
+	cursor: pointer;
+	font-weight: bold;
+	max-height: 3em;
+	padding: 6px;
+	background: linear-gradient(rgb(92, 184, 17) 5%, rgb(119, 212, 42) 100%) rgb(92, 184, 17);
+}
+
+button:disabled, button[disabled] {
+	cursor: auto;
+}
+
+main {
+	margin-left: auto;
+	margin-right: auto;
+}
+
+td {
+	background: #47b75e;
+	border: 1px solid #d4fcdb;
+	min-width: 27px;
+	height: 27px;
+	text-align: center;
+}
+
+#board {
+	border-collapse: collapse;
+	font-weight: bold;
+	max-width: 405px;
+}
+
+#rack {
+	display:inline-block;
+}
+
+#letters_left {
+	max-width: 405px;
+}
+
+.tw {
+	background:#E60000;
+}
+.dw {
+	background:#F86969;
+}
+.tl {
+	background:#3675FA;
+}
+.dl {
+	background:#22ACD8;
+}
+.start {
+	background:#ff5500;
+}
+
+.selected {
+	background:orange;
+}
+
+.points {
+	display: inline;
+	font-weight: normal;
+	font-size: 8pt;
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..37f8281
--- /dev/null
+++ b/index.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Jeu de mots</title>
+		<meta charset="UTF-8">
+		<link rel="stylesheet" type="text/css" href="index.css" media="all">
+	</head>
+	<body>
+		<noscript>You need to enable JavaScript to run this app.</noscript>
+		<main>
+			<h1>Jeu de mots</h1>
+			<table id="board">
+				<tr><td id="s0_0" class="tw" title="triple word"><td id="s0_1"><td id="s0_2"><td id="s0_3" class="dl" title="double letter"><td id="s0_4"><td id="s0_5"><td id="s0_6"><td id="s0_7" class="tw" title="triple word"><td id="s0_8"><td id="s0_9"><td id="s0_10"><td id="s0_11" class="dl" title="double letter"><td id="s0_12"><td id="s0_13"><td id="s0_14" class="tw" title="triple word"></tr>
+				<tr><td id="s1_0"><td id="s1_1" class="dw" title="double word"><td id="s1_2"><td id="s1_3"><td id="s1_4"><td id="s1_5" class="tl" title="triple letter"><td id="s1_6"><td id="s1_7"><td id="s1_8"><td id="s1_9" class="tl" title="triple letter"><td id="s1_10"><td id="s1_11"><td id="s1_12"><td id="s1_13" class="dw" title="double word"><td id="s1_14"></tr>
+				<tr><td id="s2_0"><td id="s2_1"><td id="s2_2" class="dw" title="double word"><td id="s2_3"><td id="s2_4"><td id="s2_5"><td id="s2_6" class="dl" title="double letter"><td id="s2_7"><td id="s2_8" class="dl" title="double letter"><td id="s2_9"><td id="s2_10"><td id="s2_11"><td id="s2_12" class="dw" title="double word"><td id="s2_13"><td id="s2_14"></tr>
+				<tr><td id="s3_0" class="dl" title="double letter"><td id="s3_1"><td id="s3_2"><td id="s3_3" class="dw" title="double word"><td id="s3_4"><td id="s3_5"><td id="s3_6"><td id="s3_7" class="dl" title="double letter"><td id="s3_8"><td id="s3_9"><td id="s3_10"><td id="s3_11" class="dw" title="double word"><td id="s3_12"><td id="s3_13"><td id="s3_14" class="dl" title="double letter"></tr>
+				<tr><td id="s4_0"><td id="s4_1"><td id="s4_2"><td id="s4_3"><td id="s4_4" class="dw" title="double word"><td id="s4_5"><td id="s4_6"><td id="s4_7"><td id="s4_8"><td id="s4_9"><td id="s4_10" class="dw" title="double word"><td id="s4_11"><td id="s4_12"><td id="s4_13"><td id="s4_14"></tr>
+				<tr><td id="s5_0"><td id="s5_1" class="tl" title="triple letter"><td id="s5_2"><td id="s5_3"><td id="s5_4"><td id="s5_5" class="tl" title="triple letter"><td id="s5_6"><td id="s5_7"><td id="s5_8"><td id="s5_9" class="tl" title="triple letter"><td id="s5_10"><td id="s5_11"><td id="s5_12"><td id="s5_13" class="tl" title="triple letter"><td id="s5_14"></tr>
+				<tr><td id="s6_0"><td id="s6_1"><td id="s6_2" class="dl" title="double letter"><td id="s6_3"><td id="s6_4"><td id="s6_5"><td id="s6_6" class="dl" title="double letter"><td id="s6_7"><td id="s6_8" class="dl" title="double letter"><td id="s6_9"><td id="s6_10"><td id="s6_11"><td id="s6_12" class="dl" title="double letter"><td id="s6_13"><td id="s6_14"></tr>
+				<tr><td id="s7_0" class="tw" title="triple word"><td id="s7_1"><td id="s7_2"><td id="s7_3" class="dl" title="double letter"><td id="s7_4"><td id="s7_5"><td id="s7_6"><td id="s7_7" class="start dw" title="start double word"><td id="s7_8"><td id="s7_9"><td id="s7_10"><td id="s7_11" class="dl" title="double letter"><td id="s7_12"><td id="s7_13"><td id="s7_14" class="tw" title="triple word"></tr>
+				<tr><td id="s8_0"><td id="s8_1"><td id="s8_2" class="dl" title="double letter"><td id="s8_3"><td id="s8_4"><td id="s8_5"><td id="s8_6" class="dl" title="double letter"><td id="s8_7"><td id="s8_8" class="dl" title="double letter"><td id="s8_9"><td id="s8_10"><td id="s8_11"><td id="s8_12" class="dl" title="double letter"><td id="s8_13"><td id="s8_14"></tr>
+				<tr><td id="s9_0"><td id="s9_1" class="tl" title="triple letter"><td id="s9_2"><td id="s9_3"><td id="s9_4"><td id="s9_5" class="tl" title="triple letter"><td id="s9_6"><td id="s9_7"><td id="s9_8"><td id="s9_9" class="tl" title="triple letter"><td id="s9_10"><td id="s9_11"><td id="s9_12"><td id="s9_13" class="tl" title="triple letter"><td id="s9_14"></tr>
+				<tr><td id="s10_0"><td id="s10_1"><td id="s10_2"><td id="s10_3"><td id="s10_4" class="dw" title="double word"><td id="s10_5"><td id="s10_6"><td id="s10_7"><td id="s10_8"><td id="s10_9"><td id="s10_10" class="dw" title="double word"><td id="s10_11"><td id="s10_12"><td id="s10_13"><td id="s10_14"></tr>
+				<tr><td id="s11_0" class="dl" title="double letter"><td id="s11_1"><td id="s11_2"><td id="s11_3" class="dw" title="double word"><td id="s11_4"><td id="s11_5"><td id="s11_6"><td id="s11_7" class="dl" title="double letter"><td id="s11_8"><td id="s11_9"><td id="s11_10"><td id="s11_11" class="dw" title="double word"><td id="s11_12"><td id="s11_13"><td id="s11_14" class="dl" title="double letter"></tr>
+				<tr><td id="s12_0"><td id="s12_1"><td id="s12_2" class="dw" title="double word"><td id="s12_3"><td id="s12_4"><td id="s12_5"><td id="s12_6" class="dl" title="double letter"><td id="s12_7"><td id="s12_8" class="dl" title="double letter"><td id="s12_9"><td id="s12_10"><td id="s12_11"><td id="s12_12" class="dw" title="double word"><td id="s12_13"><td id="s12_14"></tr>
+				<tr><td id="s13_0"><td id="s13_1" class="dw" title="double word"><td id="s13_2"><td id="s13_3"><td id="s13_4"><td id="s13_5" class="tl" title="triple letter"><td id="s13_6"><td id="s13_7"><td id="s13_8"><td id="s13_9" class="tl" title="triple letter"><td id="s13_10"><td id="s13_11"><td id="s13_12"><td id="s13_13" class="dw" title="double word"><td id="s13_14"></tr>
+				<tr><td id="s14_0" class="tw" title="triple word"><td id="s14_1"><td id="s14_2"><td id="s14_3" class="dl" title="double letter"><td id="s14_4"><td id="s14_5"><td id="s14_6"><td id="s14_7" class="tw" title="triple word"><td id="s14_8"><td id="s14_9"><td id="s14_10"><td id="s14_11" class="dl" title="double letter"><td id="s14_12"><td id="s14_13"><td id="s14_14" class="tw" title="triple word"></tr>
+			</table>
+			<p>
+				<table id="rack">
+					<tr><td id="l0"><td id="l1"><td id="l2"><td id="l3"><td id="l4"><td id="l5"><td id="l6"></tr>
+				</table>
+				<aside>
+					<button title="validate your move" onclick="onvalidatemoveclick()" id="validate">Validate</button>
+					<button onclick="onSelectSwapTilesClicked()" id="pass">Pass</button>
+				</aside>
+			</p>
+			<p>
+				<span id="player_1_name">player one name</span>: <span class="player_name" id="player_1_score">0</span><br>
+				<span id="player_2_name">player two name</span>: <span class="player_name" id="player_2_score">0</span>
+			</p>
+			<p id="letters_left"></p>
+		</main>
+	</body>
+	<script>
+		var CWDATA = {
+			board: [
+				[ "T", "E", "S", "T", "","", "", "", "", "","", "", "", "", "" ],
+				[ "", "", "", "", "","", "", "", "", "","", "", "", "", "" ],
+				[ "", "", "", "", "","", "", "", "", "","", "", "", "", "" ],
+				[ "", "", "", "", "","", "", "", "", "","", "", "", "", "" ],
+				[ "", "", "", "", "","", "", "", "", "","", "", "", "", "" ],
+				[ "", "", "", "", "","", "", "", "", "","", "", "", "", "" ],
+				[ "", "", "", "", "","", "", "", "", "","", "", "", "", "" ],
+				[ "", "", "", "", "","", "", "", "", "","", "", "", "", "" ],
+				[ "", "", "", "", "","", "", "", "", "","", "", "", "", "" ],
+				[ "", "", "", "", "","", "", "", "", "","", "", "", "", "" ],
+				[ "", "", "", "", "","", "", "", "", "","", "", "", "", "" ],
+				[ "", "", "", "", "","", "", "", "", "","", "", "", "", "" ],
+				[ "", "", "", "", "","", "", "", "", "","", "", "", "", "" ],
+				[ "", "", "", "", "","", "", "", "", "","", "", "", "", "" ],
+				[ "", "", "", "", "","", "", "", "", "","", "", "", "", "" ]
+			],
+			letters: [ "A", "B", "C", "D", "E", "F", "G" ]
+		};
+	</script>
+	<script type="module" src="index.js"></script>
+</html>
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..d40bb0d
--- /dev/null
+++ b/index.js
@@ -0,0 +1,119 @@
+var CW = function(){
+	//   0 point : blanches × 2.
+	//   1 point : E ×15, A ×9, I ×8, N ×6, O ×6, R ×6, S ×6, T ×6, U ×6, L ×5
+	//   2 points : D ×3, G ×2, M ×3
+	//   3 points : B ×2, C ×2, P ×2
+	//   4 points : F ×2, H ×2, V ×2
+	//   8 points : J ×1, Q ×1
+	//   10 points : K ×1, W ×1, X ×1, Y ×1, Z ×1
+	var letters = [
+		" ", " ",
+		"E", "E", "E", "E", "E", "E", "E", "E", "E", "E", "E", "E", "E", "E", "E",
+		"A", "A", "A", "A", "A", "A", "A", "A", "A",
+		"I", "I", "I", "I", "I", "I", "I", "I",
+		"N", "N", "N", "N", "N", "N",
+		"O", "O", "O", "O", "O", "O",
+		"R", "R", "R", "R", "R", "R",
+		"S", "S", "S", "S", "S", "S",
+		"T", "T", "T", "T", "T", "T",
+		"U", "U", "U", "U", "U", "U",
+		"L", "L", "L", "L", "L",
+		"D", "D", "D",
+		"M", "M", "M",
+		"G", "G",
+		"B", "B",
+		"C", "C",
+		"P", "P",
+		"F", "F",
+		"H", "H",
+		"V", "V",
+		"J", "Q", "K", "W", "X", "Y", "Z"
+	]
+	const points = {
+		' ': 0,
+		E:1, A:1, I:1, N:1, O:1, R:1, S:1, T:1, U:1, L:1,
+		D:2, G:2, M:2,
+		B:3, C:3, P:3,
+		F:4, H:4, V:4,
+		J:8, Q:8,
+		K:10, W:10, X:10, Y:10, Z:10
+	};
+	var cursor = undefined;
+	var selected = undefined;
+
+	return {
+		init: function() {
+			var elt = undefined;
+			var idx = undefined;
+			var letter;
+			var x = 0;
+			var y = 0;
+			// populate the board
+			for (y=0; y<CWDATA.board.length; y++) {
+				const line = CWDATA.board[y];
+				for(x=0; x<line.length; x++) {
+					letter = line[x];
+					elt = document.getElementById(['s', y, '_', x].join(''));
+					if (letter !== "") {
+						elt.innerHTML = [letter, '<div class="points">', points[letter], '</div>'].join('');
+						// we also remove the letter from the pool
+						idx = letters.findIndex(function(elt) { return elt === letter; });
+						if (idx != -1) {
+							letters.splice(idx, 1);
+						}
+					}
+				}
+			}
+			// populate the rack
+			for (x=0; x<CWDATA.letters.length; x++) {
+				letter = CWDATA.letters[x];
+				elt = document.getElementById(['l', x].join(''));
+				elt.innerHTML = [letter, '<div class="points">', points[letter], '</div>'].join('');
+				// we also remove the letter from the pool
+				idx = letters.findIndex(function(elt) { return elt === letter; });
+				if (idx != -1) {
+					letters.splice(idx, 1);
+				}
+			}
+			// initialize buttons
+			document.getElementById('validate').disabled = true;
+			// populate remaining letters
+			var letters_left = [ "Lettres restantes: ", letters.length, "<br>" ];
+			var prev = undefined;
+			y = 1;
+			for (x=0; x<letters.length; x++) {
+				letter = letters[x];
+				if (prev === undefined) {
+					prev = letter;
+				}
+				if (prev === letter) {
+					y++;
+				} else {
+					if (prev === " ") {
+						prev = "JOKER";
+					}
+					if (y > 1) {
+						letters_left = letters_left.concat(prev, 'x', y, ', ');
+					} else {
+						letters_left = letters_left.concat(prev, ', ');
+					}
+					prev = letter;
+					y = 1;
+				}
+			}
+			if (prev !== undefined) {
+				if (prev === " ") {
+					prev = "blanc";
+				}
+				if (y > 1) {
+					letters_left = letters_left.concat(prev, 'x', y, '.');
+				} else {
+					letters_left = letters_left.concat(prev, '.');
+				}
+			}
+			document.getElementById('letters_left').innerHTML = letters_left.join('');
+		}
+	};
+}();
+
+CW.init();
author	Julien Dessaux	2022-09-29 23:55:14 +0200
committer	Julien Dessaux	2022-09-29 23:55:14 +0200
commit	e541eac94632390bef7deb168f699f35d6faac2e (patch)
tree	40b918988dbd67a515f528210f8aba4882766b63
parent	Initial import (diff)
download	jeux-de-mots-e541eac94632390bef7deb168f699f35d6faac2e.tar.gz jeux-de-mots-e541eac94632390bef7deb168f699f35d6faac2e.tar.bz2 jeux-de-mots-e541eac94632390bef7deb168f699f35d6faac2e.zip