30:T1fb9,minesweeper = { // temp fix to re-evaluate cell (goal is smiley face reset button) newGame // constants const { margin, cellSize, statusSize, statusButtonSize, statusDisplayWidth, gridWidth, gridHeight, bombs } = opts // root svg const svg = d3 .create('svg') .attr('width', gridWidth * cellSize + margin * 2) .attr('height', gridHeight * cellSize + statusSize + margin * 2) // variables var timer var time = 0 var data = createData() var flags = bombs var gameOver = false var firstMove = true // flag count / reset button / timer const statusG = svg.append('g').attr('transform', `translate(${margin},${margin - 10})`) // game board const boardG = svg.append('g').attr('transform', `translate(${margin},${statusSize + margin})`) // bottom layer - bombs and counts const baseG = boardG.append('g') // top layer - buttons and flags const buttonsG = boardG.append('g') // status bar background statusG .append('rect') .attr('width', gridWidth * cellSize) .attr('height', statusSize) .attr('fill', '#BDBDBD') // timer container statusG .append('rect') .attr('x', gridWidth * cellSize - statusDisplayWidth - 5) .attr('y', (statusSize - statusButtonSize) / 2) .attr('width', statusDisplayWidth) .attr('height', statusButtonSize) .attr('fill', '#000') // timer text statusG .append('text') .attr('id', 'time') .attr('class', 'digital') .attr('x', gridWidth * cellSize - statusDisplayWidth + 1) .attr('y', statusButtonSize / 2 + 6) .attr('text-anchor', 'start') .attr('alignment-baseline', 'middle') .attr('fill', 'red') .text(time.toString().padStart(3, '0')) // reset button statusG .append('rect') .attr('id', 'reset') .attr('x', (gridWidth * cellSize) / 2 - statusButtonSize / 2) .attr('y', (statusSize - statusButtonSize) / 2) .attr('width', statusButtonSize) .attr('height', statusButtonSize) .attr('fill', `url(${location}#button-smile)`) .on('mousedown', () => svg.select('#reset').attr('fill', `url(${location}#background-smile)`)) .on('mouseup', () => svg.select('#reset').attr('fill', `url(${location}#button-smile)`)) .on('click', () => viewof newGame.dispatchEvent(new CustomEvent('input'))) // flag count container statusG .append('rect') .attr('x', 5) .attr('y', (statusSize - statusButtonSize) / 2) .attr('width', statusDisplayWidth) .attr('height', statusButtonSize) .attr('fill', '#000') // flag count text statusG .append('text') .attr('id', 'flags') .attr('class', 'digital') .attr('x', 11) .attr('y', statusButtonSize / 2 + 6) .attr('text-anchor', 'start') .attr('alignment-baseline', 'middle') .attr('fill', 'red') .text(flags.toString().padStart(3, '0')) // bottom layer - cell background and bombs baseG .selectAll('rect') .data(data) .join('rect') .attr('class', 'layer1') .attr('x', d => d.x) .attr('y', d => d.y) .attr('width', cellSize) .attr('height', cellSize) .attr('fill', d => d.isBomb ? `url(${location}#bomb)` : `url(${location}#background)`) // bottom layer - bomb counts baseG .selectAll('text') .data(data) .join('text') .attr('class', 'layer2') .attr('x', d => d.x + cellSize / 2) .attr('y', d => d.y + cellSize / 2 + 2) .attr('text-anchor', 'middle') .attr('alignment-baseline', 'middle') .attr('fill', d => d.bombCount ? countColor(d.bombCount) : 'none') .style('font-family', 'Arial, sans-serif') .style('font-weight', '1000') .text(d => d.bombCount > 0 ? d.bombCount : '') // top layer - buttons buttonsG .selectAll('rect') .data(data) .join('rect') .attr('class', 'button') .attr('x', d => d.x) .attr('y', d => d.y) .attr('width', cellSize) .attr('height', cellSize) .attr('fill', `url(${location}#button)`) .attr('data-flagged', 0) .attr('data-index', d => d.index) .attr('data-bomb', d => d.isBomb ? 1 : 0) .style('cursor', 'pointer') .on('click', onClick) .on('mousedown', onMouseDown) .on('mouseup', onMouseUp) .on('contextmenu', onContextMenu) // handle button click function onClick() { if(gameOver) { return } if(!timer) { initTimer() } var cell = d3.select(this) var index = cell.attr('data-index') var isFlagged = Number(cell.attr('data-flagged')) var isBomb = Number(cell.attr('data-bomb')) // if flagged do nothing if(isFlagged) { return } // else if a bomb you lose else if(isBomb) { if(firstMove) { viewof newGame.dispatchEvent(new CustomEvent('input')) } stopTimer() svg.select('#reset').attr('fill', `url(${location}#button-frown)`) svg.selectAll('[data-bomb="1"]').attr('fill', 'none') cell.attr('fill', `url(${location}#bomb-red)`) gameOver = true } // else clear cell/s else { firstMove = false var d = data[index] !d.bombCount && updateCells(d) cell.attr('fill', 'none') var cells = svg.selectAll('rect.button') var arr = Array.from(cells._groups[0]) var left = arr.filter(el => el.getAttribute('fill') !== 'none') if(left.length === bombs) { var l = level === '0' ? 'Beginner' : level === '1' ? 'Intermediate' : 'Expert' stopTimer() gameOver = true svg.select('#reset').attr('fill', `url(${location}#button-sunglasses)`) } } } // recursive update to clear cells function updateCells(cell) { data.forEach(d => d.checked = false) function update(c) { c.checked = true c.neighbors.forEach(index => { var n = data[index] if(!n.checked && !n.isBomb) { svg.select(`[data-index="${index}"]`).attr('fill', 'none') if(n.bombCount === 0) { update(n, data) } } }) } update(cell) } // flood algorithm to clear cells // function updateCells(cell) { // data.forEach(d => d.checked = false) // var queue = [cell] // while(queue.length) { // var current = queue.shift() // current.checked = true // current.neighbors.forEach(index => { // var n = data[index] // if(!n.checked && !n.isBomb) { // svg.select(`[data-index="${index}"]`).attr('fill', 'none') // if(n.bombCount === 0) { // queue.push(n) // } // } // }) // } // } // change reset face expression to shock function onMouseDown() { if(gameOver) { return } svg.select('#reset').attr('fill', `url(${location}#button-shock)`) } // change reset face expression to smile function onMouseUp() { if(gameOver) { return } svg.select('#reset').attr('fill', `url(${location}#button-smile)`) } // add/remove flags function onContextMenu() { d3.event.preventDefault() if(gameOver) { return } var cell = d3.select(this) var isFlagged = Number(cell.attr('data-flagged')) if(!isFlagged && !flags) { return } else if(isFlagged) { flags += 1 } else { flags -= 1 } cell .attr('fill', isFlagged ? `url(${location}#button)` : `url(${location}#flag)`) .attr('data-flagged', isFlagged ? 0 : 1) svg.select('#flags').text(flags.toString().padStart(3, '0')) } // create timer function initTimer() { if (timer) clearInterval(timer) timer = setInterval(() => { time += 1 if(time === 999) time = 1 svg.select('#time').text(time.toString().padStart(3, '0')) }, 1000) } // cancel timer function stopTimer() { timer = clearInterval(timer) time = 0 svg.select('#time').text(time.toString().padStart(3, '0')) } // clean up when cell updates invalidation.then(() => { clearInterval(timer) }) const frame = createFrame() return html`

${frame}${svg.node()}

` }31:T806,function createFrame() { const { cellSize, gridWidth, gridHeight, statusSize, margin } = opts const btl = 'https://observable-notebooks.s3-us-west-1.amazonaws.com/minesweeper/bordertl.gif' const btr = 'https://observable-notebooks.s3-us-west-1.amazonaws.com/minesweeper/bordertr.gif' const btb = 'https://observable-notebooks.s3-us-west-1.amazonaws.com/minesweeper/bordertb.gif' const blr = 'https://observable-notebooks.s3-us-west-1.amazonaws.com/minesweeper/borderlr.gif' const bjl = 'https://observable-notebooks.s3-us-west-1.amazonaws.com/minesweeper/borderjointl.gif' const bjr = 'https://observable-notebooks.s3-us-west-1.amazonaws.com/minesweeper/borderjointr.gif' const bbl = 'https://observable-notebooks.s3-us-west-1.amazonaws.com/minesweeper/borderbl.gif' const bbr = 'https://observable-notebooks.s3-us-west-1.amazonaws.com/minesweeper/borderbr.gif' const frame = html`

${[...Array(gridWidth)].map((el, i) => html`

`)}

${[...Array(gridWidth)].map((el, i) => html`

`)}

${[...Array(gridHeight)].map((el, i) => html`

`)}

${[...Array(gridWidth)].map((el, i) => html`

`)}

` return frame }32:Te73,findNeighbors = (cell, i, data) => { const { margin, cellSize, gridWidth, gridHeight } = opts const total = gridWidth * gridHeight var neighbors var bombCount = 0 var i = cell.index var one = i - gridWidth - 1 var two = i - gridWidth var three = i - gridWidth + 1 var four = i - 1 var five = i + 1 var six = i + gridWidth - 1 var seven = i + gridWidth var eight = i + gridWidth + 1 // middle cells if(i >= gridWidth && i < total - gridWidth && cell.x > 0 && cell.x < gridWidth * cellSize - cellSize) { if(data[one].isBomb) bombCount += 1 // 1 if(data[two].isBomb) bombCount += 1 // 2 if(data[three].isBomb) bombCount += 1 // 3 if(data[four].isBomb) bombCount += 1 // 4 if(data[five].isBomb) bombCount += 1 // 5 if(data[six].isBomb) bombCount += 1 // 6 if(data[seven].isBomb) bombCount += 1 // 7 if(data[eight].isBomb) bombCount += 1 // 8 neighbors = [one,two,three,four,five,six,seven,eight] } // first row if(i < gridWidth) { // first cell first row if(i === 0) { if(data[five].isBomb) bombCount += 1 // 5 if(data[seven].isBomb) bombCount += 1 // 7 if(data[eight].isBomb) bombCount += 1 // 8 neighbors = [five,seven,eight] } // last cell first row else if(i === gridWidth - 1) { if(data[four].isBomb) bombCount += 1 // 4 if(data[six].isBomb) bombCount += 1 // 6 if(data[seven].isBomb) bombCount += 1 // 7 neighbors = [four,six,seven] } // rest of first row else { if(data[four].isBomb) bombCount += 1 // 4 if(data[five].isBomb) bombCount += 1 // 5 if(data[six].isBomb) bombCount += 1 // 6 if(data[seven].isBomb) bombCount += 1 // 7 if(data[eight].isBomb) bombCount += 1 // 8 neighbors = [four,five,six,seven,eight] } } // last row if(i > total - gridWidth - 1) { // first cell last row if(cell.x === 0) { if(data[two].isBomb) bombCount += 1 // 2 if(data[three].isBomb) bombCount += 1 // 3 if(data[five].isBomb) bombCount += 1 // 5 neighbors = [two,three,five] } // last cell last row else if(i === total - 1) { if(data[one].isBomb) bombCount += 1 // 1 if(data[two].isBomb) bombCount += 1 // 2 if(data[four].isBomb) bombCount += 1 // 4 neighbors = [one,two,four] } // rest of last row else { if(data[one].isBomb) bombCount += 1 // 1 if(data[two].isBomb) bombCount += 1 // 2 if(data[three].isBomb) bombCount += 1 // 3 if(data[four].isBomb) bombCount += 1 // 4 if(data[five].isBomb) bombCount += 1 // 5 neighbors = [one,two,three,four,five] } } // left column minus corners if(i % gridWidth === 0 && i !== 0 && i !== total - gridWidth) { if(data[two].isBomb) bombCount += 1 // 2 if(data[three].isBomb) bombCount += 1 // 3 if(data[five].isBomb) bombCount += 1 // 5 if(data[seven].isBomb) bombCount += 1 // 7 if(data[eight].isBomb) bombCount += 1 // 8 neighbors = [two,three,five,seven,eight] } // right column minus corners if((i + 1) % gridWidth === 0 && i !== gridWidth - 1 && i !== total - 1) { if(data[one].isBomb) bombCount += 1 // 1 if(data[two].isBomb) bombCount += 1 // 2 if(data[four].isBomb) bombCount += 1 // 4 if(data[six].isBomb) bombCount += 1 // 6 if(data[seven].isBomb) bombCount += 1 // 7 neighbors = [one,two,four,six,seven] } // reset to zero if cell is a bomb if(cell.isBomb) { bombCount = 0 neighbors = [] } return { ...cell, bombCount, neighbors } }33:T221b,pattern = html``34:[] 2e:{"title":"Minesweeper","cells":[{"id":0,"value":"md`# Minesweeper`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"viewof level = select({\n title: 'Difficulty',\n options: [\n {label: 'Beginner', value: '0'},\n {label: 'Intermediate', value: '1'},\n {label: 'Expert', value: '2'}\n ],\n value: '0'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":597,"value":"viewof newGame = button('New Game')","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":635,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"opts = ({\n margin: 40,\n cellSize: 25,\n statusSize: 50,\n statusButtonSize: 40,\n statusDisplayWidth: 60,\n gridWidth: level === '0' ? 9 : level === '1' ? 16 : 30,\n gridHeight: level === '0' ? 9 : 16,\n bombs: level === '0' ? 10 : level === '1' ? 40 : 99\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":815,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"countColor = d3.scaleOrdinal().domain([1,2,3,4,5,6,7,8]).range(['#0A06EA', '#137B0F', '#EA0E06', '#05076B', '#740B0D', '#35978A', '#333333', '#808080'])","pinned":false,"hidden":false,"mode":"ojs"},{"id":334,"value":"createData = () => {\n /*\n 1 | 2 | 3\n 4 | C | 5\n 6 | 7 | 8\n */\n \n const { cellSize, gridWidth, gridHeight, bombs } = opts\n const total = gridWidth * gridHeight\n const bombIndices = []\n \n function generateBomb() {\n var index = Math.floor(Math.random() * total) \n if(bombIndices.includes(index)) {\n index = generateBomb()\n }\n return index\n }\n \n for(let i = 0; i < bombs; i++) {\n bombIndices.push(generateBomb())\n }\n \n const data = []\n for(let i = 0; i < gridHeight; i++) {\n for(let j = 0; j < gridWidth; j++) {\n let index = j + i * gridWidth\n data.push({\n index,\n isBomb: bombIndices.includes(index),\n x: j * cellSize,\n y: i * cellSize,\n checked: false\n })\n }\n }\n return data.map(findNeighbors)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":792,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":295,"value":"style = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"import {select, button} from \"@benjaminadk/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}