mirror/pixel-editor
1
0
Fork 0
mirror of https://github.com/lospec/pixel-editor.git synced 2023-08-10 21:12:51 +03:00
Code Issues Projects Releases Wiki Activity

Finished binding events to splash page

Browse Source 
Must write the log update and maybe find a way to randomize the splash images
This commit is contained in:
unsettledgames 2021-04-25 12:41:36 +02:00
parent 238eaf1783
commit 04afee2172
8 changed files with 901 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
css/pixel-editor.scss
View File

@ -1640,6 +1640,11 @@ div#pb-options {
text-align:center; text-align:center;
font-weight: bold; font-weight: bold;
&:hover {
cursor:pointer;
background-color:$baseselected;
}
p { p {
span { span {
display:block; display:block;

22
js/_createButton.js
View File

@ -75,27 +75,29 @@ on('click', 'create-button-splash', function (){
// Getting the values of the form // Getting the values of the form
var width = getValue('size-width-splash'); var width = getValue('size-width-splash');
var height = getValue('size-height-splash'); var height = getValue('size-height-splash');
var mode = 'basic'; var mode = pixelEditorMode;
if (mode == 'Advanced')
mode = "Basic";
else
mode = "Advanced";
// Creating a new pixel with those properties // Creating a new pixel with those properties
newPixel(width, height, mode); 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 //track google event
ga('send', 'event', 'Pixel Editor New', selectedPalette, width+'/'+height); /*global ga*/ ga('send', 'event', 'Pixel Editor New', selectedPalette, width+'/'+height); /*global ga*/
document.getElementById('new-pixel-warning').style.display = 'block';
// Resetting the new pixel values
selectedPalette = 'none';
//reset new form //reset new pixel form
setValue('size-width-splash', 64); setValue('size-width-splash', 64);
setValue('size-height-splash', 64); setValue('size-height-splash', 64);
/*setValue("editor-mode", 'Advanced') setValue("editor-mode", 'Advanced')
setText('editor-mode-button', 'Choose a mode...'); setText('editor-mode-button', 'Choose a mode...');
setText('palette-button', 'Choose a palette...'); setText('palette-button', 'Choose a palette...');
setText('preset-button', 'Choose a preset...');*/ setText('preset-button', 'Choose a preset...');
}); });

14
js/_editorMode.js
View File

@ -8,12 +8,12 @@ let modes = {
} }
let infoBox = document.getElementById('editor-mode-info'); let infoBox = document.getElementById('editor-mode-info');
let currentSplashButton; let currentSplashButton = document.getElementById("sp-mode-palette").children[0].children[1];
function splashMode(mouseEvent, mode) { function splashMode(mouseEvent, mode) {
console.log("UE");
if (currentSplashButton == undefined) { if (currentSplashButton == undefined) {
currentSplashButton = mouseEvent.target; currentSplashButton = mouseEvent.target.parentElement;
return;
} }
if (mode !== pixelEditorMode) { if (mode !== pixelEditorMode) {
@ -21,10 +21,14 @@ function splashMode(mouseEvent, mode) {
// Remove selected class to old button // Remove selected class to old button
currentSplashButton.classList.remove("sp-interface-selected"); currentSplashButton.classList.remove("sp-interface-selected");
// Add selected class to new button // Add selected class to new button
mouseEvent.target.classList.add("sp-interface-selected"); mouseEvent.target.parentElement.classList.add("sp-interface-selected");
// Setting the new mode
pixelEditorMode = mode;
} }
currentSplashButton = mouseEvent.target; // Setting the new selected button
currentSplashButton = mouseEvent.target.parentElement;
} }
function switchMode(mustConfirm = true) { function switchMode(mustConfirm = true) {

16
js/_newPixel.js
View File

@ -196,9 +196,21 @@ function newPixel (width, height, editorMode, fileContent = null) {
// Applying the correct editor mode // Applying the correct editor mode
if (pixelEditorMode == 'Basic') { if (pixelEditorMode == 'Basic') {
switchMode('Advanced', false); switchMode(false);
} }
else { else {
switchMode('Basic', false); switchMode(false);
} }
}
function newFromTemplate(preset, x, y) {
if (preset != '') {
setText('palette-button-splash', presets[preset].palette);
setText('palette-button', presets[preset].palette);
x = presets[preset].width;
y = presets[preset].height;
}
newPixel(x, y, pixelEditorMode == 'Advanced' ? 'Basic' : 'Advanced');
} }

2
js/_variables.js
View File

@ -5,7 +5,7 @@ var dragging = false;
var lastMouseClickPos = [0,0]; var lastMouseClickPos = [0,0];
var dialogueOpen = false; var dialogueOpen = false;
var documentCreated = false; var documentCreated = false;
var pixelEditorMode; var pixelEditorMode = "Advanced";
//common elements //common elements
var brushPreview = document.getElementById("brush-preview"); var brushPreview = document.getElementById("brush-preview");

847
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
package.json
View File

@ -19,6 +19,7 @@
"gulp-rename": "^2.0.0", "gulp-rename": "^2.0.0",
"gulp-sass": "^4.0.2", "gulp-sass": "^4.0.2",
"handlebars-helper-svg": "git+https://bitbucket.org/skeddles/npm-handlebars-helper-svg-lospec-open-source.git", "handlebars-helper-svg": "git+https://bitbucket.org/skeddles/npm-handlebars-helper-svg-lospec-open-source.git",
"nodemon": "^2.0.7",
"open": "^6.0.0", "open": "^6.0.0",
"sass": "^1.17.3" "sass": "^1.17.3"
} }

23
views/pixel-editor.hbs
View File

@ -90,6 +90,7 @@
<button>Editor</button> <button>Editor</button>
<ul> <ul>
<li><button id="switch-mode-button">Switch to basic mode</button></li> <li><button id="switch-mode-button">Switch to basic mode</button></li>
<li><button onclick="showDialogue('splash', false)">Return to splash page</button></li>
<li><button>Settings</button></li> <li><button>Settings</button></li>
</ul> </ul>
</li> </li>
@ -260,7 +261,7 @@
<div class="splash-news"> <div class="splash-news">
<div id="latest-update"> <div id="latest-update">
<h1>Latest updates</h1> <h1>Latest updates</h1>
HMMM Yes Lorem ipsum dolor sit amet consectetur ascendit sit amet.HMMM Yes Lorem ipsum dolor sit amet consectetur ascendit sit amet.HMMM Yes Lorem ipsum dolor sit amet consectetur ascendit sit amet.HMMM Yes Lorem ipsum dolor sit amet consectetur ascendit sit amet.HMMM Yes Lorem ipsum dolor sit amet consectetur ascendit sit amet.
</div> </div>
</div> </div>
@ -309,16 +310,16 @@
</div> </div>
<div id="sp-quickstart"> <div id="sp-quickstart">
<div class="sp-template"><p>Load</p></div> <div class="sp-template" onclick="document.getElementById('open-image-browse-holder').click()"><p>Load</p></div>
<div class="sp-template"><p><span>New</span> Gameboy</p></div> <div class="sp-template" onclick="newFromTemplate('Gameboy Color')"><p><span>New</span> Gameboy</p></div>
<div class="sp-template"><p><span>New</span> C64</p></div> <div class="sp-template" onclick="newFromTemplate('Commodore 64')"><p><span>New</span> C64</p></div>
<div class="sp-template"><p><span>New</span> Pico8</p></div> <div class="sp-template" onclick="newFromTemplate('PICO-8')"><p><span>New</span> Pico8</p></div>
<div class="sp-template"><p><span>New</span> 16x16</p></div> <div class="sp-template" onclick="newFromTemplate('',16,16)"><p><span>New</span> 16x16</p></div>
<div class="sp-template"><p><span>New</span> 32x32</p></div> <div class="sp-template" onclick="newFromTemplate('',32,32)"><p><span>New</span> 32x32</p></div>
<div class="sp-template"><p><span>New</span> 64x64</p></div> <div class="sp-template" onclick="newFromTemplate('',64,64)"><p><span>New</span> 64x64</p></div>
<div class="sp-template"><p><span>New</span> 128x128</p></div> <div class="sp-template" onclick="newFromTemplate('',128,128)"><p><span>New</span> 128x128</p></div>
<div class="sp-template"><p><span>New</span> 256x256</p></div> <div class="sp-template" onclick="newFromTemplate('',256,256)"><p><span>New</span> 256x256</p></div>
<div class="sp-template"><p><span>New</span> 512x512</p></div> <div class="sp-template" onclick="newFromTemplate('',512,512)"><p><span>New</span> 512x512</p></div>
</div> </div>
</div> </div>
</div> </div>