Skip to content

Commit

Permalink
Merge pull request #1 from Styro457/dev
Browse files Browse the repository at this point in the history
Version 0.2.0
  • Loading branch information
Styro457 committed Nov 13, 2023
2 parents f0cab6a + 061435e commit f5f29af
Show file tree
Hide file tree
Showing 12 changed files with 473 additions and 257 deletions.
Binary file added assets/fonts/OCR-A-Regular.ttf
Binary file not shown.
Binary file added assets/images/paper_texture.webp
Binary file not shown.
22 changes: 15 additions & 7 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,10 @@
<link rel="icon" type="image/x-icon" href="assets/icons/favicon.ico">
<!--Icon created by Vector Squad - Flaticon-->

<link rel="stylesheet" href="style/fonts.css">
<link rel="stylesheet" href="style/style.css">
<link rel="stylesheet" href="style/machine.css">
<link rel="stylesheet" href="style/results.css">
<link rel="stylesheet" href="style/animations.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
Expand All @@ -15,6 +18,7 @@
<div class="machineHolder">
<img class="title unselectable" src="assets/images/title.webp" width="1334" height="173" ondragstart="return false;" alt="Wordish.Name">
<div class="machine">
<div class="results" id="results"><p class="resultsSummary" id="resultsSummary"></p></div>
<img class="machineBody unselectable" src="assets/images/machineBody.webp" width="1157" height="984" ondragstart="return false;" alt="Machine"
onload="document.getElementById('cover').classList.add('fadeOut');">
<div class="machineUI">
Expand All @@ -24,16 +28,23 @@
onfocus="startCaret(this);"
onfocusout="stopCaret(this);"
oninput="caretInput(this);"
ondragover="stopCaret(this)"
ondragend="startCaret(this)"
ondragenter="stopCaret(this);"
ondragover="stopCaret(this);"
ondragend="startCaret(this);"
ondragstart="stopCaret(this);"
onkeydown="caretMove(this)"
onkeyup="caretMove(this)"
>
</div>
<div class="generateButtonBackground">
<input type="submit" class="generateButton" name="generateButton" id="generateButton" value="">
</div>
</form >
<div class="machineScreen machineScreenOn" id="machineScreenOn"></div>
<div class="machineScreen">

<p class="screenWords scrollBar" id="screenWords"></p>
<p class="checkedWordsCount count" id="checkedWordsCount"></p>
<p class="foundWordsCount count" id="foundWordsCount"></p>
</div>
<div class="machineLinks unselectable">
<a href="https://github.com/Styro457" target=”_blank”><button class="githubAuthorButton"></button></a>
Expand All @@ -43,12 +54,9 @@
</div>
</div>

<p id="allWordsText"></p>
<p id="resultsFound"></p>
<div id="results"></div>

<script src="scripts/display/customCaret.js"></script>
<script src="scripts/apis/datamuse.js"></script>
<script src="scripts/display/wordsDisplay.js"></script>
<script src="scripts/input.js"></script>
<script src="scripts/generator.js"></script>
<script src="scripts/text-to-speech.js"></script>
Expand Down
10 changes: 4 additions & 6 deletions scripts/apis/datamuse.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
function getRelatedWords(word, topics, firstLetter, lastLetter, limit, frequencyLimit, minLenght) {
function getRelatedWords(word, searchType, topics, firstLetter, lastLetter, limit, frequencyLimit, minLength) {
return new Promise((resolve) => {
let url = "https://api.datamuse.com/words?ml=" + word + "&max=" + limit + "&md=df";

let url = "https://api.datamuse.com/words?" + searchType + "=" + word + "&max=" + limit + "&md=df";
//Add topics to the api input if they are specified
if(topics !== null && topics.length > 0) {
let topicsString = topics[0];
Expand All @@ -12,16 +11,15 @@ function getRelatedWords(word, topics, firstLetter, lastLetter, limit, frequency
}

//Get the api response
fetch("https://api.datamuse.com/words?ml=" + word + "&max=" + limit + "&md=df").then(response => {
fetch(url).then(response => {
return response.json()
}).then(data => {
const words = []
let frequency, word;
for(let i in data) {
frequency = data[i]["tags"][data[i]["tags"].length-1]
word = data[i]["word"];
addWord(word);
if(frequency.startsWith(frequencyLimit) && !word.includes(" ") && word.length >= minLenght) {
if(frequency.startsWith(frequencyLimit) && !word.includes(" ") && !word.includes("-") && word.length >= minLength) {
words.push(
{
word: word,
Expand Down
42 changes: 35 additions & 7 deletions scripts/display/customCaret.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,15 @@ let caretAnimation = false;
let caretTimerID;
let lastInput = null;

const caret = '_';

document.getElementById("wordsInput").focus();

String.prototype.insert_at=function(index, string)
{
return this.substring(0, index) + string + this.substring(index);
}

function startCaret(input) {
caretTimerID = setInterval(animateCaret, 500, input);
animateCaret(input);
Expand All @@ -12,32 +19,53 @@ function startCaret(input) {
function stopCaret(input) {
clearInterval(caretTimerID);
caretTimerID = null;
input.value = input.value.replaceAll("_", "");
input.value = input.value.replaceAll(caret, "");
}

function animateCaret(input) {
if(input.selectionStart-input.selectionEnd !== 0)
return;
if(Date.now()-lastInput < 700)
return;
if(caretAnimation) {
input.value = input.value + "_";
const oldSelectionStart = input.selectionStart;
const oldSelectionEnd = input.selectionEnd;
input.value = input.value.insert_at(input.selectionStart, caret);
input.selectionStart = oldSelectionStart;
input.selectionEnd = oldSelectionEnd;
caretAnimation = !caretAnimation;
}
else {
input.value = input.value.slice(0, -1);
const oldSelectionStart = input.selectionStart;
const oldSelectionEnd = input.selectionEnd;
input.value = input.value.replaceAll(caret, "");
caretAnimation = !caretAnimation;
input.selectionStart = oldSelectionStart;
input.selectionEnd = oldSelectionEnd;
}
}

function caretInput(input, event) {
function caretMove(input) {
const oldSelectionStart = input.selectionStart;
const oldSelectionEnd = input.selectionEnd;
input.value = input.value.replaceAll(caret, "");
input.selectionStart = oldSelectionStart;
input.selectionEnd = oldSelectionEnd;
input.value = input.value.insert_at(input.selectionStart, caret);
input.selectionStart = oldSelectionStart;
input.selectionEnd = oldSelectionEnd;
lastInput = Date.now();
}

function caretInput(input) {
if(caretTimerID !== null) {
if(!caretAnimation) {
if(input.value.charAt(input.value.length-2) !== "_") {
if(!input.value.includes("_")) {
input.value = input.value.slice(0, -1);
caretAnimation = !caretAnimation;
return;
}
input.value = input.value.replaceAll("_", "");
input.value = input.value + "_";
caretMove(input);
lastInput = Date.now();
}
}
Expand Down
63 changes: 63 additions & 0 deletions scripts/display/wordsDisplay.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
const resultsDiv = document.getElementById("results");
const foundWordsCount = document.getElementById("foundWordsCount");

let globalWords = [];
function addResult(word) {
let div = document.createElement("div");
div.className = "result";

let text = document.createElement("p");
text.className = "resultWord";
text.textContent = word.word;

let frequency = document.createElement("p");
frequency.className = "resultFrequency";
frequency.textContent = "frequency: " + word.frequency.substring(2);

let description = document.createElement("p");
description.className = "resultDescription";
let definitions = "";
if(word.definitions !== undefined) {
for (let i = 0; i < word.definitions.length; i++) {
definitions = definitions + "(" + word.definitions[i].replace(/\s/, ".) ") + "\r\n\r\n";
}
}
description.textContent = definitions;

let audio = document.createElement("button");
audio.className = "resultAudio";
audio.onclick = function() {textToSpeech(word.word)};
audio.innerHTML = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-volume-up\" viewBox=\"0 0 16 16\">\n" +
" <path d=\"M11.536 14.01A8.473 8.473 0 0 0 14.026 8a8.473 8.473 0 0 0-2.49-6.01l-.708.707A7.476 7.476 0 0 1 13.025 8c0 2.071-.84 3.946-2.197 5.303l.708.707z\"/>\n" +
" <path d=\"M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.483 5.483 0 0 1 11.025 8a5.483 5.483 0 0 1-1.61 3.89l.706.706z\"/>\n" +
" <path d=\"M10.025 8a4.486 4.486 0 0 1-1.318 3.182L8 10.475A3.489 3.489 0 0 0 9.025 8c0-.966-.392-1.841-1.025-2.475l.707-.707A4.486 4.486 0 0 1 10.025 8zM7 4a.5.5 0 0 0-.812-.39L3.825 5.5H1.5A.5.5 0 0 0 1 6v4a.5.5 0 0 0 .5.5h2.325l2.363 1.89A.5.5 0 0 0 7 12V4zM4.312 6.39 6 5.04v5.92L4.312 9.61A.5.5 0 0 0 4 9.5H2v-3h2a.5.5 0 0 0 .312-.11z\"/>\n" +
"</svg>";

div.appendChild(text);
text.appendChild(audio);
div.appendChild(frequency);
div.appendChild(description);

resultsDiv.appendChild(div);
}

function displayWord(i) {
addResult(globalWords[i]);
let wordCount = Number(foundWordsCount.textContent);
foundWordsCount.textContent = String(wordCount + 1);
if(i < globalWords.length-1)
setTimeout(displayWord.bind(null, i + 1), wordCount === 0 ? 400 : 50);
else
document.getElementById("generateButton").disabled = false;
}

function displayResults(words) {
resultsDiv.style.opacity = "100%";
resultsDiv.style.top = "87%";
foundWordsCount.textContent = 0 + "";

document.getElementById("resultsSummary").textContent = "- " + words.length + " words found -";

globalWords = words;
displayWord(0);
}
145 changes: 59 additions & 86 deletions scripts/generator.js
Original file line number Diff line number Diff line change
@@ -1,101 +1,74 @@
const resultsDiv = document.getElementById("results");
const allWordsText = document.getElementById("allWordsText");
const resultsFound = document.getElementById("resultsFound");
const checkedWordsCount = document.getElementById("checkedWordsCount");
const screenWords = document.getElementById("screenWords");
const machineScreenOn = document.getElementById("machineScreenOn");

let globalWords = [];


function addResult(word) {
console.log("RESULT");
let div = document.createElement("div");
div.className = "result";

let text = document.createElement("p");
text.className = "resultWord";
text.textContent = word.word;

let frequency = document.createElement("p");
frequency.className = "resultFrequency";
frequency.textContent = "frequency: " + word.frequency.substring(2);

let description = document.createElement("p");
description.className = "resultDescription";
let definitions = "";
if(word.definitions !== undefined) {
for (let i = 0; i < word.definitions.length; i++) {
definitions = definitions + "(" + word.definitions[i].replace(/\s/, ".) ") + "\r\n\r\n";
}
}
description.textContent = definitions;

let audio = document.createElement("button");
audio.className = "resultAudio";
audio.onclick = function() {textToSpeech(word.word)};
audio.innerHTML = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-volume-up\" viewBox=\"0 0 16 16\">\n" +
" <path d=\"M11.536 14.01A8.473 8.473 0 0 0 14.026 8a8.473 8.473 0 0 0-2.49-6.01l-.708.707A7.476 7.476 0 0 1 13.025 8c0 2.071-.84 3.946-2.197 5.303l.708.707z\"/>\n" +
" <path d=\"M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.483 5.483 0 0 1 11.025 8a5.483 5.483 0 0 1-1.61 3.89l.706.706z\"/>\n" +
" <path d=\"M10.025 8a4.486 4.486 0 0 1-1.318 3.182L8 10.475A3.489 3.489 0 0 0 9.025 8c0-.966-.392-1.841-1.025-2.475l.707-.707A4.486 4.486 0 0 1 10.025 8zM7 4a.5.5 0 0 0-.812-.39L3.825 5.5H1.5A.5.5 0 0 0 1 6v4a.5.5 0 0 0 .5.5h2.325l2.363 1.89A.5.5 0 0 0 7 12V4zM4.312 6.39 6 5.04v5.92L4.312 9.61A.5.5 0 0 0 4 9.5H2v-3h2a.5.5 0 0 0 .312-.11z\"/>\n" +
"</svg>";

div.appendChild(text);
text.appendChild(audio);
div.appendChild(frequency);
div.appendChild(description);

resultsDiv.appendChild(div);
}

function addWord(word) {
allWordsText.textContent = allWordsText.textContent + word + "\r\n";
function updateCheckedWordsCount(amount) {
checkedWordsCount.textContent = String(Number(checkedWordsCount.textContent) + amount);
}

function checkWords(i) {
addResult(globalWords[i]);
resultsFound.textContent = Number(resultsFound.textContent) + 1 + "";
if(i < globalWords.length-1)
setTimeout(checkWords.bind(null, i + 1), 50);
else
document.getElementById("generateButton").disabled = false;
async function addScreenWords(words) {
for(let i = 0; i < words.length; i++) {
screenWords.textContent += words[i].word + "\r\n";
screenWords.scrollTop = screenWords.scrollHeight;
}
}

async function addResultsForKeyword(keywordsRaw) {
async function generateWords(keywordsRaw) {
//Split the raw input into words. The words should be separated by commas
const keywords = keywordsRaw.split(/[\s,]+/);
console.log(keywords);

// Generate related words both with and without the other words set as topics
for(let i = 0; i < keywords.length; i++) {
await getRelatedWords(
keywords[i],
keywords.slice().splice(i, 1),
undefined, undefined,
300, "f:0.00", 4).then(words => {
globalWords = globalWords.concat(words);
});
}
let words = []

checkedWordsCount.textContent = undefined;
screenWords.textContent = undefined;
resultsDiv.style = null;
machineScreenOn.style.opacity = "100%";

// Generate words using different combinations of keywords
for(let i = 0; i < keywords.length; i++) {
await getRelatedWords(
keywords[i],
null,
undefined, undefined,
300, "f:0.00", 4).then(words => {
globalWords = globalWords.concat(words);
});
await getRelatedWords(keywords[i], "ml", null, undefined, undefined, 300, "f:0.00", 4).then(result => {
words = words.concat(result);
updateCheckedWordsCount(result.length);
addScreenWords(result);
})
for(let j = 0; j < keywords.length; j++) {
if(i === j)
continue;
await getRelatedWords(keywords[i] + ", " + keywords[j], "ml", [keywords[j]], undefined, undefined, 300, "f:0.00", 4).then(result => {
words = words.concat(result);
updateCheckedWordsCount(result.length);
addScreenWords(result);
})
for(let k = 0; k < keywords.length; k++) {
if(j === k || i === k)
continue;
await getRelatedWords(keywords[i] + ", " + keywords[j] + ", " + keywords[k], "ml", [keywords[j]], undefined, undefined, 300, "f:0.00", 4).then(result => {
words = words.concat(result);
updateCheckedWordsCount(result.length);
addScreenWords(result);
})
}
}
}

console.log(globalWords);
const seen = {};
globalWords = globalWords.filter(function(item) {
words = words.filter(function(item) {
let k = item.word;
return seen.hasOwnProperty(k) ? false : (seen[k] = true);
if(seen.hasOwnProperty(k)) {
seen[k]["seen"]++;
return false;
}
else {
seen[k] = item;
item["seen"] = 1;
return true;
}
})
globalWords = globalWords.sort(function(a, b){
return a.word.length - b.word.length;
words = words.sort(function(a, b){
let seenDifference = (b.seen-(b.word.length*0.2)) - (a.seen-(a.word.length*0.2));
if(seenDifference === 0)
return a.word.length - b.word.length;
return seenDifference;
});
console.log(globalWords);
document.getElementById("resultsFoundText").textContent = "Words found: ";
resultsFound.textContent = 0 + "";
checkWords(0);
}

//addResultsForKeyword("darkness");
return words;
}
Loading

0 comments on commit f5f29af

Please sign in to comment.