only restart a work if we exit on the last page or hit/tap the restart input

This commit is contained in:
xenofem 2024-01-25 13:57:39 -05:00
parent d852896c61
commit 6461b05bb2
4 changed files with 101 additions and 67 deletions

View file

@ -135,46 +135,3 @@ body {
display: inline-block;
margin-bottom: 5px;
}
/* viewer stuff */
#viewer-images {
display: none;
}
#image-container {
height: 100vh;
width: 100vw;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
#page-num, #duration {
position: fixed;
font-size: 14pt;
top: 10px;
font-weight: bold;
opacity: 0.75;
text-shadow: /* Duplicate the same shadow to make it very strong */
0 0 2px #222,
0 0 2px #222,
0 0 2px #222;
}
#page-num {
left: 10px;
}
#duration {
right: 10px;
}
#progress {
background-color: #4488ffcc;
height: 5px;
width: 0;
position: fixed;
top: 0;
left: 0;
}

View file

@ -5,27 +5,33 @@ html, body {
margin: 0;
}
.tap {
background: #000000;
#controls {
opacity: 0.8;
position: fixed;
animation: 2s linear forwards fade;
display: flex;
justify-content: center;
align-items: center;
}
@keyframes fade {
to { opacity: 0; }
}
#tap-left, #tap-right {
.tap {
background: #000000;
position: fixed;
display: flex;
justify-content: center;
align-items: center;
}
#tap-left, #tap-right {
bottom: 0px;
width: 30vw;
height: 100vh;
}
#tap-left svg, #tap-right svg {
width: min(90%, 100px);
}
#tap-left {
left: 0px;
}
@ -34,9 +40,65 @@ html, body {
right: 0px;
}
#tap-back {
top: 0px;
#tap-back, #tap-restart {
left: 30vw;
width: 40vw;
height: 20vh;
}
#tap-back svg {
height: min(51%, 100px);
}
#tap-restart svg {
height: min(90%, 175px);
}
#tap-back {
top: 0px;
}
#tap-restart {
bottom: 0px;
}
#viewer-images {
display: none;
}
#image-container {
height: 100vh;
width: 100vw;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
#page-num, #duration {
position: fixed;
font-size: 14pt;
top: 10px;
font-weight: bold;
opacity: 0.75;
text-shadow: /* Duplicate the same shadow to make it very strong */
0 0 2px #222,
0 0 2px #222,
0 0 2px #222;
}
#page-num {
left: 10px;
}
#duration {
right: 10px;
}
#progress {
background-color: #4488ffcc;
height: 5px;
width: 0;
position: fixed;
top: 0;
left: 0;
}

View file

@ -95,16 +95,20 @@ document.addEventListener('DOMContentLoaded', () => {
changePage(currentPage + (rtl ? -1 : 1));
}
function restart() {
changePage(0);
}
function exitToWork() {
changeDuration(duration, true);
localStorage.setItem(`${WORK_ID}-currentPage`, 0);
if (currentPage === pages.length - 1) {
localStorage.removeItem(`${WORK_ID}-currentPage`);
}
window.location.href = `../${INDEX}`;
}
function hideTapZones() {
for (const el of document.getElementsByClassName('tap')) {
el.style.opacity = 0;
}
document.getElementById('controls').style.opacity = 0;
}
changePage(currentPage);
@ -113,14 +117,17 @@ document.addEventListener('DOMContentLoaded', () => {
document.onkeydown = event => {
hideTapZones();
switch (event.keyCode) {
case 32: //space
changeDuration(duration, !paused);
break;
case 37: //left
switch (event.key) {
case "ArrowLeft":
left();
break;
case 38: //up
case "ArrowRight":
right();
break;
case " ":
changeDuration(duration, !paused);
break;
case "ArrowUp":
if (2 <= duration && duration <= 10) {
changeDuration(duration - 1, false);
} else if (10 < duration && duration <= 20) {
@ -129,10 +136,7 @@ document.addEventListener('DOMContentLoaded', () => {
changeDuration(duration - 5, false);
}
break;
case 39: //right
right();
break;
case 40: //down
case "ArrowDown":
if (duration < 10) {
changeDuration(duration + 1, false);
} else if (10 <= duration && duration < 20) {
@ -141,7 +145,10 @@ document.addEventListener('DOMContentLoaded', () => {
changeDuration(duration + 5, false);
}
break;
case 13: //enter
case "Enter":
restart();
break;
case "Escape":
exitToWork();
break;
}
@ -150,5 +157,6 @@ document.addEventListener('DOMContentLoaded', () => {
document.onclick = hideTapZones;
document.getElementById("tap-left").onclick = left;
document.getElementById("tap-right").onclick = right;
document.getElementById("tap-restart").onclick = restart;
document.getElementById("tap-back").onclick = exitToWork;
});

View file

@ -33,6 +33,13 @@
<path d='M -60 60 L 0 0 L 60 60' fill='none' stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='10'/>
</svg>
</div>
<div id="tap-restart" class="tap">
<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='140' height='140' viewBox='-70 -70 140 140'>
<path d='M 54.16 9.55 A 55 55 0 1 1 54.16 -9.55' fill='none' stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='10'/>
<path d='M 54.16 -9.55 l 9.39 -17.66' fill='none' stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='10'/>
<path d='M 54.16 -9.55 l -17.66 -9.39' fill='none' stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='10'/>
</svg>
</div>
</div>
<div id="image-container"></div>
{% endblock %}