diff --git a/build.js b/build.js index 3a2b332..1172994 100644 --- a/build.js +++ b/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() { diff --git a/css/_main-menu.scss b/css/_main-menu.scss index 06453d8..29e9370 100644 --- a/css/_main-menu.scss +++ b/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; + } + } +} \ No newline at end of file diff --git a/css/_splash-page.scss b/css/_splash-page.scss index 1bf440a..10ee8dc 100644 --- a/css/_splash-page.scss +++ b/css/_splash-page.scss @@ -3,6 +3,7 @@ #splash { width:100% !important; height:100%!important; + position:absolute; background-color: #232125 !important; opacity: 1 !important; diff --git a/css/_tools-menu.scss b/css/_tools-menu.scss index 704b041..ce70f63 100644 --- a/css/_tools-menu.scss +++ b/css/_tools-menu.scss @@ -108,4 +108,29 @@ #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; } \ No newline at end of file diff --git a/images/ToolTutorials/brush-tutorial.gif b/images/ToolTutorials/brush-tutorial.gif new file mode 100644 index 0000000..50dd9c6 Binary files /dev/null and b/images/ToolTutorials/brush-tutorial.gif differ diff --git a/js/Tool.js b/js/Tool.js index 435acaa..f05f6eb 100644 --- a/js/Tool.js +++ b/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 = ""; + } + addTutorialKey(key, text) { + this.toolTutorial.children[0].append( + '
  • ' + key + ' ' + text + '
    • '); + } + addTutorialText(key, text) { + this.toolTutorial.children[0].append( + '
  • ' + key + ': ' + text + '
    • '); + } + addTutorialImg(imgPath) { + this.toolTutorial.children[0].append( + ''); + } + onSelect() { if (this.mainButton != undefined) this.mainButton.parentElement.classList.add("selected"); diff --git a/js/TopMenuModule.js b/js/TopMenuModule.js index 7872957..b39b054 100644 --- a/js/TopMenuModule.js +++ b/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 (let i = 1; i < mainMenuItems.length; i++) { + // for each button in main menu (starting at 1 to avoid logo), ending at length-1 to avoid + // editor info + for (let i = 1; i < mainMenuItems.length-1; i++) { //get the button that's in the list item const menuItem = mainMenuItems[i]; diff --git a/js/tools/MagicWandTool.js b/js/tools/MagicWandTool.js index a6aa320..78f714d 100644 --- a/js/tools/MagicWandTool.js +++ b/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]; diff --git a/js/tools/SelectionTool.js b/js/tools/SelectionTool.js index 43dfdad..ebbda6f 100644 --- a/js/tools/SelectionTool.js +++ b/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 diff --git a/views/main-menu.hbs b/views/main-menu.hbs index a7d04b6..18c03e9 100644 --- a/views/main-menu.hbs +++ b/views/main-menu.hbs @@ -65,4 +65,11 @@
    • + +
  • + +
    • \ No newline at end of file diff --git a/views/tools-menu.hbs b/views/tools-menu.hbs index 77b22e6..c8ac9ca 100644 --- a/views/tools-menu.hbs +++ b/views/tools-menu.hbs @@ -1,6 +1,6 @@