2b:null 2c:["$","title",null,{"children":"Connect 4 | Zhouheng (Jeffrey) Sun | Observable"}] 31:T49a,{ let svg = d3.select(DOM.svg(width, height)) // for each odd x: svg.append("g").selectAll("line").data(lines).enter() .append("line") .attr("x1", d => d.x1).attr("x2", d => d.x2).attr("y1", d => d.y1).attr("y2", d => d.y2) .style("stroke", "#222").style("stroke-width", "2px") let radius = 0.75 * (x(1) - x(0)) svg.append("g").selectAll("circle").data(dots).enter() .append("circle") .attr("fill", d => color(d.data)) .attr("r", radius) .attr("cx", d => d.x) .attr("cy", d => d.y) //.on("click", (d, i) => {mutable cursor = d.oy + 1} ) svg.append("circle").attr("r", radius * 0.6).attr("cy", margin.u / 2).attr("cx", x(cursor * 2 - 1)).attr("fill", d => color(current)) play.onclick = () => { let flag = false let nb = [] for (let i = m - 1; i >= 0; i--) { if (board[i][cursor - 1] == '_') { for (let ii = 0; ii < n - 1; ii++) nb[ii] = board[ii] nb[i] = board[i].slice(0, cursor - 1) + current + board[i].slice(cursor, n) mutable board = nb flag = true break } } if (flag) { mutable current = rev(current) } } return svg.node() }32:[] 2f:{"id":"df6e9de49acbc4c2","slug":"connect-4","title":"Connect 4","thumbnail":"afa49889f52edbbe1763b94ff29f5843cac6fe10fee664f06651a5bc6f9b3214","access_level":"public","create_time":"$D2018-04-22T10:00:37.998Z","update_time":"$D2019-10-02T10:12:58.053Z","view_time":null,"first_public_time":"$D2019-10-02T10:10:39.827Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"dd97d788d86e95f8","login":"onionhoney","name":"Zhouheng (Jeffrey) Sun","avatar_url":"https://avatars-next.observableusercontent.com/291ec9640cd16e7341d5f6951c390abff150ca54524e31a241a74ddf76fb7813","tier":"starter_2024"},"version":326,"publish_version":326,"role":null,"authored":false,"authors":[{"type":"individual","id":"1b3d3c858eeaffa0","login":"onionhoney","name":"Zhouheng (Jeffrey) Sun","avatar_url":"https://avatars-next.observableusercontent.com/291ec9640cd16e7341d5f6951c390abff150ca54524e31a241a74ddf76fb7813","tier":null}],"members":[{"type":"individual","id":"1b3d3c858eeaffa0","login":"onionhoney","name":"Zhouheng (Jeffrey) Sun","avatar_url":"https://avatars-next.observableusercontent.com/291ec9640cd16e7341d5f6951c390abff150ca54524e31a241a74ddf76fb7813","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Connect 4","cells":[{"id":0,"value":"md`# Connect 4`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":324,"value":"md`Back story: My friend Colin and I were bored in a hackathon, so decided to race who can write a Connect 4 player first. He in Haskell, me in JS with Observable. Well he won in time, but I think mine is more beautiful.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":112,"value":"play = html` ` //({value: \"PLAY\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":244,"value":"viewof cursor = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":218,"value":"viewof reset = button({value: \"NEW\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":208,"value":"{\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":151,"value":"proc_rst = {\n reset;\n let nb = []\n console.log(\"hi\")\n for (let i = 0; i < m; i++) {\n nb.push(\"\")\n for (let j = 0; j < n ; j++) \n nb[i] = nb[i] + '_'\n }\n mutable board = nb\n mutable current = \"X\"\n return 1\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":51,"value":"mutable current = \"\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":74,"value":"n = 7","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":182,"value":"m = 6\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":200,"value":"rev = (x) => {if (x == \"O\") { return \"X\"} else return \"O\"}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"mutable board =[ \"_______\",\n \"_______\",\n \"___X___\",\n \"__OX___\",\n \"_XOO___\",\n \"OXXXO__\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":57,"value":"lines = {\n let lines = []\n for (let i = 0; i <= 2 * n; i += 2) {\n lines.push({x1: x(i), y1: y(0), x2: x(i), y2: y(2*6) })\n if (i < 2 * n)\n lines.push({x1: x(0), y1: y(i), x2: x(2*7), y2: y(i) })\n }\n return lines\n}\n \n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":85,"value":"dots = {\n let dots = []\n for (let i = 0; i < n - 1; i ++) {\n for (let j = 0; j < n; j ++) {\n dots.push({data: board[i][j], ox: i, oy: j, x: x(j * 2 + 1), y: y(i * 2 + 1)})\n }\n }\n return dots\n}\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":90,"value":"color = x => ({'O': 'red', 'X': 'blue', '_': 'white'})[x]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":77,"value":"x = d3.scaleLinear().domain([0, 2 * n]).range([margin.u, height - margin.d])\n \n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":80,"value":"y = d3.scaleLinear().domain([0, 2 * 6]).range([margin.l, height - margin.r])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":82,"value":"height = 400\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":66,"value":"margin = ({'u': 25, 'd': 25, 'l': 25, 'r': 25})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":108,"value":"import {button} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"