Compare commits
No commits in common. "master" and "inheritance-refactor" have entirely different histories.
master
...
inheritanc
|
|
@ -1,5 +1,6 @@
|
||||||
body {
|
body {
|
||||||
background-color: #E7D5B1;
|
background-color: #E7D5B1;
|
||||||
|
/* background-color: #8EA7C8; */
|
||||||
background-image: url("https://www.transparenttextures.com/patterns/asfalt-dark.png");
|
background-image: url("https://www.transparenttextures.com/patterns/asfalt-dark.png");
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
|
@ -103,16 +104,6 @@ canvas {
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#contact {
|
|
||||||
background: #a3acbe;
|
|
||||||
position: relative;
|
|
||||||
height: inherit;
|
|
||||||
box-sizing: border-box;
|
|
||||||
font-family: monospace;
|
|
||||||
font-size: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
overflow: auto!important;
|
|
||||||
}
|
|
||||||
.prompt-container {
|
.prompt-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -164,10 +155,6 @@ canvas {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.audio-controls:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
#album-thumb img {
|
#album-thumb img {
|
||||||
border: solid 3px #dbe0e7;
|
border: solid 3px #dbe0e7;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
|
|
@ -185,7 +172,6 @@ canvas {
|
||||||
|
|
||||||
#portfolio-container {
|
#portfolio-container {
|
||||||
background: #a3acbe;
|
background: #a3acbe;
|
||||||
font-size: 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.games-inner-container {
|
.games-inner-container {
|
||||||
|
|
@ -203,31 +189,6 @@ canvas {
|
||||||
height: auto;
|
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 {
|
.games-inner-container h3 {
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -317,67 +278,3 @@ tr:nth-child(even) {
|
||||||
top: 570px;
|
top: 570px;
|
||||||
left: 60px;
|
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
|
|
||||||
}
|
|
||||||
|
|
||||||
#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;
|
|
||||||
top: -35px;
|
|
||||||
right: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#on-screen-controller-button:hover {
|
|
||||||
background-color: #c3f6c3;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 2.9 KiB |
|
Before Width: | Height: | Size: 38 KiB |
|
Before Width: | Height: | Size: 412 KiB |
|
Before Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 88 KiB |
|
Before Width: | Height: | Size: 610 KiB |
|
Before Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 61 KiB |
|
Before Width: | Height: | Size: 138 KiB |
|
Before Width: | Height: | Size: 4.1 KiB |
|
|
@ -1,11 +1,8 @@
|
||||||
|
var _listener
|
||||||
var TO_RADIANS = Math.PI/180;
|
var TO_RADIANS = Math.PI/180;
|
||||||
|
|
||||||
var _listener
|
|
||||||
|
|
||||||
var controlsMode = false
|
|
||||||
var dialogMode = true
|
var dialogMode = true
|
||||||
var terminalMode = false
|
var terminalMode = false
|
||||||
|
|
||||||
var spriteSize = 16 * 5
|
var spriteSize = 16 * 5
|
||||||
var spriteMap = new Image()
|
var spriteMap = new Image()
|
||||||
spriteMap.src = './assets/img/sprites/sprite-map-1.png'
|
spriteMap.src = './assets/img/sprites/sprite-map-1.png'
|
||||||
|
|
@ -13,11 +10,12 @@ spriteMap.src = './assets/img/sprites/sprite-map-1.png'
|
||||||
var canvasOffset = 9
|
var canvasOffset = 9
|
||||||
var canvas = document.getElementById("canvas")
|
var canvas = document.getElementById("canvas")
|
||||||
var ctx = canvas.getContext("2d")
|
var ctx = canvas.getContext("2d")
|
||||||
|
|
||||||
canvas.width = spriteSize * canvasOffset
|
canvas.width = spriteSize * canvasOffset
|
||||||
canvas.height = canvas.width
|
canvas.height = canvas.width
|
||||||
|
|
||||||
var audio = null
|
var audio = null
|
||||||
var contact = new Contact()
|
|
||||||
var terminal = new Terminal()
|
var terminal = new Terminal()
|
||||||
var games = new Games()
|
var games = new Games()
|
||||||
var music = new Music()
|
var music = new Music()
|
||||||
|
|
@ -25,7 +23,7 @@ var dialog = new Dialog()
|
||||||
var resume = new Resume()
|
var resume = new Resume()
|
||||||
var portfolio = new Portfolio()
|
var portfolio = new Portfolio()
|
||||||
var indicator = new Indicator()
|
var indicator = new Indicator()
|
||||||
var player = new Player(5, 4, 'down')
|
var player = new Player(1, 1, 'down')
|
||||||
|
|
||||||
window.addEventListener("resize", function() {
|
window.addEventListener("resize", function() {
|
||||||
terminal.resize();
|
terminal.resize();
|
||||||
|
|
@ -129,40 +127,21 @@ function renderRoom() {
|
||||||
new Renderer(3, 2, 0, 7)
|
new Renderer(3, 2, 0, 7)
|
||||||
new Renderer(3, 3, 0, 8)
|
new Renderer(3, 3, 0, 8)
|
||||||
new Renderer(4, 2, 1, 8)
|
new Renderer(4, 2, 1, 8)
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
dialog.startIntroDialogSequence()
|
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() {
|
function gameLoop() {
|
||||||
if (!dialogMode && controlsMode) {
|
|
||||||
dialog.controlsElem.style.display = 'block'
|
|
||||||
} else if (!controlsMode || dialogMode) {
|
|
||||||
dialog.controlsElem.style.display = 'none'
|
|
||||||
}
|
|
||||||
|
|
||||||
renderRoom()
|
renderRoom()
|
||||||
document.removeEventListener("keydown", _listener);
|
document.removeEventListener("keydown", _listener);
|
||||||
if (terminalMode) {
|
if (terminalMode) {
|
||||||
terminal.getKeystroke();
|
terminal.getKeystroke();
|
||||||
} else if (!dialogMode) {
|
} else if (dialogMode) {
|
||||||
|
// pass
|
||||||
|
} else {
|
||||||
this.getKeystroke();
|
this.getKeystroke();
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
spriteMap.onload = function() {
|
spriteMap.onload = function() {
|
||||||
|
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
class Contact extends Window {
|
|
||||||
constructor() {
|
|
||||||
super('contact')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -2,7 +2,6 @@ class Dialog {
|
||||||
constructor() {
|
constructor() {
|
||||||
this.dialogElem = document.getElementById('dialog')
|
this.dialogElem = document.getElementById('dialog')
|
||||||
this.dialogTextElem = document.getElementById('dialog-text')
|
this.dialogTextElem = document.getElementById('dialog-text')
|
||||||
this.controlsElem = document.getElementById('controls')
|
|
||||||
|
|
||||||
this.currentDialogIndex = 0
|
this.currentDialogIndex = 0
|
||||||
this.dialogOrder = ['intro', 'controls', 'resume']
|
this.dialogOrder = ['intro', 'controls', 'resume']
|
||||||
|
|
@ -20,18 +19,14 @@ class Dialog {
|
||||||
|
|
||||||
dialogListener(event) {
|
dialogListener(event) {
|
||||||
console.log(event)
|
console.log(event)
|
||||||
if (event.key === 'Enter' || event.type === 'touchstart') {
|
if (event.key === 'Enter') {
|
||||||
event.currentTarget.self.startIntroDialogSequence()
|
event.currentTarget.self.startIntroDialogSequence()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
hide() {
|
|
||||||
this.dialogElem.style.display = 'none'
|
|
||||||
}
|
|
||||||
|
|
||||||
startIntroDialogSequence() {
|
startIntroDialogSequence() {
|
||||||
document.removeEventListener("keydown", this.dialogListener);
|
document.removeEventListener("keydown", this.dialogListener);
|
||||||
document.removeEventListener('touchstart', this.dialogListener)
|
console.log('hit')
|
||||||
if (this.currentDialogIndex > this.dialogOrder.length - 1) {
|
if (this.currentDialogIndex > this.dialogOrder.length - 1) {
|
||||||
this.dialogElem.style.display = 'none'
|
this.dialogElem.style.display = 'none'
|
||||||
dialogMode = false
|
dialogMode = false
|
||||||
|
|
@ -56,8 +51,6 @@ class Dialog {
|
||||||
|
|
||||||
var self = this
|
var self = this
|
||||||
document.addEventListener('keydown', this.dialogListener)
|
document.addEventListener('keydown', this.dialogListener)
|
||||||
document.addEventListener('touchstart', this.dialogListener)
|
|
||||||
|
|
||||||
document.self = self
|
document.self = self
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -6,4 +6,5 @@ class Games extends Window {
|
||||||
handleDialog() {
|
handleDialog() {
|
||||||
indicator.hide('tv')
|
indicator.hide('tv')
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -22,10 +22,12 @@ class Indicator {
|
||||||
}
|
}
|
||||||
|
|
||||||
show(indicatorName) {
|
show(indicatorName) {
|
||||||
|
console.log(indicatorName)
|
||||||
this.indicatorMap[indicatorName].style.display = 'block'
|
this.indicatorMap[indicatorName].style.display = 'block'
|
||||||
}
|
}
|
||||||
|
|
||||||
hide(indicatorName) {
|
hide(indicatorName) {
|
||||||
this.indicatorMap[indicatorName].style.display = 'none'
|
this.indicatorMap[indicatorName].style.display = 'none'
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -8,49 +8,57 @@ function getKeystroke() {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
}
|
}
|
||||||
|
|
||||||
if (['h', 'a', 'ArrowLeft'].includes(event.key)) {
|
if (event.key === "h" || event.key === "a" || event.key === "ArrowLeft") {
|
||||||
player.move('left')
|
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')
|
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')
|
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')
|
player.move('right')
|
||||||
} else if (
|
} else if (
|
||||||
event.key === "Enter" &&
|
event.key === "Enter" &&
|
||||||
!terminal.active
|
!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);
|
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 (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()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -13,7 +13,7 @@ class Music extends Window {
|
||||||
'Buranko',
|
'Buranko',
|
||||||
'New Jersey Again',
|
'New Jersey Again',
|
||||||
'Asteroids'
|
'Asteroids'
|
||||||
]
|
]
|
||||||
|
|
||||||
this.songMap = {
|
this.songMap = {
|
||||||
'Down Polypore Wood': {
|
'Down Polypore Wood': {
|
||||||
|
|
|
||||||
|
|
@ -29,21 +29,18 @@ class Player {
|
||||||
this.canvasX -= 1;
|
this.canvasX -= 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (direction === 'right' && this.canvasX + 1 < canvas.width/spriteSize) {
|
if (direction === 'right' && this.canvasX + 1 < canvas.width/spriteSize) {
|
||||||
nextPosition = [this.canvasX + 1, this.canvasY]
|
nextPosition = [this.canvasX + 1, this.canvasY]
|
||||||
if (!this.isBoundary(nextPosition)) {
|
if (!this.isBoundary(nextPosition)) {
|
||||||
this.canvasX += 1;
|
this.canvasX += 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (direction === 'up' && this.canvasY - 1 >= 0) {
|
if (direction === 'up' && this.canvasY - 1 >= 0) {
|
||||||
nextPosition = [this.canvasX, this.canvasY - 1]
|
nextPosition = [this.canvasX, this.canvasY - 1]
|
||||||
if (!this.isBoundary(nextPosition)) {
|
if (!this.isBoundary(nextPosition)) {
|
||||||
this.canvasY -= 1;
|
this.canvasY -= 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (direction === 'down' && this.canvasY + 2 < canvas.height/spriteSize){
|
if (direction === 'down' && this.canvasY + 2 < canvas.height/spriteSize){
|
||||||
nextPosition = [this.canvasX, this.canvasY + 1]
|
nextPosition = [this.canvasX, this.canvasY + 1]
|
||||||
if (!this.isBoundary(nextPosition)) {
|
if (!this.isBoundary(nextPosition)) {
|
||||||
|
|
|
||||||
|
|
@ -4,9 +4,8 @@ class Portfolio extends Window {
|
||||||
}
|
}
|
||||||
|
|
||||||
handleDialog() {
|
handleDialog() {
|
||||||
indicator.hide('portfolio')
|
|
||||||
indicator.portfolioIndicatorShown = true;
|
|
||||||
if (!indicator.computerIndicatorShown) {
|
if (!indicator.computerIndicatorShown) {
|
||||||
|
indicator.hide('portfolio')
|
||||||
dialog.display('other')
|
dialog.display('other')
|
||||||
|
|
||||||
indicator.computerIndicatorShown = true;
|
indicator.computerIndicatorShown = true;
|
||||||
|
|
|
||||||
|
|
@ -132,6 +132,7 @@ class Terminal {
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
returnText = 'Unkown command, please type "help" for options'
|
returnText = 'Unkown command, please type "help" for options'
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (returnText) {
|
if (returnText) {
|
||||||
|
|
@ -151,6 +152,7 @@ class Terminal {
|
||||||
getKeystroke() {
|
getKeystroke() {
|
||||||
var self = this
|
var self = this
|
||||||
_listener = function (event) {
|
_listener = function (event) {
|
||||||
|
console.log(event.code)
|
||||||
if (
|
if (
|
||||||
["ArrowUp", "ArrowDown", "ControlLeft"].indexOf(event.code,) > -1
|
["ArrowUp", "ArrowDown", "ControlLeft"].indexOf(event.code,) > -1
|
||||||
) {
|
) {
|
||||||
|
|
|
||||||
342
index.html
|
|
@ -1,3 +1,4 @@
|
||||||
|
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
|
|
@ -16,7 +17,6 @@
|
||||||
<script type="text/javascript" src="./assets/js/music.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/resume.js" defer></script>
|
||||||
<script type="text/javascript" src="./assets/js/portfolio.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/dialog.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/indicator.js" defer></script>
|
||||||
<script type="text/javascript" src="./assets/js/keystroke.js" defer></script>
|
<script type="text/javascript" src="./assets/js/keystroke.js" defer></script>
|
||||||
|
|
@ -30,63 +30,20 @@
|
||||||
Software Developer & Architect
|
Software Developer & Architect
|
||||||
</div>
|
</div>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
|
||||||
<canvas id="canvas"></canvas>
|
<canvas id="canvas"></canvas>
|
||||||
|
|
||||||
<button id="on-screen-controller-button" onclick="toggleController()">🎮 Toggle On Screen Controller</button>
|
|
||||||
<span class="indicator" id='resume-indicator'></span>
|
<span class="indicator" id='resume-indicator'></span>
|
||||||
<span class="indicator" id='portfolio-indicator'></span>
|
<span class="indicator" id='portfolio-indicator'></span>
|
||||||
<span class="indicator" id='computer-indicator'></span>
|
<span class="indicator" id='computer-indicator'></span>
|
||||||
<span class="indicator" id='tv-indicator'></span>
|
<span class="indicator" id='tv-indicator'></span>
|
||||||
<span class="indicator" id='guitar-indicator'></span>
|
<span class="indicator" id='guitar-indicator'></span>
|
||||||
|
|
||||||
|
|
||||||
<div class="dialog" id="dialog">
|
<div class="dialog" id="dialog">
|
||||||
<span id="dialog-text"></span>
|
<span id="dialog-text"></span>
|
||||||
<div class="enter-indicator" id="enter-indicator">PRESS ENTER</div>
|
<div class="enter-indicator">PRESS ENTER</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<!-- Terminal -->
|
<!-- Terminal -->
|
||||||
<div class="window-container" id="term-container">
|
<div class="window-container" id="term-container">
|
||||||
<div class="window-bar">
|
<div class="window-bar">
|
||||||
|
|
@ -105,27 +62,6 @@
|
||||||
</div>
|
</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 -->
|
<!-- Resume -->
|
||||||
<div class="window-container" id="resume-container">
|
<div class="window-container" id="resume-container">
|
||||||
<div class="window-bar">
|
<div class="window-bar">
|
||||||
|
|
@ -138,11 +74,7 @@
|
||||||
<div style="clear:both;"></div>
|
<div style="clear:both;"></div>
|
||||||
</div>
|
</div>
|
||||||
<div id="resume">
|
<div id="resume">
|
||||||
<a class="download-resume" href="./assets/docs/resume.pdf"><button>💾 Download</button></a>
|
Resume placeholder
|
||||||
|
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -158,255 +90,7 @@
|
||||||
<div style="clear:both;"></div>
|
<div style="clear:both;"></div>
|
||||||
</div>
|
</div>
|
||||||
<div id="portfolio">
|
<div id="portfolio">
|
||||||
|
Portfolio placeholder
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -557,20 +241,8 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="container">
|
|
||||||
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||