v1.5.1

b3nd3r-ssbm · Aug 14, 2020 · 2cec426 · 2cec426
1 parent 9133561
commit 2cec426
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 28 deletions.
diff --git a/index.html b/index.html
@@ -1,23 +1,44 @@
 <!DOCTYPE html>
 <html>
 	<head>
-		<title>Slippi Light v1.5.0</title>
+		<title>Slippi Light v1.5.1</title>
 		<meta charset='utf-8'>
+		<style>
+			body{background-color:#1d1a1a;color:white;justify-content:center;}
+			.body{position:relative;display:flex;justify-content:center;}
+			button{background-color:#4caf50 !important; border:none;font-size:16px;}
+			button:hover{background-color:#11ff11 !important;}
+			.button{background-color:#4caf50 !important; border:none;font-size:18px !important;color:#000000 !important;display:inline-block;padding:4px 4px;}
+			.button:hover{background-color:#11ff11 !important;}
+			input[type="file"] {
+				display:none;
+			}
+			a:link{
+				color:#ffffff !important;
+			}
+			a:visited{
+				color:#aaaaaa !important;
+			}
+		</style>
 	</head>
 	<body>
 		<script src="./p5.min.js"></script>
 		<script src="./main.js"></script>
+		<div class="body">
 		<div id="init">
 			<button onclick="showButtons()">Select Replay</button>
 		</div>
 		<div id="buttonPage" style="display:none">
-			<label for="fileIn">Choose your file</label>
-			<input type="file" id="fileIn" accept="slp">
+			<div class="buttonWrap" style="position:relative">
+				<label for="fileIn"><span class="button">Choose your file</span><span id="slpName">No File Selected</span></label>
+				<input type="file" id="fileIn" accept=".slp" onchange="updateFile()">
+			</div><br><br>
 			<button onclick="process()">Submit</button>
 		</div>
 		<div id="unhide" style="display:none">
 			<button id="pause" onclick="playPause()">Play/Pause</button>
-			<button onclick="options()">Options</button>
+			<button onclick="options()">Show/Hide Options</button>
+			<a href="https://github.com/b3nd3r-ssbm/slippi-light/blob/master/actionStateReference.csv">What do the action states mean?</a>
 			<div id="options" style="display:none">
 				<button onclick="restart()">Play another slp file</button>
 				<button onclick="frameAdvance()">Forward one frame</button>
@@ -27,11 +48,10 @@
 				<input type="number" id="speed" placeholder="1.0" step="0.25" onchange="updateSpeed()" min="0.25" max="4.0">
 				<button onclick="comboPage()">Generate/View Combos</button>
 				<button onclick="togglePastAct()">Show/Hide Past Action States</button>
-				<a href="https://github.com/b3nd3r-ssbm/slippi-light/blob/master/actionStateReference.csv">What do the action states mean?</a>
 			</div>
-				<div id="pastActions" style="display:flex;flex-direction:row;">
-					<div id="p1Act" style="display:flex;flex-direction:column;height:100px;width:180px;border:1px solid #4e4e4e;font:16px Arial, Serif;overflow:auto;">P1 Actions:<br><span id="p1ActText"></span></div>
-					<div id="p2Act" style="display:flex;flex-direction:column;height:100px;width:180px;border:1px solid #4e4e4e;font:16px Arial, Serif;overflow:auto;">P2 Actions:<br><span id="p2ActText"></span></div>
+				<div id="pastActions" style="display:none;flex-direction:row;">
+					<div id="p1Act" style="height:100px;width:180px;border:1px solid #4e4e4e;font:16px Arial, Serif;overflow:auto;">P1 Actions:<br><span id="p1ActText"></span></div>
+					<div id="p2Act" style="height:100px;width:180px;border:1px solid #4e4e4e;font:16px Arial, Serif;overflow:auto;">P2 Actions:<br><span id="p2ActText"></span></div>
 				</div>
 		</div>
 		<div id="combos" style="display:none">
@@ -52,6 +72,7 @@
 			<select id="comboDropdown"></select><br>
 			<button onclick="submitCombos()">View selected Combo</button>
 		</div>
-		<button id="play" onclick="play()" style="display:none">Play</button>
+		</div>
+		<div id="body"></div>
 	</body>
 </html>
diff --git a/main.js b/main.js
@@ -44,9 +44,10 @@ var dropdownIndex=[];
 var generated=false;
 var p1Port=0;
 var p2Port=1;
-var pastActShow=true
+var pastActShow=false;
 var optionsUp=false;
 var slpFileText;
+var myCanvas;
 //autoUpdater.checkForUpdatesAndNotify();
 if(app!== undefined){
 	app.on('ready',function(){
@@ -72,9 +73,11 @@ if(app!== undefined){
 
 function setup(){
 	loop();
-	createCanvas(0,0);
-	sel=createSelect();
-	sel.style('display','none');
+	myCanvas=createCanvas(0,0);
+	myCanvas.parent("body");
+}
+function updateFile(){
+	document.getElementById("slpName").textContent=document.getElementById("fileIn").files[0].name;
 }
 function options(){
 	const hideOpt=select('#options');
@@ -109,8 +112,10 @@ function updateDir(){
 	});
 }
 function newAct(action1,action2){
-	document.getElementById("p1ActText").textContent=action1+" "+document.getElementById("p1ActText").textContent;
-	document.getElementById("p2ActText").textContent=action2+" "+document.getElementById("p2ActText").textContent;
+	if(playing){
+		document.getElementById("p1ActText").textContent=action1+" "+document.getElementById("p1ActText").textContent;
+		document.getElementById("p2ActText").textContent=action2+" "+document.getElementById("p2ActText").textContent;
+	}
 }
 function toggleHitbox(){
 	if(showHitbox){
@@ -127,17 +132,16 @@ function updateSpeed(){
 function restartSelection(){
 	var showStuff=select('#init');
 	showStuff.style('display','block');
-	sel.style('display','block');
 }
 function selectionPage(){
 	var showStuff=select('#init');
 	showStuff.style('display','block');
-	sel.style('display','block');
 }
 function showButtons(){
 	var selection=select('#buttonPage');
 	selection.style('display','block');
-	selectionPage();
+	var sel=select('#init');
+	sel.style('display','none');
 }
 function makeOption(textStr){
 	var thisSelect=document.getElementById("comboDropdown");
@@ -163,7 +167,6 @@ function process(){
 	});
 }
 function innerProcess(){
-	sel.style('display','none');
 	game = new SlippiGame(Buffer.from(slpFileText));
 	frames=game.getFrames();
 	settings=game.getSettings();
@@ -520,17 +523,9 @@ function frameAdvance(){
 }
 function pause(){
 	playing=false;
-	var hideIt=select('#pause');
-	hideIt.style('display','none');
-	var showIt=select('#play');
-	showIt.style('display','block');
 }
 function play(){
 	playing=true;
-	var hideIt=select('#play');
-	hideIt.style('display','none');
-	var showIt=select('#pause');
-	showIt.style('display','block');
 }
 function keyTyped(){
 	if(key===' '){
@@ -766,6 +761,14 @@ function drawHitbox(player,side){
 		hitbox(side,p2X,p2Y,frames[currentFrame].players[p2Port].post.facingDirection);
 	}
 }
+function playPause(){
+	if(playing){
+		pause();
+	}
+	else{
+		play();
+	}
+}
 function hitbox(side,startX,startY,facing){
 	fill(255,170,170);
 	noStroke();

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "slippi-light",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "main": "main.js",
   "author": "b3nd3r_ssbm",
   "description": "GPL-3.0-or-later",