<commit_before><html>
<head>
<style>
#graph {
  width: 95%;
  height: 95%;
}
.hidden {
  display: none;
}
</style>
</head>
<body>
  <canvas id="graph" width="800" height="440"></canvas>
<canvas id="meter" class="hidden" width="720" height="402"></canvas>
<script>
function draw(data) {
  if (data == undefined) {
    return;
  }
  var events = data.events;
  if (events == undefined) {
    return;
  }

  if (data.offset_msec == undefined) {
    return;
  }
  var current_sec = parseInt(data.offset_msec / 1000);

  var canvas_meter = document.getElementById('meter');
  if (canvas_meter == undefined) {
    return;
  }
  var context_meter = canvas_meter.getContext('2d');

  draw_meter(context_meter, data);

  var canvas_graph = document.getElementById('graph');
  if (canvas_graph == undefined) {
    return;
  }
  var context_graph = canvas_graph.getContext('2d');

  var margin_left = 30;
  var margin_right = 10;
  var margin_top = 20;
  var margin_bottom = 20;
  var width = canvas_graph.width - (margin_left + margin_right);
  var height = canvas_graph.height - (margin_top + margin_bottom);

  context_graph.clearRect(0, 0, canvas_graph.width, canvas_graph.height);
  context_graph.stroke();

  var prev_text_align = context_graph.textAlign;
  var prev_text_baseline = context_graph.textBaseline;
  context_graph.textAlign = 'left';
  context_graph.textBaseline = 'top';
  var bottom = height + margin_top + 2;
  context_graph.fillText('0:00', margin_left, bottom);
  context_graph.fillText('1:00', margin_left + width / 6, bottom);
  context_graph.fillText('2:00', margin_left + width / 6 * 2, bottom);
  context_graph.fillText('3:00', margin_left + width / 6 * 3, bottom);
  context_graph.fillText('4:00', margin_left + width / 6 * 4, bottom);
  context_graph.fillText('5:00', margin_left + width / 6 * 5, bottom);

  context_graph.textAlign = 'right';
  context_graph.textBaseline = 'middle';
  var left = margin_left - 2;
  context_graph.fillText('100', left, margin_top)
  context_graph.fillText('50',  left, margin_top + height / 4);
  context_graph.fillText('0',   left, margin_top + height / 4 * 2);
  context_graph.fillText('50',  left, margin_top + height / 4 * 3);
  context_graph.fillText('100', left, margin_top + height / 4 * 4);
  context_graph.textAlign = prev_text_align;
  context_graph.textBaseline = prev_text_baseline;

  context_graph.drawImage(canvas_meter,
    0, 0, canvas_meter.width, canvas_meter.height,
    margin_left, margin_top, width, height);
}

function draw_meter(context, data) {
  var events = data.events;
  var current_sec = parseInt(data.offset_msec / 1000);
  var width = context.canvas.width;
  var height = context.canvas.height;
  var x_scale = width / 360;
  var y_scale = height / 201;
  var mid_height = parseInt(height / 2) + (1 * y_scale);

  context.clearRect(0, 0, width, height);

  // Border
  context.rect(0, 0, width, height);
  context.stroke();

  // Time indicator
  context.beginPath();
  context.moveTo(current_sec * x_scale, 0);
  context.lineTo(current_sec * y_scale, height);
  context.stroke();

  var rule = data.rule;
  if (rule == 'yagura' || rule == 'hoko') {
    context.beginPath();
    context.moveTo(0, mid_height);
    context.lineTo(width, mid_height);
    context.stroke();

    var stroke = get_stroke_objective(events.objective, current_sec);
    if (stroke.length > 0) {
      context.beginPath();
      context.moveTo(0, mid_height);
      for (var i = 0; i < stroke.length; i++) {
        context.lineTo(stroke[i][0] * x_scale,
                       mid_height - stroke[i][1] * y_scale);
      }
      context.stroke();
    }
  } else if (rule == 'area') {
    var stroke = get_stroke_splatzone(events.splatzone, current_sec);
    for (var i = 1; i <= 2; i++) {
      if (stroke.length > 0) {
        context.beginPath();
        context.moveTo(0, height);
        for (var j = 0; j < stroke.length; j++) {
          context.lineTo(stroke[j][0] * x_scale,
                         stroke[j][i] * 2 * y_scale);
        }
        context.stroke();
      }
    }
  }

  inklings_strokes = get_stroke_inklings(events.inklings, current_sec);
  for (var i = 0; i < inklings_strokes.length; i++) {
    var stroke = inklings_strokes[i];
    for (var j = 0; j < stroke.length; j++) {
      if (stroke[j][0] == stroke[j][1]) {
        continue;
      }
      var y = 10 * i + 5;
      context.beginPath();
      context.moveTo(stroke[j][0] * x_scale, y * y_scale);
      context.lineTo(stroke[j][1] * x_scale, y * y_scale);
      context.stroke();
    }
  }
}

function get_stroke_objective(events, current_sec) {<commit_msg>Added colors and the axis for Splatzone.<commit_after><html>
<head>
<style>
#graph {
  width: 95%;
  height: 95%;
}
.hidden {
  display: none;
}
</style>
</head>
<body>
  <canvas id="graph" width="800" height="440"></canvas>
<canvas id="meter" class="hidden" width="720" height="402"></canvas>
<script>
function draw(data) {
  if (data == undefined) {
    return;
  }
  var events = data.events;
  if (events == undefined) {
    return;
  }

  if (data.offset_msec == undefined) {
    return;
  }
  var current_sec = parseInt(data.offset_msec / 1000);

  var canvas_meter = document.getElementById('meter');
  if (canvas_meter == undefined) {
    return;
  }
  var context_meter = canvas_meter.getContext('2d');

  draw_meter(context_meter, data);

  var canvas_graph = document.getElementById('graph');
  if (canvas_graph == undefined) {
    return;
  }
  var context_graph = canvas_graph.getContext('2d');

  var margin_left = 30;
  var margin_right = 10;
  var margin_top = 20;
  var margin_bottom = 20;
  var width = canvas_graph.width - (margin_left + margin_right);
  var height = canvas_graph.height - (margin_top + margin_bottom);

  context_graph.clearRect(0, 0, canvas_graph.width, canvas_graph.height);
  context_graph.stroke();

  var prev_text_align = context_graph.textAlign;
  var prev_text_baseline = context_graph.textBaseline;
  context_graph.textAlign = 'left';
  context_graph.textBaseline = 'top';
  var bottom = height + margin_top + 2;
  context_graph.fillText('0:00', margin_left, bottom);
  context_graph.fillText('1:00', margin_left + width / 6, bottom);
  context_graph.fillText('2:00', margin_left + width / 6 * 2, bottom);
  context_graph.fillText('3:00', margin_left + width / 6 * 3, bottom);
  context_graph.fillText('4:00', margin_left + width / 6 * 4, bottom);
  context_graph.fillText('5:00', margin_left + width / 6 * 5, bottom);

  context_graph.textAlign = 'right';
  context_graph.textBaseline = 'middle';
  var left = margin_left - 2;
  var rule = data.rule;
  if (rule == 'yagura' || rule == 'hoko') {
    context_graph.fillText('100', left, margin_top)
    context_graph.fillText('50',  left, margin_top + height / 4);
    context_graph.fillText('0',   left, margin_top + height / 4 * 2);
    context_graph.fillText('50',  left, margin_top + height / 4 * 3);
    context_graph.fillText('100', left, margin_top + height / 4 * 4);
  } else if (rule == 'area') {
    context_graph.fillText('100', left, margin_top)
    context_graph.fillText('75',  left, margin_top + height / 4);
    context_graph.fillText('50',  left, margin_top + height / 4 * 2);
    context_graph.fillText('25',  left, margin_top + height / 4 * 3);
    context_graph.fillText('0',   left, margin_top + height / 4 * 4);
  }
  context_graph.textAlign = prev_text_align;
  context_graph.textBaseline = prev_text_baseline;

  context_graph.drawImage(canvas_meter,
    0, 0, canvas_meter.width, canvas_meter.height,
    margin_left, margin_top, width, height);
}

function draw_meter(context, data) {
  var events = data.events;
  var current_sec = parseInt(data.offset_msec / 1000);
  var width = context.canvas.width;
  var height = context.canvas.height;
  var x_scale = width / 360;
  var y_scale = height / 201;
  var mid_height = parseInt(height / 2) + (1 * y_scale);

  context.clearRect(0, 0, width, height);

  // Border
  context.rect(0, 0, width, height);
  context.stroke();

  // Grid
  context.strokeStyle = "#CCC";
  context.lineWidth = 0.5;
  for (var xi = 1; xi < 6; xi++) {
    context.beginPath();
    context.moveTo(width / 6 * xi, 0);
    context.lineTo(width / 6 * xi, height);
    context.stroke();
  }
  for (var yi = 1; yi < 4; yi++) {
    context.beginPath();
    context.moveTo(0,     height / 4 * yi);
    context.lineTo(width, height / 4 * yi);
    context.stroke();
  }

  // Time indicator
  context.strokeStyle = "#666";
  context.lineWidth = 1;

  context.beginPath();
  context.moveTo(current_sec * x_scale, 0);
  context.lineTo(current_sec * y_scale, height);
  context.stroke();

  // Inklings alive states
  inklings_strokes = get_stroke_inklings(events.inklings, current_sec);
  context.lineWidth = 10;
  context.strokeStyle = "#80CBC4";
  for (var i = 0; i < inklings_strokes.length; i++) {
    if (i == 4) {
      context.strokeStyle = "#FFAB91";
    }
    var stroke = inklings_strokes[i];
    for (var j = 0; j < stroke.length; j++) {
      if (stroke[j][0] == stroke[j][1]) {
        continue;
      }
      var y = 10 * i + 5;
      context.beginPath();
      context.moveTo(stroke[j][0] * x_scale, y * y_scale);
      context.lineTo(stroke[j][1] * x_scale, y * y_scale);
      context.stroke();
    }
  }

  // Objectives
  context.lineWidth = 5;

  var rule = data.rule;
  if (rule == 'yagura' || rule == 'hoko') {
    context.strokeStyle = "#303F9F";
    var stroke = get_stroke_objective(events.objective, current_sec);
    if (stroke.length > 0) {
      context.beginPath();
      context.moveTo(0, mid_height);
      for (var i = 0; i < stroke.length; i++) {
        context.lineTo(stroke[i][0] * x_scale,
                       mid_height - stroke[i][1] * y_scale);
      }
      context.stroke();
    }
  } else if (rule == 'area') {
    var stroke = get_stroke_splatzone(events.splatzone, current_sec);
    for (var i = 1; i <= 2; i++) {
      context.strokeStyle = (i == 1) ? "#00695C" : "#D84315";
      if (stroke.length > 0) {
        context.beginPath();
        context.moveTo(0, height);
        for (var j = 0; j < stroke.length; j++) {
          context.lineTo(stroke[j][0] * x_scale,
                         stroke[j][i] * 2 * y_scale);
        }
        context.stroke();
      }
    }
  }

  context.lineWidth = 1;
  context.strokeStyle = "#000";
}

function get_stroke_objective(events, current_sec) {
{'fraction_non_alphanumeric': 0.1490509683013778, 'fraction_numerical': 0.028904518739762984, 'mean_word_length': 3.283945522080066, 'pattern_counts': {'":': 0, '<': 37, '<?xml version=': 0, '>': 29, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5063235', 'n_tokens_mistral': 3852, 'n_tokens_neox': 3569, 'n_words': 809}