Started binding splash page events (new custom pixel section)

This commit is contained in:
unsettledgames 2021-02-17 18:59:49 +01:00
parent 9c2677ea6e
commit 1302fc9bd6
4 changed files with 186 additions and 53 deletions

View File

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

View File

@ -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 /** 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('palette-button', 'Choose a palette...');
setText('preset-button', 'Choose a preset...'); 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...');*/
});

View File

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

View File

@ -246,9 +246,9 @@
<h2>Size</h2> <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" /> <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> <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="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 id="new-pixel-warning">Creating a new pixel will discard your current one.</div>
<div> <div>
<button id="create-button" class="default">Create</button> <button id="create-button" class="default">Create</button>
@ -261,7 +261,7 @@
<div id="latest-update"> <div id="latest-update">
<h1>Latest updates</h1> <h1>Latest updates</h1>
<strong>Hey! Unsettled here.</strong><br><br> <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. latest features that have been added to the editor, so that everyone knows what's going on.
<h2>Canvas and sprite resizing</h2> <h2>Canvas and sprite resizing</h2>
@ -283,7 +283,7 @@
<h2>Advanced mode: advanced palette editor</h2> <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), 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: colour button if you want to try out the new palette editor. In it, you'll find:
<h2>Advanced mode: advanced colour picker</h2> <h2>Advanced mode: advanced colour picker</h2>
@ -331,6 +331,33 @@
</div> </div>
</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-container">
<div id="sp-quickstart-title"> <div id="sp-quickstart-title">
Quickstart Quickstart
@ -341,33 +368,12 @@
<div class="sp-template"><p><span>New</span> Gameboy</p></div> <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> C64</p></div>
<div class="sp-template"><p><span>New</span> Pico8</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> 32x32</p></div>
<div class="sp-template"><p><span>New</span> 64x64</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> 128x128</p></div>
<div class="sp-template"><p><span>New</span> 256x256</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> </div>
</div> </div>