gator/paytolaugh
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Try 4 versions of a picture, graded side by side, and pick one

Browse source
This commit is contained in:
gator 2026-09-19 17:34:30 +00:00
parent 3d34667b35
commit b66e665f3f
1 changed files with 63 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
trailer.html
View file

@ -67,6 +67,17 @@
.fchk .w{display:block;margin:3px 0}
.fchk .w.serious{color:#b4531f;font-weight:600}
.fchk .go{font-size:12px;padding:2px 9px;margin-left:6px}
.vars{border:1px solid var(--line);border-radius:10px;padding:10px;margin:0 0 10px}
.vars h5{margin:0 0 3px;font-size:13px}
.vars p{margin:0 0 8px;font-size:12px;color:var(--muted)}
.vars .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.vars .v{font-size:12px}
.vars .v img{width:100%;border-radius:7px;border:2px solid var(--line);display:block}
.vars .v.good img{border-color:#1f7a3a}
.vars .v.bad img{border-color:#b4531f}
.vars .v .say{margin:4px 0;color:var(--muted);min-height:2.6em}
.vars .v.bad .say{color:#b4531f}
.vars .v .btn{font-size:12px;padding:3px 10px}
.ffault{display:flex;gap:8px;margin:0 0 10px}
.ffault input{flex:1;min-width:0;font:inherit;font-size:12px;padding:5px 8px;
border:1px solid var(--line);border-radius:6px;background:transparent;color:inherit}
@ -250,7 +261,7 @@
if (String(PKG.look_state || "")
&& (Date.now() - (Date.parse(PKG.look_started || "") || 0)) < 15 * 60 * 1000) return true;
return (PKG.shots || []).some(function (s) {
return s.writing || s.drawing || s.fixing || stillFilming(s); });
return s.writing || s.drawing || s.fixing || s.varying || stillFilming(s); });
}
// Preparing the storyboard audio is work too. Without this the page stops
@ -969,6 +980,34 @@
+ '</div>';
}
// Several versions of one picture, best first, each with what the checker
// made of it. Picking the best of four needs no vocabulary at all.
function variantsHtml(s) {
if (s.varying) return '<p class="busy">Drawing several versions of this picture and checking each one\u2026 about a minute.</p>';
var v = s.variants;
if (!v || !(v.items || []).length)
return (v && v.error) ? '<p class="cont" style="color:#b4531f">' + esc(v.error) + '</p>' : "";
return '<div class="vars"><h5>' + v.items.length + ' versions of this picture \u2014 best first</h5>'
+ '<p>' + (v.note ? 'Drawn with your note: \u201c' + esc(v.note) + '\u201d. ' : '')
+ 'Click a picture to see it large. Press \u201cUse this one\u201d under the one you like; '
+ 'the ending picture is then drawn to match it.' + (v.error ? ' ' + esc(v.error) : '') + '</p>'
+ '<div class="grid">' + v.items.map(function (it, i) {
var fc = it.check || {};
var faults = (fc.duplicated || []).filter(Boolean).map(function (d) { return "same person twice: " + d; })
.concat((fc.faults || []).filter(function (f) { return f && f.what && f.severity === "serious"; })
.map(function (f) { return f.what; }));
var minor = (fc.faults || []).filter(function (f) { return f && f.what && f.severity !== "serious"; });
var cls = fc.verdict === "broken" ? "bad" : (fc.verdict === "ok" ? "good" : "");
var say = faults.length ? faults[0]
: (minor.length ? "small things only: " + minor[0].what
: (fc.verdict ? "\u2713 the checker sees nothing wrong" : "not checked"));
return '<div class="v ' + cls + '"><img data-zoom="' + esc("shot " + s.id + " \u2014 version " + (i + 1) + ": " + say)
+ '" src="' + esc(it.url) + '" alt=""><div class="say">' + esc(String(say).slice(0, 150)) + '</div>'
+ '<button type="button" class="btn' + (i === 0 && cls !== "bad" ? ' primary' : '')
+ '" data-pickvar="' + esc(s.id) + '|' + i + '">Use this one</button></div>';
}).join("") + '</div></div>';
}
// "That is not right" - about the PICTURE, in the author's own words. The
// picture is what the shot is filmed from, so a fault here is inherited by
// the film and cannot be fixed by filming again.
@ -982,7 +1021,10 @@
return '<div class="ffault"><input type="text" id="ff-' + esc(s.id) + '" maxlength="400" '
+ 'placeholder="Something wrong with this picture? Say what you see \u2014 \u201cit should be night\u201d, '
+ '\u201cthere should be nobody else in the garden\u201d\u2026">'
+ '<button type="button" class="btn go" data-ffgo="' + esc(s.id) + '">Redraw &middot; $0.16</button></div>' + err;
+ '<button type="button" class="btn go" data-ffgo="' + esc(s.id) + '">Redraw &middot; $0.16</button>'
+ '<button type="button" class="btn go" data-vargo="' + esc(s.id) + '" title="Draws four versions of this '
+ 'picture, checks each one, and lets you choose. Anything typed in the box is used as a note for all four.">'
+ 'Try 4 versions &middot; $0.35</button></div>' + err;
}
// WHO IS IN THIS SCENE, as they look in it. This is where an author changes
@ -1157,6 +1199,7 @@
+ (s.day ? ' &middot; <span class="scene">' + esc(s.day) + '</span>' : '')
+ '</div>'
+ media
+ variantsHtml(s)
+ frameCheckHtml(s)
+ frameFaultHtml(s)
+ whoInHtml(s)
@ -1346,6 +1389,24 @@
z.classList.add("on");
return;
}
if ((el = hit("data-vargo"))) {
var vsid = el.getAttribute("data-vargo");
var vbox = document.getElementById("ff-" + vsid);
el.disabled = true; el.textContent = "starting\u2026";
r = await act("draw_variants", { draft_id: CUR, shot_id: vsid, n: 4,
note: vbox ? vbox.value.trim() : "" });
if (r) { showMsg("msg", "Drawing " + r.n + " versions of shot " + vsid + ", about $" + r.usd
+ ". They appear here in about a minute.", "ok"); await refresh(); }
return;
}
if ((el = hit("data-pickvar"))) {
var pv = el.getAttribute("data-pickvar").split("|");
el.disabled = true; el.textContent = "working\u2026";
r = await act("pick_variant", { draft_id: CUR, shot_id: pv[0], index: Number(pv[1]) });
if (r) { showMsg("msg", "Using that version for shot " + pv[0] + " and drawing its ending picture to match.", "ok");
await refresh(); }
return;
}
if ((el = hit("data-chkpics"))) {
el.disabled = true; el.textContent = "starting\u2026";
r = await act("check_pictures", { draft_id: CUR });