svg.js 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. var transition = {pid: '', port: '8080' };
  2. // BERT Protocol
  3. function handle_web_socket(body) {
  4. console.log(dec(body).value[0][2].value);
  5. switch (dec(body).value[0][2].value) {
  6. case 'okey_game_started':
  7. var a = dec(body).value[0][3][0].value[0][1];
  8. console.log("Started: " + a.length);
  9. for (var i=1;i<=a.length;i++) {
  10. var c = a[i-1].value[0][1];
  11. var v = a[i-1].value[0][2];
  12. console.log("Card " + c + " " + v);
  13. place_card(i,rand(1,2),c,v);
  14. }
  15. break;
  16. case 'okey_tile_discarded':
  17. console.log(String(dec(body)));
  18. var player = dec(body).value[0][3][0].value[0][1];
  19. var tile = dec(body).value[0][3][1].value[0][1];
  20. if (player.value == document.user) {
  21. console.log("Discard: " + player.value);
  22. var p = findCardOnTable(tile.value[0][1],tile.value[0][2]);
  23. empty_card(p.x,p.y);
  24. }
  25. break;
  26. case 'okey_tile_taken':
  27. console.log(String(dec(body)));
  28. var player = dec(body).value[0][3][0].value[0][1];
  29. var taken = dec(body).value[0][3][2].value[0][1];
  30. if (taken.value != 'null' && player.value == document.user) {
  31. console.log("Taken: " + player.value);
  32. var c = taken.value[0][1];
  33. var v = taken.value[0][2];
  34. var pos = findPlace();
  35. console.log(pos);
  36. place_card(pos.x,pos.y,c,v);
  37. }
  38. break;
  39. default: console.log(String(dec(body)));
  40. }
  41. }
  42. // SVG DOM and Template Engine
  43. function template_engine(html, data) {
  44. var re = /{([^}]+)?}/g, code = 'var r=[];', cursor = 0;
  45. var add = function(line,js) {
  46. js? (code += 'r.push(' + line + ');') :
  47. (code += line != '' ? 'r.push("' + line.replace(/"/g, '\\"') + '");' : '');
  48. return add; }
  49. while(match = re.exec(html)) {
  50. add(html.slice(cursor, match.index))(match[1],true);
  51. cursor = match.index + match[0].length; }
  52. add(html.substr(cursor, html.length - cursor));
  53. code += 'return r.join("");';
  54. return new Function(code.replace(/[\r\t\n]/g, '')).apply(data); }
  55. function reload(file, name) { var slot = document.getElementById(name);
  56. slot.parentNode.replaceChild(svg(localStorage.getItem(file)),slot);}
  57. function reload_cont(cont,name,element) { if (null != cont) (cont)(); else reload(name,element); }
  58. function loadFile(name,cont,element) {
  59. if (localStorage.getItem(name) == null) {
  60. var client = new XMLHttpRequest();
  61. client.open('GET', name, true);
  62. client.onload = function() {
  63. localStorage.setItem(name,client.responseText);
  64. reload_cont(cont,name,element); }
  65. client.send(); }
  66. else reload_cont(cont,name,element); }
  67. function svg(html) { return new DOMParser().parseFromString(html, "text/xml").firstChild; }
  68. // The Card
  69. var color = ['#CE290F','#3B5998','#48AF5E','#FFEC00'];
  70. var slotName = slotNameDef;
  71. function slotNameDef(x,y) { return "Slot-"+y+","+x; }
  72. function card(line,pos,col,v) {
  73. return template_engine(
  74. localStorage.getItem("templates/Card.svg"),
  75. { name: slotName(pos,line),
  76. suit: color[col-1],
  77. value: v,
  78. y: (line-1)*69,
  79. x: (pos-1)*42 }); }
  80. // Game Scene
  81. function place_card(x,y,c,v) {
  82. var slot = document.getElementById(slotName(x,y));
  83. slot.parentNode.replaceChild(svg(card(y,x,c,v)),slot); }
  84. function empty_card(x,y) { var slot = document.getElementById(slotName(x,y));
  85. var html = '<g xmlns="http://www.w3.org/2000/svg" id="'+slotName(x,y)+'"/>';
  86. slot.parentNode.replaceChild(svg(html),slot); }
  87. function rand(lo,hi) { return Math.floor((Math.random()*hi)+lo); }
  88. function loadScene() {
  89. reload("Kakaranet-7-Refined.svg", "Refined");
  90. for (var i=1;i<15;i++) { empty_card(i,2); empty_card(i,1); }
  91. drawSampleCards(); }
  92. function findPlace() {
  93. for (var y=1;y<3;y++) for (var x=1;x<15;x++) {
  94. var e = document.getElementById(slotName(x,y));
  95. if (e.childElementCount == 0) {
  96. var pos = e.attributes['id'].value.split("-")[1].split(",");
  97. console.log("Free");
  98. console.log(pos[0]);
  99. console.log(pos[1]);
  100. return { y: pos[0], x: pos[1] }; } } }
  101. function findCardOnTable(c,v) {
  102. console.log("Find Card " + c + " " + v);
  103. for (var y=1;y<3;y++) for (var x=1;x<15;x++) {
  104. var e = document.getElementById(slotName(x,y));
  105. if (e.childElementCount > 0) {
  106. var value = e.lastChild.textContent;
  107. var col = color.indexOf(e.lastChild.attributes['fill'].value) + 1;
  108. console.log(col + " " + value);
  109. if (c == col && v == value) return { 'x': x, 'y': y }; } }
  110. console.log("Card Not Found");
  111. return ""; }
  112. // Monadic Chain here
  113. loadFile('templates/Card.svg', function() {
  114. loadFile('Kakaranet-7-Refined.svg', loadScene);
  115. });
  116. // SVG Samples for svg.htm
  117. loadFile('templates/Mustafa-Persona.svg', null, "Mustafa-Persona-Sample");
  118. loadFile('templates/Mustafa-Selection.svg', null, "Mustafa-Selection-Sample");
  119. document.getElementById("MustafaSelection").addEventListener('click', function() {
  120. var style = document.getElementById("Mustafa-Selection-Sample").style;
  121. if (style.display == 'none') style.display = 'block';
  122. else style.display = 'none'; });
  123. function slotName1(x,y) { return "1Slot-"+y+","+x; }
  124. function drawSampleCards() {
  125. slotName = slotName1;
  126. for (var i=1;i<15;i++) { place_card(i,rand(1,2),rand(1,4),rand(1,13)); }
  127. slotName = slotNameDef; }