Board Editor

build.mjs

@@ -54,7 +54,7 @@ if (DEV_BUILD){
       return !/(\\|\/)scripts(\\|\/)/.test(filename) || /(\\|\/)game$/.test(filename) // make sure to create the scripts/game/folder
     }
   });
-
+  
   // make a list of all client scripts:
   const clientFiles = [];
   const clientScripts = await getExtFiles("./src/client/scripts", ".js");

src/client/css/play.css

@@ -1,14 +1,14 @@
 * {
     margin: 0;
     padding: 0;
-    font-family: Verdana;
     border: 0;
     /* Enable temporarily during dev to see the borders of all elements */
     /* outline: 1px solid rgba(0, 0, 0, 0.191); */
 }
 
 html {
     background-color: rgb(33, 33, 33);
+	font-family: Verdana;
 }
 
 /* Variables */
@@ -1307,7 +1307,115 @@ button.join-button, button.copy-button {
     word-break: break-all;
 }
 
-
+/* [Editor] */
+#editor {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	display: grid;
+	grid-template:
+		"t t" 40px
+		"b s" 1fr
+		/ 1fr 240px;
+}
+#editor-board {
+	grid-area: b;
+	background: grey;
+}
+#editor-top-bar {
+	grid-area: t;
+	width: 100%;
+	height: 60px;
+	background: rgb(175, 198, 83);
+}
+#editor-sidebar {
+	grid-area: s;
+	background: rebeccapurple;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	overflow-y: scroll;
+	padding: 20px;
+	font-family: 'Courier New', Courier, monospace;
+}
+#editor-pointer-modes {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	flex-wrap: wrap;
+	user-select: none;
+	background: blue
+}
+#editor-pointer-selection-modes {
+	width: 100%;
+	height: 40px;
+	flex: 0 0 auto;
+	display: flex;
+}
+#editor-pointer-selection-modes .editor-pointer-mode {
+	background: lightseagreen;
+	flex: 1;
+	height: 100%;
+}
+#editor-pointer-deletion-modes {
+	flex: 0 0 auto;
+	width: 100%;
+	height: 40px;
+	display: flex;
+}
+#editor-pointer-mode-single-deletion {
+	height: 100%;
+	flex: 1;
+	background: purple;
+}
+.editor-pointer-mode {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+#editor-pointer-deletion-modes-menu-btn {
+	height: 100%;
+	width: 16px;
+	background: orangered;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+#editor-pointer-mode-pieces {
+	width: calc(100% - 2rem);
+	background: yellowgreen;
+	display: flex;
+	gap: 1rem;
+	padding: 1rem;
+}
+#editor-pointer-mode-pieces-white, #editor-pointer-mode-pieces-black {
+	width: 50%;
+	display: grid;
+	grid-template: 
+		"k q" 1fr
+		"r b" 1fr
+		"n p" 1fr / 1fr 1fr;
+	grid-gap: .5rem;
+}
+.editor-pointer-mode-piece {
+	/* background will be set by js */
+	background-repeat: no-repeat;
+	background-position: center;
+	width: 100%;
+	aspect-ratio: 1;
+}
+.editor-pointer-mode:hover {
+	/* !important needed to override id with class+pseudoselector */
+	filter: brightness(1.2);
+
+}
+.editor-selected-pointer-mode {
+	z-index: 10;
+	/* !important needed to override class+pseudoselector with just class */
+	outline: solid white 2px;
+}
 
 /* General classes with basic properties */
 
@@ -1332,7 +1440,8 @@ a {
 }
 
 .hidden {
-    display: none;
+	/* !important needed to make class have more specificity than anything else */
+    display: none !important;
 }
 
 .opacity-0_5 {

src/client/scripts/game/gui/guieditor.js

@@ -0,0 +1,66 @@
+/**
+ * This script manages the editor
+ */
+
+"use strict";
+
+const guieditor = (function () {
+  const element_editor = document.getElementById("editor");
+  const element_editorBoard = document.getElementById("editor-board");
+  const element_editorSidebar = document.getElementById("editor-sidebar");
+  function open() {
+    style.revealElement(element_editor);
+    addListeners();
+  }
+  function close() {
+    style.hideElement(element_editor);
+    removeListeners();
+  }
+
+  function addListeners() {
+    let currentlySelected = null;
+    // make each pointer mode selectable
+    for (const editorPointerMode of document.getElementsByClassName(
+      "editor-pointer-mode"
+    )) {
+      editorPointerMode.addEventListener(
+        "click",
+        callback_editorPointerModeSelection
+      );
+    }
+  }
+  function removeListeners() {
+    for (const editorPointerMode of document.getElementsByClassName(
+      "editor-pointer-mode"
+    )) {
+      editorPointerMode.removeEventListener(
+        "click",
+        callback_editorPointerModeSelection
+      );
+    }
+  }
+  // callback for editor pointer mode selection
+  function callback_editorPointerModeSelection(event) {
+	let clickedEditorPointerMode = event.target;
+    let currentlySelectedEditorPointerMode = document.querySelector(
+      ".editor-selected-pointer-mode"
+    );
+    if (!currentlySelectedEditorPointerMode) {
+      // nothing was selected beforehand
+      clickedEditorPointerMode.classList.add("editor-selected-pointer-mode");
+      return;
+    }
+    currentlySelectedEditorPointerMode.classList.remove(
+      "editor-selected-pointer-mode"
+    );
+    if (clickedEditorPointerMode !== currentlySelectedEditorPointerMode) {
+      // if editorPointerMode was deselected, don't reselect
+      clickedEditorPointerMode.classList.add("editor-selected-pointer-mode");
+    }
+  }
+
+  return Object.freeze({
+    open,
+    close,
+  });
+})();