Started binding splash page events (new custom pixel section)

css/pixel-editor.scss

@@ -805,7 +805,6 @@ svg {
 	*/
 
 	button.default {
-		float: right;
 		background: $basehover;
 		border: none;
 		border-radius: 4px;
@@ -1553,9 +1552,10 @@ div#pb-options {
 
 	background-color: #232125 !important;
 	opacity: 1 !important;
+	overflow-y: scroll;
 
 	#splash-input {
-		width:70%;
+		width:74%;
 		height:100vh !important;
 		color:$baselink;
 
@@ -1608,11 +1608,12 @@ div#pb-options {
 		}
 	}
 
-	#sp-quickstart {
+	#sp-quickstart-container {
-		position:relative;
+		left:250px;
-		width: 70%;
+		height:65vh;
-		margin-top:-20px;
+		width:650px;
-		margin-left:20px
+		display:inline;
+		float:right;
 	}
 
 	#sp-quickstart-title {
@@ -1630,7 +1631,7 @@ div#pb-options {
 		width:100px;
 		height:100px;
 		border-radius:5%;
-		margin-right:40px;
+		margin-right:30px;
 		margin-top:30px;
 		background-color:$basecolor;
 		float:left;
@@ -1655,29 +1656,48 @@ div#pb-options {
 
 	#sp-newpixel {
 		display: inline-block;
-		width:35%;
+		width:220px;
 		height:64vh;
 		padding:20px;
 		position:relative;
 		background-color:$basecolor;
-		top:-47px;
+
+		.sp-np-entry {
+			width:100%;
+			text-align:center;
+		}
+
+		input {
+			border:none;
+			background-color: #232125;
+			color:$basetext;
+			font-size:14px;
+			width:40px;
+			padding:7px;
+			text-align:center;
+		}
+
+		#create-button {
+			font-size:18px;
+			width:150px;
+			margin-top:40px;
+			font-weight: bold;
+		}
 
 		#sp-mode-palette {
 			text-align: center;
 			position: relative;
 			float:bottom;
-			font-size:18px;
+			font-size:16px;
 			font-weight: bold;
 	
 			div.button-menu {
-				border:3px solid $basetextweak;
+				border:2px solid $basetextweak;
 				border-radius:5px;
 				position:relative;
 				display:inline-block;
 				padding: 0 0 0 0;
 				text-align:left;				
-				-ms-transform: translateY(38%);
-				transform: translateY(38%);
 	
 				div {
 					border:none;
@@ -1687,12 +1707,12 @@ div#pb-options {
 					width:100px;
 					float:left;
 					text-align: center;
-					height:30px;
+					height:25px;
 					cursor:pointer;
 	
 					p {
-						-ms-transform: translateY(-50%);
+						-ms-transform: translateY(-60%);
-						transform: translateY(-50%);
+						transform: translateY(-60%);
 					}
 				}
 	
@@ -1723,7 +1743,7 @@ div#pb-options {
 		line-height: 1.5;
 		position:absolute;
 		top:40px;
-		right:40px;
+		right:0px;
 
 		&::-webkit-scrollbar {
 			background: #232125;

js/_createButton.js

@@ -1,3 +1,43 @@
+// OPTIMIZABLE: palette is known here, so why not pass it to _newPixel.js?
+
+function create(isSplash) {
+    var splashPostfix = '';
+    // If I'm creating from the splash menu, I append '-splash' so I get the corresponding values
+    if (isSplash) {
+        splashPostfix = '-splash';
+    }
+
+    var width = getValue('size-width' + splashPostfix);
+    var height = getValue('size-height' + splashPostfix);
+
+    // If I'm creating from the splash screen, I use the splashMode variable
+    var mode = isSplash ? splashMode : getValue('editor-mode');
+
+    newPixel(width, height, mode);
+    
+    // If I'm not creating from the splash page, then this is not the first project I've created
+    if (!isSplash)
+        document.getElementById('new-pixel-warning').style.display = 'block';
+
+    //get selected palette name
+    var selectedPalette = getText('palette-button' + splashPostfix);
+    if (selectedPalette == 'Choose a palette...') 
+        selectedPalette = 'none';
+
+    //track google event
+    ga('send', 'event', 'Pixel Editor New', selectedPalette, width+'/'+height); /*global ga*/
+
+
+    //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...');
+}
+
 /** Triggered when the "Create" button in the new pixel dialogue is pressed
  * 
  */
@@ -29,3 +69,35 @@ on('click', 'create-button', function (){
     setText('palette-button', 'Choose a palette...');
     setText('preset-button', 'Choose a preset...');
 });
+
+/** Triggered when the "Create" button in the new pixel dialogue is pressed
+ * 
+ */
+on('click', 'create-button-splash', function (){
+    // Getting the values of the form
+    var width = getValue('size-width-splash');
+    var height = getValue('size-height-splash');
+    var mode = 'basic';
+
+    // Creating a new pixel with those properties
+    newPixel(width, height, mode);
+    document.getElementById('new-pixel-warning').style.display = 'block';
+
+    //get selected palette name
+    /*var selectedPalette = getText('palette-button');
+    if (selectedPalette == 'Choose a palette...') */
+        selectedPalette = 'none';
+
+    //track google event
+    ga('send', 'event', 'Pixel Editor New', selectedPalette, width+'/'+height); /*global ga*/
+
+
+    //reset new form
+    setValue('size-width-splash', 64);
+    setValue('size-height-splash', 64);
+    /*setValue("editor-mode", 'Advanced')
+
+    setText('editor-mode-button', 'Choose a mode...');
+    setText('palette-button', 'Choose a palette...');
+    setText('preset-button', 'Choose a preset...');*/   
+});

js/_palettes.js

@@ -1,40 +1,62 @@
+const { on } = require("gulp");
+
 //populate palettes list in new pixel menu
 Object.keys(palettes).forEach(function(paletteName,index) {
 
     var palettesMenu = document.getElementById('palette-menu');
+    var splashPalettes = document.getElementById('palette-menu-splash');
 
     //create button
     var button = document.createElement('button');
     button.appendChild(document.createTextNode(paletteName));
 
-    //insert new element
-    palettesMenu.appendChild(button);
-
     //if the palette was specified by the user, change the dropdown to it
     if (palettes[paletteName].specified == true) {
         setText('palette-button', paletteName);
+        setText('palette-button-splash', paletteName)
         //Show empty palette option
         document.getElementById('no-palette-button').style.display = 'block';
+        document.getElementById('no-palette-button-splash').style.display = 'block';
     }
 
-    on('click', button, function() {
+    var buttonEvent = function() {
 
         //hide the dropdown menu
         deselect('palette-menu');
         deselect('palette-button');
+        deselect('palette-menu-splash');
+        deselect('palette-button-splash');
 
         //show empty palette option
         document.getElementById('no-palette-button').style.display = 'block';
+        document.getElementById('no-palette-button-splash').style.display = 'block';
 
         //set the text of the dropdown to the newly selected preset
         setText('palette-button', paletteName);
-    });
+        setText('palette-button-splash', paletteName);
+    };
+
+    on('click', button, buttonEvent);
+
+    //insert new element
+    palettesMenu.appendChild(button);
+
+    // Making a copy for the splash page too
+    var copyButton = button.cloneNode(true);
+    // Attaching the same event
+    on('click', copyButton, buttonEvent);
+    // Appending it to the splash palette menu
+    splashPalettes.appendChild(copyButton);
 });
 
 //select no palette
 on('click', 'no-palette-button', function () {
     document.getElementById('no-palette-button').style.display = 'none';
     setText('palette-button', 'Choose a palette...');
+
+    // Same for splash page
+    document.getElementById('no-palette-button-splash').style.display = 'none';
+    setText('palette-button-splash', 'Choose a palette...');
 });
 
 //select load palette
@@ -43,13 +65,20 @@ on('click', 'load-palette-button', function () {
 });
 
 
-
 on('click', 'palette-button', function (e){
     toggle('palette-button');
     toggle('palette-menu');
 
     deselect('preset-button');
     deselect('preset-menu');
+
+    // Splash version
+    toggle('palette-button-splash');
+    toggle('palette-menu-splash');
+
+    deselect('preset-button-splash');
+    deselect('preset-menu-splash');
+
     e.stopPropagation();
 });
 
@@ -59,4 +88,10 @@ on('click', 'new-pixel', function (){
     deselect('preset-menu');
     deselect('palette-button');
     deselect('palette-menu');
+
+    // Splash version
+    deselect('palette-button-splash');
+    deselect('palette-menu-splash');
 });
+
+// ISSUE: use the same functions for the splash menu

views/pixel-editor.hbs

@@ -246,9 +246,9 @@
             <h2>Size</h2>
             <input id="size-width" value="{{#if width}}{{width}}{{else}}64{{/if}}" autocomplete="off" />{{svg "x.svg" width="16" height="16" class="dimentions-x"}}<input id="size-height" value="{{#if height}}{{height}}{{else}}64{{/if}}" autocomplete="off" />
             <h2>Palette</h2>
-            <!--<button id="palette-button" class="dropdown-button">Choose a palette...</button>
+            <button id="palette-button" class="dropdown-button">Choose a palette...</button>
             <div id="palette-menu" class="dropdown-menu"><button id="no-palette-button">Empty Palette</button><button id="load-palette-button">Load palette...</button></div>
--->
+
             <div id="new-pixel-warning">Creating a new pixel will discard your current one.</div>
             <div>
                 <button id="create-button" class="default">Create</button>
@@ -261,7 +261,7 @@
                  <div id="latest-update">
                     <h1>Latest updates</h1>
                     <strong>Hey! Unsettled here.</strong><br><br>
-                    Welcome to the features-log.html! From now on, it will show all the 
+                    Welcome to the latest update page! 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>
@@ -283,7 +283,7 @@
 
                     <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
+                    we 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>
@@ -331,6 +331,33 @@
                         </div>
                     </div>
 
+                    <div id="sp-newpixel">
+                        <h1>New Custom Pixel</h1>
+                        <!-- Editor mode-->
+                        <h2>Editor mode</h2>
+                        <div class="sp-np-entry" id="sp-mode-palette">
+                            <div class="button-menu">
+                                <div class="bm-left"><p>Basic</p></div>
+                                <div class="sp-interface-selected bm-right"><p>Advanced</p></div>
+                            </div> 
+                        </div>
+
+                        <h2>Size</h2>
+                        <div class="sp-np-entry">
+                            <input id="size-width-splash" value="{{#if width}}{{width}}{{else}}64{{/if}}" autocomplete="off" />{{svg "x.svg" width="16" height="16" class="dimentions-x"}}<input id="size-height-splash" value="{{#if height}}{{height}}{{else}}64{{/if}}" autocomplete="off" />
+                        </div>
+                        
+                        <h2>Palette</h2>
+                        <button id="palette-button-splash" class="dropdown-button">Choose a palette...</button>
+                        <div id="palette-menu-splash" class="dropdown-menu"><button id="no-palette-button-splash">Empty Palette</button><button id="load-palette-button">Load palette...</button></div>
+
+
+                        <div id="new-pixel-warning">Creating a new pixel will discard your current one.</div>
+                        <div class="sp-np-entry">
+                            <button id="create-button-splash" class="default">Create</button>
+                        </div>
+                    </div>
+                    
                     <div id = "sp-quickstart-container">
                         <div id="sp-quickstart-title">
                             Quickstart
@@ -341,33 +368,12 @@
                             <div class="sp-template"><p><span>New</span> Gameboy</p></div>
                             <div class="sp-template"><p><span>New</span> C64</p></div>
                             <div class="sp-template"><p><span>New</span> Pico8</p></div>
+                            <div class="sp-template"><p><span>New</span> 16x16</p></div>
                             <div class="sp-template"><p><span>New</span> 32x32</p></div>
                             <div class="sp-template"><p><span>New</span> 64x64</p></div>
                             <div class="sp-template"><p><span>New</span> 128x128</p></div>
                             <div class="sp-template"><p><span>New</span> 256x256</p></div>
-                        </div>
+                            <div class="sp-template"><p><span>New</span> 512x512</p></div>
-                    </div>
-
-                    <div id="sp-newpixel">
-                        <h1>New Custom Pixel</h1>
-                        <!-- Editor mode-->
-                        <h2>Editor mode</h2>
-                        <div id="sp-mode-palette">
-                            <div class="button-menu">
-                                <div class="bm-left"><p>Basic</p></div>
-                                <div class="sp-interface-selected bm-right"><p>Advanced</p></div>
-                            </div> 
-                        </div>
-
-                        <h2>Size</h2>
-                        <input id="size-width" value="{{#if width}}{{width}}{{else}}64{{/if}}" autocomplete="off" />{{svg "x.svg" width="16" height="16" class="dimentions-x"}}<input id="size-height" value="{{#if height}}{{height}}{{else}}64{{/if}}" autocomplete="off" />
-                        <h2>Palette</h2>
-                        <button id="palette-button" class="dropdown-button">Choose a palette...</button>
-                        <div id="palette-menu" class="dropdown-menu"><button id="no-palette-button">Empty Palette</button><button id="load-palette-button">Load palette...</button></div>
-
-                        <div id="new-pixel-warning">Creating a new pixel will discard your current one.</div>
-                        <div>
-                            <button id="create-button" class="default">Create</button>
                         </div>
                     </div>
                 </div>