Public
Edited
Dec 29, 2023
Paused
1 fork
gameloop = {
if(currentLevel < 4 && correctGuess === true) mutable currentLevel++
if(currentLevel === 4) {
finishGame()
}
yield true;
}
finishGame = () => {
mutable gameComplete = true
}
startGame = (newPuzzleIndex) => {
mutable startTime = new Date()
mutable puzzleIndexReal = newPuzzleIndex
mutable currentLevel = 1
mutable message = ''
mutable incorrectGuessCount = -3
mutable gameComplete = false
}
drawBoard = (board, width) => {
return Plot.plot({
width: width,
height: width,
marks: [
Plot.cell(board, {
// cells
x: "x",
y: "y",
stroke: "black",
strokeWidth: 3,
}),
Plot.cell(board, {
// blanks
x: "x",
y: "y",
filter: (d) => d.letter === "_",
stroke: "black",
fill: "black"
}),
Plot.text(board, {
x: "x",
y: "y",
text: "letter",
fill: "black",
fontSize: width / 10
})
],
x: { type: "band", axis: false, padding: 0 },
y: { type: "band", axis: false, padding: 0 },
})
}
mutable guess = ''
boardFromString = boardstring => boardstring
.split("")
.map((l,i) => ({
x: i % 4,
y: Math.floor(i/4.0),
letter: l
}))
picks
boardFromString(currentBoard.boardstring)
updateGuess = (str) => mutable guess = str.toUpperCase()
updateGuessCount = (i) => mutable incorrectGuessCount++
correctGuess = guess === currentBoard.word
currentBoard = picks
.filter(x => x.game_index === puzzleIndexReal)
.filter(x => x.game_level === Math.min(currentLevel,3))[0]
mutable startTime = new Date()
mutable puzzleIndexReal = 1
mutable currentLevel = 1
mutable incorrectGuessCount = -3
picks
picks = FileAttachment("output_csv.csv").csv({typed: true})
puzzleIndexMax = Math.max(...picks.map(x=> x.game_index)) - 1
selectedDifficulty = picks.filter(x=> x.game_index === puzzleIndex)[0].difficulty
selectedDifficultyReal = picks.filter(x=> x.game_index === puzzleIndexReal)[0].difficulty
mutable message = 'Find a big word in the board. Then find two more. Scroll down for more rules.'
mutable gameComplete = false
viewof selectDifficulty = {
const difficulties = difficulties_sql.map(x=>x.difficulty);
const radioInput = Inputs.radio(difficulties, {value: selectedDifficultyReal});
return radioInput
}
completeMessage = {
const totalSeconds = ((new Date() - startTime) / 1000).toFixed(2);
const oneWrong = incorrectGuessCount === 1 ? '' : 'es';
const puzzleIndexInput = difficulties_sql.filter(x => x.difficulty === selectDifficulty)[0].first_index;
const nextPuzzle = selectDifficulty === selectedDifficultyReal ? puzzleIndexReal + 1 : puzzleIndexInput
const startNextGame = () => startGame(nextPuzzle)
let el = html`<h3>Level Complete!</h3>
<div>You solved 3 Big Words Puzzle #${puzzleIndexReal} in ${totalSeconds} seconds</div>
<button>Play Puzzle #${nextPuzzle}</button>
<div>Or change the difficulty:</div>
<div>${viewof selectDifficulty}</div>
`;
el.querySelector("button").addEventListener("click", startNextGame);
return el;
}
<style>
.guess {
font-family: 'Courier New', Courier, monospace;
background-color: #D3D3D3;
color: #686868;
padding: 15px 32px;
text-decoration: none;
display: inline-block;
font-size: 36px;
font-weight: bold;
min-width: 600px;
margin: 2px 1px;
cursor: pointer;
text-transform: uppercase;
}
.boardContainer {
display: ${gameComplete === true ? "None" : "flex"};
justify-content: space-between;
}
.messageContainer {
display: ${gameComplete === false ? "None" : "flex"};
font-size: 20px;
font-weight: bold;
border: 2px solid #686868;
margin: 2px 1px;
}
</style>
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.
