31:T6e0,{ const CELLSIZE = 48 const svg = d3.select(DOM.svg(board.length*CELLSIZE+1, board.length*CELLSIZE+1)) board.forEach((row, i) => { row.forEach((square, j) => { svg.append('rect') .attrs({ class: 'square', x: i*CELLSIZE, y: (board.length-1-j)*CELLSIZE, width: CELLSIZE, height: CELLSIZE, fill: (i+j)%2 ? '#999' : '#AAA', stroke: '#333', 'shape-rendering': 'crispEdges' }) .on('click', () => { summon(piece, side, [i,j]) }) if(square.piece !== null) { svg.append('text') .text(square.piece.def.symbol) .attrs({ class: 'piece', x: (i+0.5)*CELLSIZE, y: (board.length-1-j+0.5)*CELLSIZE, dy: '0.35em', fill: square.piece.side }) .styles({ 'text-anchor': 'middle', 'font-size': '46px', 'user-select': 'none' }) .on('click', () => { if(square.piece !== selection) { mutable selection = square.piece if(!(selected_move_type in square.piece.def.moves)) { mutable selected_move_type = 'march' // default } } else { mutable selection = null } }) } }) }) legal_moves.forEach(m => { svg.append('circle') .attrs({ class: 'move', cx: (m.step[0]+0.5)*CELLSIZE + 0.5, cy: (board.length-1-m.step[1]+0.5)*CELLSIZE + 0.5, r: CELLSIZE*0.4, fill: 'orange', 'fill-opacity': '0.6' }) .on('click', () => resolve_move(m)) }) return svg.node() }32:T5c7,{ const W = 300 const H = 400 const svg = d3.select(DOM.svg(W, H)) // blank if no selection if(selection === null) { return svg.node() } svg.append('rect') .attrs({ width: W, height: H, fill: '#EEE', stroke: 'gray' }) svg.append('text') .text(selection.def.name.replace('_', ' ')) .attrs({ x: W/2, y: 8, dy: '1em' }) .styles({ 'text-anchor': 'middle', 'font-size': 32, 'text-transform': 'capitalize' }) svg.append('text') .text(selection.def.symbol) .attrs({ x: W/2, y: H/8, dy: '1em' }) .styles({ 'text-anchor': 'middle', 'font-size': 128, 'text-transform': 'capitalize' }) Object.keys(selection.def.moves).forEach((move_type, i) => { svg.append('rect') .attrs({ x: W*0.1, y: H/2 + i*56, width: W*0.8, height: 48, fill: move_type == selected_move_type ? 'orange' : 'white', stroke: 'gray' }) .on('click', () => { mutable selected_move_type = move_type }) svg.append('text') .text(move_type) .attrs({ x: W/2, y: H/2 + 24 + i*56, dy: '0.35em' }) .styles({ 'text-anchor': 'middle', 'font-size': 24, 'text-transform': 'capitalize', 'pointer-events': 'none', 'user-select': 'none' }) }) return svg.node() }33:T497,function get_legal_moves(piece, move_type) { // no moves for this move type if(!(move_type in piece.def.moves)) { return [] } var mvs = [] piece.def.moves[move_type].forEach(m => { var repeat = 1 d3.range(Math.min(m.repeat || 1, BOARDSIZE)).every(() => { var mv = { type: move_type, piece: piece, step: [] } // compute absolute moves mv.step[0] = m.step[0]*repeat + piece.pos[0] mv.step[1] = (piece.side == 'white' ? m.step[1] : -m.step[1])*repeat + piece.pos[1] // flip black pieces // filter out moves outside the board if(mv.step[0] < 0 || mv.step[0] >= BOARDSIZE || mv.step[1] < 0 || mv.step[1] >= BOARDSIZE) { return false // break } // avoid capture of friendly pieces var target = board[mv.step[0]][mv.step[1]] if(target.piece !== null && target.piece.side == piece.side) { return false // break } repeat += 1 mvs.push(mv) // avoid continue after capture if(target.piece !== null) { return false // break } return true }) }) return mvs }34:Tec6,piece_defs = ({ knight: { name: 'knight', symbol: '♞', moves: { march: [ {step: [-2,-1]}, {step: [-1,-2]}, {step: [ 2,-1]}, {step: [ 1,-2]}, {step: [-1, 2]}, {step: [-2, 1]}, {step: [ 1, 2]}, {step: [ 2, 1]} ] } }, rook: { name: 'rook', symbol: '♜', moves: { march: [ {step: [ 1, 0], repeat: Infinity}, {step: [ 0, 1], repeat: Infinity}, {step: [-1, 0], repeat: Infinity}, {step: [ 0,-1], repeat: Infinity} ] } }, bishop: { name: 'bishop', symbol: '♝', moves: { march: [ {step: [ 1, 1], repeat: Infinity}, {step: [-1, 1], repeat: Infinity}, {step: [-1,-1], repeat: Infinity}, {step: [ 1,-1], repeat: Infinity} ] } }, queen: { name: 'queen', symbol: '♛', moves: { march: [ {step: [ 1, 0], repeat: Infinity}, {step: [ 0, 1], repeat: Infinity}, {step: [-1, 0], repeat: Infinity}, {step: [ 0,-1], repeat: Infinity}, {step: [ 1, 1], repeat: Infinity}, {step: [-1, 1], repeat: Infinity}, {step: [-1,-1], repeat: Infinity}, {step: [ 1,-1], repeat: Infinity} ] } }, king: { name: 'king', symbol: '♚', moves: { march: [ {step: [-1,-1]}, {step: [-1, 0]}, {step: [-1, 1]}, {step: [ 0,-1]}, {step: [ 0, 1]}, {step: [ 1,-1]}, {step: [ 1, 0]}, {step: [ 1, 1]} ] } }, ferz: { name: 'ferz', symbol: '◆', moves: { march: [ {step: [ 1, 1]}, {step: [-1, 1]}, {step: [-1,-1]}, {step: [ 1,-1]} ] } }, alfil: { name: 'alfil', symbol: '🞛', moves: { march: [ {step: [ 2, 2]}, {step: [-2, 2]}, {step: [-2,-2]}, {step: [ 2,-2]} ] } }, wazir: { name: 'wazir', symbol: '￭', moves: { march: [ {step: [ 1, 0]}, {step: [ 0, 1]}, {step: [-1, 0]}, {step: [ 0,-1]} ] } }, dabbaba: { name: 'dabbaba', symbol: '🞕', moves: { march: [ {step: [ 2, 0]}, {step: [ 0, 2]}, {step: [-2, 0]}, {step: [ 0,-2]} ] } }, centurion: { name: 'centurion', symbol: '🜊', moves: { march: [ {step: [-2,-1]}, {step: [-1,-2]}, {step: [ 2,-1]}, {step: [ 1,-2]}, {step: [-1, 2]}, {step: [-2, 1]}, {step: [ 1, 2]}, {step: [ 2, 1]}, {step: [ 2, 0]}, {step: [ 0, 2]}, {step: [-2, 0]}, {step: [ 0,-2]}, {step: [ 2, 2]}, {step: [-2, 2]}, {step: [-2,-2]}, {step: [ 2,-2]} ] } }, gold_general: { name: 'gold_general', symbol: '🜚', moves: { march: [ {step: [-1, 1]}, {step: [-1, 0]}, {step: [ 0, 1]}, {step: [ 0,-1]}, {step: [ 1, 1]}, {step: [ 1, 0]} ] } }, lance: { name: 'lance', symbol: '🜍', moves: { march: [ {step: [ 0, 1], repeat: Infinity} ] } }, shogi_pawn: { name: 'shogi_pawn', symbol: '🜘', moves: { march: [ {step: [ 0, 1]} ] } }, wall: { name: 'wall', symbol: '🝙', moves: {} }, ooze: { name: 'ooze', symbol: '🜛', moves: { march: [ {step: [-1,-1]}, {step: [-1, 1]}, {step: [ 1,-1]}, {step: [ 1, 1]} ], clone: [ {step: [-1, 0]}, {step: [ 0,-1]}, {step: [ 0, 1]}, {step: [ 1, 0]} ] } } })35:[] 2f:{"title":"Chess Testing Board II","cells":[{"id":0,"value":"md`# Chess Testing Board II`","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"md`Select a piece type and click on an empty square to summon it. Then click on already placed pieces to move them.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"viewof side = html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":234,"value":"viewof piece = html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":281,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"BOARDSIZE = 8","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"mutable selection = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":309,"value":"mutable selected_move_type = 'march'","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"legal_moves = selection === null ? [] : get_legal_moves(selection, selected_move_type)","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":337,"value":"function resolve_move(m) {\n switch(m.type) {\n case 'march':\n march(m)\n break\n case 'clone':\n copy(m.piece, m.piece.side, m.step)\n break\n }\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"function summon(name, side, pos) {\n board[pos[0]][pos[1]].piece = {\n side: side,\n pos: pos,\n def: piece_defs[name]\n }\n \n mutable board = board\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":345,"value":"function copy(piece, side, pos) {\n board[pos[0]][pos[1]].piece = {\n ...piece,\n side: side,\n pos: pos\n }\n \n mutable board = board\n mutable selection = null\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"function march(m) {\n var i = m.step[0]\n var j = m.step[1]\n \n board[selection.pos[0]][selection.pos[1]].piece = null\n selection.pos = [i, j]\n board[i][j].piece = selection\n \n mutable board = board // I don't know a better way to do that\n mutable selection = null\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"mutable board = d3.range(BOARDSIZE).map(d => d3.range(BOARDSIZE).map(e => ({piece: null}) ))","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"import {$each} from \"@nitaku/sugar-strings\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"d3 = require('d3-array', 'd3-selection', 'd3-selection-multi')","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}