Gam
This commit is contained in:
commit
607f09b75a
GPG key ID:
0989A73D8C421174
3 changed files with 313 additions and 0 deletions
22
index.html
Normal file
22
index.html
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Ludum Dare 47 - Loops</title>
|
||||
<link href="./style.css" rel="stylesheet" />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Ubuntu+Mono&display=swap" rel="stylesheet" />
|
||||
<script src="./script.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="primary">
|
||||
<div id="width_dummy"></div>
|
||||
<div id="prompt"></div>
|
||||
<div id="entry_space">
|
||||
<div id="arrow">></div>
|
||||
<input id="console" type="text" value=""></input>
|
||||
<div id="under_cursor"> </div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
205
script.js
Normal file
205
script.js
Normal file
|
|
@ -0,0 +1,205 @@
|
|||
var storyline = storyline || {};
|
||||
storyline.access = (path) => {
|
||||
path = path.split('.');
|
||||
let obj = storyline;
|
||||
for (const sub of path) {
|
||||
obj = obj[sub];
|
||||
}
|
||||
return obj;
|
||||
}
|
||||
|
||||
let widthDummy = null;
|
||||
function fitToText(element) {
|
||||
let elementStyle = window.getComputedStyle(element);
|
||||
widthDummy.style.fontSize = elementStyle.getPropertyValue('font-size');
|
||||
widthDummy.style.fontFamily = elementStyle.getPropertyValue('font-family');
|
||||
|
||||
widthDummy.textContent = '|';
|
||||
let pipeWidth = widthDummy.clientWidth;
|
||||
widthDummy.textContent = '|' + element.value + '|';
|
||||
element.style.width = widthDummy.clientWidth - 2 * pipeWidth + "px";
|
||||
}
|
||||
|
||||
/* https://davidwalsh.name/caret-end */
|
||||
function moveCursorToEnd(el) {
|
||||
if (typeof el.selectionStart == "number") {
|
||||
el.selectionStart = el.selectionEnd = el.value.length;
|
||||
} else if (typeof el.createTextRange != "undefined") {
|
||||
el.focus();
|
||||
var range = el.createTextRange();
|
||||
range.collapse(false);
|
||||
range.select();
|
||||
}
|
||||
}
|
||||
|
||||
function sleep(millis) {
|
||||
return new Promise(resolve => setTimeout(resolve, millis));
|
||||
}
|
||||
|
||||
let promptDiv = null;
|
||||
let responses = [];
|
||||
let currentId = 0;
|
||||
function reset(id) {
|
||||
if (id === currentId) {
|
||||
promptDiv.textContent = "";
|
||||
}
|
||||
}
|
||||
|
||||
function append(id, c) {
|
||||
if (id === currentId) {
|
||||
promptDiv.textContent += c;
|
||||
}
|
||||
}
|
||||
|
||||
async function promptUser(module) {
|
||||
const MIN_SLEEP = 25;
|
||||
const MAX_SLEEP = 50;
|
||||
const SPACE_SCALAR = 1.1;
|
||||
|
||||
const localId = ++currentId;
|
||||
module = storyline.access(module);
|
||||
for (const p of module.prompts) {
|
||||
responses = p.responses;
|
||||
reset(localId);
|
||||
for (let i = 0; i < p.text.length; ++i) {
|
||||
let c = p.text.charAt(i);
|
||||
append(localId, c);
|
||||
if (c === ' ') {
|
||||
await sleep((Math.random() * (MAX_SLEEP - MIN_SLEEP) + MIN_SLEEP) * SPACE_SCALAR);
|
||||
} else {
|
||||
await sleep((Math.random() * (MAX_SLEEP - MIN_SLEEP) + MIN_SLEEP));
|
||||
}
|
||||
}
|
||||
await sleep(p.wait);
|
||||
}
|
||||
if (localId === currentId && module.continuation) {
|
||||
promptUser(module.continuation);
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("load", () => {
|
||||
widthDummy = document.querySelector("#width_dummy");
|
||||
promptDiv = document.querySelector("#prompt");
|
||||
|
||||
let userConsole = document.querySelector("#console");
|
||||
let underCursor = document.querySelector("#under_cursor");
|
||||
userConsole.addEventListener("input", (event) => {
|
||||
fitToText(userConsole);
|
||||
});
|
||||
userConsole.addEventListener("keyup", (event) => {
|
||||
if (event.keyCode === 37) {
|
||||
moveCursorToEnd(userConsole);
|
||||
} else if (event.keyCode === 13) {
|
||||
const entry = userConsole.value;
|
||||
let matched = false;
|
||||
for (const responseOption of responses) {
|
||||
if (responseOption.matches(entry)) {
|
||||
matched = true;
|
||||
promptUser(responseOption.target);
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (matched) {
|
||||
userConsole.value = "";
|
||||
fitToText(userConsole);
|
||||
}
|
||||
}
|
||||
});
|
||||
userConsole.addEventListener("click", (event) => {
|
||||
moveCursorToEnd(userConsole);
|
||||
});
|
||||
let timerId = 0;
|
||||
let state = 0;
|
||||
userConsole.addEventListener("focusin", (event) => {
|
||||
moveCursorToEnd(userConsole);
|
||||
timerId = window.setInterval((e) => {
|
||||
if (state === 0) {
|
||||
underCursor.style.visibility = "visible";
|
||||
state = 1;
|
||||
} else {
|
||||
underCursor.style.visibility = "hidden";
|
||||
state = 0;
|
||||
}
|
||||
}, 500);
|
||||
});
|
||||
userConsole.addEventListener("focusout", (event) => {
|
||||
state = 0;
|
||||
window.clearInterval(timerId);
|
||||
underCursor.style.visibility = "hidden";
|
||||
});
|
||||
|
||||
fitToText(userConsole);
|
||||
userConsole.focus();
|
||||
|
||||
let entrySpace = document.querySelector("#entry_space");
|
||||
entrySpace.addEventListener("click", (event) => {
|
||||
userConsole.focus();
|
||||
});
|
||||
|
||||
promptUser('welcome');
|
||||
});
|
||||
|
||||
function Regex(regex) {
|
||||
return text => regex.test(text);
|
||||
}
|
||||
|
||||
storyline.common = {};
|
||||
storyline.common.yes = Regex(/^(y(y*e+s+)?)|(sure)$/i);
|
||||
storyline.common.no = Regex(/^n(n*o+)?$/i);
|
||||
storyline.common.any = text => true;
|
||||
|
||||
storyline.welcome = {
|
||||
prompts: [
|
||||
{ text: "Welcome!", wait: 1000, responses: [] },
|
||||
],
|
||||
continuation: 'begin',
|
||||
};
|
||||
|
||||
storyline.begin = {
|
||||
prompts: [
|
||||
{ text: "Would you like to begin?", wait: 0, responses: [
|
||||
{ matches: storyline.common.yes, target: 'repeat', },
|
||||
{ matches: storyline.common.no, target: 'begin.no', },
|
||||
{ matches: storyline.common.any, target: 'begin.unclear', },
|
||||
]},
|
||||
],
|
||||
};
|
||||
|
||||
storyline.begin.no = {
|
||||
prompts: [
|
||||
{ text: "As you wish. Whenever you're ready, hit enter and we will begin.", wait: 3000, responses: [
|
||||
{ matches: storyline.common.any, target: 'repeat' },
|
||||
]},
|
||||
],
|
||||
};
|
||||
|
||||
storyline.begin.unclear = {
|
||||
prompts: [
|
||||
{ text: "My apologies, I am unable to parse the textual data you passed forth. I invite you to please try again.", wait: 3000, },
|
||||
],
|
||||
continuation: 'begin',
|
||||
};
|
||||
|
||||
storyline.repeat = {
|
||||
prompts: [
|
||||
{ text: "Pete and repeat went out on a boat. Pete fell off. Who was left?", wait: 2000, responses: [
|
||||
{ matches: Regex(/r[e3]p[3e][a4]t/i), target: 'repeat', },
|
||||
{ matches: Regex(/.*n[o0]t.*p[e3]t[e3].*/i), target: 'repeat.unsmort', },
|
||||
{ matches: storyline.common.any, target: 'repeat.wat', },
|
||||
]},
|
||||
],
|
||||
};
|
||||
|
||||
storyline.repeat.unsmort = {
|
||||
prompts: [
|
||||
{ text: "Ah! A self proclaimed intellectual I see. Listen here, I'm gonna ask you again and I want a NAME this time! Thank you in advance.", wait: 4000, responses: [], },
|
||||
],
|
||||
continuation: 'repeat',
|
||||
};
|
||||
|
||||
storyline.repeat.wat = {
|
||||
prompts: [
|
||||
{ text: "I do apologize but that is not the correct answer. I do hope this hasn't discouraged you and you will try again though!", wait: 3500, responses: [], },
|
||||
],
|
||||
continuation: 'repeat',
|
||||
};
|
||||
86
style.css
Normal file
86
style.css
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
:root {
|
||||
--background-color: #000000;
|
||||
--text-color: #00FF33;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: var(--text-color);
|
||||
color: var(--background-color);
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
|
||||
|
||||
#primary {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#width_dummy {
|
||||
position: fixed;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#prompt {
|
||||
width: 80%;
|
||||
height: max-content;
|
||||
|
||||
margin-bottom: 0.2em;
|
||||
|
||||
font-size: 3em;
|
||||
font-family: 'Ubuntu Mono', monospace;
|
||||
text-align: center;
|
||||
word-wrap: break-word;
|
||||
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
#entry_space {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
|
||||
#arrow {
|
||||
margin-right: 0.25em;
|
||||
|
||||
font-size: 2em;
|
||||
font-family: 'Ubuntu Mono', monospace;
|
||||
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
#console {
|
||||
border: 0px solid var(--background-color);
|
||||
padding: 0px;
|
||||
|
||||
font-size: 2em;
|
||||
font-family: 'Ubuntu Mono', monospace;
|
||||
text-overflow: hidden;
|
||||
caret-color: transparent;
|
||||
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
#under_cursor {
|
||||
font-size: 2em;
|
||||
font-family: 'Ubuntu Mono', monospace;
|
||||
|
||||
background-color: var(--text-color);
|
||||
}
|
||||
|
||||
Loading…
Reference in a new issue