2f:T289d,// This cell does not re-run when gamestate changes shell = { // At first, just create the basic SVG const sel = d3.create("svg") .attr("width", options.width) .attr("height", options.height) const container = sel.append("g") .attr("id", "container") .attr("transform", `translate(${options.margins.left}, ${options.margins.top})`) //create the board's spaces const w = options.width - options.margins.left - options.margins.right, h = (options.height - options.margins.top - options.margins.bottom)*.75 //create curved path for the spaces to appear on const path = container.selectAll("path") .data([[[0,0], [w-h/4,0], [w,h/4], [w-h/4,h/2], [h/4, h/2], [0,h/4*3], [h/4,h], [w,h]]]) .join(enter => enter.append("path") .attr('d', d => d3.line() .curve(d3.curveMonotoneY)(d)) ) .attr('fill', 'none') .attr('stroke', 'none') .attr('stroke-width', '20') .attr('stroke-dasharray', ` 30 3`) .attr('stroke-linecap', `round`) const distance = path.node().getTotalLength() const spaces = board.spaces.filter(d => d.label != "trap") const traps = board.spaces.filter(d => d.label == "trap") //create a scale to create the spaces, and where the pieces go // |--0--|--1--|--2--| // 0-----1-----2-----3 // 0.0---5.1---10.2--15.3 const scaleSpacesX = d3.scaleLinear() .domain([0, spaces.length-1]) .range([0, distance]) // .padding(.1) const spaceW = scaleSpacesX(1) const getNormal = (dist) => { const length = path.node().getTotalLength(), delta = length * .0001 if (dist < (length-delta)) { const {x:x1, y:y1} = path.node().getPointAtLength(dist), {x:x2, y:y2} = path.node().getPointAtLength(dist + delta) return Math.atan2(y2-y1, x2-x1) * 180 / Math.PI } return 0 } //show the die roll const die = sel.append("g") .attr("transform", `translate(${options.width/2}, ${options.height/2})`) //scales for laying out the traps const xScale = d3.scaleOrdinal(traps.map(d => d.index), ([.33, .66, .7, .3, .2, .75, .95, .2]).map(d => d*w)) const yScale = d3.scaleOrdinal(traps.map(d => d.index), ([.2, .2, .7, .7, 1.2, 1.2, 1.2, 1.2]).map(d => d*h)) //get length of line along which the spaces are laid out // const dist = path.node().getTotalLength() // const dx = distance / (spaces.length) - 1 const getPosition = function(space, delta = 0) { //t is a tweening value between 0-1 if (space.label == "trap") { return { x: xScale(space.index), // y: yScale(space.label) y: yScale(space.index) } } return path.node().getPointAtLength(scaleSpacesX(space.index + delta)) } //create the regular spaces and holes container.selectAll(".space") .data(spaces) .join(enter => enter.append("rect") .attr("class", d => d.label) .attr("ry", spaceW/4) .attr("width", spaceW * .8) .attr("height", spaceW * .5), update => update, exit => exit.remove() ) .attr("x", d => getPosition(d).x-spaceW/2) .attr("y", d => getPosition(d).y) .attr("transform", d => { const dx = (getPosition(d).x - spaceW/2) + spaceW * .4, dy = getPosition(d).y + spaceW * .25 return `rotate(${getNormal(scaleSpacesX(d.index))} ${dx} ${dy})` }) //create the board's traps container.selectAll(".trap") .data(traps) .join(enter => enter.append("rect") .attr("class", d => d.label) .attr("height", 20) .attr("width", 20), // .attr("fill", "#000"), update => update , exit => exit.remove() ) .attr("x", d => getPosition(d).x) .attr("y", d => getPosition(d).y) return Object.assign(sel.node(), { //update game state with each player's turn update: function(data) { // const scalePlayerX = d3.scaleLinear([0, data.players.length],[spaceW * .2, spaceW * .8]) //show the die roll and fade it out const showRoll = die.selectAll("g") .data([data.roll]) .join(enter => { const c = enter.append("g") const bg = c.append("rect") .attr("height", 100) .attr("width", 100) .attr("x", -50) .attr("y", -50) .attr("fill", "#ddd") const text = c.append("text") .attr("font-size", 36) return c }, update => update, exit => exit.remove()) //show the roll briefly and fade it out showRoll .style("opacity", 1) .transition() .delay(800) .duration(250) .style("opacity", 0) //update the roll text showRoll.each(function(d) { d3.select(this).select("text") .text(d => `${d ? d[0]:""}`) }) //place the players const players = container.selectAll(".player") // .data(data.players, d => d.color) .data([data.players[data.currentPlayer]], d => d.color) .join(enter => enter.append("circle") .attr("class", "player") .attr("r", 5) .attr("fill", d => d.color) .attr("cx", d => getPosition(d.space).x) .attr("cy", d => getPosition(d.space).y + spaceW * .5 * (data.currentPlayer/2)), update => update, //don't remove players that aren't being updated //leave them on the board where they are, and they won't be tweened exit => exit ) //spin up several transitions, for each "hop" //one for each space moved // an extra for moving to the trap //data.players[currentPlayer] players.each(function(d) { // console.log("each", d3.select(this), d) const {space, destination} = d, getNextSpace = index => board.spaces.filter(d => d.index == index)[0] const tween = function(step) { return function (d,i) { //d is player data, this is selection const that = this, player = d3.select(that), // {space, destination} = d, // pos = getPosition(destination) pos = getPosition(step.destination) //create interpolation for the tween const scalePlayerX = d3.scaleLinear([0,1], [player.attr("cx"), pos.x]) //current position const scalePlayerY = d3.scaleLinear([0,1], [player.attr("cy"), pos.y]) //current position //tween between current position to destination, along the path if styaing on the board, or directly if going to/from a trap return function(t) { if (destination.label == "trap" || space.label =="trap") { //animate to or from a trap player .attr("cx", d => scalePlayerX(t)) .attr("cy", d => scalePlayerY(t) + spaceW * .5 * (data.currentPlayer/2)) } else { player .attr("cx", d => getPosition(space, t * (destination.index - space.index)).x ) .attr("cy", d => getPosition(space, t * (destination.index - space.index)).y + spaceW * .5 * (data.currentPlayer/2)) } } } } //work backwards from desitnation //if it's a trap, return hole, other wise n-1 function steps(d, array = []) { const {space, destination} = d // console.log("step", space.index , destination.index, array) //end condition if (space.index == destination.index) return array const end = getNextSpace((destination.label == "trap") ? destination.hole : destination.index - 1) //split off the last move const remainder = Object.assign({}, d) remainder.destination = end //d.destination.index - 1 //or hole const step = Object.assign({}, d) step.space = end //d.destination.index - 1 //or hole //recurse array.unshift(step) return steps(remainder, array) } const transitions = steps(d) transitions.map((d,i) => { //d is the micro step //how do i transition players .transition() .delay(i * 1000) .duration( 250 ) .ease(d3.easeCubicOut) .tween(`move-along-path-${i}`, tween(d)) }) // console.log(steps(d)) }) // players // .transition() // .delay(1000) // .duration( data.roll ? data.roll[0] * 200 : 0) // .ease(d3.easeCubicOut) // .tween('move-along-path', function(d,i) { // //d is player data, this is selection // const that = this, // player = d3.select(that), // {space, destination} = d, // pos = getPosition(destination) // //create interpolation for the tween // const scalePlayerX = d3.scaleLinear([0,1], [player.attr("cx"), pos.x]) //current position // const scalePlayerY = d3.scaleLinear([0,1], [player.attr("cy"), pos.y]) //current position // //tween between current position to destination, along the path if styaing on the board, or directly if going to/from a trap // return function(t) { // if (destination.label == "trap" || space.label =="trap") { // //animate to or from a trap // player // .attr("cx", d => scalePlayerX(t)) // .attr("cy", d => scalePlayerY(t) + spaceW * .5 * (data.currentPlayer/2)) // } else { // player // .attr("cx", d => getPosition(space, t * (destination.index - space.index)).x ) // .attr("cy", d => getPosition(space, t * (destination.index - space.index)).y + spaceW * .5 * (data.currentPlayer/2)) // } // } // }) } }) }30:T1353,Game = function() { //create local copy of the board const localboard = Object.assign({}, board) const spaces = localboard.spaces.filter(d => d.label != "trap"), traps = localboard.spaces.filter(d => d.label == "trap") const getNextSpace = index => localboard.spaces.filter(d => d.index == index)[0] //initialize game state, if null const spec = {} const init = function() { spec.state = { players: [{ "color" : "red", "space" : getNextSpace(0), "destination": getNextSpace(0) }, { "color" : "blue", "space" : getNextSpace(0), "destination" : getNextSpace(0) }, { "color" : "green", "space" : getNextSpace(0), "destination" : getNextSpace(0) }], currentPlayer: 0 } shell.update(spec.state) return spec.state } //return method to take a turn and pass to next player return { init: init, takeTurn: function(dieroll) { console.log("roll", dieroll) const roll = [dieroll] //select next player const {players} = spec.state const currentPlayer = (spec.state.currentPlayer + 1) % players.length, cur = Object.assign({}, players[currentPlayer]), colors = ["skip", "red", "hole", "red", "red", "green"] //roll for the player const color = colors[roll - 1] //find player's current location players[currentPlayer].space = players[currentPlayer].destination //reset starting location const {destination} = players[currentPlayer] //make an array of spaces to hop on players[currentPlayer].moves = [] // new Array(roll).fill().map((d, i) => getNextSpace(players[currentPlayer].space + i + 1)) //move or escape a trap // if (space.hasOwnProperty("label")) { // if (space["label"] == "trap") { if (destination.hasOwnProperty("label")) { if (destination["label"] == "trap") { //see what happens, and where they go //set space to the exit of the trap, based on the roll //color ='green', 'skip' etc. //space['green'] = index on the board to move to //board.spaces[i] = next space //space[color]= index of new space // players[currentPlayer].space = players[currentPlayer].destination if (color != "skip") { players[currentPlayer].destination = getNextSpace(destination[color]) players[currentPlayer].moves.push(getNextSpace(destination[color])) } //if it's not a trap, just move regularly } else { //move the player to their new space // const nextIndex = space.index + roll const nextIndex = destination.index + roll // const nextIndex += (space.index + roll) > spaces.length ? roll : 0 //check if rolled to high if (nextIndex < spaces.length) { //move piece const nextSpace = getNextSpace(nextIndex) // players[currentPlayer].space = nextSpacec // players[currentPlayer].space = players[currentPlayer].destination players[currentPlayer].destination = nextSpace for (let i=0; i++; i< roll) { console.log("hops", i, getNextSpace(destination.index + i)) players[currentPlayer].moves.push(getNextSpace(destination.index + i)) } console.log("player moves", players[currentPlayer]) //TODO: animate //is it a regular space or a hole? if (nextSpace.hasOwnProperty("label")) { //if they landed on a hole, they go to a trap if (nextSpace.label == "hole") { // move to trap //get the space of the trap // players[currentPlayer].space = spaces.filter(d => d.index == nextSpace.trapIndex)[0] // players[currentPlayer].space = getNextSpace(nextSpace.trapIndex) players[currentPlayer].destination = getNextSpace(nextSpace.trapIndex) players[currentPlayer].moves.push( getNextSpace(nextSpace.trapIndex)) //otherwise, just move } else { // players[currentPlayer].space = nextSpace } //did you win? if (nextSpace.index == "trap7") { //change game state } //you won } } else { // players[currentPlayer].destination = players[currentPlayer].space } } } spec.state = Object.assign({}, { players: players, // currentPlayer: (currentPlayer + 1) % players.length, currentPlayer: currentPlayer, roll: [roll, color] }) shell.update(spec.state) return spec.state } } } 31:T9fb,board = ({ spaces: [ { "label": "start", "index": 0}, { "label": "space", "index": 1}, { "label": "space", "index": 2}, { "label": "space", "index": 3}, { "label": "hole", "index": 4, trapIndex: "trap1"}, { "label": "space", "index": 5}, { "label": "space", "index": 6}, { "label": "space", "index": 7}, { "label": "space", "index": 8}, { "label": "space", "index": 9}, { "label": "space", "index": 10}, { "label": "hole", "index": 11, trapIndex: "trap2"}, { "label": "space", "index": 12}, { "label": "space", "index": 13}, { "label": "space", "index": 14}, { "label": "space", "index": 15}, { "label": "space", "index": 16}, { "label": "hole", "index": 17, trapIndex: "trap3"}, { "label": "space", "index": 18}, { "label": "space", "index": 19}, { "label": "hole", "index": 20, trapIndex: "trap4"}, { "label": "space", "index": 21}, { "label": "space", "index": 22}, { "label": "space", "index": 23}, { "label": "space", "index": 24}, { "label": "space", "index": 25}, { "label": "hole", "index": 26, trapIndex: "trap5"}, { "label": "space", "index": 27}, { "label": "space", "index": 28}, { "label": "space", "index": 29}, { "label": "space", "index": 30}, { "label": "space", "index": 31}, { "label": "hole", "index": 32, trapIndex: "trap6"}, { "label": "space", "index": 33}, { "label": "hole", "index": 34, trapIndex: "trap7"}, //holes //4, 11, 17, 20, 26, 32,34 //traps { "label":"trap", "green":6, "red":0, "hole":4, index:"trap1" }, { "label":"trap", "green":14, "red":7, "hole":11, index:"trap2" }, { "label":"trap", "green":19, "red":13, "hole":17, index:"trap3" }, { "label":"trap", "green":23, "red":"trap3", "hole":20, index:"trap4" }, { "label":"trap", "green":27, "red":24, "hole":26, index:"trap5" }, { "label":"trap", "green":"trap7", "red":"trap8", "hole":32, index:"trap6" }, { "label":"trap", //finish hole "green":34, "red":34, "hole":34, index:"trap7" }, { "label":"trap", //mouse trap, should skip a turn in here "green":28, "red":28, "hole":28, index:"trap8" } ] })32:[] 2d:{"title":"Board game","cells":[{"id":0,"value":"# Board game","pinned":false,"hidden":false,"mode":"md"},{"id":517,"value":"html`\n

\n roll:

${gamestate.roll.join(\", \")}

\n\n

players:

${d.color} space: ${d.destination.index}, ${d.destination.label}, ${d.destination.hole}, ${d.moves.map(f => `${f.destination}`)}

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1062,"value":"game.takeTurn(3)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1028,"value":"viewof dieRoll = Die({face: pips({radius:40})})","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":309,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":443,"value":"game = Game()","pinned":false,"hidden":false,"mode":"ojs"},{"id":334,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"options = ({\n height: 300,\n width: 450,\n margins: {\n left: 20,\n top: 20,\n right: 40,\n bottom: 20\n }\n \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":353,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":1026,"value":"import {Die, pips} from \"@petroleumjelliffe/board-game-random-number-generator\"\n\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1031,"value":"// game.takeTurn(dieRoll[0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1085,"value":"// ({roll: dieRoll})","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}