Implement nextLetter functionality
This commit is contained in:
parent
b1ee485482
commit
2a2eba6643
|
|
@ -16,6 +16,7 @@
|
|||
padding: 20px;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 40px;
|
||||
background-color: antiquewhite;
|
||||
}
|
||||
|
||||
.flex-items {
|
||||
|
|
@ -30,7 +31,6 @@
|
|||
align-self: auto;
|
||||
order: 0;
|
||||
width: 500px;
|
||||
border: 2px black solid;
|
||||
font-size: 44px;
|
||||
text-align: center;
|
||||
margin: 0 auto 20px;
|
||||
|
|
@ -43,7 +43,6 @@
|
|||
flex-basis: auto;
|
||||
align-self: auto;
|
||||
order: 0;
|
||||
border: 2px black solid;
|
||||
margin: 0 auto;
|
||||
width: 500px;
|
||||
}
|
||||
|
|
@ -57,6 +56,7 @@
|
|||
grid-row-gap: 12px;
|
||||
padding: 12px;
|
||||
margin: 0 auto;
|
||||
background-color: slategray;
|
||||
}
|
||||
|
||||
.keyboard-key {
|
||||
|
|
@ -64,6 +64,7 @@
|
|||
height: 100px;
|
||||
border: 2px solid black;
|
||||
margin: 2px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
#keyboard-key:nth-child(1) {
|
||||
|
|
@ -96,4 +97,35 @@
|
|||
|
||||
#keyboard-key:nth-child(8) {
|
||||
grid-area: 2 / 4 / 3 / 5;
|
||||
}
|
||||
|
||||
#letterbox {
|
||||
min-height: 100px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: normal;
|
||||
align-content: normal;
|
||||
}
|
||||
|
||||
.letterbox-letter, .letterbox-letter-hl {
|
||||
width: 20px;
|
||||
height: 36px;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: black;
|
||||
border-bottom: solid black 2px;
|
||||
margin: 4px;
|
||||
display: block;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 1;
|
||||
flex-basis: auto;
|
||||
align-self: auto;
|
||||
order: 0;
|
||||
}
|
||||
|
||||
.letterbox-letter-hl {
|
||||
border: solid black 2px;
|
||||
background-color: yellow;
|
||||
}
|
||||
28
index.html
28
index.html
|
|
@ -28,7 +28,7 @@
|
|||
<li><a href="#contact">Contact</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
|
||||
aria-expanded="false">Dropdown <span class="caret"></span></a>
|
||||
aria-expanded="false">Learn ARTSEY<span class="caret"></span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
|
|
@ -46,25 +46,27 @@
|
|||
</nav>
|
||||
|
||||
<div class="flex-container">
|
||||
<div class="flex-items" id="text-to-type"></div>
|
||||
<div class="flex-items">
|
||||
<div id="keyboard">
|
||||
<div class="keyboard-key"></div>
|
||||
<div class="keyboard-key"></div>
|
||||
<div class="keyboard-key"></div>
|
||||
<div class="keyboard-key"></div>
|
||||
<div class="keyboard-key"></div>
|
||||
<div class="keyboard-key"></div>
|
||||
<div class="keyboard-key"></div>
|
||||
<div class="keyboard-key"></div>
|
||||
<div id="letterbox">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-items" id="text-to-type"></div>
|
||||
<div id="keyboard">
|
||||
<div class="keyboard-key"></div>
|
||||
<div class="keyboard-key"></div>
|
||||
<div class="keyboard-key"></div>
|
||||
<div class="keyboard-key"></div>
|
||||
<div class="keyboard-key"></div>
|
||||
<div class="keyboard-key"></div>
|
||||
<div class="keyboard-key"></div>
|
||||
<div class="keyboard-key"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://code.jquery.com/jquery-3.7.0.slim.min.js"
|
||||
integrity="sha256-tG5mcZUtJsZvyKAxYLVXrmjKBVLd6VpVccqz/r4ypFE=" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
|
||||
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.7.0.slim.min.js"
|
||||
integrity="sha256-tG5mcZUtJsZvyKAxYLVXrmjKBVLd6VpVccqz/r4ypFE=" crossorigin="anonymous"></script>
|
||||
<script src="js/artsey-tutor.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,4 +1,12 @@
|
|||
let mappings = {
|
||||
'key_a': [1, 0, 0, 0, 0, 0, 0, 0],
|
||||
'key_r': [0, 1, 0, 0, 0, 0, 0, 0],
|
||||
'key_t': [0, 0, 1, 0, 0, 0, 0, 0],
|
||||
'key_s': [0, 0, 0, 1, 0, 0, 0, 0],
|
||||
'key_e': [0, 0, 0, 0, 1, 0, 0, 0],
|
||||
'key_y': [0, 0, 0, 0, 0, 1, 0, 0],
|
||||
'key_i': [0, 0, 0, 0, 0, 0, 1, 0],
|
||||
'key_o': [0, 0, 0, 0, 0, 0, 0, 1],
|
||||
'key_q': [1, 0, 1, 1, 0, 0, 0, 0],
|
||||
'key_w': [1, 0, 0, 1, 0, 0, 0, 0],
|
||||
'key_u': [0, 0, 0, 0, 0, 1, 1, 0],
|
||||
|
|
@ -12,7 +20,7 @@ let mappings = {
|
|||
'key_l': [0, 0, 0, 0, 1, 1, 1, 0],
|
||||
'key_z': [1, 1, 1, 1, 0, 0, 0, 0],
|
||||
'key_x': [0, 1, 1, 1, 0, 0, 0, 0],
|
||||
'key_c': [0, 0, 0, 1, 1, 0, 0, 0],
|
||||
'key_c': [0, 0, 0, 0, 1, 1, 0, 0],
|
||||
'key_v': [0, 1, 0, 1, 0, 0, 0, 0],
|
||||
'key_b': [0, 0, 0, 0, 1, 0, 0, 1],
|
||||
'key_n': [0, 0, 0, 0, 0, 0, 1, 1],
|
||||
|
|
@ -26,33 +34,87 @@ let mappings = {
|
|||
'key_exclamation': [0, 0, 1, 0, 0, 0, 1, 0]
|
||||
}
|
||||
|
||||
function artsey_draw(key_config) {
|
||||
async function artseyDraw() {
|
||||
let keys = $('.keyboard-key');
|
||||
for (let i = 0; i < keys.length; i++) {
|
||||
if (key_config[i] === 1)
|
||||
if (currentMapping[i] === 1)
|
||||
$(keys[i]).css('background-color', 'black');
|
||||
else
|
||||
$(keys[i]).css('background-color', 'white');
|
||||
}
|
||||
}
|
||||
|
||||
function artsey_reset() {
|
||||
async function artseyReset() {
|
||||
let config = {'': [0, 0, 0, 0, 0, 0, 0, 0]};
|
||||
artsey_draw(config);
|
||||
$('#letterbox').text('');
|
||||
await artseyDraw(config);
|
||||
}
|
||||
|
||||
const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay))
|
||||
|
||||
let current_letter = '';
|
||||
async function setTypingText(text) {
|
||||
$('#letterbox').empty();
|
||||
console.log(text);
|
||||
for (let i = 0; i < text.length; i++) {
|
||||
let letter = text.charAt(i);
|
||||
let div = "<div class='letterbox-letter'>" + letter + "</div>";
|
||||
$(div).appendTo('#letterbox');
|
||||
await sleep(80);
|
||||
}
|
||||
}
|
||||
|
||||
async function highlightLetter(letterDiv) {
|
||||
$(letterDiv).removeClass("letterbox-letter");
|
||||
$(letterDiv).addClass("letterbox-letter-hl");
|
||||
}
|
||||
|
||||
async function unhighlightLetter(letterDiv) {
|
||||
$(letterDiv).removeClass("letterbox-letter-hl");
|
||||
$(letterDiv).addClass("letterbox-letter");
|
||||
}
|
||||
|
||||
async function getMappingForLetter(letter) {
|
||||
switch(letter) {
|
||||
case ' ':
|
||||
return "key_space";
|
||||
case ',':
|
||||
return "key_comma";
|
||||
case 'enter':
|
||||
return "key_enter";
|
||||
case 'backspace':
|
||||
return "key_backspace";
|
||||
default:
|
||||
return "key_" + letter.toLowerCase();
|
||||
}
|
||||
}
|
||||
|
||||
async function setNextLetter() {
|
||||
if (currentletterIndex > currentString.length-1) {
|
||||
return;
|
||||
}
|
||||
let prevIndex = currentletterIndex-1;
|
||||
if (prevIndex >= -1) {
|
||||
await unhighlightLetter($("#letterbox").children()[currentletterIndex]);
|
||||
}
|
||||
currentletterIndex++;
|
||||
currentLetter = currentString.charAt(currentletterIndex).toLowerCase();
|
||||
currentMapping = mappings[(await getMappingForLetter(currentLetter)).toString()];
|
||||
await highlightLetter($("#letterbox").children()[currentletterIndex]);
|
||||
await artseyDraw();
|
||||
}
|
||||
|
||||
let currentletterIndex = -1;
|
||||
let currentLetter = '';
|
||||
let currentString = "hello world";
|
||||
let currentMapping = [0, 0, 0, 0, 0, 0, 0, 0];
|
||||
|
||||
$(document).ready(async function () {
|
||||
console.log("ready!");
|
||||
for (let key in mappings) {
|
||||
console.log("ready! Here's a demo.");
|
||||
await sleep(1000);
|
||||
await setTypingText(currentString);
|
||||
await sleep(500);
|
||||
|
||||
for (let i = 0; i < currentString.length; i++) {
|
||||
await setNextLetter();
|
||||
await sleep(1000);
|
||||
console.log(key);
|
||||
$('#text-to-type').text(key.split('_')[1].toLowerCase())
|
||||
artsey_draw(mappings[key]);
|
||||
}
|
||||
//artsey_reset();
|
||||
});
|
||||
Loading…
Reference in New Issue