MediaWiki:Gadget-artTab.js

function switchVariant(event, variant) {
  console.log(event, variant);
  var currentElement = $(event.target);
 
  var paramVariant = "";
  if (typeof variant !== "undefined") {
    paramVariant = variant;
  }
  switchVariantForElement(currentElement, paramVariant);
}

function switchVariantForElement(currentElement, variant) {
  console.log(currentElement, variant);
  var artTabDiv = currentElement.closest('.artTab');
  artTabDiv.find('.artTabLinks').removeClass('active');
  artTabDiv.find('.artTabContent .fullart').hide();
  artTabDiv.attr('data-tdoll-variant', variant);
  
  var tdoll = artTabDiv.data('tdollId');
  var costume = artTabDiv.data('tdollCostume');
  var variant = artTabDiv.data('tdollVariant');
  var modelId = tdoll;
  if (costume != "") modelId += "_" + costume;
  if (variant != "") modelId += "_" + variant;

  console.log(modelId);

  refreshView(artTabDiv);
  
  // Set "active" at the end
  currentElement.addClass('active');
}

function refreshView(artTabDiv) {
  var tdoll = $(artTabDiv).data('tdollId');
  var costume = $(artTabDiv).data('tdollCostume');
  var variant = $(artTabDiv).data('tdollVariant');
  
  var live2dActive = $(artTabDiv).find('.live2dstage').is(':visible');
  if (live2dActive) {
    createLive2dView(artTabDiv, function(view) {
      view.show();
      var stage = view.data('live2dStage');
      stage.removeChildren();
      var live2dData = loadLive2dGirl(tdoll, costume, variant);
      stage.addChild(live2dData);
    });
  } else {
    artTabDiv.find(".fullart[data-variant='" + variant + "']").show();
  }
}

function create_url(base, file) {
  return base + window.gfUtils.createWikiPathPart(file) + file;
}

function curl(file) {
  return create_url("../images/", file);
}

function getLive2dModel(modelId) {
    var model = {};
    model.type = "Live2D Model Setting";
    model.name = modelId;
    model.model = curl(modelId + "_live2d_model.moc.skel");
    model.textures = [];
    model.textures.push(curl(modelId + "_live2d_texture_00.png"));
    model.physics = curl(modelId + "_live2d_physics.txt");
    model.pose = curl(modelId + "_live2d_pose.txt");
    model.expressions = [];
    model.layout = {};
    model.layout.scale = 0.8;
    model.hit_areas = [];
    model.hit_areas.push({"name":"bodybroken", "id":"D_REF.BODYBROKEN"});
    model.hit_areas.push({"name":"head", "id":"D_REF.HEAD"});
    model.hit_areas.push({"name":"leg", "id":"D_REF.LEG"});
    model.hit_areas.push({"name":"body", "id":"D_REF.BODY"});
    model.motions = {};
    model.motions.idle = [];
    model.motions.idle.push({"file": curl(modelId + "_live2d_idle.mtn.txt")});
    model.motions.idle.push({"file": curl(modelId + "_live2d_idle_01.mtn.txt")});
    model.motions.idle.push({"file": curl(modelId + "_live2d_idle_02.mtn.txt")});
    model.motions.idle.push({"file": curl(modelId + "_live2d_wait_1.mtn.txt")});
    model.motions.idle.push({"file": curl(modelId + "_live2d_wait_2.mtn.txt")});
    model.motions.tap_figure = [];
    model.motions.tap_figure.push({"file": curl(modelId + "_live2d_broken_1.mtn.txt")});
    model.motions.tap_figure.push({"file": curl(modelId + "_live2d_broken_2.mtn.txt")});
    model.motions.tap_figure.push({"file": curl(modelId + "_live2d_broken_3.mtn.txt")});
    model.motions.tap_figure.push({"file": curl(modelId + "_live2d_broken_4.mtn.txt")});
    model.motions.tap_figure.push({"file": curl(modelId + "_live2d_touch_1.mtn.txt")});
    model.motions.tap_figure.push({"file": curl(modelId + "_live2d_touch_2.mtn.txt")});
    model.motions.tap_figure.push({"file": curl(modelId + "_live2d_touch_3.mtn.txt")});
    model.motions.tap_figure.push({"file": curl(modelId + "_live2d_touch_4.mtn.txt")});
    model.motions.tap_figure.push({"file": curl(modelId + "_live2d_touch_5.mtn.txt")});
    model.motions.tap_figure.push({"file": curl(modelId + "_live2d_shake.mtn.txt")});
    model.motions.tap_figure.push({"file": curl(modelId + "_live2d_login.mtn.txt")});
    model.motions.tap_figure.push({"file": curl(modelId + "_live2d_wedding.mtn.txt")});
    model.motions.tap_figure.push({"file": curl(modelId + "_live2d_wedding_touch.mtn.txt")});
 
    return model;
}

function loadLive2dGirl(tdoll, costume, variant) {
  var modelId = tdoll;
  if (costume.length > 0) {
    modelId = modelId + "_" + costume;
  }
  if (variant && variant.length > 0) {
    modelId = modelId + "_" + variant;
  }
  
  var model = getLive2dModel(modelId);
  
  // Live 2D Sprite
  var l2d_tdoll_sprite = new PIXI.Live2DSprite(model, {
    debugLog: false,
    randomMotion: false,
    defaultMotionGroup: "idle",
    eyeBlink: true
  });
  l2d_tdoll_sprite.startRandomMotion('idle');
  l2d_tdoll_sprite.on('mousemove', function(evt) {
    const point = evt.data.global;
    l2d_tdoll_sprite.setViewPoint(point.x, point.y);
  });
  l2d_tdoll_sprite.on('click', function(evt) {
    const point = evt.data.global;
    if (l2d_tdoll_sprite.hitTest('body', point.x, point.y)) {
      l2d_tdoll_sprite.startRandomMotionOnce('tap_figure');
      // Info: Maybe add individual hit tests?
    } else {
      l2d_tdoll_sprite.startRandomMotionOnce('tap_figure');
    }
  });

  return l2d_tdoll_sprite;
}

function doesLive2dAnimationExist(artTabDiv, costume) {
  var costumeId = costume;
  if (costumeId[0] === '_') {
    costumeId = costumeId.substr(1);
  }
  if (costume == "") {
    costumeId = "costume0";
  }
  
  return $(artTabDiv).attr("data-live2d-exist-" + costumeId) == "true";
}

function hideLive2dView(artTabDiv) {
  var live2dView = $(artTabDiv).find('.live2dstage');
  live2dView.hide();
  var stage = live2dView.data('live2dStage');
  if (stage) {
    stage.removeChildren();
  }

  refreshView(artTabDiv);
}

function createLive2dView(artTabDiv, callback) {
  var live2dView = $(artTabDiv).find('.live2dstage');
  
  if (live2dView.length < 1) {
    mw.loader.using('ext.gadget.live2d').then( function () {
	// Init renderer
	const l2d_tdoll_renderer = PIXI.autoDetectRenderer(500, 500, {transparent: true});
	const l2d_tdoll_stage = new PIXI.Container();

	// Start the animation
	function animate() {
		requestAnimationFrame(animate);
		l2d_tdoll_renderer.render(l2d_tdoll_stage);
	}
	animate();

        var view = $(l2d_tdoll_renderer.view);
        view.data('live2dStage', l2d_tdoll_stage);
        view.addClass('live2dstage');
        view.data('renderer', l2d_tdoll_renderer);

        callback(view);
    });
  } else {
    callback(live2dView.first());
  }
}

function modelChanged(event, costumeSuffix) {
  var artTabDiv = $(event.target).closest('.artTab');
  var tdollId = artTabDiv.data('tdollId');
  var artModelId = tdollId + costumeSuffix;
  var variantswitcher = artTabDiv.find('.variantswitcher');
  
  var costumeId = costumeSuffix;
  if (costumeId[0] === '_') {
    costumeId = costumeId.substr(1);
  }
  artTabDiv.attr('data-tdoll-costume', costumeId);
  
  hideLive2dView(artTabDiv);
  variantswitcher.find('.right').remove();
  
  var basePath = mw.config.get("wgServer") + "/images/";
  var cpp = window.gfUtils.createWikiPathPart;
  var fullartPath = basePath + "thumb/" + cpp(artModelId +".png") + artModelId +".png/420px-" + artModelId +".png";
  var fullartDamagedPath = basePath + "thumb/" + cpp(artModelId +"_D.png") + artModelId +"_D.png/420px-" + artModelId +"_D.png";
    
  var normArt = artTabDiv.find(".fullart:not(.damaged) a");
  normArt.attr("href", fullartPath );
  normArt.find('img').attr("src", fullartPath );
  normArt.find('img').attr("srcset", fullartPath );
  normArt.find('img').attr("alt", fullartPath );

  var damagedArt = artTabDiv.find(".fullart.damaged a");
  damagedArt.attr("href", fullartDamagedPath );
  damagedArt.find('img').attr("src", fullartDamagedPath );
  damagedArt.find('img').attr("srcset", fullartDamagedPath );
  damagedArt.find('img').attr("alt", fullartDamagedPath );

  var isLive2dPossible = doesLive2dAnimationExist(artTabDiv, costumeSuffix);
  if (isLive2dPossible) {
    var live2dButton = $('<button></button>');
    live2dButton.addClass('artTabLinks');
    live2dButton.addClass('right');
    live2dButton.click(function() {
      if (live2dButton.is('.enabled')) {
        hideLive2dView($(artTabDiv));
        live2dButton.removeClass('enabled');
      } else {
        createLive2dView(artTabDiv, function(view) {
          view.show();
          $(artTabDiv).find('.artTabContent').first().append(view);
          switchVariantForElement(view, view.closest('.artTab').data('tdollVariant'));
        });
        live2dButton.addClass('enabled');
      }
    });
    live2dButton.text("Live2D");
    variantswitcher.append(live2dButton);
  }
  
  refreshView(artTabDiv);
};

RLQ.push(function () {
  $(document).ready(function() { 
    var artTabDiv = $('.artTab');
    artTabDiv.on('costume_changed', modelChanged);
  
    var normalButton = $('<button></button>');
    normalButton.addClass('artTabLinks');
    normalButton.click(switchVariant);
    normalButton.attr('data-variant', "");
    normalButton.text("Normal");

    var damagedButton = $('<button></button>');
    damagedButton.addClass('artTabLinks');
    damagedButton.click(switchVariant);
    damagedButton.attr('data-variant', "D");
    damagedButton.text("Damaged");
  
    var variantswitcher = $('<div></div>');
    variantswitcher.addClass('variantswitcher');
    variantswitcher.append(normalButton);
    variantswitcher.append(damagedButton);
    
    artTabDiv.prepend(variantswitcher);

    normalButton.click();
  });
});