assets/css/style.css

@@ -1,5 +1,6 @@
 body {
 	background-color: #E7D5B1;
+	/* background-color: #8EA7C8; */
 	background-image: url("https://www.transparenttextures.com/patterns/asfalt-dark.png");
 	font-family: monospace;
 	font-size: 16px;
@@ -103,18 +104,6 @@ canvas {
 	padding: 20px;
 }
 
-#contact, #maomao, #help {
-	background: #a3acbe;
-	position: relative;
-	height: inherit;
-	box-sizing: border-box;
-	font-family: monospace;
-	font-size: 20px;
-	padding: 10px;
-	overflow: auto!important;
-}
-
-
 .prompt-container {
   display: flex;
   align-items: center;
@@ -166,10 +155,6 @@ canvas {
 	font-size: 20px;
 }
 
-.audio-controls:hover {
-	cursor: pointer;
-}
-
 #album-thumb img {
 	border: solid 3px #dbe0e7;
 	margin-top: 10px;
@@ -187,7 +172,6 @@ canvas {
 
 #portfolio-container {
 	background: #a3acbe;
-	font-size: 10px;
 }
 
 .games-inner-container {
@@ -205,31 +189,6 @@ canvas {
 	height: auto;
 }
 
-.portfolio-item {
-	display: flex;
-	position: relative;
-	box-sizing: border-box;
-	font-family: monospace;
-	font-size: 17px;
-	padding: 10px;
-	overflow: auto!important;
-}
-
-#portfolio img {
-	width: 200px;
-	height: auto;
-}
-
-.on-screen-controller-button:hover {
-	background-color: 
-}
-#portfolio a {
-	text-decoration: none;
-}
-
-#portfolio h3 {
-	margin: 0px;
-}
 .games-inner-container h3 {
 	margin: 0px;
 	width: 100%;
@@ -278,10 +237,10 @@ tr:nth-child(even) {
 }
 
 @keyframes glow {
-  0% { box-shadow: 0 0 -28px 13px #00ff00; }
-  40% { box-shadow: 0 0 15px 13px #00ff00; }
-  60% { box-shadow: 0 0 15px 13px #00ff00; }
-  100% { box-shadow: 0 0 -28px 13px #00ff00; }
+  0% { box-shadow: 0 0 -28px 13px #ff0000; }
+  40% { box-shadow: 0 0 15px 13px #ff0000; }
+  60% { box-shadow: 0 0 15px 13px #ff0000; }
+  100% { box-shadow: 0 0 -28px 13px #ff0000; }
 }
 
 .indicator {
@@ -319,79 +278,3 @@ tr:nth-child(even) {
 	top: 570px;
 	left: 60px;
 }
-
-.download-resume {
-	font-family: monospace;
-	margin: 10px;
-	position: absolute;
-	bottom: 0px;
-	right: 15px;
-}
-
-.download-resume button {
-	font-size: 15px;
-	font-family: monospace;
-	border-radius: 0%;
-	border-top: white;
-	border-left: white;
-	margin-right: 3px;
-}
-
-.nav-bar {
-	margin-top: 5px;
-}
-
-button {
-	background-color: #ededed;
-	font-size: 16.9px;
-	font-family: monospace;
-	border-width: 3px;
-	border-radius: 0%;
-	border-top: white;
-	border-left: white;
-	margin-right: 2px;
-}
-
-button:hover {
-	background-color: #c3f6c3;
-	cursor: pointer;
-}
-
-.controls {
-	display: none;
-	opacity: 65%;
-	position: absolute;
-	bottom: 0px;
-	left: 0px
-}
-
-.click-map {
-	position: absolute;
-	top: 0px;
-	left: 0px;
-}
-
-#help-button {
-	position: absolute;
-	bottom: -28px;
-	right: 0px;
-}
-
-#on-screen-controller-button {
-	background-color: #ededed;
-	font-size: 16.9px;
-	font-family: monospace;
-	border-width: 3px;
-	border-radius: 0%;
-	border-top: white;
-	border-left: white;
-	margin-right: 2px;
-	position: absolute;
-	bottom: -28px;
-	right: 100px;
-}
-
-#on-screen-controller-button:hover {
-	background-color: #c3f6c3;
-	cursor: pointer;
-}

assets/js/app.js

@@ -1,11 +1,8 @@
+var _listener
 var TO_RADIANS = Math.PI/180; 
 
-var _listener
-
-var controlsMode = false
 var dialogMode = true
 var terminalMode = false
-
 var spriteSize = 16 * 5
 var spriteMap = new Image()
 spriteMap.src = './assets/img/sprites/sprite-map-1.png'
@@ -13,13 +10,12 @@ spriteMap.src = './assets/img/sprites/sprite-map-1.png'
 var canvasOffset = 9
 var canvas = document.getElementById("canvas")
 var ctx = canvas.getContext("2d")
+
 canvas.width = spriteSize * canvasOffset
 canvas.height = canvas.width
 
 var audio = null
-var contact = new Contact()
-var controls = new Controls()
-var maomao = new Maomao()
+
 var terminal = new Terminal()
 var games = new Games()
 var music = new Music()
@@ -27,15 +23,13 @@ var dialog = new Dialog()
 var resume = new Resume()
 var portfolio = new Portfolio()
 var indicator = new Indicator()
-var player = new Player(5, 4, 'down')
+var player = new Player(1, 1, 'down')
 
 window.addEventListener("resize", function() {
 	terminal.resize();
 	games.resize();
 })
 
-
-
 function renderRoom() {
 	// render wall
 	for (let i = 0; i < canvasOffset; i++) {
@@ -133,40 +127,20 @@ function renderRoom() {
 	new Renderer(3, 2, 0, 7)
 	new Renderer(3, 3, 0, 8)
 	new Renderer(4, 2, 1, 8)
+
 }
 
 dialog.startIntroDialogSequence()
 
-function toggleController() {
-	var enterIndicatorElem = document.getElementById('enter-indicator')
-	if (!controlsMode) {
-		controlsMode = true
-		enterIndicatorElem.innerHTML = 'TOUCH/CLICK ANYWHERE'
-	} else {
-		controlsMode = false
-		enterIndicatorElem.innerHTML = 'PRESS ENTER'
-	}
-}
-
-if (window.innerWidth <= 479) {
-	toggleController()
-}
-
 function gameLoop() {
-	if (!dialogMode && controlsMode) {
-		dialog.controlsElem.style.display = 'block'
-	} else if (!controlsMode || dialogMode) {
-		dialog.controlsElem.style.display = 'none'
-	}
-
 	renderRoom()
 	document.removeEventListener("keydown", _listener);
 	if (terminalMode) {
 		terminal.getKeystroke();
 	} else if (dialogMode) {
-		this.getKeystroke(ignoreEnter=true);
+		// pass
 	} else {
-		this.getKeystroke()
+		this.getKeystroke();
 	}
 }
 

assets/js/constants.js

@@ -11,25 +11,6 @@ var boundaries = [
 	[6, 5]
 ]
 
-var boundaryMap = {
-	"23": [2, 4],
-	"33": [3, 4],
-	"43": [4, 4],
-	"53": [5, 4],
-	//guitar
-	"17": [1, 6],
-	"07": [0, 6],
-	//maomao
-	"65": [6, 4]
-}
-
-var maomaoInteractionZones = [
-	[6, 4],
-	[7, 5],
-	[5, 5],
-	[6, 6]
-]
-
 var computerInteractionZones = [
 	[2, 4],
 	[3, 4]

assets/js/contact.js

@@ -1,5 +0,0 @@
-class Contact extends Window {
-	constructor() {
-		super('contact')
-	}
-}

assets/js/controls.js

@@ -1,5 +0,0 @@
-class Controls extends Window {
-	constructor() {
-		super('help')
-	}
-}

assets/js/dialog.js

@@ -2,15 +2,14 @@ class Dialog {
 	constructor() {
 		this.dialogElem = document.getElementById('dialog')
 		this.dialogTextElem = document.getElementById('dialog-text')
-		this.controlsElem = document.getElementById('controls')
 		
 		this.currentDialogIndex = 0
-		this.dialogOrder = ['resume']
+		this.dialogOrder = ['intro', 'controls', 'resume']
 
 		this.dialogMap = {
-			'resume': 'Hello! Welcome to my Interactive Portfolio! <br><br> <h3 style="margin:0px;">Controls:</h3> <b>Enter:</b> Close this Dialog, Interact with things on screen<br><b>Arrow Keys:</b> Movement (WASD or VIM keys also work)<br><b>Click:</b> Click anywhere to move or interact with what you see.<br><br> Walk over to my resume and click <b>ENTER</b>',
+			'intro': 'Hello! Welcome to my Interactive Portfolio!<br>Press <b>ENTER</b> to continue, or click the links below for quick access to my Resume & Projects.',
 			'controls': 'Use <b>ARROW KEYS</b> or <b>WASD</b> or <b>VIM</b> keys (HJKL) to move around. <br>Press the <b>ENTER</b> key to interact with what you see on the screen.<br><br>',
-			// 'resume': 'Walk over to the <b>DESK</b> and click on my <b>RESUME</b>.<br> The <b>RESUME</b> is marked by the flashing red indicator light.<br><br>',
+			'resume': 'Walk over to the <b>DESK</b> and click on my <b>RESUME</b>.<br> The <b>RESUME</b> is marked by the flashing red indicator light.<br><br>',
 			'portfolio': 'Thanks for looking at my Resume!<br>Check out my <b>PORTFOLIO</b> by clicking on the <b>BOOKSHELF</b>.<br>',
 			'other': 'Now that you have looked through my Porfolio, go explore the rest of the site! <ul><li>Click on the <b>GUITAR</b> to hear my music.</li><li>Mess around on the Terminal on the <b>COMPUTER</b></li><li>And before you leave, go to the <b>TV</b> and play some of the games I have made!</li></ul> Thanks for stopping by!'
 		}
@@ -20,18 +19,14 @@ class Dialog {
 
 	dialogListener(event) {
 		console.log(event)
-			if (event.key === 'Enter' || event.type === 'touchstart') {
+			if (event.key === 'Enter') {
 				event.currentTarget.self.startIntroDialogSequence()
 			}
 	}
-
-	hide() {
-		this.dialogElem.style.display = 'none'
-	}
 	
 	startIntroDialogSequence() {
 		document.removeEventListener("keydown", this.dialogListener);
-		document.removeEventListener('touchstart', this.dialogListener)
+		console.log('hit')
 		if (this.currentDialogIndex > this.dialogOrder.length - 1) {
 			this.dialogElem.style.display = 'none'
 			dialogMode = false
@@ -56,8 +51,6 @@ class Dialog {
 
 		var self = this
 		document.addEventListener('keydown', this.dialogListener)
-		document.addEventListener('touchstart', this.dialogListener)
-
 		document.self = self
 	}
 

assets/js/games.js

@@ -6,4 +6,5 @@ class Games extends Window {
 	handleDialog() {
 		indicator.hide('tv')
 	}
+
 }

assets/js/indicator.js

@@ -22,10 +22,12 @@ class Indicator {
 	}
 
 	show(indicatorName) {
+		console.log(indicatorName)
 		this.indicatorMap[indicatorName].style.display = 'block'
 	}
 
 	hide(indicatorName) {
 		this.indicatorMap[indicatorName].style.display = 'none'
 	}
+
 }

assets/js/keystroke.js

@@ -1,4 +1,4 @@
-function getKeystroke(ignoreEnter=false) {
+function getKeystroke() {
 	_listener = function (event) {
 		if (
 			["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].indexOf(
@@ -8,55 +8,57 @@ function getKeystroke(ignoreEnter=false) {
 			event.preventDefault();
 		}
 
-		if (['h', 'a', 'ArrowLeft'].includes(event.key)) {
+		if (event.key === "h" || event.key === "a" || event.key === "ArrowLeft") {
 			player.move('left')
-		} else if (['j', 's', 'ArrowDown'].includes(event.key)) {
+		} else if (
+			event.key === "j" ||
+			event.key === "s" ||
+			event.key === "ArrowDown"
+		) {
 			player.move('down')
-		} else if (['k', 'w', 'ArrowUp'].includes(event.key)) {
+		} else if (
+			event.key === "k" ||
+			event.key === "w" ||
+			event.key === "ArrowUp"
+		) {
 			player.move('up')
-		} else if (['l', 'd', 'ArrowRight'].includes(event.key)) {
+		} else if (
+			event.key === "l" ||
+			event.key === "d" ||
+			event.key === "ArrowRight"
+		) {
 			player.move('right')
 		} else if (
 			event.key === "Enter" &&
-			!terminal.active &&
-			!dialogMode &&
-			!ignoreEnter
+			!terminal.active
 		) {
-			onEnter();
+			var playerPosition = [player.canvasX, player.canvasY]
+			if (player.direction === 'up') {
+				if (computerInteractionZones.some(a => playerPosition.every((v, i) => v === a[i]))) {
+					terminal.show();
+				}
+				if (gamesInteractionZones.some(a => playerPosition.every((v, i) => v === a[i]))) {
+					games.show();
+				}
+				if (portfolioInteractionZones.some(a => playerPosition.every((v, i) => v === a[i]))) {
+					portfolio.show();
+				}
+			}
+
+			if (player.direction === 'down' || player.direction === 'left') {
+				if (musicInteractionZones.some(a => playerPosition.every((v, i) => v === a[i]))) {
+					music.show();
+				}
+			}
+
+			if (player.direction === 'down' || player.direction === 'up') {
+				if (resumeInteractionZones.some(a => playerPosition.every((v, i) => v === a[i]))) {
+					indicator.hide('resume');
+					indicator.resumeIndicatorShown = true;
+					resume.show()
+				}
+			}
 		}
 	};
 	document.addEventListener("keydown", _listener);
 }
-
-function onEnter() {
-	var playerPosition = [player.canvasX, player.canvasY]
-	if (player.direction === 'up') {
-		if (computerInteractionZones.some(a => playerPosition.every((v, i) => v === a[i]))) {
-			terminal.show();
-		}
-		if (gamesInteractionZones.some(a => playerPosition.every((v, i) => v === a[i]))) {
-			games.show();
-		}
-		if (portfolioInteractionZones.some(a => playerPosition.every((v, i) => v === a[i]))) {
-			portfolio.show();
-		}
-	}
-
-	if (player.direction === 'down' || player.direction === 'left') {
-		if (musicInteractionZones.some(a => playerPosition.every((v, i) => v === a[i]))) {
-			music.show();
-		}
-	}
-
-		if (maomaoInteractionZones.some(a => playerPosition.every((v, i) => v === a[i]))) {
-			maomao.show();
-		}
-
-	if (player.direction === 'down' || player.direction === 'up') {
-		if (resumeInteractionZones.some(a => playerPosition.every((v, i) => v === a[i]))) {
-			indicator.hide('resume');
-			indicator.resumeIndicatorShown = true;
-			resume.show()
-		}
-	}
-}

assets/js/maomao.js

@@ -1,5 +0,0 @@
-class Maomao extends Window {
-	constructor() {
-		super('maomao')
-	}
-}

assets/js/music.js

@@ -13,7 +13,7 @@ class Music extends Window {
 			'Buranko',
 			'New Jersey Again',
 			'Asteroids'
-		]
+	]
 
 		this.songMap = {
 			'Down Polypore Wood': {

assets/js/pathfinder.js

@@ -1,238 +0,0 @@
-const timer = ms => new Promise(res => setTimeout(res, ms))
-
-var cols = 9
-var rows = 9
-
-let grid = new Array(cols); 
-
-let openSet = []; 
-let closedSet = []; 
-
-let start; 
-let end; 
-let path = [];
-
-
-function generateClickMap() {
-	var clickMap = document.getElementById('click-map')
-	for (let i = 0; i < rows; i++) {
-		for (let j = 0; j < cols; j++) {
-			var area = document.createElement('area')
-			area.shape = 'rect'
-			area.href = '#'
-			area.addEventListener('click', function (event) {
-				if (j > 7) {
-					pathfind(i, j - 1)
-				} else {
-					pathfind(i, j)
-				}
-			})
-			area.coords = `${i * spriteSize},${j * spriteSize},${(i + 1) * spriteSize},${(j + 1) * spriteSize}`
-			clickMap.appendChild(area)
-		}
-	}
-}
-
-generateClickMap()
-
-function heuristic(position0, position1) {
-	let d1 = Math.abs(position1.x - position0.x);
-	let d2 = Math.abs(position1.y - position0.y);
-
-	return d1 + d2;
-}
-
-
-class GridPoint {
-	constructor(x, y) {
-		this.x = x; 
-		this.y = y; 
-		this.f = 0; 
-		this.g = 0; 
-		this.h = 0; 
-		this.neighbors = []; 
-		this.parent = undefined; 
-	}
-
-	updateNeighbors(grid) {
-		let i = this.x;
-		let j = this.y;
-		var tmpNeighbor;
-		if (i < cols - 1) {
-			tmpNeighbor = grid[i + 1][j]
-			if (!player.isBoundary([tmpNeighbor.x, tmpNeighbor.y])) {
-				this.neighbors.push(tmpNeighbor);
-			}
-		}
-		if (i > 0) {
-			tmpNeighbor = grid[i - 1][j]
-			if (!player.isBoundary([tmpNeighbor.x, tmpNeighbor.y])) {
-				this.neighbors.push(tmpNeighbor);
-			}
-		}
-		if (j < rows - 1) {
-			tmpNeighbor = grid[i][j + 1]
-			if (!player.isBoundary([tmpNeighbor.x, tmpNeighbor.y])) {
-				this.neighbors.push(tmpNeighbor);
-			}
-		}
-		if (j > 0) {
-			tmpNeighbor = grid[i][j - 1]
-			if (!player.isBoundary([tmpNeighbor.x, tmpNeighbor.y])) {
-				this.neighbors.push(tmpNeighbor);
-			}
-		}
-	};
-}
-
-
-function init(destX, destY) {
-	
-	for (let i = 0; i < cols; i++) {
-		grid[i] = new Array(rows);
-	}
-
-	for (let i = 0; i < cols; i++) {
-		for (let j = 0; j < rows; j++) {
-			grid[i][j] = new GridPoint(i, j);
-		}
-	}
-
-	for (let i = 0; i < cols; i++) {
-		for (let j = 0; j < rows; j++) {
-			grid[i][j].updateNeighbors(grid);
-		}
-	}
-
-	start = grid[player.canvasX][player.canvasY];
-	end = grid[destX][destY]
-
-	openSet.push(start);
-}
-
-
-function search(destX, destY) {
-	path = [];
-	init(destX, destY);
-	while (openSet.length > 0) {
-		
-		let lowestIndex = 0;
-		for (let i = 0; i < openSet.length; i++) {
-			if (openSet[i].f < openSet[lowestIndex].f) {
-				lowestIndex = i;
-			}
-		}
-		let current = openSet[lowestIndex];
-
-		if (current === end) {
-			let temp = current;
-			path.push(temp);
-			while (temp.parent) {
-				path.push(temp.parent);
-				temp = temp.parent;
-			}
-
-			return path.reverse()
-		}
-
-		
-		openSet.splice(lowestIndex, 1);
-		
-		closedSet.push(current);
-
-		let neighbors = current.neighbors;
-
-		for (let i = 0; i < neighbors.length; i++) {
-			let neighbor = neighbors[i];
-
-			if (!closedSet.includes(neighbor)) {
-				let possibleG = current.g + 1;
-
-				if (!openSet.includes(neighbor)) {
-					openSet.push(neighbor);
-				} else if (possibleG >= neighbor.g) {
-					continue;
-				}
-
-				neighbor.g = possibleG;
-				neighbor.h = heuristic(neighbor, end);
-				neighbor.f = neighbor.g + neighbor.h;
-				neighbor.parent = current;
-			}
-		}
-	}
-
-	return [];
-}
-
-async function pathfind(destX, destY) {
-
-	var isBoundary = player.isBoundary([destX, destY])
-
-	if (isBoundary) {
-		var tmpDestX = destX
-		var tmpDestY = destY
-		var newDest = boundaryMap[String(destX) + String(destY)]
-		destX = newDest[0]
-		destY = newDest[1]
-	}
-
-	var newPath = search(destX, destY)
-	for (let i = 0; i < newPath.length; i++) {
-		changeDir(newPath[i].x, newPath[i].y)
-
-		player.canvasX = newPath[i].x
-		player.canvasY = newPath[i].y
-
-		if (isBoundary && i === newPath.length - 1) {
-			changeDir(tmpDestX, tmpDestY)
-		}
-		await timer(100)
-	}
-	
-	if (destX === 0 && destY === 0 || destX === 1 && destY === 0) {
-		player.direction = 'up'
-		portfolio.show()
-	}
-
-	if (destX === 7 && destY === 0 || destX === 8 && destY === 0) {
-		player.direction = 'up'
-		games.show()
-	}
-
-	if (destX === 2 && destY === 4 || destX === 3 && destY === 4) {
-		player.direction = 'up'
-		terminal.show()
-	}
-
-	if (destX === 4 && destY === 4) {
-		player.direction = 'up'
-		resume.show()
-	}
-
-	if (destX === 0 && destY === 6 || destX === 1 && destY === 6) {
-		player.direction = 'down'
-		music.show()
-	}
-
-	if (destX === 6 && destY === 6) {
-		player.direction = 'up'
-		maomao.show()
-	}
-
-	dialog.hide()
-}
-
-function changeDir(destX, destY) {
-		if (destX > player.canvasX) {
-			player.direction = 'right'
-		} else if (destX < player.canvasX) {
-			player.direction = 'left'
-		}
-
-		if (destY > player.canvasY) {
-			player.direction = 'down'
-		} else if (destY < player.canvasY) {
-			player.direction = 'up'
-		}
-}

assets/js/player.js

@@ -29,21 +29,18 @@ class Player {
 				this.canvasX -= 1;
 			}
 		}
-
 		if (direction === 'right' && this.canvasX + 1 < canvas.width/spriteSize) {
 			nextPosition = [this.canvasX + 1, this.canvasY]
 			if (!this.isBoundary(nextPosition)) {
 				this.canvasX += 1;
 			}
 		}
-
 		if (direction === 'up' && this.canvasY - 1 >= 0) {
 			nextPosition = [this.canvasX, this.canvasY - 1]
 			if (!this.isBoundary(nextPosition)) {
 				this.canvasY -= 1;
 			}
 		} 
-
 		if (direction === 'down' && this.canvasY + 2 < canvas.height/spriteSize){
 			nextPosition = [this.canvasX, this.canvasY + 1]
 			if (!this.isBoundary(nextPosition)) {

assets/js/portfolio.js

@@ -4,9 +4,8 @@ class Portfolio extends Window {
 	}
 
 	handleDialog() {
-		indicator.hide('portfolio')
-		indicator.portfolioIndicatorShown = true;
 		if (!indicator.computerIndicatorShown) {
+			indicator.hide('portfolio')
 			dialog.display('other')
 
 			indicator.computerIndicatorShown = true;

assets/js/terminal.js

@@ -23,16 +23,9 @@ class Terminal {
 			}
 		}
 		terminalMode = true;
-
-		var self = this;
-		document.addEventListener('keydown', function(event) {
-			if (event.key === 'Escape') {
-				self.hide()
-			}
-		})
 	}
-
-	hide() {
+	
+	hide () {
 		this.terminalElem.style.display = "none"
 		this.terminalContainerElem.style.display = "none"
 		terminalMode = false;
@@ -59,7 +52,7 @@ class Terminal {
 		prompt.addEventListener("keypress", function(event) {
 
 			if (event.key === "Enter") {
-				if (terminalMode && this.value !== '') {
+				if (terminalMode && this.value !== ''){
 					event.preventDefault();
 					this.disabled = true;
 					self.handlePrompt(this.value);
@@ -102,17 +95,12 @@ class Terminal {
 		if (promptText === 'help') {
 			returnText = `Documented Commands:<br>
 			========================================<br>
-			help &nbsp&nbsp&nbsp&nbsp&nbspShows the help screen<br>
-			about &nbsp&nbsp&nbsp&nbspProvides background of the terminal<br>
-			clear &nbsp&nbsp&nbsp&nbspClears the terminal<br>
-			echo &nbsp&nbsp&nbsp&nbsp&nbspDisplay a line of text<br>
-			exit &nbsp&nbsp&nbsp&nbsp&nbspExits the terminal<br>
-			history &nbsp&nbspPrints command history<br>
-			resume &nbsp&nbsp&nbspDisplays Resume<br>
-			portfolio Displays Portfolio<br>
-			games &nbsp&nbsp&nbsp&nbspDisplays Games<br>
-			music &nbsp&nbsp&nbsp&nbspDisplays Music<br>
-			contact &nbsp&nbspDisplays Contact Info<br>
+			help &nbsp&nbsp&nbsp&nbspShows the help screen<br>
+			about &nbsp&nbsp&nbspProvides background of the terminal<br>
+			clear &nbsp&nbsp&nbspClears the terminal<br>
+			echo &nbsp&nbsp&nbsp&nbspDisplay a line of text<br>
+			exit &nbsp&nbsp&nbsp&nbspExits the terminal<br>
+			history &nbspPrints command history<br>
 			<br>
 			Terminal Functionality:<br>
 			========================================<br>
@@ -126,29 +114,9 @@ class Terminal {
 			promptText = promptText.replaceAll('"', '')
 			promptText = promptText.split(' ').slice(1)
 			returnText = promptText.join(' ')
-
-		} else if (promptText == 'portfolio') {
-			portfolio.show(true)
-			returnText = 'Loading Portfolio...'
-
-		} else if (promptText == 'resume') {
-			resume.show(true)
-			returnText = 'Loading Resume...'
-
-		} else if (promptText == 'music') {
-			music.show(true)
-			returnText = 'Loading Music...'
-
-		} else if (promptText == 'games') {
-			games.show(true)
-			returnText = 'Loading Games...'
-
-		} else if (promptText == 'contact') {
-			returnText = 'EMAIL: me@domdit.com<br>XMPP: domdit@xmpp.jp'
-
 		} else if (promptText === 'history') {
 
-			returnText = this.commands.join('<br>')
+		returnText = this.commands.join('<br>')
 
 		} else if (promptText == 'exit') {
 			this.hide()
@@ -164,6 +132,7 @@ class Terminal {
 
 		} else {
 			returnText = 'Unkown command, please type "help" for options'
+
 		}
 
 		if (returnText) {
@@ -182,7 +151,8 @@ class Terminal {
 
 	getKeystroke() {
 		var self = this
-		_listener = function(event) {
+		_listener = function (event) {
+			console.log(event.code)
 			if (
 				["ArrowUp", "ArrowDown", "ControlLeft"].indexOf(event.code,) > -1
 			) {
@@ -192,7 +162,7 @@ class Terminal {
 			if (event.ctrlKey && event.key === 'd') {
 				event.preventDefault();
 			}
-
+			
 			if (event.key === "ArrowUp") {
 				if (self.commands.length > 0) {
 					var nextCommandPosition = self.commandPosition - 1

assets/js/window.js

@@ -4,18 +4,9 @@ class Window {
 		this.innerContainer = document.getElementById(id)
 	}
 
-	show(fromTerminal=false) {
+	show() {
 		this.resize()
 		this.container.style.display = 'block'
-		var self = this;
-		document.addEventListener('keydown', function(event) {
-			if (event.key === 'Escape') {
-				self.hide()
-				if (fromTerminal) {
-					terminal.show()
-				}
-			}
-		})
 	}
 
 	hide() {

index.html

@@ -1,3 +1,4 @@
+
 <!DOCTYPE html>
 <html lang="en">
   <head>
@@ -13,17 +14,13 @@
 		<script type="text/javascript" src="./assets/js/window.js" defer></script>
 		<script type="text/javascript" src="./assets/js/terminal.js" defer></script>
 		<script type="text/javascript" src="./assets/js/games.js" defer></script>
-		<script type="text/javascript" src="./assets/js/maomao.js" defer></script>
 		<script type="text/javascript" src="./assets/js/music.js" defer></script>
 		<script type="text/javascript" src="./assets/js/resume.js" defer></script>
 		<script type="text/javascript" src="./assets/js/portfolio.js" defer></script>
-		<script type="text/javascript" src="./assets/js/contact.js" defer></script>
-		<script type="text/javascript" src="./assets/js/controls.js" defer></script>
 		<script type="text/javascript" src="./assets/js/dialog.js" defer></script>
 		<script type="text/javascript" src="./assets/js/indicator.js" defer></script>
 		<script type="text/javascript" src="./assets/js/keystroke.js" defer></script>
 		<script type="text/javascript" src="./assets/js/app.js" defer></script>
-		<script type="text/javascript" src="./assets/js/pathfinder.js" defer></script>
   </head>
 
   <body>
@@ -32,98 +29,19 @@
 				<h1 style="margin-bottom: -3px;">Dominic DiTaranto</h1>
 				Software Developer & Architect
 			</div>
-			
-			<div class="container" style="margin-bottom: 4px;">
-				<div class="nav-bar">
-					<center>
-						<button onclick="contact.hide(); resume.hide(); games.hide(); portfolio.show(); dialog.hide()">💼 View Portfolio</button>
-						<button onclick="contact.hide(); portfolio.hide(); games.hide(); resume.show();dialog.hide();">📄 Download Resume</button>
-						<button onclick="resume.hide(); games.hide(); portfolio.hide(); contact.show(); dialog.hide();">📧 Contact Me</button>
-						<button onclick="contact.hide(); resume.hide(); portfolio.hide(); games.show(); dialog.hide()">🕹️ Play Games</button>
-					</center>
-				</div>
-
-			</div>
 			<div class="container">
-
 				<canvas id="canvas"></canvas>
 
-				<button id="help-button" onclick="controls.show()">❓ Help</button>
-				<button id="on-screen-controller-button" onclick="toggleController()">🎮 Toggle On Screen Controller</button>
 				<span class="indicator" id='resume-indicator'></span>	
 				<span class="indicator" id='portfolio-indicator'></span>	
 				<span class="indicator" id='computer-indicator'></span>	
 				<span class="indicator" id='tv-indicator'></span>	
 				<span class="indicator" id='guitar-indicator'></span>	
 
+
 				<div class="dialog" id="dialog">
 					<span id="dialog-text"></span>
-					<div class="enter-indicator" id="enter-indicator">PRESS ENTER</div>
-				</div>
-
-				<div class="click-map">
-					<img src="./assets/img/empty2.png" usemap="#click-map" alt="">
-				</div>
-				<map name="click-map" id="click-map"></map>
-
-				<div class="controls" id="controls">
-					<img src="./assets/img/sprites/controls.png" alt="" usemap="#dpadmap">
-				</div>
-
-      <map name="dpadmap">
-        <!-- up -->
-        <area
-          shape="rect"
-          coords="110,55,180,120"
-          href="#"
-          onclick="player.move('up')"
-        />
-        <!-- down -->
-        <area
-          shape="rect"
-          coords="110,180,180,250"
-          href="#"
-          onclick="player.move('down')"
-        />
-        <!-- left -->
-        <area
-          shape="rect"
-          coords="50,125,110,190"
-          href="#"
-          onclick="player.move('left')"
-        />
-        <!-- right -->
-        <area
-          shape="rect"
-          coords="170,110,240,190"
-          href="#"
-          onclick="player.move('right')"
-        />
-        <!-- A-button -->
-        <area
-          shape="rect"
-          coords="580,110,680,190"
-          href="#"
-          onclick="onEnter()"
-        />
-      </map>
-
-				<!-- maomao -->
-				<div class="window-container" id="maomao-container">
-					<div class="window-bar">
-						<div style="float:inline-start;">
-							😺 MaoMao
-						</div>
-						<div style="float:inline-end;">
-							<button class="close-button" onclick="maomao.hide()">X</button>
-						</div>
-						<div style="clear:both;"></div>
-					</div>
-					<div id="maomao">
-						<center>
-							<img style="margin-top: 50px;height:100%; width:500px;" src="./assets/img/thumbnails/maomao.png" alt="">
-						</center>
-					</div>
+					<div class="enter-indicator">PRESS ENTER</div>
 				</div>
 
 				<!-- Terminal -->
@@ -144,59 +62,6 @@
 					</div>
 				</div>
 
-				<!-- Controls -->
-				<div class="window-container" id="help-container">
-					<div class="window-bar">
-						<div style="float:inline-start;">
-							❓ Help
-						</div>
-						<div style="float:inline-end;">
-							<button class="close-button" onclick="controls.hide()">X</button>
-						</div>
-						<div style="clear:both;"></div>
-					</div>
-					<div id="help">
-						<div class="games-inner-container">
-							<b>Movement:</b><br>
-							There are multiple methods of movement:
-							<ul>
-								<li>WASD</li>
-								<li>Arrow Keys</li>
-								<li>VIM Keys [HJKL]</li>
-								<li>Point and Click</li>
-							</ul>
-							<b>Interaction:</b><br>
-							<ul>
-								<li>Enter Key - Use Enter Key to interact</li>
-								<li>Click - Use your mouse to click to interact</li>
-							</ul>
-							<b>Quick Access:</b><br>
-							Use the buttons at the top of the screen to view my portfolio, resume, contact info, or play the games I have made.
-						</div>
-					</div>
-				</div>
-
-				<!-- Contact -->
-				<div class="window-container" id="contact-container">
-					<div class="window-bar">
-						<div style="float:inline-start;">
-							📄 Contact Me
-						</div>
-						<div style="float:inline-end;">
-							<button class="close-button" onclick="contact.hide()">X</button>
-						</div>
-						<div style="clear:both;"></div>
-					</div>
-					<div id="contact">
-						<h3>Contact Me:</h3>
-						Feel free to contact me with a job offering or for freelance work. 
-						<p>
-						<b>EMAIL:</b> <a href= "mailto:me@domdit.com">me@domdit.com</a><br>
-							<b>XMPP:</b> domdit@xmpp.jp
-						</p>
-					</div>
-				</div>
-				
 				<!-- Resume -->
 				<div class="window-container" id="resume-container">
 					<div class="window-bar">
@@ -209,11 +74,7 @@
 						<div style="clear:both;"></div>
 					</div>
 					<div id="resume">
-						<a class="download-resume" href="./assets/docs/resume.pdf"><button>💾 Download</button></a>
-
-						    <object data="./assets/docs/resume.pdf#toolbar=0" type="application/pdf" width="100%" height="100%">
-      <p>Unable to display PDF file. <a href="./assets/docs/resume.pdf">Download</a> instead.</p>
-    </object>
+						Resume placeholder
 					</div>
 				</div>
 
@@ -229,255 +90,7 @@
 						<div style="clear:both;"></div>
 					</div>
 					<div id="portfolio">
-
-					<div class="games-inner-container">
-
-						<!-- Homemaker -->
-						<div class="portfolio-item">
-							<div class="game-thumbnail-container">
-								<img src="./assets/img/thumbnails/homemaker.png" alt="">
-							</div>
-							<div class="game-description-container">
-								<u><h3>Homemaker</h3></u>
-								<b>Description:</b> Custom self-hostable browser homepage. Simple generation via a config file. Functionality for multiple backgrounds and color choices available. Also enables VIM style keybinding for access to your favorite websites without needing to touch a mouse.<br><br>
-								<b>Technology:</b> Python, Javascript
-								<br>
-								<br>
-								<a href="https://git.domdit.com/dominic/homemaker" target="_blank">
-									<button>🐙 GitHub</button>
-								</a>
-								<a href="https://home.domdit.com/" target="_blank">
-									<button>🌐 Live Demo</button>
-								</a>
-							</div>
-							<div style="clear:both;"></div>
-						</div>
-						<hr>
-
-						<!-- Korabo -->
-						<div class="portfolio-item">
-							<div class="game-thumbnail-container">
-								<img src="./assets/img/thumbnails/korabo.png" alt="">
-							</div>
-							<div class="game-description-container">
-								<u><h3>Korabo</h3></u>
-								<b>Description:</b> Collaborative planning application. Create a prospective event and select a date range in which the event may take place. Share the event with friends/coworkers to provide the days and times they are available. This was built in order to solve the issue of coordinating the hectic schedules of my band members. <br><br>
-								<b>Technology:</b> Python, Django, JavaScript
-								<br>
-								<br>
-								<a href="https://git.domdit.com/dominic/korabo" target="_blank">
-									<button>🐙 GitHub</button>
-								</a>
-							</div>
-							<div style="clear:both;"></div>
-						</div>
-						<hr>
-
-						<!-- Asteroids -->
-						<div class="portfolio-item">
-							<div class="game-thumbnail-container">
-								<img src="./assets/img/thumbnails/asteroids.png" alt="">
-							</div>
-							<div class="game-description-container">
-								<u><h3>Asteroids</h3></u>
-								<b>Description:</b> Asteroids port with a few extra features like power ups and a space ship that shoots homing missiles at you. <br><br>
-								<b>Technology:</b> p5.js, JavaScript
-								<br>
-								<br>
-								<a href="https://git.domdit.com/dominic/asteroids" target="_blank">
-									<button>🐙 GitHub</button>
-								</a>
-								<a href="https://asteroids.domdit.com/" target="_blank">
-									<button>🌐 Live Demo</button>
-								</a>
-							</div>
-							<div style="clear:both;"></div>
-						</div>
-						<hr>
-
-						<!-- Sokobanya -->
-						<div class="portfolio-item">
-							<div class="game-thumbnail-container">
-								<img src="./assets/img/thumbnails/sokobanya.png" alt="">
-							</div>
-							<div class="game-description-container">
-								<u><h3>Sokobanya</h3></u>
-								<b>Description:</b> A puzzle game where you are an old man pushing coal onto burners to keep your sauna hot! <br><br>
-								<b>Technology:</b> JavaScript
-								<br>
-								<br>
-								<a href="https://git.domdit.com/dominic/sokobanya" target="_blank">
-									<button>🐙 GitHub</button>
-								</a>
-								<a href="https://sokobanya.domdit.com/" target="_blank">
-									<button>🌐 Live Demo</button>
-								</a>
-							</div>
-							<div style="clear:both;"></div>
-						</div>
-						<hr>
-
-						<!-- Forum -->
-						<div class="portfolio-item">
-							<div class="game-thumbnail-container">
-								<img src="./assets/img/thumbnails/cwr.png" alt="">
-							</div>
-							<div class="game-description-container">
-								<u><h3>CWR Forum</h3></u>
-								<b>Description:</b> Forum software I made for one of the online communities I am a part of. Includes profile management, full-fledged forum, admin management pages to control user membership status. <br><br>
-								<b>Technology:</b> Python, Django, JavaScript
-								<br>
-								<br>
-								<a href="https://git.domdit.com/dominic/cwr" target="_blank">
-									<button>🐙 GitHub</button>
-								</a>
-							</div>
-							<div style="clear:both;"></div>
-						</div>
-						<hr>
-
-						<!-- Chord Tone -->
-						<div class="portfolio-item">
-							<div class="game-thumbnail-container">
-								<img src="./assets/img/thumbnails/chordtone.png" alt="">
-							</div>
-							<div class="game-description-container">
-								<u><h3>Chord Tone Map Generator</h3></u>
-								<b>Description:</b> Generates a guitar fretboard populated with notes applicable for improvisation over user-provided chords. Advanced improvisation over complex chords made simple. <br><br>
-								<b>Technology:</b> Python, Flask, JavaScript
-								<br>
-								<br>
-								<a href="https://git.domdit.com/dominic/chord_tone" target="_blank">
-									<button>🐙 GitHub</button>
-								</a>
-								<a href="https://chordtone.domdit.com/" target="_blank">
-									<button>🌐 Live Demo</button>
-								</a>
-							</div>
-							<div style="clear:both;"></div>
-						</div>
-						<hr>
-
-						<!-- Pysokoban -->
-						<div class="portfolio-item">
-							<div class="game-thumbnail-container">
-								<img src="./assets/img/thumbnails/pysokoban.png" alt="">
-							</div>
-							<div class="game-description-container">
-								<u><h3>Pysokoban</h3></u>
-								<b>Description:</b> Similar to Sokobanya above: This is a Python port of the same game. All of the gameplay takes place in the terminal. This version includes 500+ more levels! <br><br>
-								<b>Technology:</b> Python
-								<br>
-								<br>
-								<a href="https://git.domdit.com/dominic/pysokoban" target="_blank">
-									<button>🐙 GitHub</button>
-								</a>
-							</div>
-							<div style="clear:both;"></div>
-						</div>
-						<hr>
-
-						<!-- Shrinkin Minkin Website -->
-						<div class="portfolio-item">
-							<div class="game-thumbnail-container">
-								<img src="./assets/img/thumbnails/minkin-site.png" alt="">
-							</div>
-							<div class="game-description-container">
-								<u><h3>Shrinkin-Minkin Website</h3></u>
-								<b>Description:</b> Website I made for my band. There is some interesting functionality under the hood like: Autogenerating link-trees, newsletter subscription and pages for advertising new releases without enforced ads (interrupting our music) from social media sites. <br><br>
-								<b>Technology:</b> Python, Django, JavaScript
-								<br>
-								<br>
-								<a href="https://git.domdit.com/dominic/shrinkinminkin/src/branch/master/shrinkinminkin" target="_blank">
-									<button>🐙 GitHub</button>
-								</a>
-								<a href="https://www.shrinkinminkin.com/" target="_blank">
-									<button>🌐 Live Demo</button>
-								</a>
-							</div>
-							<div style="clear:both;"></div>
-						</div>
-						<hr>
-
-						<!-- Webring -->
-						<div class="portfolio-item">
-							<div class="game-thumbnail-container">
-								<img style="background-color:black;" src="./assets/img/thumbnails/tilde-webring.png" alt="">
-							</div>
-							<div class="game-description-container">
-								<u><h3>NoJS Webring</h3></u>
-								<b>Description:</b> Simple webring that does not require users to add JavaScript to their page. Instead, the webring host handles the JavaScript, and the users simply need to add a block of HTML code. This allows for users who like to keep a minimal website free from bulky JavaScript and calling CDNs. Currently used by at least 2 live webrings (that I know of).<br><br>
-								<b>Technology:</b> JavaScript
-								<br>
-								<br>
-								<a href="https://git.domdit.com/dominic/nojs-webring" target="_blank">
-									<button>🐙 GitHub</button>
-								</a>
-								<a href="https://tilde.green/~jigong/tilde-ring/" target="_blank">
-									<button>🌐 Live Demo</button>
-								</a>
-							</div>
-							<div style="clear:both;"></div>
-						</div>
-						<hr>
-
-
-						<!-- Pong -->
-						<div class="portfolio-item">
-							<div class="game-thumbnail-container">
-								<img src="./assets/img/thumbnails/pong.png" alt="">
-							</div>
-							<div class="game-description-container">
-								<u><h3>Pong</h3></u>
-								<b>Description:</b> You know I had to do it. One of my first coding projects, PONG!<br><br>
-								<b>Technology:</b> p5.js, JavaScript
-								<br>
-								<br>
-								<a href="https://pong.domdit.com/" target="_blank">
-									<button>🌐 Live Demo</button>
-								</a>
-							</div>
-							<div style="clear:both;"></div>
-						</div>
-						<hr>
-
-						<!-- Alambi -->
-						<div class="portfolio-item">
-							<div class="game-thumbnail-container">
-								<img src="./assets/img/thumbnails/alambi.png" alt="">
-							</div>
-							<div class="game-description-container">
-								<u><h3>Alambi</h3></u>
-								<b>Description:</b>Alambi is a blogging engine made with the Python micro-framework Flask. Provides a simple and elegant blogging solution with complete customization of colors and layout. <br><br>
-								<b>Technology:</b> Python, Flask
-								<br>
-								<br>
-								<a href="https://github.com/domdit/Alambi" target="_blank">
-									<button>🐙 GitHub</button>
-								</a>
-							</div>
-							<div style="clear:both;"></div>
-						</div>
-						<hr>
-
-						<!-- Buleku -->
-						<div class="portfolio-item">
-							<div class="game-thumbnail-container">
-								<img src="./assets/img/thumbnails/buleku.png" alt="">
-							</div>
-							<div class="game-description-container">
-								<u><h3>Buleku - Manchu/English/Chinese Dictionary</h3></u>
-								<b>Description:</b> The first online Manchu Dictionary. This was used extensively by my classmates and I for a few years during my time at university. Manchu is a dead language and there were no online dictionaries at the time. Now there are a few reputable ones that I would recommend over this. I am still very proud of this project because it proved to me that I <i>can</i> become a software developer. This is truly my first ever project, made over 6 years ago (excluding the silly geocities sites I made in the early 2000s). <br><br>
-								<b>Technology:</b> JavaScript
-								<br>
-								<br>
-								<a href="https://github.com/domdit/buleku" target="_blank">
-									<button>🐙 GitHub</button>
-								</a>
-							</div>
-							<div style="clear:both;"></div>
-						</div>
-					</div>
+						Portfolio placeholder
 					</div>
 				</div>
 
@@ -628,9 +241,8 @@
 						</div>
 					</div>
 				</div>
-
 			</div>
 		</div>
-
-	</body>
+		
+  </body>
 </html>