dominic/portfolio
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

onscreen controller

Browse source
This commit is contained in:
Dominic DiTaranto 2025-12-29 18:29:41 -05:00
parent e4210741c7
commit 0403cdef8c
10 changed files with 187 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
assets/css/style.css
View file

@ -281,3 +281,62 @@ 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;
}
.nav-bar 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;
}
.nav-bar 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;
}

BIN
assets/docs/resume.pdf Normal file
View file

Binary file not shown.

BIN
assets/img/sprites/controls.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
assets/img/sprites/sprite-map-1.ase
View file

Binary file not shown.

19
assets/js/app.js
View file

@ -2,6 +2,7 @@ var TO_RADIANS = Math.PI/180;
var _listener
var controlsMode = false
var dialogMode = true
var terminalMode = false
@ -131,7 +132,24 @@ function renderRoom() {
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'
}
}
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) {
@ -139,6 +157,7 @@ function gameLoop() {
} else if (!dialogMode) {
this.getKeystroke();
}
}
spriteMap.onload = function() {

13
assets/js/dialog.js
View file

@ -2,6 +2,7 @@ class Dialog {
constructor() {
this.dialogElem = document.getElementById('dialog')
this.dialogTextElem = document.getElementById('dialog-text')
this.controlsElem = document.getElementById('controls')
this.currentDialogIndex = 0
this.dialogOrder = ['intro', 'controls', 'resume']
@ -19,14 +20,15 @@ class Dialog {
dialogListener(event) {
console.log(event)
if (event.key === 'Enter') {
if (event.key === 'Enter' || event.type === 'click' || event.type === 'touchend') {
event.currentTarget.self.startIntroDialogSequence()
}
}
startIntroDialogSequence() {
document.removeEventListener("keydown", this.dialogListener);
console.log('hit')
document.removeEventListener('click', this.dialogListener)
document.removeEventListener('touchend', this.dialogListener)
if (this.currentDialogIndex > this.dialogOrder.length - 1) {
this.dialogElem.style.display = 'none'
dialogMode = false
@ -51,6 +53,13 @@ class Dialog {
var self = this
document.addEventListener('keydown', this.dialogListener)
if (controlsMode) {
console.log('hello')
document.addEventListener('click', this.dialogListener)
document.addEventListener('touchend', this.dialogListener)
}
document.self = self
}

1
assets/js/indicator.js
View file

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

18
assets/js/keystroke.js
View file

@ -8,18 +8,25 @@ function getKeystroke() {
event.preventDefault();
}
if (['h', 'a' 'ArrowLeft'].includes(event.key)) {
if (['h', 'a', 'ArrowLeft'].includes(event.key)) {
player.move('left')
} else if (['j', 's' 'ArrowDown'].includes(event.key)) {
} else if (['j', 's', 'ArrowDown'].includes(event.key)) {
player.move('down')
} else if (['k', 'w' 'ArrowUp'].includes(event.key)) {
} else if (['k', 'w', 'ArrowUp'].includes(event.key)) {
player.move('up')
} else if (['l', 'd' 'ArrowRight'].includes(event.key)) {
} else if (['l', 'd', 'ArrowRight'].includes(event.key)) {
player.move('right')
} else if (
event.key === "Enter" &&
!terminal.active
) {
onEnter();
}
};
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]))) {
@ -46,7 +53,4 @@ function getKeystroke() {
resume.show()
}
}
}
};
document.addEventListener("keydown", _listener);
}

3
assets/js/terminal.js
View file

@ -29,7 +29,7 @@ class Terminal {
this.terminalElem.style.display = "none"
this.terminalContainerElem.style.display = "none"
terminalMode = false;
this.handleDialog)
this.handleDialog()
}
handleDialog() {
@ -151,7 +151,6 @@ class Terminal {
getKeystroke() {
var self = this
_listener = function (event) {
console.log(event.code)
if (
["ArrowUp", "ArrowDown", "ControlLeft"].indexOf(event.code,) > -1
) {

64
index.html
View file

@ -29,8 +29,10 @@
Software Developer & Architect
</div>
<div class="container">
<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='portfolio-indicator'></span>
<span class="indicator" id='computer-indicator'></span>
@ -39,9 +41,51 @@
<div class="dialog" id="dialog">
<span id="dialog-text"></span>
<div class="enter-indicator">PRESS ENTER</div>
<div class="enter-indicator" id="enter-indicator">PRESS ENTER</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 -->
<div class="window-container" id="term-container">
<div class="window-bar">
@ -72,7 +116,11 @@
<div style="clear:both;"></div>
</div>
<div id="resume">
Resume placeholder
<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>
</div>
</div>
@ -239,6 +287,18 @@
</div>
</div>
</div>
</div>
<div class="container">
<div class="nav-bar">
<center>
<button>💼 View Portfolio</button>
<button>📄 Download Resume</button>
<button>📧 Contact Me</button>
<button>🕹️ Play Games</button>
</center>
</div>
</div>
</div>