Started tool tutorials

build.js

@@ -21,10 +21,12 @@ function copy_images(){
     gulp.src('./images/*.ico').pipe(gulp.dest(BUILDDIR));
     // Splash images
     gulp.src('./images/Splash images/*.png').pipe(gulp.dest(BUILDDIR));
-    // Logs images
+    // Logs gifs
     gulp.src('./images/Logs/*.gif').pipe(gulp.dest(BUILDDIR));
-    // Logs images
+    // Logs pngs
     gulp.src('./images/Logs/*.png').pipe(gulp.dest(BUILDDIR));
+    // Tool tutorials
+    gulp.src('./images/ToolTutorials/*.gif').pipe(gulp.dest(BUILDDIR));
 }
 
 function copy_logs() {

css/_main-menu.scss

@@ -69,7 +69,7 @@
 
 
 
-/*app title*/
+/* app title */
 
 .logo {
 	color: lighten($basecolor, 20%);
@@ -83,3 +83,46 @@
 #main-menu li.open, #main-menu li button:hover {
 	background: $basehover;
 }
+
+/* Editor info */
+li#editor-info {
+	float:right;
+	height:100%;
+	display:flex;
+	align-items: center;
+	background-color: $basecolor;
+	color:$basetext;
+
+	ul {
+		background-color: $basecolor;
+		display:block;
+		position:relative;
+		top:0px;
+		padding-top:0px;
+		box-shadow: none;
+		padding-bottom: 0px;
+
+		li {
+			top:0px;
+			padding-top:0px;
+			display:inline;
+			padding-right:20px;
+		}
+		input {
+			margin-left:10px;
+			background-color:$basehovertext;
+			box-shadow:none;
+			border:none;
+			vertical-align: middle;
+			border-radius:5px;
+		}
+		input[type=text] {
+			width:20px;
+			height:15px;
+		}
+		input[type=checkbox] {
+			width:15px;
+			height:15px;
+		}
+	}
+}

css/_splash-page.scss

@@ -3,6 +3,7 @@
 #splash {
 	width:100% !important;
 	height:100%!important;
+	position:absolute;
 
 	background-color: #232125 !important;
 	opacity: 1 !important;

css/_tools-menu.scss

@@ -109,3 +109,28 @@
 #tools-menu li:hover {
 	background: $basehover;
 }
+
+/* Tool tutorial */
+#tool-tutorial {
+	display:inline-block;
+	position:absolute;
+	z-index:4000;
+	margin-left:48px;
+	margin-top:48px;
+	background-color: $basehover;
+	color:$basetext;
+	font-size:14px;
+	width:20%;
+	border-radius:0 5px 5px 5px;
+	
+	img {
+		width:100%;
+	}
+}
+
+#tool-tutorial:after {
+	border-left: 11px solid #222;
+	border-top: 8px solid transparent;
+	border-bottom: 8px solid transparent;
+	position: relative;
+}

js/Tool.js

@@ -24,6 +24,7 @@ class Tool {
 	biggerButton = undefined;
 	smallerButton = undefined;
 	brushPreview = document.getElementById("brush-preview");
+	toolTutorial = document.getElementById("tool-tutorial");
 
 	constructor (name, options) {
 		this.name = name;
@@ -34,6 +35,22 @@ class Tool {
 		this.smallerButton = document.getElementById(name + "-smaller-button");
 	}
 
+	resetTutorial() {
+		this.toolTutorial.innerHTML = "<ul></ul>";
+	}
+	addTutorialKey(key, text) {
+		this.toolTutorial.children[0].append(
+			'<li><span class="keyboard-key">' + key + '</span> ' + text + '</li>');
+	}
+	addTutorialText(key, text) {
+		this.toolTutorial.children[0].append(
+			'<li>' + key + ': ' + text + '</li>');
+	}
+	addTutorialImg(imgPath) {
+		this.toolTutorial.children[0].append(
+			'<img src="' + imgPath + '"/>');
+	}
+
 	onSelect() {
 		if (this.mainButton != undefined)
 			this.mainButton.parentElement.classList.add("selected");

js/TopMenuModule.js

@@ -5,8 +5,9 @@ const TopMenuModule = (() => {
     initMenu();
 
     function initMenu() {
-        //for each button in main menu (starting at 1 to avoid logo)
+        // for each button in main menu (starting at 1 to avoid logo), ending at length-1 to avoid
-        for (let i = 1; i < mainMenuItems.length; i++) {
+        // editor info
+        for (let i = 1; i < mainMenuItems.length-1; i++) {
 
             //get the button that's in the list item
             const menuItem = mainMenuItems[i];

js/tools/MagicWandTool.js

@@ -19,7 +19,7 @@ class MagicWandTool extends SelectionTool {
     getSelection() {
         let coords = [Math.floor(this.endMousePos[0]), Math.floor(this.endMousePos[1])];
         let data = currFile.currentLayer.context.getImageData(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]).data;
-        let index = (coords[1] * currFile.canvasSize[1] + coords[0]) * 4;
+        let index = (coords[1] * currFile.canvasSize[0] + coords[0]) * 4;
         let color = [data[index], data[index+1], data[index+2], data[index+3]];
         let selectedData = new ImageData(currFile.canvasSize[0], currFile.canvasSize[1]);
 
@@ -28,7 +28,7 @@ class MagicWandTool extends SelectionTool {
         
         for (const pixel in this.currSelection) {
             let coords = [parseInt(pixel.split(",")[0]), parseInt(pixel.split(",")[1])];
-            let index = (currFile.canvasSize[1] * coords[1] + coords[0]) * 4;
+            let index = (currFile.canvasSize[0] * coords[1] + coords[0]) * 4;
 
             selectedData[index] = color[0];
             selectedData[index+1] = color[1];

js/tools/SelectionTool.js

@@ -94,7 +94,7 @@ class SelectionTool extends Tool {
         for (const key in this.currSelection) {
             let x = parseInt(key.split(",")[0]);
             let y = parseInt(key.split(",")[1]);
-            let index = (y * currFile.canvasSize[1] + x) * 4;
+            let index = (y * currFile.canvasSize[0] + x) * 4;
 
             for (let i=0; i<4; i++) {
                 // Save the pixel

views/main-menu.hbs

@@ -65,4 +65,11 @@
 			<li><button>Changelog</button></li>
 		</ul>
 	</li>
+
+	<li id="editor-info">
+		<ul>
+			<li><label><span>Tool size: </span><input type="text" width="10px"/></label></li>
+			<li><label><span>Continuous: </span><input type="checkbox"/></label></li>
+		</ul>
+	</li>
 </ul>

views/tools-menu.hbs

@@ -1,6 +1,6 @@
 <ul id="tools-menu">
 	<li class="selected expanded">
-		<button title="Brush Tool (B)" id="brush-button">{{svg "pencil.svg" width="24" height="24"}}</button>
+		<button id="brush-button">{{svg "pencil.svg" width="24" height="24"}}</button>
 		<ul class="size-buttons">
 			<button title="Increase Brush Size" id="brush-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
 			<button title="Decrease Brush Size" id="brush-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
@@ -8,7 +8,7 @@
 	</li>
 
 	<li class = "expanded">
-		<button title="Eraser tool (R)" id="eraser-button">{{svg "eraser.svg" width="24" height="24"}}</button>
+		<button id="eraser-button">{{svg "eraser.svg" width="24" height="24"}}</button>
 		<ul class="size-buttons">
 			<button title="Increase Eraser Size" id="eraser-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
 			<button title="Decrease Eraser Size" id="eraser-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
@@ -16,7 +16,7 @@
 	</li>
 
 	<li class="expanded">
-		<button title="Rectangle Tool (U)" id="rectangle-button">{{svg "rectangle.svg" width="24" height="24" id = "rectangle-empty-button-svg"}}
+		<button id="rectangle-button">{{svg "rectangle.svg" width="24" height="24" id = "rectangle-empty-button-svg"}}
 		{{svg "fullrect.svg" width="24" height="24" id = "rectangle-full-button-svg" display = "none"}}</button>
 		<ul class="size-buttons">
 			<button title="Increase Rectangle Size" id="rectangle-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
@@ -25,7 +25,7 @@
 	</li>
 
 	<li class="expanded">
-		<button title="Ellipse Tool (S)" id="ellipse-button">
+		<button id="ellipse-button">
 			{{svg "ellipse.svg" width="24" height="24" id = "ellipse-empty-button-svg"}}
 			{{svg "filledellipse.svg" width="24" height="24" id = "ellipse-full-button-svg" display = "none"}}
 		</button>
@@ -36,23 +36,32 @@
 	</li>
 
 	<li class="expanded">
-		<button title="Line Tool (L)" id="line-button">{{svg "line.svg" width="24" height="24"}}</button>
+		<button id="line-button">{{svg "line.svg" width="24" height="24"}}</button>
 		<ul class="size-buttons">
 			<button title="Increase Line Size" id="line-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
 			<button title="Decrease Line Size" id="line-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
 		</ul>
 	</li>
 
-	<li><button title="Fill Tool (F)" id="fill-button">{{svg "fill.svg" width="24" height="24"}}</button></li>
+	<li><button id="fill-button">{{svg "fill.svg" width="24" height="24"}}</button></li>
 
-	<li><button title = "Rectangular Selection Tool (M)" id = "rectselect-button">{{svg "rectselect.svg" width = "24" height = "24"}}</button><li>
+	<li><button id = "rectselect-button">{{svg "rectselect.svg" width = "24" height = "24"}}</button><li>
 
-	<li><button title = "Lasso Selection Tool (Q)" id = "lassoselect-button">{{svg "lasso.svg" width = "26" height = "26"}}</button></li>
+	<li><button id = "lassoselect-button">{{svg "lasso.svg" width = "26" height = "26"}}</button></li>
 
-	<li><button title = "Magic Wand Tool (W)" id = "magicwand-button">{{svg "magicwand.svg" width = "26" height = "26"}}</button></li>
+	<li><button id = "magicwand-button">{{svg "magicwand.svg" width = "26" height = "26"}}</button></li>
 
-	<li><button title="Eyedropper Tool (E)" id="eyedropper-button">{{svg "eyedropper.svg" width="24" height="24"}}</button></li>
+	<li><button id="eyedropper-button">{{svg "eyedropper.svg" width="24" height="24"}}</button></li>
-
-	<li><button title="Pan Tool (P)" id="pan-button">{{svg "pan.svg" width="24" height="24"}}</button></li>
 
+	<li><button id="pan-button">{{svg "pan.svg" width="24" height="24"}}</button></li>
 </ul>
+
+<div id="tool-tutorial">
+	<ul>
+		<li><span class="keyboard-key">B</span> to select the tool</li>
+		<li><span class="keyboard-key">Left drag</span> to use the tool</li>
+		<li><span class="keyboard-key">Right drag</span> to change tool size</li>
+		<li><span class="keyboard-key">+</span> or <span class="keyboard-key">-</span> to change tool size</li>
+	</ul>
+	<img src="brush-tutorial.gif"/>
+</div>"