Start implementing a popup for editing the player's sprite.

Merge pull request #46 from haroldo-ok/player-sprite

Author: haroldo-ok

assets/tinyMapEditor.css

@@ -50,6 +50,7 @@ nav { position: absolute; left: 0; top: 0; margin: 0; width: 250px; min-height:
 #layers li p { margin: 5px; padding: 5px; border: 1px solid #bbb }
 
 .card { border: 1px solid gray; border-radius: 4px; margin: 1em; padding: 0.3em; }
+.hidden { display: none; }
 
 
 /*************************************** Output */

index.html

@@ -41,8 +41,8 @@ <h2>This is a Work-In-Progress online tool for making Sega Master System puzzle
             <li id="options">
                 <label>Map Options</label>
                 <p><label>Tile zoom:</label><input type="text" value="1" maxlength="3" id="tileZoom" /><span>x</span></p>
-                <p><label>Map width:</label><input type="text" value="16" maxlength="3" id="width" disabled /><span>tiles</span></p>
-                <p><label>Map height:</label><input type="text" value="9" maxlength="3" id="height" disabled /><span>tiles</span></p>
+                <p class="hidden"><label>Map width:</label><input type="text" value="16" maxlength="3" id="width" disabled /><span>tiles</span></p>
+                <p class="hidden"><label>Map height:</label><input type="text" value="9" maxlength="3" id="height" disabled /><span>tiles</span></p>
             </li>
             <li id="tiles">
                 <label>Tiles</label>
@@ -55,6 +55,7 @@ <h2>This is a Work-In-Progress online tool for making Sega Master System puzzle
 
                 <p><input id="tileAttrsButton" type="button" value="Edit Tile Attributes" /></p>				
                 <p><input id="tileCombinationsButton" type="button" value="Edit Tile Combinations" /></p>				
+                <p><input id="playerSpriteButton" type="button" value="Edit Player Sprite" /></p>				
             </li>
             <li id="selected">
                 <label>Selected Tile</label>
@@ -87,6 +88,8 @@ <h2>This is a Work-In-Progress online tool for making Sega Master System puzzle
 	</dialog>
 	<dialog id="projectInfoDialog">
 	</dialog>
+	<dialog id="playerSpriteDialog">
+	</dialog>
 
 	<script src="RgbQuant-SMS.js/demo/js/underscore-min.js"></script>
 	<script src="RgbQuant-SMS.js/demo/js/underscore-min.js"></script>

tileEditor.js

@@ -39,6 +39,9 @@ var tinyMapEditor = (function() {
 		tileCombinationsDialog = getById('tileCombinationsDialog'),
 		tileCombinationChoiceDialog = getById('tileCombinationChoiceDialog'),
 
+		playerSpriteButton = getById('playerSpriteButton'),
+		playerSpriteDialog = getById('playerSpriteDialog'),
+
 		projectInfoButton = getById('projectInfoButton'),
 		projectInfoDialog = getById('projectInfoDialog'),
 		loadProjectInput = getById('loadProjectInput'),
@@ -670,6 +673,17 @@ var tinyMapEditor = (function() {
 
 			populateModalDialog(tileCombinationsDialog, 'Tile Combinations', table);
 		},
+		
+		showPlayerSpritePopup : function() {
+			const { h, newTr, newTd, newTh, newInput, newDataCheckbox, populateModalDialog } = DomUtil;
+			
+			populateModalDialog(playerSpriteDialog, 'Player Sprite',
+				h('label', {},
+					'Player sprite to load:',
+					newInput('file', { accept: 'image/*' })
+				)
+			);
+		},
 
 		prepareProjectInfoStructure : function() {
 			if (!projectInfo) projectInfo = {};
@@ -835,6 +849,7 @@ var tinyMapEditor = (function() {
 
 			tileAttrsButton.addEventListener('click', () => _this.showTileAttrsPopup());			
 			tileCombinationsButton.addEventListener('click', () => _this.showTileCombinationsPopup());
+			playerSpriteButton.addEventListener('click', () => _this.showPlayerSpritePopup());
 
 			/**
 			 * Map list events.