function story_component_input_load() {
  for (key in dataStory) {
    var dataObject = dataStory[key];
    if (dataObject["objectType"] == "input") {
      //group
      var object = new Konva.Group({
        id: key,
        x: parseInt(dataObject["x"]),
        y: parseInt(dataObject["y"]),
        data: dataObject,
      });
      grpStory.add(object);

      //rect
      if (dataObject["interaction"]) {
        var rect = new Konva.Rect({
          id: "rect",
          x: 0,
          y: 0,
          width: parseInt(dataObject["width"]),
          height: parseInt(dataObject["height"]),
          opacity: 0.5,
          stroke: dataObject["stroke"],
          strokeWidth: parseInt(dataObject["strokeWidth"]),
        });
        object.add(rect);
      }

      //text
      fontSize = parseInt(dataObject["height"]) / 2;
      var text = new Konva.Text({
        id: "text",
        fontSize: fontSize,
        x: 0,
        y: (parseInt(dataObject["height"]) - (fontSize - 5)) / 2,
        width: parseInt(dataObject["width"]),
        fill: dataObject["textFill"],
        fontStyle: "bold",
        fontFamily: "Trebuchet MS, sans-serif",
        align: "center",
      });
      object.add(text);

      //events
      object.on("pointerover", function (e) {
        object = e.currentTarget;
        if (object.getAttr("data")["interaction"]) {
          stage.container().style.cursor = "pointer";
          object.findOne("#rect").fill(object.getAttr("data")["rectFillOver"]);
          object.findOne("#text").fill(object.getAttr("data")["textFillOver"]);
        }
      });
      object.on("pointerout", function (e) {
        if (object.getAttr("data")["interaction"]) {
          object = e.currentTarget;
          stage.container().style.cursor = "default";
          object.findOne("#rect").fill("");
          object.findOne("#text").fill(object.getAttr("data")["textFill"]);
        }
      });
      object.on("pointerclick ", function (e) {
        object = e.currentTarget;
        if (object.getAttr("data")["interaction"]) {
          story_check_unlock = true;

          //inputBox dan gelen veri burada işleniyor
          object.input = function (value) {
            //
            //boşlukları al
            if (parseInt(object.getAttr("data")["spaces"]) == 1) {
              //boşluklara izin veriliyor alma
            } else {
              //boslulara izin verilmiyor
              //bosluklari aliyoruz
              //kare bulmacalarda vs. bu sekilde
              value = value.replace(/ /g, "");
            }

            if (object.getAttr("data")["group"]) {
              //grup kutusu ve bu kutu lider kutu

              var letters = value.split("");

              for (key in object.getAttr("data")["group"]) {
                boxId = object.getAttr("data")["group"][key];
                box = grpStory.findOne("#" + boxId);
                text = box.findOne("#text");

                if (letters[key]) {
                  letter = letters[key];
                  //büyük harfe çevir
                  if (parseInt(object.getAttr("data")["uppercase"]) == 1) {
                    switch (dataInterface["language"]) {
                      case "tr":
                        letter = letter.toLocaleUpperCase("tr-TR");
                        break;

                      case "en":
                        letter = letter.toLocaleUpperCase("en-EN");
                        break;

                      case "de":
                        letter = letter.toLocaleUpperCase("de-DE");
                        break;
                    }
                  }

                  text.text(letter);
                  box.setAttr("targetted", letter);
                }
              }
            } else {
              //normal kutu
              text = object.findOne("#text");
              letter = value.substring(0, object.getAttr("data")["limit"]);

              //büyük harfe çevir
              if (parseInt(object.getAttr("data")["uppercase"]) == 1) {
                switch (dataInterface["language"]) {
                  case "tr":
                    letter = letter.toLocaleUpperCase("tr-TR");
                    break;

                  case "en":
                    letter = letter.toLocaleUpperCase("en-EN");
                    break;

                  case "de":
                    letter = letter.toLocaleUpperCase("de-DE");
                    break;
                }
              }

              text.text(letter);
              object.setAttr("targetted", letter);
            }
          };

          player_component_input_pop(object);
        }
      });
    }
  }
}
function story_component_input_checker(obj, trueFalse) {
  var imageSrc = new Image();
  imageSrc.onload = function () {
    var checker = new Konva.Image({
      id: "checker",
      x: parseInt(obj.getAttr("data")["checkerX"]),
      y: parseInt(obj.getAttr("data")["checkerY"]),
      width: parseInt(obj.getAttr("data")["checkerWidth"]),
      height: parseInt(obj.getAttr("data")["checkerHeight"]),
      image: imageSrc,
    });
    obj.add(checker);
  };

  if (trueFalse) {
    imageSrc.src = stagePath + obj.getAttr("data")["checkerCorrect"];
  } else {
    imageSrc.src = stagePath + obj.getAttr("data")["checkerWrong"];
  }
}
function story_component_input_check() {
  var objects = grpStory.getChildren();
  for (key in objects) {
    var obj = objects[key];
    if (
      obj.getAttr("data") &&
      obj.getAttr("data")["objectType"] == "input" &&
      obj.getAttr("data")["check"] != "0"
    ) {
      obj.listening(false);
      storyTotalObject++;

      let target = obj.getAttr("data")["target"];
      let targetted = obj.getAttr("targetted");
      let correct = false;

      if (target) {
        targets = target.split("---");

        targets.forEach((element) => {
          if (obj.getAttr("data")["caseSensitive"] != 1) {
            element = element.toLowerCase();
            if (targetted) {
              targetted = targetted.toLowerCase();
            }
          }

          if (element == targetted) {
            correct = true;
          }
        });
      } else {
        if (targetted == null) {
          correct = true;
        }
      }

      if (correct) {
        storyTotalCorrect++;
        obj.setAttr("success", true);
        story_component_input_checker(obj, true);
      } else {
        story_component_input_checker(obj, false);
      }
    }
  }
}

function story_component_input_solve() {
  var objects = grpStory.getChildren();

  for (key in objects) {
    var obj = objects[key];

    if (obj.getAttr("data") && obj.getAttr("data")["objectType"] == "input") {
      text = obj.findOne("#text");
      if (obj.getAttr("data")["target"]) {
        let targets = obj.getAttr("data")["target"].split("---");
        let target = targets[0];
        text.text(target);
      } else {
        text.text("");
      }

      checker = obj.findOne("#checker");

      if (checker) {
        checker.destroy();
      }

      obj.listening(false);
    }
  }
}

function story_component_input_reset() {
  var objects = grpStory.getChildren();
  for (key in objects) {
    var obj = objects[key];
    if (obj.getAttr("data") && obj.getAttr("data")["objectType"] == "input") {
      obj.setAttr("checked", null);
      obj.setAttr("targetted", null);

      obj.listening(true);

      checker = obj.findOne("#checker");
      if (checker) {
        checker.destroy();
      }

      text = obj.findOne("#text");
      text.text("");
    }
  }
}
