From e9e1ba96da116cf9bf1c1fed0e21fe69e51517fc Mon Sep 17 00:00:00 2001
From: unsettledgames <47360416+unsettledgames@users.noreply.github.com>
Date: Mon, 20 Jul 2020 12:59:04 +0200
Subject: [PATCH] Started implementing editor modes

Added prompt in the create menu to choose an editor mode.
---
 css/pixel-editor.scss  |  8 ++++++
 js/_createButton.js    |  4 +++
 js/_editorMode.js      | 57 ++++++++++++++++++++++++++++++++++++++++++
 js/_palettes.js        |  2 +-
 js/_presets.js         |  1 -
 js/pixel-editor.js     |  1 +
 views/pixel-editor.hbs |  8 ++++++
 7 files changed, 79 insertions(+), 2 deletions(-)
 create mode 100644 js/_editorMode.js

diff --git a/css/pixel-editor.scss b/css/pixel-editor.scss
index 1a8f507..201d947 100644
--- a/css/pixel-editor.scss
+++ b/css/pixel-editor.scss
@@ -911,6 +911,14 @@ svg {
   font-style: italic;
 }
 
+#editor-mode-info {
+  font-style:italic;
+}
+
+#editor-mode {
+  display:none;
+}
+
 #compatibility-warning {
   display: flex;
   justify-content: center;
diff --git a/js/_createButton.js b/js/_createButton.js
index b356691..62cf247 100644
--- a/js/_createButton.js
+++ b/js/_createButton.js
@@ -1,6 +1,7 @@
 on('click', 'create-button', function (){
     var width = getValue('size-width');
     var height = getValue('size-height');
+    var mode = getValue("editor-mode");
     newPixel(width,height,'asdfg');
     document.getElementById('new-pixel-warning').style.display = 'block';
 
@@ -16,6 +17,9 @@ on('click', 'create-button', function (){
     //reset new form
     setValue('size-width', 64);
     setValue('size-height', 64);
+    setValue("editor-mode", 'Advanced')
+
+    setText('editor-mode-button', 'Choose a mode...');
     setText('palette-button', 'Choose a palette...');
     setText('preset-button', 'Choose a preset...');
 });
diff --git a/js/_editorMode.js b/js/_editorMode.js
new file mode 100644
index 0000000..f32a907
--- /dev/null
+++ b/js/_editorMode.js
@@ -0,0 +1,57 @@
+let modes = {
+    'Basic' : {
+        description: 'Basic mode is perfect if you want to create simple sprites or try out palettes.'
+    },
+    'Advanced' : {
+        description: 'Choose advanced mode to gain access to features such as layers.'
+    }
+}
+
+let infoBox = document.getElementById('editor-mode-info');
+
+// Makes the menu open
+on('click', 'editor-mode-button', function (e){
+    //open or close the preset menu
+    toggle('editor-mode-button');
+    toggle('editor-mode-menu');
+
+    //close the palette menu
+    deselect('palette-button');
+    deselect('palette-menu');
+
+    //close the preset menu
+    deselect('preset-button');
+    deselect('preset-menu');
+
+    //stop the click from propogating to the parent element
+    e.stopPropagation();
+});
+
+//populate preset list in new pixel menu
+Object.keys(modes).forEach(function(modeName,index) {
+    var editorModeMenu = document.getElementById('editor-mode-menu');
+
+    //create button
+    var button = document.createElement('button');
+    button.appendChild(document.createTextNode(modeName));
+
+    //insert new element
+    editorModeMenu.appendChild(button);
+
+    //add click event listener
+    on('click', button, function() {
+
+        //change mode on new pixel
+        setValue('editor-mode', modeName);
+        // Change description
+        infoBox.innerHTML = modes[modeName].description;
+
+        //hide the dropdown menu
+        deselect('editor-mode-menu');
+        deselect('editor-mode-button');
+
+        //set the text of the dropdown to the newly selected mode
+        setText('editor-mode-button', modeName);
+    });
+
+});
\ No newline at end of file
diff --git a/js/_palettes.js b/js/_palettes.js
index 164b861..5f2a22e 100644
--- a/js/_palettes.js
+++ b/js/_palettes.js
@@ -44,7 +44,6 @@ on('click', 'load-palette-button', function () {
 
 
 
-
 on('click', 'palette-button', function (e){
     toggle('palette-button');
     toggle('palette-menu');
@@ -55,6 +54,7 @@ on('click', 'palette-button', function (e){
 });
 
 on('click', 'new-pixel', function (){
+    deselect('editor-mode-menu');
     deselect('preset-button');
     deselect('preset-menu');
     deselect('palette-button');
diff --git a/js/_presets.js b/js/_presets.js
index 87790bd..bc4e02d 100644
--- a/js/_presets.js
+++ b/js/_presets.js
@@ -49,7 +49,6 @@ Object.keys(presets).forEach(function(presetName,index) {
 
 });
 
-
 on('click', 'preset-button', function (e){
     //open or close the preset menu
     toggle('preset-button');
diff --git a/js/pixel-editor.js b/js/pixel-editor.js
index 2c35eff..3b05c3e 100644
--- a/js/pixel-editor.js
+++ b/js/pixel-editor.js
@@ -19,6 +19,7 @@
 //=include _settings.js
 
 /**dropdown formatting**/
+//=include _editorMode.js
 //=include _presets.js
 //=include _palettes.js
 
diff --git a/views/pixel-editor.hbs b/views/pixel-editor.hbs
index 25a9994..6042b71 100644
--- a/views/pixel-editor.hbs
+++ b/views/pixel-editor.hbs
@@ -213,6 +213,14 @@
             <button class="close-button">{{svg "x.svg" width="20" height="20"}}</button>
             <h1>New Pixel</h1>
 
+            <!-- Editor mode-->
+            <h2>Editor mode</h2>
+            <button id = "editor-mode-button" class = "dropdown-button">Choose a mode...</button>
+            <div id = "editor-mode-menu" class = "dropdown-menu"></div>
+            <input id="editor-mode" value="{{#if mode}}{{mode}}{{else}}'Advanced'{{/if}}" autocomplete="off" />
+            <p id = "editor-mode-info"></p>
+
+            <!-- Preset-->
             <h2>Preset</h2>
             <button id="preset-button" class="dropdown-button">Choose a preset...</button>
             <div id="preset-menu" class="dropdown-menu"></div>