Benutzer:Formatierer/js/Pairs.js

(function( _public, $, undefined ) {

 var field = [];
 var maxField = 0;
 var mix = [];

 var tileset = [];
 var tilecnt = 0;
 var tiles = 0;

 var brain = [];
 var maxBrain = 0;

 var clicks = 0;
 var id1 = 0;
 var id2 = 0;
 var idx1 = -1;
 var idx2 = -1;
 var punkte1 = 0;
 var punkte2 = 0;
 var i,j;
 var amZug = 0;
 var duDarfst = 1;
 var status = '';
 var gegner = "Gegner";
 var feldspalten = 6;
 var feldzeilen = 4;
 var karten = '';

_public.init = function () {

 $("td").click(function() {

  if (clicks < 2 && duDarfst == 1) {

   var id = this.id;
   var c = Number(id.charAt(1));
   var r = Number(id.charAt(2));
   var idx = c + r * feldspalten;
   if (idx < maxField && c < feldspalten && r < feldzeilen  && field[idx] == 0) {
    showTile(this,idx);

    clicks++;
    if (clicks == 1) {
     id1 = id;
     idx1 = idx;
     field[idx1] = 3;
    }
    if (clicks == 2) {
     id2 = id;
     idx2 = idx;
     if (mix[idx1] == mix[idx2]) {
      punkte1++;
      field[idx1] = 1;
      field[idx2] = 1;

      setTimeout(pair, 1000);
      var rest = maxField - (punkte1 + punkte2) * 2;
      if (rest == 0) {
       status = "Das Spiel ist beendet";
       setTimeout(neustart, 2200);
      }
     } else {
      amZug = 2;
      duDarfst = 0;
      status = "Dein Gegner ist am Zug";
      Pairsset("PairStatus",status);
      setTimeout(reset, 2200);
      setTimeout(gegnerzug, 3200);
     }
    }
   }
  }
 });

 tilecnt = Number($('#Tilesets').attr("data-cnt"));

 for (i = 0; i < tilecnt; i++) {
 
  tileset[i] = {};
  tileset[i].type = $('#Tileset'+(i+1)).attr("data-type");
  tileset[i].name = $('#Tileset'+(i+1)).attr("data-name");

  var di = $('#Tileset'+(i+1)).attr("data-items");
  if (tileset[i].type == "chars") {
   tileset[i].t = di.split('');
  } else {
   tileset[i].t = di.split(',');
  }

 }

 $("#PairField").html('<select id="feld"><option>4x6</option><option selected>6x6</option><option>6x8</option><option>8x8</option></select>');
 $("#PairWahl").html('<select id="gegner"><option>Uli Ulkig</option><option>Cleo Clever</option><option>Robbie Robot</option></select>');

 var sel = "";
 for (i = 0; i < tilecnt; i++) {
  sel += "<option>" + tileset[i].name + "</option>";
 }

 $("#PairTiles").html('<select id="karten">' + sel + '</select>');

 createButtonStart();
 createButtonShowAll();
}


_public.start = function () {
 var i;

 $('#feld').prop('disabled', true);
 $('#gegner').prop('disabled', true);
 $('#karten').prop('disabled', true);
 $('#PairStartB').prop('disabled', true);

 switch ($("#feld :selected").text()) {
  case "4x6":
   feldzeilen = 4;
   feldspalten = 6;
   break;
  case "6x6":
   feldzeilen = 6;
   feldspalten = 6;
   break;
  case "6x8":
   feldzeilen = 6;
   feldspalten = 8;
   break;
  case "8x8":
   feldzeilen = 8;
   feldspalten = 8;
 }
 maxField = feldzeilen * feldspalten;

 for (i = 0; i < maxField; i++) {
  field[i] = 0;
 }

 for (i = 0; i < maxField/2; i++) {
  mix[i] = i;
  mix[i+maxField/2] = i;
 }

 for (i = maxField - 1; i > 0; i--) {
  var r = Math.floor(Math.random()*i);
  var swap = mix[i];
  mix[i] = mix[r];
  mix[r] = swap;
 }

 gegner = $("#gegner :selected").text();
 switch (gegner) {
  case "Uli Ulkig":
   maxBrain = 5;
   break;
  case "Cleo Clever":
   maxBrain = 8;
   break;
  case "Robbie Robot":
   maxBrain = 11;
 }

 var karten = $("#karten :selected").text();
 for (i = 0; i < tilecnt; i++) {
  if (tileset[i].name == karten) {
    tiles = i;
  }
 }

 punkte1 = 0;
 punkte2 = 0;
 clicks = 0;
 amZug = 1;
 status = "Du bist am Zug";
 setPunkte();

 for (i = 0; i < maxField; i += 2) {

  id1 = idxToId(i);
  id2 = idxToId(i+1);
  reset();

 }
 setSize();
 document.getElementById("PairStart").scrollIntoView(true);
}


_public.showAll = function () {
 var idx;
 $("td").off("click");
 for (idx = 0; idx < maxField; idx++) {
  var id = '#' + idxToId(idx);
  $(id).css("box-shadow","none").css("background-color","#E0E0E0");
  if (tileset[tiles].type == "files") {
   $(id).html('<div class="center"><div class="floatnone"><a href="'
     + mw.config.get("wgScript") + '/Datei:'
     + $.trim(tileset[tiles].t[mix[idx]]).substring(5) + '"><img alt="not found ('
     + $.trim(tileset[tiles].t[mix[idx]]) + ')" src="'
     + '//upload.wikimedia.org/wikipedia/commons/'
     + $.trim(tileset[tiles].t[mix[idx]]) + '" width="64" height="64" /></a></div></div>');
  } else {
   $(id).html('<div style="margin: 0.1em 0.1em 0.1em 0.1em; text-align: center;font-size: '
     + calcSize(tileset[tiles].type) + '%;">'
     + tileset[tiles].t[mix[idx]] + '</div>');
  }
 }
}


function showTile(id,idx) {
 if (tileset[tiles].type == "icons") {
  $(id).css("box-shadow","none").css("background-color","#F3F3F3")
   .css("border","1px solid blue").css("box-sizing","border-box").css("border-radius","5px");
 } else {
  $(id).css("box-shadow","none").css("background-color","#E0E0E0");
 }
 if (tileset[tiles].type == "files") {
  $(id).html('<div class="center"><div class="floatnone"><img alt="not found ('
     + $.trim(tileset[tiles].t[mix[idx]]) + ')" src="'
     + '//upload.wikimedia.org/wikipedia/commons/'
     + $.trim(tileset[tiles].t[mix[idx]]) + '" width="64" height="64" /></div></div>');
 } else {
   $(id).html('<div style="margin: 0.1em 0.1em 0.1em 0.1em; text-align: center;font-size: '
     + calcSize(tileset[tiles].type) + '%;">'
     + tileset[tiles].t[mix[idx]] + '</div>');
 }
 remember(idx,mix[idx]);
}

function calcSize(type) {
 if (type == "icons") return '240';
 if (type == "chars") return '250';
 return '150';
}

function neustart() {
 $('#feld').prop('disabled', false);
 $('#gegner').prop('disabled', false);
 $('#karten').prop('disabled', false);
 $('#PairStartB').prop('disabled', false);
 Pairsset("PairStatus",status);
}


function reset() {
 $('#'+id1).css("box-shadow","2px 2px 10px -2px gray").css("background-color","#F8E8C8").css("border-style","none");
 $('#'+id1).html('<div class="center"><div class="floatnone"><img alt="Wiktfavicon en.svg.png" src="'
  + '//upload.wikimedia.org/wikipedia/commons/c/c1/Piece-ico-48px.png" width="24" height="24" /></div></div>');
 $('#'+id2).css("box-shadow","2px 2px 10px -2px gray").css("background-color","#F8E8C8").css("border-style","none");
 $('#'+id2).html('<div class="center"><div class="floatnone"><img alt="Wiktfavicon en.svg.png" src="'
  + '//upload.wikimedia.org/wikipedia/commons/c/c1/Piece-ico-48px.png"  width="24" height="24" /></div></div>');

 var i;
 for (i = 0; i < 64; i++) {
  if (field[i] == 3) {
   field[i] = 0;
  }
 }

 clicks = 0;
 idx1 = -1;
 idx2 = -1;
 duDarfst = amZug;
 Pairsset("PairStatus",status);
}


function pair() {
 $('#'+id1).css("box-shadow","none").css("background-color","#FFFFFF");
 $('#'+id1).css("border-style","none");
 $('#'+id1).html('<div class="center"></div>');
 $('#'+id2).css("box-shadow","none").css("background-color","#FFFFFF");
 $('#'+id2).css("border-style","none");
 $('#'+id2).html('<div class="center"></div>');
 forget(idx1);
 forget(idx2);
 clicks = 0;
 setPunkte();
 Pairsset("PairStatus",status);
}


function gegnerzug() {
 var a = recall2();

 var rest = maxField - (punkte1 + punkte2) * 2;
 idx1 = 0;

 if (a.length == 2) {  // zwei tiles im hirn?
  idx1 = a[0];
 } else {
  var zug = Math.floor(Math.random() * (rest - brain.length));

  while (zug > 0 || field[idx1] != 0 || isKnown(idx1)) {
   idx1++;
   if (field[idx1] == 0) {
    zug--;
   }
  }
 }
 field[idx1] = 3;

 id1 = idxToId(idx1);
 setTimeout(function() { showTile('#'+id1,idx1); }, 1800);

 if (a.length == 2) {
  idx2 = a[1];
 } else {
  a = recall1(mix[idx1]);
  if (a.length > 0 && a[0] != idx1) {
   idx2 = a[0];
  } else {
   var zug = Math.floor(Math.random() * (rest-1));
   idx2 = 0;
   while (zug > 0 || field[idx2] != 0) {
    idx2++;
    if (field[idx2] == 0) {
     zug--;
    }
   }
  }
 }

 field[idx2] = 3;

 id2 = idxToId(idx2);

 setTimeout(function(){ showTile('#'+id2,idx2); },3600);

 if (mix[idx1] == mix[idx2]) {
  punkte2++;
  field[idx1] = 2;
  field[idx2] = 2;
  forget(idx1);
  forget(idx2);
  setTimeout(pair, 5000);
  rest = maxField - (punkte1 + punkte2) * 2;
  if (rest > 0) {
   setTimeout(gegnerzug, 6000);
  } else {
   status = "Das Spiel ist beendet";
   setTimeout(neustart, 6000);
  }
 } else {
  amZug = 1;
  status = "Du bist am Zug";
  setTimeout(reset, 6000);
 }

}


function isKnown(idx) {
 for (i = 0; i < brain.length; i++) {
  if (brain[i].idx == idx) { // schon bekannt
   return true;
  }
 }
 return false;
}


function remember(idx,tile) {
 if (brain.length >= maxBrain) { // vergessen, um neues zu lernen
  forget(-1);
 }
 if (!isKnown(idx)) {
  brain.push({idx:idx,tile:tile});
 }
}


function forget(idx) {
 var i;
 if (idx < 0) {
  if (brain.length > 0) {  // zufallseintrag löschen
   brain.splice(Math.floor(Math.random()*brain.length), 1);
  }
 } else {
  for (i = 0; i < brain.length; i++) {  // eintrag idx löschen
   if (brain[i].idx == idx) {
    brain.splice(i,1);
    return;
   }
  }
 }
}


function recall1(tile) {
 var i = 0;
 var a = [];
 for (i = 0; i < brain.length; i++) {
  if (brain[i].tile == tile) {  // ist tile bekannt? Dann Position liefern
   a.push(brain[i].idx);
   return a;
  }
 }
 return a;
}


function recall2() {
 var i,j = 0;
 var a = [];
 for (i = 0; i < brain.length-1; i++) {
  var tile = brain[i].tile;
  for (j = i+1; j < brain.length; j++) {
   if (brain[i].tile == brain[j].tile) { // zwei gleiche tiles gefunden?
    a.push(brain[i].idx);
    a.push(brain[j].idx);
    return a;
   }
  }
 }
 return a;
}


function setPunkte(){
 Pairsset("Punkte","Punkte: " + (mw.config.get("wgUserName") || "Deine")+": "+punkte1+" "+gegner+": "+punkte2);
}

function Pairsset(wo,was){
 document.getElementById(wo).textContent = was;
}


function createButtonStart(){
 var node = document.getElementById("PairStart");
 if (node) {
   var y = document.createElement("input");
   y.setAttribute("id", "PairStartB");
   y.setAttribute("value", "START");
   y.setAttribute("title", "Starte das Spiel");
   y.setAttribute("type", "button");
   y.setAttribute("onclick", "Pairs.start()");

   node.appendChild(y);
 }
}

function createButtonShowAll(){
 var node = document.getElementById("PairAll");
 if (node) {
   var y = document.createElement("input");
   y.setAttribute("id", "PairAll");
   y.setAttribute("value", "Aufdecken");
   y.setAttribute("title", "Zeige alle Bilder");
   y.setAttribute("type", "button");
   y.setAttribute("onclick", "Pairs.showAll()");

   node.appendChild(y);
 }
}

function idxToId(idx) {
 var c = idx % feldspalten;
 var r = Math.floor(idx / feldspalten);
 return 'Z'+c+r;
}

function setSize() {
 for (var i = 0; i < 64; i++) {
  var y = document.getElementById(idxToId(i));
  if (y) {
   y.setAttribute("height", "64px");
   y.setAttribute("width", "64px");
  }
 }
}

}( window.Pairs = window.Pairs || {}, jQuery ));


if (mw.config.get("wgArticleId") == 812408) {
 jQuery(document).ready(Pairs.init);
}