mutable clicked = 0
drawBoard = (sideLength, cur, color) => {
let n = cur.word.length
let angle = Math.PI * 2 / n
const pts = []
for (let i = 0; i < n; i++) {
pts.push({
x: 50 + 39 * Math.cos(i*angle),
y: 50 + 39 * Math.sin(i*angle)
})
}
let r = 10
if (n > 12) r = 7
if (n > 17) r = 5
const onClick = function(i) {
mutable clicked = i
}
return svg`<svg height="${sideLength}" width="${sideLength}" viewbox="0 0 100 100">
<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: "#635a5a"; alignment-baseline:middle; text-anchor: middle; }
</style>
<circle cx="50" cy="50" r="39" stroke="#635a5a" stroke-width="3" fill="none"/>
${pts.map((x,i)=> svg`<g>
<circle cx="${x.x}" cy="${x.y}" r="${r}" stroke="#635a5a" stroke-width="2" fill="white"/>
<text x="${x.x}" y="${x.y}" class="letter">${cur.shuffle[i]}</text>
</g>`)}
`
}
drawRecord = (x) => {
return html.fragment `<tr>
<td></td>
<td style="color:${x.isGoodGuess ? correctColor : incorrectColor}">${x.guess}</td>
<td>${x.word}</td>
<td>${x.word.length}</td>
</tr>
`
}
viewof correctColor = color("#16a716")
viewof incorrectColor = color("#BB0000")
viewof guessedColor = color("#999999")
viewof boardColor = color("#338ddb")
validStructure = {
const first = guessValue ? guessValue[0] == current.first : false
const last = guessValue ? guessValue[guessValue.length - 1] == current.last : false
if(!first) return `invalid`
if (last) return 'structurally valid'
else return 'incomplete'
}
mutable current = getWord(wordLengthBounds[0],wordLengthBounds[1])
getWord = (minLength, maxLength) => {
const filteredWords = words.filter(w => w.length >= minLength && w.length <= maxLength)
return shuffle(filteredWords[d3.randomInt(0, filteredWords.length)()])
}
shuffle = w => {
const output = {}
output.word = w
const order = d3.randomInt(0, 2)()
let shuffleIndex = d3.randomInt(0, w.length)()
let outword = w
if (order) outword = w.split('').reverse().join('')
outword = outword.slice(shuffleIndex,w.length) + outword.slice(0, shuffleIndex)
output.shuffle = outword
return output
}
validateGuess = (guess, cur) => {
const out =
// is a rotation
(isRotationOf(cur.word, guess) ||
// or reverse is a rotation
isRotationOf(cur.word, guess.split('').reverse().join(''))) &&
// is in the dictionary
words.includes(guess)
return out;
}
isRotationOf = (s1, s2) => {
if (s1.length != s2.length) return false
let candidate = s2
for (let i = 0; i < candidate.length; i++) {
if (s1 === candidate) return true
candidate = candidate.slice(1,s1.length) + candidate[0]
}
return false
}
isRotationOrReverseRotationOf = (s1, s2) => isRotationOf(s1,s2) ||
isRotationOf(s1, s2.split('').reverse().join(''))
log = (data) => {
mutable history = [data, ...history]
}
mutable history = []
import {words} from '@a-lexwein/find-a-big-word'
d3 = require('d3@6')
import {aq, op} from '@uwdata/arquero'
import {color} from '@jashkenas/inputs'
import {html, svg} from "@observablehq/htl"
import {rangeSlider} from '@mootari/range-slider@1312'
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.
