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>
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.