chrahunt/stationary-replays.html

## stationary-replays.html
<!DOCTYPE html>
<html>
<head>
  <title>stationary camera</title>
  <style>
  .position-select, .execute, .result {
    display: none;
  }
  .execute, .result {
    margin-top: 20px;
  }
  </style>
</head>
<body>
  <div class="content">
    <div class="file-select">
      <label>Select replay: <input type="file" id="file-input"></label>
    </div>
    <div class="position-select">
      <p>Enter the location you would like the camera to be:</p>
      <label>x: <input type="number" id="x-pos"></label>
      <label>y: <input type="number" id="y-pos"></label>
    </div>
    <div class="execute">
      <button id="do-transform">Do it!</button>
    </div>
    <div class="result"></div>
  </div>
  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script>
    var file = null;

    function clone(obj) {
      return JSON.parse(JSON.stringify(obj));
    }

    function makeArray(n, defaultValue) {
      if (typeof defaultValue == "undefined") defaultValue = false;
      var ary = new Array(n);
      for (var i = 0; i < ary.length; i++) ary[i] = defaultValue;
      return ary;
    }

    $('#file-input').change(function () {
      var files = $(this).prop('files');
      if (files.length !== 1) {
        alert("Select one file!");
      } else {
        $(".position-select").show();
        $(".execute").show();
        file = files[0];
      }
    });

    $('#do-transform').click(function () {
      var x = Number($("#x-pos").val());
      var y = Number($("#y-pos").val());
      if (isNaN(x) || x < 0) {
        alert("Your x is messed up!");
        return;
      }
      if (isNaN(y) || y < 0) {
        alert("Your y is messed up!");
        return;
      }
      var reader = new FileReader();
      reader.onload = function(e) {
        var text = e.target.result;
        var data;
        try {
          data = JSON.parse(text);
        } catch (e) {
          alert("Couldn't parse your file!");
          return;
        }
        var playerKey = /^player(\d+)$/;
        var playerKeys = Object.keys(data).filter(function (key) {
          return playerKey.test(key);
        });
        var maxKey = 0;
        var newPlayer = null;
        playerKeys.forEach(function (key) {
          var id = Number(playerKey.exec(key)[1]);
          maxKey = Math.max(maxKey, id);
          var player = data[key];
          if (player.me == "me") {
            newPlayer = clone(player);
            player.me = "other";
          }
        });
        if (!newPlayer) {
          alert("Your replay is messed up!");
          return;
        }
        newPlayer.draw = makeArray(newPlayer.draw.length);
        newPlayer.dead = makeArray(newPlayer.dead.length, true);
        newPlayer.x = makeArray(newPlayer.x.length, x);
        newPlayer.y = makeArray(newPlayer.y.length, y);
        data["player" + (maxKey + 1)] = newPlayer;
        var newText = JSON.stringify(data);
        var b = new Blob([newText], { type: "text/plain" });
        var url = URL.createObjectURL(b);
        var name = "x" + x + "y" + y + file.name;
        $(".result").html("Click <a href='" + url + "' download='" +
          name + "'>here</a> to download.");
        $(".result").show();
      };
      reader.readAsText(file);
    });
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>stationary camera</title>
	<style>
	.position-select, .execute, .result {
	display: none;
	}
	.execute, .result {
	margin-top: 20px;
	}
	</style>
	</head>
	<body>
	<div class="content">
	<div class="file-select">
	<label>Select replay: <input type="file" id="file-input"></label>
	</div>
	<div class="position-select">
	<p>Enter the location you would like the camera to be:</p>
	<label>x: <input type="number" id="x-pos"></label>
	<label>y: <input type="number" id="y-pos"></label>
	</div>
	<div class="execute">
	<button id="do-transform">Do it!</button>
	</div>
	<div class="result"></div>
	</div>
	<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
	<script>
	var file = null;

	function clone(obj) {
	return JSON.parse(JSON.stringify(obj));
	}

	function makeArray(n, defaultValue) {
	if (typeof defaultValue == "undefined") defaultValue = false;
	var ary = new Array(n);
	for (var i = 0; i < ary.length; i++) ary[i] = defaultValue;
	return ary;
	}

	$('#file-input').change(function () {
	var files = $(this).prop('files');
	if (files.length !== 1) {
	alert("Select one file!");
	} else {
	$(".position-select").show();
	$(".execute").show();
	file = files[0];
	}
	});

	$('#do-transform').click(function () {
	var x = Number($("#x-pos").val());
	var y = Number($("#y-pos").val());
	if (isNaN(x) \|\| x < 0) {
	alert("Your x is messed up!");
	return;
	}
	if (isNaN(y) \|\| y < 0) {
	alert("Your y is messed up!");
	return;
	}
	var reader = new FileReader();
	reader.onload = function(e) {
	var text = e.target.result;
	var data;
	try {
	data = JSON.parse(text);
	} catch (e) {
	alert("Couldn't parse your file!");
	return;
	}
	var playerKey = /^player(\d+)$/;
	var playerKeys = Object.keys(data).filter(function (key) {
	return playerKey.test(key);
	});
	var maxKey = 0;
	var newPlayer = null;
	playerKeys.forEach(function (key) {
	var id = Number(playerKey.exec(key)[1]);
	maxKey = Math.max(maxKey, id);
	var player = data[key];
	if (player.me == "me") {
	newPlayer = clone(player);
	player.me = "other";
	}
	});
	if (!newPlayer) {
	alert("Your replay is messed up!");
	return;
	}
	newPlayer.draw = makeArray(newPlayer.draw.length);
	newPlayer.dead = makeArray(newPlayer.dead.length, true);
	newPlayer.x = makeArray(newPlayer.x.length, x);
	newPlayer.y = makeArray(newPlayer.y.length, y);
	data["player" + (maxKey + 1)] = newPlayer;
	var newText = JSON.stringify(data);
	var b = new Blob([newText], { type: "text/plain" });
	var url = URL.createObjectURL(b);
	var name = "x" + x + "y" + y + file.name;
	$(".result").html("Click <a href='" + url + "' download='" +
	name + "'>here</a> to download.");
	$(".result").show();
	};
	reader.readAsText(file);
	});
	</script>
	</body>
	</html>