Widget:chibiCommander: Difference between revisions

Fixing the rendering area
Using colorkey for naming
 
(15 intermediate revisions by the same user not shown)
Line 1: Line 1:
<includeonly><script>
<includeonly><script>
function initSelects(resourcesUl) {
var resources = {};
var parts = resourcesUl;
parts.children('li').each(function() {
var part = $(this);
part.typ = part.contents().get(0).nodeValue.trim();
part.costumes = {};
part.children('ul').children('li').each(function() {
var costumeLi = $(this);
var costume = {};
costumeLi.children('ul').children('li').each(function() {
var dataLi = $(this);
var paramFull = dataLi.contents().get(0).nodeValue.trim();
if (paramFull === "colors") {
dataLi.children('ul').children('li').each(function() {
var colorLi = $(this);
costume.colors = costume.colors || [];
var colorLink = colorLi.children('a').first().attr('href');
var colorLinkParts = colorLink.split('/');
costume.colors.push(colorLinkParts[colorLinkParts.length-1]);
});
} else {
var paramName = paramFull.split(":")[0];
var paramLink = dataLi.children('a').first().attr('href');
var paramLinkParts = paramLink.split('/');
costume[paramName] = paramLinkParts[paramLinkParts.length-1];
}
});
costume.costumeId = costumeLi.contents().get(0).nodeValue.trim();
part.costumes[costume.costumeId] = costume;
});
resources[part.typ] = part;
});
for (var partKey in resources) {
var part = resources[partKey];
for (var costumeKey in part.costumes) {
var costume = part.costumes[costumeKey];
for (var colorKey in costume.colors) {
var color = costume.colors[colorKey];
var colName = "(" + colorKey + ")";
$('.commander-sim-option.' + part.typ).append($('<option>', {
value: costume.skel + ";" + costume.atlas + ";" + color,
text: costume.costumeId + " " + colName
}));
}
}
}
}
RLQ.push(['jquery', function () {
RLQ.push(['jquery', function () {
   $(document).ready(function() {
   $(document).ready(function() {
     // Let's make sure the correct values are shown
     var rendererDiv = $('#cancan');
    $('.commander-sim-option').first().change();
 
    mw.loader.using(['ext.gadget.md5hasher', 'ext.gadget.pixiLoader', 'ext.gadget.chibiAnimation']).then(function() {
      window.animations.PIXILoader.init().then(function() {
          // Let's make sure the correct values are shown
          initSelects($('.commander-chibi-controls-panel-resources>ul'));
          $('.commander-sim-option').first().change();
        }, function(x,y,z) {
          console.error("Loading Spine failed");
          rendererDiv.removeClass("loading");
        }
      );
 
      $('select.commander-sim-option').on('change', function() {
        var selectedHead = $('.commander-sim-option.head option:selected').val();
        var selectedBody = $('.commander-sim-option.body option:selected').val();
        var selectedFeet = $('.commander-sim-option.feet option:selected').val();
        var baseview = rendererDiv.data('baseview');
        window.loadCommander(rendererDiv, baseview, selectedHead, selectedBody, selectedFeet);
      });
    }, function(x,y,z) {
      console.error("Loading needed libraries failed");
      rendererDiv.removeClass("loading");
    });
   });
   });
}]);
}]);


</script>
</script>
<div style="margin: 50px; border: thin dotted gray;"><div id="cancan" class="chibiAnimationContainer commander-chibi" data-tdoll-hidedormbutton="true"></div></div>
<div class="commander-chibi-container"><div id="cancan" class="chibiAnimationContainer commander-chibi" data-tdoll-hidedormbutton="true"></div></div>
<select class="commander-sim-option head">
<div class="commander-chibi-controls-panel">
<option selected value="Commander_Initial_m_head_chibi_skel.skel;Commander_Initial_m_head_chibi_atlas.txt;Commander_Initial_m_head_chibi_spritemap.png">Default (m)</option>
                      <label class="commander-sim-option-label head">Head:
<option value="Commander_Fury_Fantasy_female_head_chibi_skel.skel;Commander_Fury_Fantasy_female_head_chibi_atlas.txt;Commander_Fury_Fantasy_female_head_color_N_chibi_spritemap.png">Fury Fantasy (f) (Default)</option>
<select class="gf-droplist commander-sim-option head" autocomplete="off"></select>
<option value="Commander_Fury_Fantasy_female_head_chibi_skel.skel;Commander_Fury_Fantasy_female_head_chibi_atlas.txt;Commander_Fury_Fantasy_female_head_color_0_chibi_spritemap.png">Fury Fantasy (f) 0</option>
                      </label>
<option value="Commander_Fury_Fantasy_female_head_chibi_skel.skel;Commander_Fury_Fantasy_female_head_chibi_atlas.txt;Commander_Fury_Fantasy_female_head_color_1_chibi_spritemap.png">Fury Fantasy (f) 1</option>
                      <label class="commander-sim-option-label body">Body:
<option value="Commander_Fury_Fantasy_female_head_chibi_skel.skel;Commander_Fury_Fantasy_female_head_chibi_atlas.txt;Commander_Fury_Fantasy_female_head_color_2_chibi_spritemap.png">Fury Fantasy (f) 2</option>
<select class="gf-droplist commander-sim-option body" autocomplete="off"></select>
<option value="Commander_Fury_Fantasy_female_head_chibi_skel.skel;Commander_Fury_Fantasy_female_head_chibi_atlas.txt;Commander_Fury_Fantasy_female_head_color_3_chibi_spritemap.png">Fury Fantasy (f) 3</option>
                      </label>
<option value="Commander_Fury_Fantasy_female_head_chibi_skel.skel;Commander_Fury_Fantasy_female_head_chibi_atlas.txt;Commander_Fury_Fantasy_female_head_color_4_chibi_spritemap.png">Fury Fantasy (f) 4</option>
                      <label class="commander-sim-option-label feet">Feet:
</select>
<select class="gf-droplist commander-sim-option feet" autocomplete="off"></select>
<select class="commander-sim-option body">
                      </label>
<option selected value="Commander_Initial_m_body_chibi_skel.skel;Commander_Initial_m_body_chibi_atlas.txt;Commander_Initial_m_body_chibi_spritemap.png">Default (m)</option>
</div></includeonly><noinclude>{{#widget:chibiCommander}}</noinclude>
<option value="Commander_Fury_Fantasy_female_body_chibi_skel.skel;Commander_Fury_Fantasy_female_body_chibi_atlas.txt;Commander_Fury_Fantasy_female_body_color_N_chibi_spritemap.png">Fury Fantasy (f) (Default)</option>
<option value="Commander_Fury_Fantasy_female_body_chibi_skel.skel;Commander_Fury_Fantasy_female_body_chibi_atlas.txt;Commander_Fury_Fantasy_female_body_color_0_chibi_spritemap.png">Fury Fantasy (f) 0</option>
<option value="Commander_Fury_Fantasy_female_body_chibi_skel.skel;Commander_Fury_Fantasy_female_body_chibi_atlas.txt;Commander_Fury_Fantasy_female_body_color_1_chibi_spritemap.png">Fury Fantasy (f) 1</option>
<option value="Commander_Fury_Fantasy_female_body_chibi_skel.skel;Commander_Fury_Fantasy_female_body_chibi_atlas.txt;Commander_Fury_Fantasy_female_body_color_2_chibi_spritemap.png">Fury Fantasy (f) 2</option>
<option value="Commander_Fury_Fantasy_female_body_chibi_skel.skel;Commander_Fury_Fantasy_female_body_chibi_atlas.txt;Commander_Fury_Fantasy_female_body_color_3_chibi_spritemap.png">Fury Fantasy (f) 3</option>
<option value="Commander_Fury_Fantasy_female_body_chibi_skel.skel;Commander_Fury_Fantasy_female_body_chibi_atlas.txt;Commander_Fury_Fantasy_female_body_color_4_chibi_spritemap.png">Fury Fantasy (f) 4</option>
</select>
<select class="commander-sim-option feet">
<option selected value="Commander_Initial_m_feet_chibi_skel.skel;Commander_Initial_m_feet_chibi_atlas.txt;Commander_Initial_m_feet_chibi_spritemap.png">Default (m)</option>
<option value="Commander_Fury_Fantasy_female_feet_chibi_skel.skel;Commander_Fury_Fantasy_female_feet_chibi_atlas.txt;Commander_Fury_Fantasy_female_feet_color_N_chibi_spritemap.png">Fury Fantasy (f) (Default)</option>
<option value="Commander_Fury_Fantasy_female_feet_chibi_skel.skel;Commander_Fury_Fantasy_female_feet_chibi_atlas.txt;Commander_Fury_Fantasy_female_feet_color_0_chibi_spritemap.png">Fury Fantasy (f) 0</option>
<option value="Commander_Fury_Fantasy_female_feet_chibi_skel.skel;Commander_Fury_Fantasy_female_feet_chibi_atlas.txt;Commander_Fury_Fantasy_female_feet_color_1_chibi_spritemap.png">Fury Fantasy (f) 1</option>
<option value="Commander_Fury_Fantasy_female_feet_chibi_skel.skel;Commander_Fury_Fantasy_female_feet_chibi_atlas.txt;Commander_Fury_Fantasy_female_feet_color_2_chibi_spritemap.png">Fury Fantasy (f) 2</option>
<option value="Commander_Fury_Fantasy_female_feet_chibi_skel.skel;Commander_Fury_Fantasy_female_feet_chibi_atlas.txt;Commander_Fury_Fantasy_female_feet_color_3_chibi_spritemap.png">Fury Fantasy (f) 3</option>
<option value="Commander_Fury_Fantasy_female_feet_chibi_skel.skel;Commander_Fury_Fantasy_female_feet_chibi_atlas.txt;Commander_Fury_Fantasy_female_feet_color_4_chibi_spritemap.png">Fury Fantasy (f) 4</option>
</select>
<script>$('select.commander-sim-option').on('change', function() {
var selectedHead = $('.commander-sim-option.head option:selected').val();
var selectedBody = $('.commander-sim-option.body option:selected').val();
var selectedFeet = $('.commander-sim-option.feet option:selected').val();
window.loadCommander(baseview, selectedHead, selectedBody, selectedFeet);
});</script>
</includeonly><noinclude>{{#widget:chibiCommander}}</noinclude>