VIEW = md`## view:`
drawRecord = (sideLength, shuff, cur, color, x) => {
return html.fragment `<tr>
<td>${drawBoard(sideLength, shuff, cur, color, x.guess)}</td>
<td style="color:${x.points ? correctColor : incorrectColor}">${x.guess}</td>
<td style="color:${x.points ? correctColor : incorrectColor}">${x.points}</td>
<td>${x.answers.join(', ')}</td>
</tr>
`
}
drawBoard = (sideLength, shuff, cur, color, guessValue) => svg`<svg height="${sideLength}" width="${sideLength}" viewbox="0 0 50 50">
<style>
.letter { font: 9px sans-serif; fill: ${color}; alignment-baseline:middle; text-anchor: middle; }
.guessed { font: 9px sans-serif; fill: ${guessedColor}; alignment-baseline:middle; text-anchor: middle; }
.timer { font: 6px sans-serif; fill: black; alignment-baseline:middle; text-anchor: middle; }
</style>
${hexCenters.map(([x,y]) => drawHex(x,y,color))}
${hexCenters.map(([x,y],i) => drawLetter(x, y+.55, shuff[i],
guessValue.toUpperCase().includes(shuff[i])))}
<text x="45" y="5" class="timer">${cur}</text>
</svg>`
//via @nbremer/hexagon-grid-heatmap
hex = rad => d3.hexbin()
.radius(rad)
.x(d => d.x)
.y(d => d.y)
.hexagon()
drawHex = (x,y, color) => svg.fragment`<path stroke="${color}" d="M ${x} ${y} ${hex(rad)}"}/>"}/>`
drawLetter = (x,y,letter, inGuess) => svg.fragment`<text x="${x}" y="${y}"
class="${inGuess?'guessed':'letter'}">${letter}</text>`
hexCenters = [
[center, center],
[center+d, center],
[center+d/2, center-1.5*rad],
[center-d/2, center-1.5*rad],
[center-d, center],
[center+d/2, center+1.5*rad],
[center-d/2, center+1.5*rad],
]
center = 25
d = rad * Math.cos(Math.PI/6) * 2
rad = 8
viewof letterColor = color("#f6f6e9")
viewof guessedColor = color("#1efa1e")
viewof correctColor = color("#16a716")
viewof incorrectColor = color("#BB0000")
validateGuess = (guess, answers) => {
const lettersUsed = new Set(guess.toLowerCase().split(''))
const lettersAnswer = new Set(answers[0].split(''))
const out =
// is in the dictionary
words.includes(guess) &&
// uses all letters on board
//isSuperset(lettersUsed, lettersAnswer) &&
// uses nothing else
isSuperset(lettersAnswer, lettersUsed)
return out;
}
handleEnter = (guess) => {
const isGoodGuess = validateGuess(guess, answers)
const points = isGoodGuess ? scorer(guess) : 0
let scoreAfter = score + points
mutable score = scoreAfter
const ts = new Date()
log({guess, ts, isGoodGuess, points, scoreAfter, letters, answers, shuffled})
mutable letters = sevensKeys[_.random(0, sevensKeys.length)]
}
scorer = guess => {
let points = 0;
let len = guess.length
let lettersUsed = (new Set(guess.split(''))).size
switch(lettersUsed){
case 0:
case 1:
case 2: points += 0; break;
case 3: points += 1; break;
case 4: points += 2; break;
case 5: points += 4; break;
case 6: points += 5; break;
case 7: points += 10; break;
default: points += 0; break;
}
// switch(Math.min(len, 10)){
// case 5: points += 1; break;
// case 6: points += 2; break;
// case 7: points += 3; break;
// case 8: points += 4; break;
// case 9: points += 4; break;
// case 10: points += 5; break;
// default: points += 0; break;
// }
return points
}
mutable letters = {
return sevensKeys[_.random(0, sevensKeys.length)]
}
guessValue = {
while(true){
try {yield document.getElementById('guess').value}
catch {yield Promises.delay(100) }
}
}
shuffled = _.shuffle(letters.toUpperCase())
answers = sevens[letters]
mutable score = {
return 0;
}
log = (data) => {
mutable history = [data, ...history]
}
mutable history = []
sevens = FileAttachment("sevens@1.json").json()
sevensKeys = Object.keys(sevens)
words = (await FileAttachment("enable@1.txt").text()).split('\r\n')
IMPORTS = md `## imports`
_ = require('lodash')
d3 = require("d3@6", "d3-hexbin@0.2")
import {html, svg} from "@observablehq/htl"
import {color} from '@jashkenas/inputs'
// CP'ed from MDN https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set
function isSuperset(set, subset) {
for (let elem of subset) {
if (!set.has(elem)) {
return false
}
}
return true
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
