2f:T19f5,// 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), 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 //debug // const currentPlayer = container.append("text").attr("id", "debug") //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) //scales for laying out the traps const xScale = d3.scaleOrdinal(traps.map(d => d.index), ([.33, .66, .7, .3, .2, .75, .95, .55]).map(d => d*w)), yScale = d3.scaleOrdinal(traps.map(d => d.index), ([.2, .2, .7, .7, 1.2, 1.2, 1.2, 1.2]).map(d => d*h)) 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 } //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.index) } } return path.node().getPointAtLength(scaleSpacesX(space.index + delta)) } //LAYOUT THE BOARD //------------------ //Regular spaces and holes along the Path container.selectAll(".space") .data(spaces) .join(enter => enter.append("rect") .attr("class", d => d.label) .attr("ry", spaceW / 4) .attr("width", spaceW * 4/5) .attr("height", spaceW / 2), 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 / 4 return `rotate(${getNormal(scaleSpacesX(d.index))} ${dx} ${dy})` }) //Traps container.selectAll(".trap") .data(traps) .join(enter => enter.append("rect") .attr("class", d => d.label) .attr("id", d => d.index) .attr("height", 20) .attr("width", 20), 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 //lay out the pieces according to the state //move the pieces according ot the hops update: function(data) { const debug = d3.selectAll("#debug") .data([`${data.currentPlayer}, ${data.players[data.currentPlayer].color}`]) .join() .text(d => d) //place the players const players = container.selectAll(".player") .data(data.players, d => d.color) .join(enter => enter .append("circle") .attr("class", "player") .attr("id", d => d.color) .attr("r", 15) .attr("fill", d => d.color) .attr("cx", d => getPosition(d.space).x) .attr("cy", d => getPosition(d.space).y + spaceW / 4 ), update => update, exit => exit.remove() ) const duration = 350, scalePieceX = d3.scaleLinear(),//.range([player.attr("cx"), pos.x]), //current position scalePieceY = d3.scaleLinear()//.range([player.attr("cy"), pos.y]) //current position // console.log(data.hops) const hopDuration = data.hops.reduce((delay, {color, move: [start, end]}, i, array) => { const piece = d3.selectAll(`#${color}`) // piece.raise() const transition = piece.transition() .delay(delay) .duration(duration) .ease(d3.easeCubicOut) .tween(`hop${i}`, d => { console.log(`hop${i}` ) const pos = getPosition(end), scalePieceX = d3.scaleLinear().range([piece.attr("cx"), pos.x]), scalePieceY = d3.scaleLinear().range([piece.attr("cy"), pos.y]) return function(t) { if (end.label == "trap" || start.label =="trap") { //animate to or from a trap piece .attr("cx", d => scalePieceX(t)) .attr("cy", d => scalePieceY(t) + spaceW /4 ) } else { //animate along path piece .attr("cx", d => getPosition(start, t * (end.index - start.index)).x ) .attr("cy", d => getPosition(start, t * (end.index - start.index)).y + spaceW /4 ) } } }) if (i == array.length - 1) { transition .duration(500) .on("end", d => { const pieces = d3.selectAll(".player") .data(data.players) .join(enter => enter, update => update, exit => exit) .classed("current", (d,i) => i == data.currentPlayer) d3.selectAll(".current").raise() }) } return delay + duration }, 1000) } }) }30:T1412,Game = function() { //create local copy of the board const localboard = Object.assign({}, board) const actions = ["skip", "red", "hole", "red", "red", "green"] const spaces = board.spaces.filter(d => d.label != "trap"), traps = board.spaces.filter(d => d.label == "trap") const getSpaceByIndex = index => board.spaces.filter(d => d.index == index)[0], getExit = (trap, roll) => trap[actions[roll - 1]], getDestination = (space, roll) => { return space.index + roll < spaces.length ? getSpaceByIndex(space.index + roll) : space }, getTrap = (hole, roll) => getSpaceByIndex(hole.trapIndex) const getSpaceUtil = { "start": (color) => getSpaceByIndex(color+"Start"), "space": (space, roll) => space.index + roll < spaces.length ? getSpaceByIndex(space.index + roll) : space, "hole": (hole, roll) => getSpaceByIndex(hole.trapIndex), "trap": (trap, roll) => trap[actions[roll - 1]] } const getNewDest = (space, roll) => getSpaceUtil[space.label](space, roll) //initialize game state, if null const spec = {} const init = function() { spec.state = { players: players.map(d => { return { "color": d, "space" : getSpaceByIndex(0), "lostTurns": 0 } }), currentPlayer: 0, roll:"", hops:[] } shell.update(spec.state) return spec.state } init() //initialize //return method to take a turn and pass to next player return { init: init, takeTurn: function (roll) { const {players, currentPlayer} = spec.state, action = actions[roll - 1] //find player's current location const {space, color, lostTurns} = players[currentPlayer], moves = [], hops = [] let newDestination = false //in case the piece doesn't move //move or escape a trap if (space.hasOwnProperty("label")) { // players[currentPlayer].space = players[currentPlayer].destination if (space.index == "trap8") { //the cage //lose 2 turns if (lostTurns == 2) { newDestination = getSpaceByIndex(space["red"]) hops.push({ color: color, move: [space, newDestination]}) } players[currentPlayer].lostTurns = lostTurns++ % 3 //reset after 2 lost turns } else if (space.label == "trap") { //exit the trap if you rolled console.log(action) if (action != "skip") { newDestination = getSpaceByIndex(space[action]) hops.push({ color: color, move: [space, newDestination]}) } else { // newDestination = space //piece doesn't hop } } else { //you're on the board //if you didn't toll too high const rolledIndex = space.index + roll if (rolledIndex < spaces.length) { //move piece newDestination = getSpaceByIndex(rolledIndex) for (let i = 0; i < roll; i++) { hops.push({ color: color, move: [getSpaceByIndex(space.index + i) , getSpaceByIndex(space.index + i + 1)]}) } } } if (newDestination != false) { //check if another piece was kicked out const kickedOutPiece = players.filter(d => d.space.index == newDestination.index) kickedOutPiece.map(piece => { const startingSpace = getSpaceByIndex(0) //add a hop hops.push({ color: piece.color, move: [piece.space, startingSpace]}) // piece.space = startingSpace //update kickedout player state const kickedOutindex = players.findIndex(d => d.color == piece.color) players[kickedOutindex].space = startingSpace }) //check if the piece feel in a hole, but not if they exited a trap if (newDestination.label == "hole" && space.label != "trap") { const trap = getSpaceByIndex(newDestination.trapIndex) console.log(trap) // getSpaceByIndex(nextSpace.trapIndex) hops.push({ color: color, move: [newDestination, trap]}) newDestination = trap } //update player's space players[currentPlayer].space = newDestination } //did you win? if (newDestination.index == "trap7") { // if (players[currentPlayer].destination.index == "trap7") { //change game state console.log(`${players[currentPlayer].color} won!!` ) } //you won } //update game state //todo: need to highlight the next piece AFTER the previous piece moved spec.state = { players: players, currentPlayer: (spec.state.currentPlayer + 1) % players.length, roll: [roll, action], hops: hops } shell.update(spec.state) return spec.state } } } 31:Ta15,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:T1569,maus = htl.html`` 33:T1541,mausgroup = { return htl.html` ` }34:[] 2d:{"title":"Mausefalle \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n","cells":[{"id":0,"value":"# Mausefalle ${maus}","pinned":false,"hidden":false,"mode":"md"},{"id":953,"value":"viewof roll = Die({value: game.init(), callback: d => {\n console.log(d)\n return game.takeTurn(d[0])\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":1112,"value":"viewof players = playerSelector","pinned":false,"hidden":false,"mode":"ojs"},{"id":1243,"value":"{\n while (false) {\n yield Promises.tick(4000, Math.floor(Math.random() * 6) + 1)\n .then(roll => game.takeTurn([roll]))\n }\n}","pinned":false,"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: width/2,\n width: width,\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":949,"value":"import {Die, playerSelector} from \"@petroleumjelliffe/board-game-random-number-generator\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1066,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1102,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":1097,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}