pewpewpew!

kaliumxyz · May 7, 2017 · b5be112 · b5be112
1 parent fb42898
commit b5be112
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 41 deletions.
diff --git a/README.md b/README.md
@@ -9,7 +9,7 @@ Just clone the repo or download the files.
 ```
 $ git clone https://github.com/kaliumxyz/asap
 ```
-Then go to the dir and run nmp
+Then go to the dir and run npm
 ```
 $ cd asap
 $ npm

diff --git a/app/index.html b/app/index.html
@@ -11,18 +11,16 @@
     </main>
     <h1>press space or tap the screen</h1>
     <div class='center'>
-    <ul class='options terminal'>
-        <li>
-           <span class='cursor'>b</span>ounds? <span class="option active">y</span>/<span class='option'>n</span>
-        </li>
-        <li>
-            gravity? <span class='option active'>[wiggly]</span>/<span class='option'>[wigglyInverse]</span>/<span class='option'>[regular]</span>
-        </li>
-        <li>
-           collisions? <span class='option'>[boring]</span>/<span class='option active'>[care]</span>
-        </li>
-
-    </ul>
+
+<div class='terminal'>
+<div class='terminal-ghost'></div>
+<div class='options terminal-main'>
+bounds? <span class="option active">y</span>/<span class='option'>n</span>
+gravity? <span class='option active'>[wiggly]</span>/<span class='option'>[wigglyInverse]</span>/<span class='option'>[regular]</span>
+collisions? <span class='option'>[boring]</span>/<span class='option active'>[care]</span>
+
+</div>
+    </div>
     </div>
 
     <canvas width="1000" height="1000">If you can read this, your browser does not support HTML5 canvas.</canvas>

diff --git a/app/load.js b/app/load.js
@@ -4,39 +4,58 @@ const select = selector => document.querySelector(selector)
 
 const selectAll = selector => document.querySelectorAll(selector)
 
+const replaceChar = (string, substring, index) => string.substr(0, index - 1) + substring + string.substr(index)
+
 const loadScript = _ => {
 	let script = document.createElement("script")
-	script.setAttribute("src","main.js")
+	script.setAttribute("src", "main.js")
 	select("head").appendChild(script)
 	select('h1').innerText = "A Simple Aesthetic Particle engine"
-	select('.options').setAttribute('style','display:none;')
+	select('.options').setAttribute('style', 'display:none;')
+	select('.terminal-ghost').remove()
 }
 
 const canvas = select('canvas')
 
 
 window.onresize = _ => {
-    canvas.width = window.innerWidth
-    canvas.height = window.innerHeight
+	canvas.width = window.innerWidth
+	canvas.height = window.innerHeight
+	const terminal = select('.terminal-main')
+	const ghost = select('.terminal-ghost')
+	const match = replaceChar(
+		terminal.innerText,
+		`<span class="cursor">${terminal.innerText[currentPosition]}</span>`,
+		currentPosition
+		)
+	ghost.innerHTML = match
 }
 
 window.onload = window.onresize
 
+let currentPosition = 2
+
 // look I'll fix this later lol.
 const moveCursor = {
 	left: ev => {
-		const terminal = select('.terminal')
-		const match = terminal
-		.innerHTML
-		.replace(/(.)<span class="cursor">(.*?)<\/span>/,'<span class="cursor">$1</span>$2')
-		terminal.innerHTML = match 
+		const terminal = select('.terminal-main')
+		const ghost = select('.terminal-ghost')
+		const match = replaceChar(
+			terminal.innerText,
+			`<span class="cursor">${terminal.innerText[currentPosition]}</span>`,
+			currentPosition--
+			)
+		ghost.innerHTML = match
 	},
 	right: ev => {
-		const terminal = select('.terminal')
-		const match = terminal
-		.innerHTML
-		.replace(/<span class="cursor">(.*?)<\/span>(.)/,'$1<span class="cursor">$2</span>')
-		terminal.innerHTML = match 
+		const terminal = select('.terminal-main')
+		const ghost = select('.terminal-ghost')
+		const match = replaceChar(
+			terminal.innerText,
+			`<span class="cursor">${terminal.innerText[currentPosition]}</span>`,
+			currentPosition++
+			)
+		ghost.innerHTML = match
 	},
 }
 

diff --git a/app/style.css b/app/style.css
@@ -2,7 +2,8 @@ html, body, canvas {
   margin: 0;
   padding: 0;
   overflow: hidden;
-  font-family: 'Roboto Mono', monospace; }
+  font-family: 'Roboto Mono', monospace;
+  background: white; }
 
 @keyframes blink {
   0% {
@@ -25,16 +26,26 @@ h1 {
   user-select: none; }
 
 .center {
+  top: 280px;
   position: fixed;
   width: 100%; }
 
-.options {
-  background: black;
-  color: white;
+.terminal {
   margin: 0 auto;
   padding: 10px;
   width: 540px;
-  user-select: none; }
+  user-select: none;
+  z-index: -1; }
+
+.terminal-main {
+  background: black;
+  color: white;
+  white-space: pre-wrap; }
+
+.terminal-ghost {
+  color: transparent;
+  position: absolute;
+  white-space: pre-wrap; }
 
 .option {
   padding: 0;

diff --git a/assets/style.css b/assets/style.css
@@ -2,7 +2,8 @@ html, body, canvas {
   margin: 0;
   padding: 0;
   overflow: hidden;
-  font-family: 'Roboto Mono', monospace; }
+  font-family: 'Roboto Mono', monospace;
+  background: white; }
 
 @keyframes blink {
   0% {
@@ -25,16 +26,26 @@ h1 {
   user-select: none; }
 
 .center {
+  top: 280px;
   position: fixed;
   width: 100%; }
 
-.options {
-  background: black;
-  color: white;
+.terminal {
   margin: 0 auto;
   padding: 10px;
   width: 540px;
-  user-select: none; }
+  user-select: none;
+  z-index: -1; }
+
+.terminal-main {
+  background: black;
+  color: white;
+  white-space: pre-wrap; }
+
+.terminal-ghost {
+  color: transparent;
+  position: absolute;
+  white-space: pre-wrap; }
 
 .option {
   padding: 0;

diff --git a/assets/style.sass b/assets/style.sass
@@ -3,6 +3,7 @@ html, body, canvas
 	padding: 0
 	overflow: hidden
 	font-family: 'Roboto Mono', monospace
+	background: white
 
 @keyframes blink 
 	0% {background: rgba(255,105,180,0.8)}
@@ -22,17 +23,27 @@ h1
 	user-select: none
 
 .center 
-	top:
+	top: 280px
 	position: fixed
 	width: 100%
 
-.options 
-	background: black
-	color: white
+.terminal
 	margin: 0 auto
 	padding: 10px
 	width: 540px
 	user-select: none
+	z-index: -1
+
+.terminal-main
+	background: black
+	color: white
+	white-space: pre-wrap
+
+
+.terminal-ghost
+	color: transparent 
+	position: absolute
+	white-space: pre-wrap
 
 .option 
 	padding: 0