git-school / visualizing-git

:framed_picture: Visualize how common Git operations affect the commit graph

Home Page:http://git-school.github.io/visualizing-git/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

ability to tell it to "replay this sequence of commands" from a json datasource

nneul opened this issue · comments

Being able to define a series of operations to have it display on autopilot would be really useful. That would allow for pre-recorded tutorials where it just ran through the set of operations automatically, displaying each step as it occurs, along with presenter commentary.

[
  { "cmd" : "pres()" },
  { "cmd" : "git commit -m \"test1\"", "pause" : 2, "caption" : "here we are creating our first commit" },
  { "cmd" : "........},
  { "cmd" : "pause" },    // This one would wait for interactive click-to-proceed. 
]

This would be even more amazing if combined with support for #123

I was able to rig up a nice demo/reply on this just using javascript console, but seems like this would be something better to build in. Just paste the below into js console while displaying the site.




cmds = [
"git commit -am \"test1\"",
"git checkout -b qa",
"git checkout -b production",
"git checkout master",
"git checkout -b feature1",
"git commit -m \"new stuff for feature1\"",
"git checkout master",
"git merge feature1",
"git branch -d feature1",
"git checkout qa",
"git checkout -b feature2",
"git commit -m \"stuff for f2\"",
"git checkout master",
"git merge feature2",
"git branch -d feature2",
"git checkout qa",
"git merge master",
"git checkout production",
"git checkout -b efix1",
"git commit -am \"fix1\"",
"git checkout production",
"git merge efix1",
"git branch -d efix1",
"git merge qa",
"git checkout master",
"git checkout -b feature3",
"git commit -m \"f3 stuff\"",
"git checkout master",
"git merge feature3",
"git branch -d feature3",
"git checkout qa",
"git merge master",
"git checkout production",
"git merge qa",
"git checkout master",
"git checkout -b feature4",
"git commit -m \"feature4 stuff\"",
"git checkout master",
"git merge feature4",
"git branch -d feature4",
"git checkout qa",
"git merge master",
"git checkout production",
"git merge qa",
"git checkout master",
"git checkout -b bp-efix1",
"git merge production",
"git checkout master",
"git merge bp-efix1",
"git branch -d bp-efix1",
"git checkout -b feature5",
"git commit -m \"feature5\"",
"git checkout master",
"git merge feature5",
"git branch -d feature5",
"git checkout qa",
"git merge master",
"git checkout production",
"git merge qa",
];

async function sleep(milliseconds) {
  return new Promise((resolve, reject) => {
    setTimeout(() => { resolve(); }, milliseconds);
  });
}
async function cmd(text) {
  var inp = d3.select("input")[0][0];
  inp.value = text;
  inp.dispatchEvent(new KeyboardEvent('keyup', { 'keyCode': 13 }));
  await sleep(500);
}

for (const val of cmds) {
  await cmd(val);
}