shmatuan

var dataBattle = JSON.parse('[{"stages_of_the_battle":{"my_heroes":[[{"life_of_hero":100,"faith_of_hero":100},{"life_of_hero":98,"faith_of_hero":25}],[{"life_of_hero":100,"faith_of_hero":100},{"life_of_hero":97.5,"faith_of_hero":25}],[{"life_of_hero":100,"faith_of_hero":100},{"life_of_hero":96.8,"faith_of_hero":25}]],"rival_heroes":[[{"life_of_hero":100,"faith_of_hero":100},{"life_of_hero":99,"faith_of_hero":25}],[{"life_of_hero":100,"faith_of_hero":100},{"life_of_hero":95.5,"faith_of_hero":25}],[{"life_of_hero":100,"faith_of_hero":100},{"life_of_hero":99.8,"faith_of_hero":25}]],"visual_log_of_the_battle":[{"my_hero_login":"vovkka","img":"ico_1","name_of_the_type_impact":"\u0443\u0434 1","rival_hero_login":"groza","cause_damage":-30,"part_life_hero":370,"total_life_hero":400,"counter_attack":{"rival_hero_login":"groza","img":"ico_3","my_hero_login":"vovkka","cause_damage":-45,"part_life_hero":455,"total_life_hero":500}},{"rival_hero_login":"groza","img":"ico_3","name_of_the_type_impact":"\u0443\u0434 2","my_hero_login":"vovkka","cause_damage":-45,"part_life_hero":455,"total_life_hero":500},{"rival_hero_login":"groza","img":"ico_5","name_of_the_type_impact":"\u0443\u0434 3","my_hero_login":"vovkka","cause_damage":-25,"part_life_hero":435,"total_life_hero":500}],"result_of_fight":"\u041f\u043e\u0431\u0435\u0434\u0430!"}},{"stages_of_the_battle":{"my_heroes":[[{"life_of_hero":100,"faith_of_hero":100},{"life_of_hero":98,"faith_of_hero":25}],[{"life_of_hero":100,"faith_of_hero":100},{"life_of_hero":97.5,"faith_of_hero":25}],[{"life_of_hero":100,"faith_of_hero":100},{"life_of_hero":96.8,"faith_of_hero":25}]],"rival_heroes":[[{"life_of_hero":100,"faith_of_hero":100},{"life_of_hero":99,"faith_of_hero":25}],[{"life_of_hero":100,"faith_of_hero":100},{"life_of_hero":95.5,"faith_of_hero":25}],[{"life_of_hero":100,"faith_of_hero":100},{"life_of_hero":99.8,"faith_of_hero":25}]],"visual_log_of_the_battle":[{"my_hero_login":"vovkka","img":"ico_3","name_of_the_type_impact":"\u0443\u0434 1","rival_hero_login":"zmei","cause_damage":-60,"part_life_hero":360,"total_life_hero":400,"counter_attack":{"rival_hero_login":"zmei","img":"ico_3","my_hero_login":"vovkka","cause_damage":-45,"part_life_hero":455,"total_life_hero":500}},{"rival_hero_login":"zmei","img":"ico_7","name_of_the_type_impact":"\u0443\u0434 2","my_hero_login":"vovkka","cause_damage":-45,"part_life_hero":415,"total_life_hero":500},{"rival_hero_login":"zmei","img":"ico_2","name_of_the_type_impact":"\u0443\u0434 3","my_hero_login":"vovkka","cause_damage":-55,"part_life_hero":375,"total_life_hero":500}],"result_of_fight":"\u041f\u043e\u0431\u0435\u0434\u0430!"}}]');

var data = []

for (var i = 0; i < dataBattle.length; i++) {
  for (var k = 0; k < dataBattle[i].stages_of_the_battle.visual_log_of_the_battle.length; k++) {
    let str = '<div class="battle-plan-plash-step">';
    str += '<div class="step-user-one">' + dataBattle[i].stages_of_the_battle.visual_log_of_the_battle[k].my_hero_login + '</div>';
    str += '<span class="step-ico jtooltip" title="' + dataBattle[i].stages_of_the_battle.visual_log_of_the_battle[k].name_of_the_type_impact + '"><i class="ico-step-one"></i></span>';
    str += '<div class="step-user-two step-user-enemy">' + dataBattle[i].stages_of_the_battle.visual_log_of_the_battle[k].rival_hero_login + '</div>';
    str += '<div class="step-user-return">' + dataBattle[i].stages_of_the_battle.visual_log_of_the_battle[k].cause_damage + '</div>';
    str += '<div class="step-user-summary">[' + dataBattle[i].stages_of_the_battle.visual_log_of_the_battle[k].part_life_hero + ' / ' + dataBattle[i].stages_of_the_battle.visual_log_of_the_battle[k].total_life_hero + ']</div>';
    str += '</div>';

    data.push({k, str})
  }
}

var update = function(k) {
  setTimeout(function() {
    //$('.battle-plan-plash-holder').prepend(str);
    console.log( "time " + (1000 * (k + 1)) ,data[k].str);
    update(k + 1)
  }, 1000 * (k + 1));
}

update(0)

function getSearchParameters() {
      var prmstr = window.location.search.substr(1);
      return prmstr != null && prmstr != "" ? transformToAssocArray(prmstr) : {};
}

function transformToAssocArray( prmstr ) {
    var params = {};
    var prmarr = prmstr.split("&");
    for ( var i = 0; i < prmarr.length; i++) {
        var tmparr = prmarr[i].split("=");
        params[tmparr[0]] = tmparr[1];
    }
    return params;
}

var params = getSearchParameters();

.grid{
  display: flex;
  flex-wrap :wrap;