// ==UserScript==
// @name Semantle Enhancements
// @namespace http://c9a.dev/
// @version 0.4.8.4
// @description Add a little pizzazz to Semantle
// @author Joel Bradshaw
// @match https://semantle.novalis.org/*
// @icon https://www.google.com/s2/favicons?domain=novalis.org
// @require https://cdn.jsdelivr.net/npm/[email protected]/dist/d3.min.js
// @grant none
// @license MIT
// ==/UserScript==
/* globals d3 */
/* global Semantle guesses guessed */
const head = document.querySelector('head');
const styles = document.createElement('style');
styles.innerHTML = `;
.cloud {
display: flex;
flex-direction: column;
}
.cloud .row {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.cloud .word {
margin: 0px 5px;
}
`;
head.appendChild(styles);
let guessTable;
let chartParts = {};
let similarityValues;
let xScale, yScale;
let xAxis, yAxis;
let focusedWord = null;
// This does negatives like I want
function round(num, digits) {
const mult = 10**digits;
return Math.floor(num*mult)/mult;
}
function magRound(num) {
const magnitude = Math.floor(Math.log10(num));
return round(num, -magnitude);
}
class Cloud {
constructor(guessTable, waypoints, { scale, width }) {
this.waypoints = waypoints;
this.scale = scale;
this.width = width;
this.minSize = 12;
this.div = document.createElement('div');
this.div.setAttribute('class', 'cloud');
guessTable.parentNode.insertBefore(this.div, guessTable);
this.words = d3.select(this.div);
}
getSize(similarity) {
return this.minSize + similarity*this.scale
}
getWordsPerLine(guess) {
const guessSize = this.getSize(guess.similarity);
const estimatedWordsPerLine = this.width/(guessSize*5);
const wordsPerLine = Math.max(magRound(estimatedWordsPerLine), 10);
//console.log("Words per line: ", guessSize, estimatedWordsPerLine, wordsPerLine);
return wordsPerLine;
}
update(guesses, lastGuess) {
const [closest, top10, top1000] = this.waypoints;
guesses.sort((a, b) => b.similarity - a.similarity);
const groups = [];
// determine breaks
let nextBreak = 1000;
let curWords = [];
let wordsPerLine = this.getWordsPerLine(guesses[0]);
let breakSize = 1;
for(const guess of guesses) {
const guessSize = this.getSize(guess.similarity);
let niceBreak = false;
if(guess.closeness && guess.closeness < nextBreak) {
niceBreak = (curWords.length > wordsPerLine/3) || curWords[0] && curWords[0].closeness === 1000;
const pos = 1000-guess.closeness;
breakSize = 10**(Math.floor(Math.log10(pos)));
nextBreak = 1000 - (Math.floor(pos/breakSize)+1)*breakSize;
console.log('next break:', nextBreak)
} else if(guess.similarity < top1000 && nextBreak !== null) {
niceBreak = true;
nextBreak = null;
}
if(niceBreak || curWords.length > wordsPerLine) {
groups.push(curWords);
wordsPerLine = this.getWordsPerLine(guess);
curWords = [];
}
curWords.push(guess);
}
if(curWords.length) { groups.push(curWords); }
const self = this;
const rows = this.words
.selectAll('div.row')
.data(groups)
.join(enter => enter.append('div').attr('class', 'row'))
.selectAll('div.word')
.data(g => g, d => d.order)
.join(
enter => enter.append('div')
.attr('class', 'word')
.text(d => d.closeness === 1000 ? `🎉🏆${d.guess}🏆🎉` : d.guess)
)
.style('font-size', d => self.getSize(d.similarity) + 'px')
.style('color', d => d.order === lastGuess ? 'red' : d.closeness ? `rgb(0,${d.closeness/1000*96+31},0)` : `rgb(${d.similarity/100*255},0,0)`)
.style('font-weight', d => d.order === lastGuess ? 'bold' : 'normal');
}
}
class Chart {
constructor(guessTable, waypoints) {
this.waypoints = waypoints;
this.div = document.createElement('div');
guessTable.parentNode.insertBefore(this.div, guessTable);
this.height = 150;
this.margin = 20;
const chart = d3.select(this.div).append('svg')
.style('width', '100%')
.attr('height', this.height);
window.chart = chart;
// TODO: Not const?;
const width = this.div.querySelector('svg').clientWidth;
this.guesses = chart.append('g');
this.max = chart.append('g');
this.avg = chart.append('g');
this.labels = chart.append('g').attr('fill', 'rgba(255,255,255,0.2)');
this.xAxis = chart.append('g');
this.yAxis = chart.append('g');
yScale = d3.scaleLinear().domain([-10,100]).range([this.height-this.margin*2,this.margin]);
// TODO: Shrink as we keep guessing;
xScale = d3.scaleLinear().domain([0,200]).range([this.margin*3,width-this.margin*2]);
xAxis = d3.axisBottom(xScale);
yAxis = d3.axisLeft(yScale).ticks(5);
const addTitle = (text, rotate) => (axis) => {
const bbox = axis.node().getBBox();
const textElm = axis
.append('text')
.text(text)
.attr('text-anchor','middle')
.attr('dominant-baseline', 'hanging')
.attr('fill', 'black');
if(rotate) {
textElm
.attr('writing-mode','vertical-rl')
.attr('y',bbox.y + bbox.height/2)
.attr('x',-bbox.width);
} else {
textElm
.attr('x',bbox.x + bbox.width/2)
.attr('y',bbox.height);
}
};
this.xAxis
.attr('transform', `translate(0,${yScale.range()[0]})`)
.call(xAxis)
.call(addTitle('Guesses'));
this.yAxis
.attr('transform', `translate(${xScale.range()[0]},0)`)
.call(yAxis)
.call(addTitle('Closeness', true));
this.annotations = chart.append('g')
.selectAll('line')
.data(this.waypoints)
.join('line')
.attr('stroke', 'gray')
.attr('stroke-width', '1px')
.attr('stroke-dasharray', `${xScale(0.4) - xScale(0)} ${xScale(0.6) - xScale(0)}`)
.attr('x1', xScale.range()[0])
.attr('x2', xScale.range()[1])
.attr('y1', yScale)
.attr('y2', yScale);
}
update(guesses, lastGuess) {
guesses.sort((a, b) => a.order - b.order);
if(guesses.length > xScale.domain()[1]) {
while(guesses.length > xScale.domain()[1]) {
xScale.domain([xScale.domain()[0], xScale.domain()[1]*1.5]);
}
this.xAxis.call(xAxis);
}
this.guesses
.selectAll('circle')
.data(guesses, d => d.order)
.join(enter => enter.append('circle')
.attr('alt', d => d.guess)
)
.attr('cx', d => xScale(d.order))
.attr('cy', d => yScale(d.similarity))
.attr('r', d => d.order === lastGuess ? 4 : 2 )
.attr('fill', d => d.order === lastGuess ? 'red' : 'blue');
this.max
.selectAll('circle')
.data(guesses, d => d.order)
.join(enter => enter.append('circle')
.attr('alt', d => d.guess)
.attr('r', 1)
.attr('fill', 'green')
)
.attr('cx', d => xScale(d.order))
.attr('cy', d => yScale(d.max));
let avg = movingAveragePoints(guesses.map(g => g.similarity), 12);
this.avg
.selectAll('path')
.data([avg])
.join('path')
.attr('d', d3.line(d => xScale(d[0]), d => yScale(d[1])))
.attr('stroke', 'purple')
.attr('fill', 'none')
.attr('stroke-width', '2px');
const valueLabels = ['Closest', 'Top 10', 'Top 1000'];
const valueComment = (idx) => {
switch(idx) {
case 0:
return guesses.find(g => g.closeness === 999) ? '✔' : '';
case 1:
return `(${guesses.filter(g => g.closeness >= 990).length})`;
case 2:
return `(${guesses.filter(g => g.closeness).length})`;
}
};
this.labels
.selectAll('text')
.data(this.waypoints)
.join(enter => enter.append('text')
.attr('color', 'darkgray')
.attr('font-size', '8pt')
.attr('background', 'rgba(0,0,0,0.1)')
)
.attr('x', xScale(1))
.attr('y', d => yScale(d+2))
.text((_, i) => `${valueLabels[i]} ${valueComment(i)}`);
}
}
(async function() {
'use strict';
// For bookmarklet
let d3Ready = Promise.resolve();
if(typeof d3 === 'undefined') {
(function() {
var script = document.createElement("script");
script.async = true;
script.src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/d3.min.js";
script.charset = "utf-8";
document.body.appendChild(script);
})();
d3Ready = new Promise(resolve => {
function checkReady() {
if(typeof d3 === 'undefined') {
setTimeout(checkReady, 100);
} else {
resolve();
}
}
checkReady();
});
}
await d3Ready;
similarityValues = new Promise(resolve => {
const similarityStory = document.getElementById('similarity-story');
if(similarityStory.innerText) {
return resolve(parseSimilarity());
}
const similarityUpdate = new MutationObserver(function() {
resolve(parseSimilarity());
});
similarityUpdate.observe(similarityStory, {childList: true});
});
guessTable = document.getElementById('guesses');
storeDay();
const queryParams = new URLSearchParams(window.location.search);
let loadDay = queryParams.get('day');
if(loadDay) {
let oldGuesses = window.localStorage.getItem(`guesses.${loadDay}`);
if(oldGuesses) {
console.log(`Loading day ${loadDay}`);
const guessData = JSON.parse(oldGuesses);
// We just saved it above, so we're safe to overwrite;
window.localStorage.setItem('puzzleNumber', loadDay);
window.localStorage.setItem('guesses', oldGuesses);
window.localStorage.setItem('winState', Number(guessData[0][0]) === 100 ? 1 : -1);
secret = secretWords[loadDay].toLowerCase();
try {
similarityStory = await Semantle.getSimilarityStory(secret);
document.getElementById('similarity-story').innerHTML = `;
Today is puzzle number <b>${puzzleNumber}</b>. The nearest word has a similarity of;
<b>${(similarityStory.top * 100).toFixed(2)}</b>, the tenth-nearest has a similarity of;
${(similarityStory.top10 * 100).toFixed(2)} and the one thousandth nearest word has a;
similarity of ${(similarityStory.rest * 100).toFixed(2)}.;
`;
} catch(e) {
// Whatevs;
}
guesses.length = 0;
let lastGuess = null;
for(guess of guessData) {
if(!lastGuess || lastGuess[3] < guess[3]) {
lastGuess = guess;
}
guesses.push(guess);
guessed.add(guess[1]);
}
console.log(guesses);
guessCount = guessed.size;
latestGuess = lastGuess[1];
similarityValues.then(function() {
document.getElementById('guess').value = latestGuess;
document.getElementById('guess-btn').click();
});
}
}
const waypoints = await similarityValues;
const chart = new Chart(guessTable, waypoints);
const cloud = new Cloud(guessTable, waypoints, {
scale: 1/6,
width: 800
});
function update() {
storeDay();
const [guesses, lastGuess] = parseGuesses();
chart.update(guesses, lastGuess);
cloud.update(guesses, lastGuess);
}
const tableUpdate = new MutationObserver(update);
tableUpdate.observe(guessTable, {childList: true});
update();
})();
function zipObject(keys, values) {
return Object.fromEntries(keys.map((k, i) => [k, values[i]]));
}
function parseSimilarity() {
const story = document.getElementById('similarity-story');
const storyNumbers = story.innerText.match(/\d+(\.\d+)?/g).map(parseFloat);
return storyNumbers.slice(1);
}
function storeDay() {
const guesses = window.localStorage.getItem('guesses');
const day = window.localStorage.getItem('puzzleNumber');
// comment this line out if you don't want to be storing history;
window.localStorage.setItem(`guesses.${day}`, guesses);
}
// from https://observablehq.com/@d3/moving-average;
function movingAverage(values, N) {
let i = 0;
let sum = 0;
const means = new Float64Array(values.length).fill(NaN);
for (let n = Math.min(N - 1, values.length); i < n; ++i) {
sum += values[i];
}
for (let n = values.length; i < n; ++i) {
sum += values[i];
means[i] = sum / N;
sum -= values[i - N + 1];
}
return means;
}
function movingAveragePoints(values, N) {
// TODO: Should this be floor? are we off-by-one?;
return Array.from(movingAverage(values, N))
.map((v, i) => Number.isNaN(v) ? false : [i-Math.floor(N/2), v])
.filter(v => v);
}
function parseGuesses() {
const guesses = JSON.parse(window.localStorage.getItem('guesses')).map(
row => zipObject(
['similarity','guess','closeness','order'],
row.map((v, i) => i === 1 ? v : Number(v))
)
);
let lastGuess = document.querySelector('#guesses td').innerText;
lastGuess = lastGuess ? parseInt(lastGuess) : null;
guesses.sort((a, b) => a.order - b.order);
let max = 0;
guesses.forEach(g => {
const val = Number(g.similarity);
if(val > max) { max = val }
g.max = max;
});
return [guesses, lastGuess];
}
