Commit e99a3f27 authored by Nathan Pasko's avatar Nathan Pasko
Browse files

reformat code and extract stylesheet for launch

parent 72b82ced
<!--
Welcome to
TUNNEL
engine
===========================
Tunnel v.1.0
◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎
-> Load cartridge below! <-
◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎
User's Manual & more at
tunnelengine.netlify.app
===========================
-->
<!DOCTYPE html>
<html lang="en">
<head>
......@@ -9,20 +23,6 @@
<link rel="stylesheet" href="tunnel-style.css">
</head>
<body>
<!--
Welcome to
TUNNEL
engine
===========================
Tunnel v.0.8.1
◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎
-> Load cartridge below! <-
◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎
User's Manual & more at
tunnelengine.netlify.app
===========================
-->
<!-- ARCHITECTURE -->
<div id="startup-logo">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 396.6 396.6"><defs><style>.cls-1{fill:#ff0;}.cls-2{fill:blue;}</style></defs><g id="tunnel"><path d="M94.2,98.8H69.3v65.4h-36V98.8H6V63.4H94.2Z"/><path class="cls-1" d="M69.3,164.2V267.6h-36V164.2"/><path d="M241.3,267.6h77v65.3h72.3V297.5H354.3V232.1H304.4V210.6H276.7v-8.4h41.6v-38h-77V60.8h-36V112l-52-51.2V164.2h52v51.2l-52-51.2H116.7v65.6H105.9V164.2H69.3V217c0,17.2,0,49.6,42.1,49.6s41.9-32.4,41.9-49.6h0v50.6"/></g><g id="engine"><path class="cls-2" d="M126.7,310.7v.2c0,5.3,3.8,8.6,8.1,8.6a8.6,8.6,0,0,0,5.9-2.3l.6.8a9.5,9.5,0,0,1-6.5,2.5c-4.9,0-9-3.6-9-9.5s3.9-9.3,8.4-9.3,7.4,3.3,7.4,7.7v1.3Zm.1-1h13.8c0-5.2-3.1-7.1-6.4-7.1S127.3,304.8,126.8,309.7Z"/><path class="cls-2" d="M154.7,302.1h.9v3.5a8.9,8.9,0,0,1-.1,1.3h0a8,8,0,0,1,7.8-5.2c4.5,0,6.2,2.4,6.2,7.1v11.3h-1V309c0-3.5-.8-6.4-5.2-6.4a7.6,7.6,0,0,0-7.4,5.8,9.3,9.3,0,0,0-.3,2.4v9.3h-.9Z"/><path class="cls-2" d="M184.6,325.2a10.1,10.1,0,0,0,5.1,1.3c3.7,0,7-1.9,7-6.5v-2.7a6.1,6.1,0,0,1,.2-1.5h-.1a6.7,6.7,0,0,1-6.4,4.3c-4.7,0-8-3.7-8-9.4s3-9,7.8-9c3,0,5.8,1.4,6.6,4.5h.1a3.1,3.1,0,0,1-.2-1v-3.1h1V320c0,5.4-3.8,7.5-8,7.5A12.7,12.7,0,0,1,184,326Zm12.2-14.4c0-6.2-3-8.2-6.6-8.2s-6.8,3-6.8,8.1,2.8,8.4,7,8.4S196.8,317,196.8,310.8Z"/><path class="cls-2" d="M212,294.8h1v3.4h-1Zm0,7.3h1v18h-1Z"/><path class="cls-2" d="M227.3,302.1h1v3.5a4.6,4.6,0,0,1-.2,1.3h.1a8,8,0,0,1,7.8-5.2c4.5,0,6.1,2.4,6.1,7.1v11.3h-.9V309c0-3.5-.9-6.4-5.2-6.4a7.5,7.5,0,0,0-7.4,5.8,9.3,9.3,0,0,0-.3,2.4v9.3h-1Z"/><path class="cls-2" d="M255.9,310.7v.2c0,5.3,3.8,8.6,8.1,8.6a8.6,8.6,0,0,0,5.9-2.3l.6.8a9.5,9.5,0,0,1-6.5,2.5c-4.9,0-9-3.6-9-9.5s3.9-9.3,8.4-9.3,7.4,3.3,7.4,7.7v1.3Zm.1-1h13.8c0-5.2-3.1-7.1-6.4-7.1S256.5,304.8,256,309.7Z"/></g></svg>
......@@ -53,9 +53,6 @@
◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼◼︎◼︎
LOAD CATRIDGE HERE
-->
<script id="cartridge" type="application/json">
{"info":{"title":"Cat man","nav":[{"text":"by NP","href":"nathanpasko.com"}],"labels":true},"layers":[{"id":"101","audio":"","images":["","","",""],"background":"#77bb41"},{"id":"102","audio":"","images":["","","",""],"background":"#ff4013"},{"id":"103","audio":"","images":["","","",""],"background":"#8d8600"}]}
</script>
<!--
CARTRIDGE ABOVE
......
......@@ -3,9 +3,9 @@
const position = {
inner: 'INNER',
focused: 'FOCUSED',
outer: 'OUTER'
}
const sides = [ 'top', 'right', 'bottom', 'left' ];
outer: 'OUTER',
};
const sides = ['top', 'right', 'bottom', 'left'];
var cartridge;
var sources = [];
......@@ -19,52 +19,55 @@ var activeLayers = [];
// Initialization
function initNav() {
// Grab nav element
const nav = document.querySelector('header nav');
cartridge.info.nav.forEach(i => {
const elem = getNavElement(i);
// For each link in nav array
cartridge.info.nav.forEach((link) => {
// Add a link element to the nav
const elem = getNavElement(link);
nav.appendChild(elem);
});
}
function initHeader() {
// If cartridge has labels
if (cartridge.info.labels) {
setTimeout(() => {
document.getElementById('corner-logo').classList.add('active');
//}, 1500);
}, 1250);
document.getElementById('startup-logo').classList.add('extended');
//setTimeout(clearStartupLogo, 3500);
setTimeout(clearStartupLogo, 2500);
const title = document.getElementById('title');
title.textContent = cartridge.info.title;
if (cartridge.info.nav.length > 0)
initNav();
if (cartridge.info.nav.length > 0) initNav();
setTimeout(() => {
document.getElementById('main-header').classList.add('active');
//}, 2000);
}, 1500);
}
// If cartridge doesn't have labels
else {
setTimeout(() => {
document.getElementById('corner-logo').classList.add('active');
//}, 1500);
}, 600);
//document.getElementById('corner-logo').remove();
//setTimeout(clearStartupLogo, 2500);
setTimeout(clearStartupLogo, 1250);
document.getElementById('main-header').remove();
}
}
function initFrame() {
// Grab frame
frame = document.getElementById('frame');
// Make sure cartridge has at least 3 layers
while (cartridge.layers.length < 3) {
addBlankLayer();
}
// Create first three layers
createLayer(cartridge.layers[2], position.inner, 2);
createLayer(cartridge.layers[1], position.focused, 1);
createLayer(cartridge.layers[0], position.outer, 0);
// Update background to initial color
updateBackground();
}
function initButtons() {
// Set up event listeners for main control buttons
document.getElementById('inward-btn').addEventListener('click', () => {
moveLayer(1);
});
......@@ -73,10 +76,13 @@ function initButtons() {
});
}
function initIOS(val) {
// Grab message element for iOS
var iosElem = document.getElementById('ios');
// If client device is iOS
if (val) {
// Activate message
iosElem.classList.add('active');
// Get ready to clear message
window.setTimeout(() => {
iosElem.classList.remove('active');
}, 2000);
......@@ -84,7 +90,9 @@ function initIOS(val) {
iosElem.remove();
}, 5000);
}
// if client device is not iOS
else {
// Immediately clear message
iosElem.remove();
}
}
......@@ -104,8 +112,7 @@ function init() {
initHeader();
initFrame();
initButtons();
}
else {
} else {
// No cartridge
setTimeout(clearStartupLogo, 3500);
// Show No Cartridge message
......@@ -136,7 +143,7 @@ function getControlWidgets() {
}
function getControlLayerElem() {
const elem = document.createElement('div');
elem.classList.add('control')
elem.classList.add('control');
// control layer setup
const cross1 = document.createElement('div');
cross1.classList.add('cross');
......@@ -151,7 +158,7 @@ function getControlLayerElem() {
elem.appendChild(logo);
return elem;
}
function createSlide(layer, index, control = false) {
function createSlide(layer, index, control = false) {
var slide = document.createElement('div');
slide.classList.add('slide');
slide.classList.add(sides[index]);
......@@ -183,24 +190,28 @@ function addAudioSource(layerId, url) {
//webaudio parameters
request.responseType = 'arraybuffer';
// once the request is completed...
request.onload = function() {
audioContext.decodeAudioData(request.response, function(res) {
// set up and play source after buffer has loaded
source.buffer = res;
source.loop = true;
source.start(0);
}, function() {
console.error('The request failed.');
});
request.onload = function () {
audioContext.decodeAudioData(
request.response,
function (res) {
// set up and play source after buffer has loaded
source.buffer = res;
source.loop = true;
source.start(0);
},
function () {
console.error('The request failed.');
}
);
};
// send request
request.send();
// store audio context & source
var s = {
id: layerId,
audioContext: audioContext,
source: source
}
var s = {
id: layerId,
audioContext: audioContext,
source: source,
};
sources.push(s);
}
function createLayer(data, position, index) {
......@@ -214,7 +225,7 @@ function createLayer(data, position, index) {
// Set up audio if necessary
if (data.audio) {
addAudioSource(data.id, data.audio);
}
}
// Create four slides
for (var i = 0; i < 4; i++) {
var slide = createSlide(data, i, control);
......@@ -226,7 +237,9 @@ function createLayer(data, position, index) {
}
function removeLayer(position) {
// try to find active layer to remove
var toRemove = activeLayers.findIndex(layer => layer.dataset.position == position);
var toRemove = activeLayers.findIndex(
(layer) => layer.dataset.position == position
);
if (toRemove >= 0) {
// remove from script and DOM
var removedElements = activeLayers.splice(toRemove, 1);
......@@ -236,22 +249,26 @@ function removeLayer(position) {
}
}
function removeSourceForId(id) {
var i = sources.findIndex(s => s.id == id);
var i = sources.findIndex((s) => s.id == id);
if (i >= 0) {
sources.splice(i, 1);
}
}
function moveLayer(val) {
if ((currentLayer + val) >= 0 && (currentLayer + val) < cartridge.layers.length) {
if (currentLayer + val >= 0 && currentLayer + val < cartridge.layers.length) {
currentLayer = currentLayer + val;
// move inward
if (val > 0) {
var removed = removeLayer(position.outer);
// set data sets via activeLayers
// find x
var xIndex = activeLayers.findIndex(l => l.dataset.position == position.inner);
var xIndex = activeLayers.findIndex(
(l) => l.dataset.position == position.inner
);
// find y
var yIndex = activeLayers.findIndex(l => l.dataset.position == position.focused);
var yIndex = activeLayers.findIndex(
(l) => l.dataset.position == position.focused
);
// set x
if (xIndex >= 0) {
activeLayers[xIndex].dataset.position = position.focused;
......@@ -261,25 +278,33 @@ function moveLayer(val) {
// set y
if (yIndex >= 0) {
activeLayers[yIndex].dataset.position = position.outer;
tapAudio(activeLayers[yIndex], true, (currentLayer == 1));
tapAudio(activeLayers[yIndex], true, currentLayer == 1);
}
// create next layer
if (cartridge.layers.length > (currentLayer + 1))
createLayer(cartridge.layers[currentLayer + 1], position.inner, (currentLayer + 1));
if (cartridge.layers.length > currentLayer + 1)
createLayer(
cartridge.layers[currentLayer + 1],
position.inner,
currentLayer + 1
);
}
// move outward
else {
var removed = removeLayer(position.inner);
// set data sets via activeLayers
// find x
var xIndex = activeLayers.findIndex(l => l.dataset.position == position.outer);
var xIndex = activeLayers.findIndex(
(l) => l.dataset.position == position.outer
);
// find y
var yIndex = activeLayers.findIndex(l => l.dataset.position == position.focused);
var yIndex = activeLayers.findIndex(
(l) => l.dataset.position == position.focused
);
// set x
if (xIndex >= 0) {
activeLayers[xIndex].dataset.position = position.focused;
updateBackground();
tapAudio(activeLayers[xIndex], false, (currentLayer == 0));
tapAudio(activeLayers[xIndex], false, currentLayer == 0);
}
// set y
if (yIndex >= 0) {
......@@ -288,7 +313,11 @@ function moveLayer(val) {
}
// create next layer
if (currentLayer > 0)
createLayer(cartridge.layers[currentLayer - 1], position.outer, (currentLayer - 1));
createLayer(
cartridge.layers[currentLayer - 1],
position.outer,
currentLayer - 1
);
}
}
}
......@@ -312,7 +341,7 @@ function setControlOscillator(val) {
}
function tapAudio(elem, stop = false, control = false) {
// try to find source with ID
var i = sources.findIndex(s => s.id == parseInt(elem.id));
var i = sources.findIndex((s) => s.id == parseInt(elem.id));
if (i >= 0) {
// stop audio
if (stop) {
......@@ -336,16 +365,18 @@ function tapAudio(elem, stop = false, control = false) {
// Utility
function iOS() {
return [
'iPad Simulator',
'iPhone Simulator',
'iPod Simulator',
'iPad',
'iPhone',
'iPod'
].includes(navigator.platform)
// iPad on iOS 13 detection
|| (navigator.userAgent.includes("Mac") && "ontouchend" in document)
return (
[
'iPad Simulator',
'iPhone Simulator',
'iPod Simulator',
'iPad',
'iPhone',
'iPod',
].includes(navigator.platform) ||
// iPad on iOS 13 detection
(navigator.userAgent.includes('Mac') && 'ontouchend' in document)
);
}
function detectCartridge() {
var val = false;
......@@ -354,7 +385,7 @@ function detectCartridge() {
val = true;
const cart = {
info: info,
layers: layers
layers: layers,
};
loadCartridge(cart);
}
......@@ -365,9 +396,9 @@ function detectCartridge() {
const j = JSON.parse(cartridgeElem.innerText);
if (typeof j.info != 'undefined') {
val = true;
const cart = {
info: j.info,
layers: j.layers
const cart = {
info: j.info,
layers: j.layers,
};
loadCartridge(cart);
}
......@@ -379,28 +410,24 @@ function clearStartupLogo() {
document.getElementById('startup-logo').remove();
}
function addBlankLayer() {
cartridge.layers.push(
{
id: (Math.random()*100),
name: '',
images: [ '', '', '', '' ]
}
);
cartridge.layers.push({
id: Math.random() * 100,
name: '',
images: ['', '', '', ''],
});
}
function setLayerPosition(element, val) {
element.dataset.position = val;
}
// Update
function updateBackground() {
if (cartridge.layers[currentLayer].background != undefined) {
frame.style.background = cartridge.layers[currentLayer].background;
}
else {
} else {
frame.style.background = 'unset';
}
}
init();
\ No newline at end of file
init();
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment