You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
122 lines
3.7 KiB
JavaScript
122 lines
3.7 KiB
JavaScript
// function prefixInputWithASpan(input, text){
|
|
// var span = document.createElement("span");
|
|
// span.innerText = text;
|
|
// input.parentElement.prepend(span);
|
|
// }
|
|
|
|
let terms;
|
|
let cParts = {};
|
|
|
|
function setupTextInput(key){
|
|
var input = document.getElementById(key + "Input");
|
|
prefixInputWithASpan(input, key)
|
|
input.setAttribute('min', 0);
|
|
input.setAttribute('max', terms[key].length - 1);
|
|
input.value = parseInt(Math.random() * (terms[key].length + 1));
|
|
var inputUpdate = function(e){
|
|
// gParts[key] = parseInt(e.target.value);
|
|
// console.log("INPUT UPDATE", e.target.value, gParts);
|
|
// updateOutCanvas();
|
|
console.log("INPUT UPDATE", e.target.value);
|
|
cParts[key] = parseInt(e.target.value);
|
|
updateCaption();
|
|
}
|
|
inputUpdate({ target: input });
|
|
input.onchange = inputUpdate;
|
|
input.oninput = inputUpdate;
|
|
};
|
|
|
|
let grammar = ["intro", "actor", "action", "prefix", "sort", "media"];
|
|
function updateCaption () {
|
|
let caption = "";
|
|
for (let gi=grammar.length-1; gi>=0; gi--) {
|
|
let key = grammar[gi];
|
|
let term = terms[key][cParts[key]];
|
|
if (!term) break;
|
|
console.log(`key: ${key}, term: ${term}`)
|
|
if (term.match(/a\(n\)/)) {
|
|
console.log(`doing a(n) replacement on ${term}, for [${caption}]`);
|
|
if (caption.match(/^[aeiou]/i)) {
|
|
console.log("VOWEL");
|
|
term = term.replace(/a\(n\)/, "an");
|
|
} else {
|
|
term = term.replace(/a\(n\)/, "a");
|
|
}
|
|
}
|
|
caption = term + (caption?" ":"") + caption;
|
|
}
|
|
// grammar.forEach(key => {
|
|
// caption += (caption ? " " : "") + terms[key][cParts[key]];
|
|
// })
|
|
document.querySelector("#caption").innerHTML = caption;
|
|
}
|
|
|
|
async function start () {
|
|
const src = document.querySelector("a#terms-data-source").href;
|
|
terms = await (await fetch(src)).json();
|
|
console.log("terms", terms);
|
|
setupTextInput("intro");
|
|
setupTextInput("action");
|
|
setupTextInput("actor");
|
|
setupTextInput("media");
|
|
setupTextInput("prefix");
|
|
setupTextInput("sort");
|
|
}
|
|
|
|
var randomizebtn = document.getElementById('randomizebtn');
|
|
randomizebtn.onclick = function() {
|
|
let inputs = document.getElementById('inputs').querySelectorAll('input.g');
|
|
|
|
for(var i=0; i<inputs.length; i++){
|
|
var input = inputs[i];
|
|
var key = input.id.replace("Input", "");
|
|
var max = PARTS_MAX[key];
|
|
var randval = Math.floor(Math.random() * (max + 1));
|
|
input.value = randval;
|
|
gParts[key] = randval;
|
|
if (key == 'color') {
|
|
// gColor = randval;
|
|
input.dispatchEvent(new Event('input', { 'bubbles': true }));
|
|
}
|
|
console.log("randomizing", input, randval);
|
|
}
|
|
|
|
updateOutCanvas();
|
|
|
|
inputs = document.getElementById('inputs').querySelectorAll('input.c');
|
|
for(var i=0; i<inputs.length; i++){
|
|
var input = inputs[i];
|
|
var key = input.id.replace("Input", "");
|
|
var max = terms[key].length;
|
|
var randval = Math.floor(Math.random() * (max + 0));
|
|
input.value = randval;
|
|
cParts[key] = randval;
|
|
}
|
|
updateCaption();
|
|
|
|
}
|
|
|
|
start();
|
|
|
|
function send (canvas, form) {
|
|
canvas.toBlob(blob => {
|
|
if (blob) {
|
|
const formdata = new FormData();
|
|
const filename = new Date().toISOString() + ".png";
|
|
formdata.append("image", blob, filename);
|
|
formdata.append("caption", document.querySelector("#caption").textContent);
|
|
formdata.append("csrfmiddlewaretoken", form.csrfmiddlewaretoken.value);
|
|
fetch(form.action, { method:"POST", body: formdata })
|
|
.then(() => {
|
|
document.querySelector("#inputs").style.display = "none";
|
|
document.querySelector("#caption").disabled = true;
|
|
});
|
|
}
|
|
}, "image/png");
|
|
}
|
|
|
|
document.querySelector("button#send").addEventListener("click", () => {
|
|
console.log("SEND");
|
|
const form = document.querySelector("form");
|
|
send(outCanvas, form);
|
|
}) |