Merge pull request #62 from dxw/render-colour-checkboxes

Render colour checkboxes
dxw · Feb 20, 2024 · d324101 · d324101
2 parents b17f4d9 + 455a8e9
commit d324101
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 2 deletions.
diff --git a/client/index.html b/client/index.html
@@ -33,6 +33,61 @@ <h2>Players</h2>
       <p id="number"></p>
     </section>
 
+    <section id="colour-section"></section>
+
+    <template id="checkbox-template">
+      <form id="checkbox-form">
+        <fieldset>
+          <legend>Choose your colour:</legend>
+          <div>
+            <input type="checkbox" id="black" />
+            <label for="black">black</label>
+          </div>
+          <div>
+            <input type="checkbox" id="blue" />
+            <label for="blue">blue</label>
+          </div>
+          <div>
+            <input type="checkbox" id="brown" />
+            <label for="brown">brown</label>
+          </div>
+          <div>
+            <input type="checkbox" id="green" />
+            <label for="green">green</label>
+          </div>
+          <div>
+            <input type="checkbox" id="grey" />
+            <label for="grey">grey</label>
+          </div>
+          <div>
+            <input type="checkbox" id="orange" />
+            <label for="orange">orange</label>
+          </div>
+          <div>
+            <input type="checkbox" id="pink" />
+            <label for="pink">pink</label>
+          </div>
+          <div>
+            <input type="checkbox" id="purple" />
+            <label for="purple">purple</label>
+          </div>
+          <div>
+            <input type="checkbox" id="red" />
+            <label for="red">red</label>
+          </div>
+          <div>
+            <input type="checkbox" id="white" />
+            <label for="white">white</label>
+          </div>
+          <div>
+            <input type="checkbox" id="yellow" />
+            <labelfor="yellow">yellow</label>
+          </div>
+        </fieldset>
+        <button type="submit">Submit</button>
+      </form>
+    </template>
+
     <script
       src="https://cdn.socket.io/4.1.2/socket.io.min.js"
       crossorigin="anonymous"

diff --git a/client/index.ts b/client/index.ts
@@ -32,6 +32,13 @@ const askAQuestion = (data: Question): void => {
 	numberHtml.innerText = number.toString();
 };
 
+const renderColourCheckboxes = (): void => {
+	const colourSection = getElementById("colour-section");
+	const template = getElementById<HTMLTemplateElement>("checkbox-template");
+	const clone = template.content.cloneNode(true) as DocumentFragment;
+	colourSection.appendChild(clone);
+};
+
 const derenderNameForm = (): void => {
 	getElementById("name-form").remove();
 };
@@ -82,6 +89,7 @@ socket.on("player:set", (data) => {
 socket.on("question:get", (data) => {
 	derenderStartButton();
 	askAQuestion(data.question);
+	renderColourCheckboxes();
 });
 
 socket.on("game:startable", () => {

diff --git a/client/utils/getElementById.ts b/client/utils/getElementById.ts
@@ -1,5 +1,5 @@
-export const getElementById = (id: HTMLElement["id"]): HTMLElement => {
-	const element = document.getElementById(id);
+export const getElementById = <T extends HTMLElement>(id: T["id"]): T => {
+	const element = document.getElementById(id) as T;
 
 	if (!element) {
 		throw new Error(`No element found with ID: ${id}`);