Added what's new window

README.md

@@ -15,17 +15,11 @@ Suggestions / Planned features:
 - Documentation
 
 - Possibility to hide and resize menus (layers, palette)
-- What's new window to show the latest updates
 - Line tool
 - Tiled mode
 - Load palette from LPE file
-- Move colours in (advanced) palette editor
 - Symmetry options
 
-- Custom color picker
-    - custom code without dependencies
-    - more features such as sliders / color modes
-
 - Mobile
     - Touch equivalent for mouse clicks
     - Hide or scale ui
@@ -40,11 +34,9 @@ Suggestions / Planned features:
 	- Warning windows for wrong inputs
 	- Palette option remove unused colors
 	- Move selection with arrows
-	- Update pivot buttons when resizing canvas
 	- Update borders by dragging the canvas' edges with the mouse when resizing canvas
 	- Move the canvases so they're centered after resizing the canvas (maybe a .center() method in layer class)
     - Scale selection
-    - Use sortable.js for sorting the layers
 
 ## How to Contribute
 

css/pixel-editor.scss

@@ -1541,3 +1541,29 @@ div#pb-options {
 		background-color: $basehover;
 	}
 }
+
+/********FEATURES LOG*************/
+#features-log {
+	font-size:16px;
+	width:700px !important;
+	height:500px;
+	overflow-y: scroll;
+	line-height: 1.5;
+
+	&::-webkit-scrollbar {
+		background: #232125;
+		width: 0.5em;
+	}
+	&::-webkit-scrollbar-track {
+		margin-top: -0.125em;
+		width: 0.5em;
+	}
+	&::-webkit-scrollbar-thumb {
+		background: #332f35;
+		border-radius: 0.25em;
+		border: solid 0.125em #232125; //same color as scrollbar back to fake padding
+	}
+	&::-webkit-scrollbar-corner {
+		background: #232125;
+	}
+}

js/_dialogue.js

@@ -40,11 +40,14 @@ function closeDialogue () {
         popups[i].style.display = 'none';
     }
 
+    dialogueOpen = false;
+
     if (currentOpenDialogue == "palette-block") {
         pbAddToSimplePalette();
     }
-
-    dialogueOpen = false;
+    else if (currentOpenDialogue == "features-log") {
+        showDialogue("new-pixel");
+    }
 }
 
 /** Closes a dialogue window if the user clicks everywhere but in the current window

js/_featuresLog.js

@@ -0,0 +1,4 @@
+if (settings.showLog || settings.showLog == undefined) {
+    console.log("Ok");
+    showDialogue("features-log", false);
+}

js/_onLoad.js

@@ -8,5 +8,6 @@ window.onload = function(){
     newPixel(getValue('size-width'),getValue('size-height'), getValue('editor-mode'));
   else
     //otherwise show the new pixel dialog
+    if (settings.showLog != undefined && !settings.showLog)
       showDialogue('new-pixel', false);
 };

js/_settings.js

@@ -9,6 +9,7 @@ var settingsFromCookie = Cookies.get('pixelEditorSettings');
 if(!settingsFromCookie) {
     console.log('settings cookie not found');
     settings = {
+        showLog: true,
         switchToChangedColor: true,
         enableDynamicCursorOutline: true, //unused - performance
         enableBrushPreview: true, //unused - performance
@@ -26,8 +27,9 @@ else{
 console.log(settings);
 
 //on clicking the save button in the settings dialog
-on('click', 'save-settings', function (){
+on('click', 'save-settings', saveSettings);
 
+function saveSettings() {
     //check if values are valid
     if (isNaN(getValue('setting-numberOfHistoryStates'))) {
         alert('Invalid value for numberOfHistoryStates');
@@ -37,6 +39,7 @@ on('click', 'save-settings', function (){
     //save new settings to settings object
     settings.numberOfHistoryStates = getValue('setting-numberOfHistoryStates');
     settings.pixelGridColour = getValue('setting-pixelGridColour');
+    settings.showLog = false;
     // Filling pixel grid again if colour changed
     fillPixelGrid();
 
@@ -46,4 +49,4 @@ on('click', 'save-settings', function (){
 
     //close window
     closeDialogue();
-});
+}

js/pixel-editor.js

@@ -36,6 +36,7 @@
 //=include _colorChanged.js
 //=include _initColor.js
 //=include _dialogue.js
+//=include _featuresLog.js
 //=include _updateCursor.js
 //=include _drawLine.js
 //=include _getCursorPosition.js

views/pixel-editor.hbs

@@ -255,6 +255,68 @@
             </div>
         </div>
 
+        <!-- NEW FEATURES LOG -->
+        <div id="features-log" class="update">
+            <button class="close-button">{{svg "x.svg" width="20" height="20"}}</button>
+            <h1>Lospec Pixel Editor: latest updates</h1>
+            <strong>Hey! Unsettled here.</strong><br><br>
+            Welcome to the features-log.html! From now on, it will show all the 
+            latest features that have been added to the editor, so that everyone knows what's going on.
+
+            <h2>Canvas and sprite resizing</h2>
+            Canvas and sprite resizing are here! You started a 4x4 sprite but realized it was a bit too small of 
+            a resolution to draw a fight against dinosaurs? Now you can go to Edit->Resize canvas and specify a higher
+            canvas size. At the same time, if you drew an ant on a 1000x1000 canvas you can also reduce the canvas size.
+            I'll tell you more, you can even use Edit->Trim to make the borders of the canvas to perfectly include
+            the sprite you're drawing.
+            <br><br>
+            Let's say you'd like to ask for feedback on a piece. You go on Discord and post it, but it's so small!
+            We've got you covered. Besides using the Lospec Pixel Art Scaler, you can also use the Edit->Scale sprite
+            menu to...well...scale your sprite. It's also very useful when you'd like to edit a sprite that was previously
+            scaled. Just scale it down and have a look at how your favourite artist draws those great clouds.
+
+            <h2>Layers and palette sorting</h2>
+            Changing the layer sorting is now easier and has some nice animations. Because you can never have enough juice.
+            <br><br>
+            You can also change the ordering of the colours in the palette menu: just drag a colour and place it in the right position.
+
+            <h2>Advanced mode: advanced palette editor</h2>
+            If you are a proud user of the advanced mode (Edit->Switch to advance mode if you want to experience the thrill),
+            we (and with we I mean I) have great news: right click on a colour to open the old picker, click on the edit
+            colour button if you want to try out the new palette editor. In it, you'll find:
+
+            <h2>Advanced mode: advanced colour picker</h2>
+            It supports 3 (three) different colour models, it has sliders, it has a mini colour picker if you hate sliders and 
+            it also supports 6 (six) different colour harmonies. The Lospec Advanced Colour Picker will make you feel like a 
+            pro!
+            
+            <h2>Advanced mode: advanced palette block</h2>
+            Part of the new palette editor, it lets you add and remove multiple colours at once. Use the right mouse click to 
+            select a bunch of colours that you want to delete. The changes that you make will be propagated to the old
+            palette.
+
+            <h2>But wait, there's more!</h2>
+            We also added a few quality of life improvements!
+            <ul>
+                <li>The brush preview now snaps to the pixel grid! (I'd dare to say "finally!")</li>
+                <li>We added the pixel grid! Click on View->Pixel grid to toggle it, change its colour
+                    in the settings, maybe you really like Endesga pink grids.
+                </li>
+                <li>Have fun duplicating layers ;D (Layers->Duplicate or Duplicate from the layer menu)</li>
+                <li>When you hover on a layer in the layer menu (on the right), the editor will temporarily hide
+                    the other ones, so you can easily see what's in the current layer.
+                </li>
+            </ul>
+
+            <h2>That's all folks!</h2>
+            Don't forget to follow Lospec on all the social media pages. If you like the site,
+            please consider becoming a Patron or giving a tip. It helps a lot :)
+            <br><br>
+            Hope you all have fun creating pixel art, see you next update!
+            <br><br>
+            P.S.: you can find this page in Help->Latest update
+        </div>
+
         <!--SPRITE RESIZE-->
         <div class="update" id = "resize-sprite">
             <button class="close-button">{{svg "x.svg" width="20" height="20"}}</button>