Added favicon, split view in multiple parts

7 files changed, 182 insertions, 73 deletions

diff --git a/main.js b/main.js
index b4b626b..2765c83 100644
--- a/main.js
+++ b/main.js
@@ -1,36 +1,14 @@
 import express from "express";
 
-export const app = express();
+import playRouter from "./routes/play.js";
+
+const app = express();
 
 app.set("views", "./views");
 app.set("view engine", "ejs");
 
-let CWDATA = {
-	board: [
-		[ "", "", "", "", "","", "", "", "", "","", "", "", "", "" ],
-		[ "", "", "", "", "","", "", "", "", "","", "", "", "", "" ],
-		[ "", "", "", "", "","", "", "", "", "","", "", "", "", "" ],
-		[ "", "", "", "", "","", "", "", "", "","", "", "", "", "" ],
-		[ "", "", "", "", "","", "", "", "", "","", "", "", "", "" ],
-		[ "", "", "", "", "","", "", "", "", "","", "", "", "", "" ],
-		[ "", "", "", "", "","", "", "", "", "","", "", "", "", "" ],
-		[ "", "", "", "", "","", "", "T", "E", "S","T", "", "", "", "" ],
-		[ "", "", "", "", "","", "", "", "", "","", "", "", "", "" ],
-		[ "", "", "", "", "","", "", "", "", "","", "", "", "", "" ],
-		[ "", "", "", "", "","", "", "", "", "","", "", "", "", "" ],
-		[ "", "", "", "", "","", "", "", "", "","", "", "", "", "" ],
-		[ "", "", "", "", "","", "", "", "", "","", "", "", "", "" ],
-		[ "", "", "", "", "","", "", "", "", "","", "", "", "", "" ],
-		[ "", "", "", "", "","", "", "", "", "","", "", "", "", "" ]
-	],
-	letters: [ "A", "B", "C", "D", "E", "F", "JOKER" ]
-};
-
-app.get("/", (req, res) => {
-	return res.render("index", {CWDATA: CWDATA});
-});
-
 app.use(express.static("static"));
+app.use("/play", playRouter);
 
 const port = process.env.PORT || 3000;
 app.listen(port, () => console.log(`listening on port ${port}`));
diff --git a/routes/play.js b/routes/play.js
new file mode 100644
index 0000000..5e904c4
--- /dev/null
+++ b/routes/play.js
@@ -0,0 +1,29 @@
+import express from "express";
+
+const router = express.Router();
+
+router.get("/", (req, res) => {
+	const CWDATA = {
+		board: [
+			[ "", "", "", "", "","", "", "", "", "","", "", "", "", "" ],
+			[ "", "", "", "", "","", "", "", "", "","", "", "", "", "" ],
+			[ "", "", "", "", "","", "", "", "", "","", "", "", "", "" ],
+			[ "", "", "", "", "","", "", "", "", "","", "", "", "", "" ],
+			[ "", "", "", "", "","", "", "", "", "","", "", "", "", "" ],
+			[ "", "", "", "", "","", "", "", "", "","", "", "", "", "" ],
+			[ "", "", "", "", "","", "", "", "", "","", "", "", "", "" ],
+			[ "", "", "", "", "","", "", "T", "E", "S","T", "", "", "", "" ],
+			[ "", "", "", "", "","", "", "", "", "","", "", "", "", "" ],
+			[ "", "", "", "", "","", "", "", "", "","", "", "", "", "" ],
+			[ "", "", "", "", "","", "", "", "", "","", "", "", "", "" ],
+			[ "", "", "", "", "","", "", "", "", "","", "", "", "", "" ],
+			[ "", "", "", "", "","", "", "", "", "","", "", "", "", "" ],
+			[ "", "", "", "", "","", "", "", "", "","", "", "", "", "" ],
+			[ "", "", "", "", "","", "", "", "", "","", "", "", "", "" ]
+		],
+		letters: [ "A", "B", "C", "D", "E", "F", "JOKER" ]
+	};
+	return res.render("play", {CWDATA: CWDATA, title: "Jouer"});
+});
+
+export default router;
diff --git a/static/favicon.svg b/static/favicon.svg
new file mode 100644
index 0000000..971d573
--- /dev/null
+++ b/static/favicon.svg
@@ -0,0 +1,97 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="180"
+   height="180"
+   viewBox="0 0 180 180"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
+   sodipodi:docname="favicon.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="px"
+     showgrid="false"
+     inkscape:zoom="1.3984437"
+     inkscape:cx="93.675563"
+     inkscape:cy="74.010846"
+     inkscape:window-width="1362"
+     inkscape:window-height="717"
+     inkscape:window-x="0"
+     inkscape:window-y="49"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs2">
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient3622">
+      <stop
+         style="stop-color:#000000;stop-opacity:1;"
+         offset="0"
+         id="stop3618" />
+      <stop
+         style="stop-color:#000000;stop-opacity:0;"
+         offset="1"
+         id="stop3620" />
+    </linearGradient>
+    <rect
+       x="21.339478"
+       y="33.460999"
+       width="232.05208"
+       height="284.04139"
+       id="rect3591" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3622"
+       id="linearGradient3624"
+       x1="19.339844"
+       y1="108.185"
+       x2="103.28756"
+       y2="108.185"
+       gradientUnits="userSpaceOnUse" />
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <rect
+       style="fill:#fee797;stroke-width:8;fill-opacity:1;stroke:#000000;stroke-opacity:1;stroke-dasharray:none;stroke-linejoin:round;stroke-linecap:round"
+       id="rect113"
+       width="180"
+       height="180"
+       x="0"
+       y="0" />
+    <text
+       xml:space="preserve"
+       id="text3589"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:186.667px;font-family:monospace;-inkscape-font-specification:'monospace, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;white-space:pre;shape-inside:url(#rect3591);fill:#000000;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;fill-opacity:1"
+       transform="translate(-0.935125,-48.075078)"><tspan
+         x="21.339844"
+         y="199.55305"
+         id="tspan7040">A</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:53.3333px;font-family:monospace;-inkscape-font-specification:'monospace, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       x="138.96565"
+       y="149.52071"
+       id="text3732"><tspan
+         sodipodi:role="line"
+         id="tspan3730"
+         x="138.96565"
+         y="149.52071">1</tspan></text>
+  </g>
+</svg>
diff --git a/views/footer.ejs b/views/footer.ejs
new file mode 100644
index 0000000..a78654e
--- /dev/null
+++ b/views/footer.ejs
@@ -0,0 +1,3 @@
+		</main>
+	</body>
+</html>
diff --git a/views/header.ejs b/views/header.ejs
new file mode 100644
index 0000000..ddc0b56
--- /dev/null
+++ b/views/header.ejs
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<link rel="icon" href="/favicon.svg">
+
+		<link rel="stylesheet" type="text/css" href="index.css" media="all">
+		<title>Jeu de mots - <%- title %></title>
+	</head>
+	<body>
+		<noscript>You need to enable JavaScript to run this app.</noscript>
+		<main>
diff --git a/views/index.ejs b/views/index.ejs
deleted file mode 100644
index 4e691f7..0000000
--- a/views/index.ejs
+++ /dev/null
@@ -1,47 +0,0 @@
-<!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" disabled>0 - 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_points">0</span><br>
-				<span id="player_2_name">player two name</span>: <span class="player_name" id="player_2_points">0</span>
-			</p>
-			<p id="remaining_letters"></p>
-		</main>
-	</body>
-	<script>var CWDATA = <%- JSON.stringify(CWDATA) %>;</script>
-	<script type="module" src="index.js"></script>
-</html>
diff --git a/views/play.ejs b/views/play.ejs
new file mode 100644
index 0000000..5998e40
--- /dev/null
+++ b/views/play.ejs
@@ -0,0 +1,36 @@
+<%- include("header") %>
+<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" disabled>0 - 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_points">0</span><br>
+<span id="player_2_name">player two name</span>: <span class="player_name" id="player_2_points">0</span>
+</p>
+<p id="remaining_letters"></p>
+<script>var CWDATA = <%- JSON.stringify(CWDATA) %></script>
+<script type="module" src="index.js"></script>
+<%- include("footer") %>