Skip to content

Instantly share code, notes, and snippets.

@headwinds

headwinds/.block

Last active February 26, 2020 14:34
Show Gist options
  • Save headwinds/bdcd79a533a0e25a8afc3bb1d7e0e24f to your computer and use it in GitHub Desktop.
Save headwinds/bdcd79a533a0e25a8afc3bb1d7e0e24f to your computer and use it in GitHub Desktop.
Download ZIP
meadow
Raw
.block
license: mit
Raw
aoe.js
/*
AOE
actorData
1. parabolic arc to target square
2. show that surrounding squares will be affected
3. light up surrounding squares
*/
const cellSkins = d3.selectAll(".cell");
const actorSkins = d3.selectAll(".actor");
const fireEffect = target => {
}
const aoe = (targets,duration,dely) => {
const handleEnd = () => {
console.log("handle aoe end");
}
const afftectTarget = target => {
d3.select(target)
.select("rect")
.transition()
.duration(duration)
.delay(delay)
.attr("fill", "red")
.on("end", handleEnd);
}
targets
.each(target, afftectTarget);
}
const getSkinTrans = target => {
const HALF = Math.floor((CELL_SIZE / 2) - (ACTOR_SIZE /2));
return `translate (${target.x * CELL_PAD + HALF },${target.y * CELL_PAD + HALF})`;
}
// move wizard down to bottom left corner
function moveActor(profession,target,onCompleteCallback,duration,delay){
d3.select(`#${profession}`)
.transition()
.duration(duration)
.delay(delay)
.attr("transform", d => getSkinTrans(target))
.on("end", d => onCompleteCallback(d,profession));
}
const onCompleteCallback = (d,profession) => {
console.log(`${profession} all done`);
}
moveActor("wizard", {x: 0,y:3},onCompleteCallback,3000,0);
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v5.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<script src="meadow.js"></script>
<script src="aoe.js"></script>
<!--<script src="serra.js"></script>-->
</body>
Raw
meadow.js
// Feel free to change or delete any of the code you see in this editor!
const svg = d3.select("body").append("svg")
.attr("width", 960)
.attr("height", 500)
const getGridData = (total) => {
const gridData = [];
const flatGrid = [];
for (let i=0; i<total;i++){
if (!gridData[i]) gridData[i] = [];
for (let j=0; j<total;j++){
if (!gridData[i][j]) gridData[i][j] = [];
gridData[i][j].push({x: j, y: i, type: "floor"})
flatGrid.push({x: j, y: i, type: "floor"});
}
}
return flatGrid;
}
const gridData = getGridData(4);
const meadow = d3.select("svg")
.append("g")
.attr("transform","translate (20,20)")
.attr("id","meadow");
const stage = d3.select("svg")
.append("g")
.attr("transform","translate (20,20)")
.attr("id","stage");
const grid = meadow.selectAll("g").data(gridData);
const CELL_SIZE = 40;
const CELL_PAD = CELL_SIZE + 2;
const getTrans = d => {
return `translate (${d.x * CELL_PAD},${d.y * CELL_PAD})`;
}
const gridEnter = grid.enter();
const gridG = gridEnter.append("g")
.attr("class", "cell")
.attr("transform", getTrans );
gridG
.append("rect")
.attr("width", CELL_SIZE)
.attr("height", CELL_SIZE)
.style("fill", "green");
// add actors
const ACTOR_SIZE = 10;
const ACTOR_PAD = 12;
const professions = ["thief", "wizard", "warrior", "cleric"];
const fighters = [
{name: "Glendra", profession: "thief", color:"black", type: "actor"},
{name: "Allsion", profession: "wizard", color:"white", type: "actor"},
{name: "Bearheart", profession: "warrior",color:"darkred", type: "actor"},
{name: "Sensulla", profession: "cleric", color:"pink", type: "actor"}
]
const actorData = fighters;
const getActorTrans = (d,i) => {
const cell = gridData[i];
const HALF = Math.floor((CELL_SIZE / 2) - (ACTOR_SIZE /2));
return `translate (${cell.x * CELL_PAD + HALF },${cell.y * CELL_PAD + HALF})`;
}
const actors = stage.selectAll("g").data(actorData);
const actorsG = actors.enter()
.append("g")
.attr("class", "actor")
.attr("id", d => d.profession)
.attr("transform", getActorTrans);
actorsG
.append("rect")
.attr("width", ACTOR_SIZE)
.attr("height", ACTOR_SIZE)
.style("fill", d => d.color);
Raw
serra.js
// serra parabolic arc angel
//The data for our line
const lineDataa = [ { "x": 1, "y": 30}, { "x": 20, "y": 20},
{ "x": 40, "y": 10}, { "x": 60, "y": 40},
{ "x": 80, "y": 5}, { "x": 100, "y": 60}];
const lineDataB = [ { "x": 1, "y": 30}, { "x": 25, "y": 11},
{ "x": 30, "y": 5}, { "x": 60, "y": 27},
{ "x": 102, "y": 80}, { "x": 7, "y": 34}];
const calcDist = (x1,x2,y1,y2) => {
return Math.sqrt((x1 - x2) ** 2 + (y1 - y2) ** 2);
}
const createLineDate = (start,end,total) => {
const lineData = [];
const dist = calcDist(start.x,end.x,start.y,end.y);
const inc = Math.floor(dist / 5);
const totalPoints = [...Array(total).keys()];
let up = true;
totalPoints.map( idx => {
let x,y;
if (up){
lineData.push({x: start.x + (inc * idx), y: start.y + inc})
} else {
lineData.push({x:start.x + (inc * idx), y:start.y - inc})
}
up = !up;
});
return lineData;
}
const lineData = createLineDate({x: 0, y: 200}, {x: 400, y:200})
console.log(lineData)
//This is the accessor function we talked about above
const lineFunction = d3.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.curve(d3.curveLinear)
//The SVG Container
const svgContainer = d3.select("svg");
let count = 0;
function lightening() {
const action = (count < 5) ? lightening : null;
count++;
d3.active(this)
.attr("stroke", "white")
.attr("d", lineFunction(lineData))
.transition()
.attr("stroke", "blue")
.attr("transform","translate(150,190)")
.attr("d", lineFunction(lineDataB))
.transition()
.on("start", action)
}
const lineGraph = svgContainer
.append("path")
.attr("d", lineFunction(lineData))
.attr("stroke", "blue")
.attr("stroke-width", 2)
.attr("transform","translate(100,200)")
.attr("fill", "none")
.transition()
.duration(200)
.on("start", lightening);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment