cardgame.js 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238
  1. /* For license terms, see /license.txt */
  2. /**
  3. * Whenever the cardgame.js file is included into the loaded JavaScript,
  4. * search for the user picture in the left menu and add a div
  5. * "enjoy-cardgame" to it to show a little drawing cards icon to enable
  6. * this plugin
  7. */
  8. $(document).ready(function ($) {
  9. if (!document.getElementById('havedeckcardgame')) {
  10. $('.sidebar .panel-body .img-circle').parent().parent().after('<div id="plugin-cardgame-icon" class="enjoy-cardgame" onClick="onlyOpenCardView();" ></div>')
  11. } else {
  12. $('.sidebar .panel-body .img-circle').parent().parent().after('<div id="plugin-cardgame-icon" class="enjoy-cardgame-active" onClick="installCardView()" ></div>')
  13. }
  14. })
  15. /**
  16. * This function inserts the <article> element 'home-card' for the card game
  17. * before the .page-content element on the page (the right side of the
  18. * "my courses" page) only if the element with id 'home-card' does not exist
  19. * yet.
  20. */
  21. function installCardView () {
  22. if (!document.getElementById('home-card')) {
  23. var mess1 = $('#cardgamemessage').html()
  24. var h = '<article id="home-card" style="border:solid 1px gray;" >'
  25. h += '<div class="cardgame-pack" >'
  26. var panClass = 'pimg0' + $('#pancardgame').html()
  27. // Setup the 3x5 table of images
  28. h += '<div class="puzzlecardone ' + panClass + '" >'
  29. h += '<div id="puzzlepart1" class="puzzlepart1" ></div>'
  30. h += '<div id="puzzlepart2" class="puzzlepart1" ></div>'
  31. h += '<div id="puzzlepart3" class="puzzlepart1" ></div>'
  32. h += '<div id="puzzlepart4" class="puzzlepart1" ></div>'
  33. h += '<div id="puzzlepart5" class="puzzlepart1" ></div>'
  34. h += '<div id="puzzlepart6" class="puzzlepart1" ></div>'
  35. h += '<div id="puzzlepart7" class="puzzlepart1" ></div>'
  36. h += '<div id="puzzlepart8" class="puzzlepart1" ></div>'
  37. h += '<div id="puzzlepart9" class="puzzlepart1" ></div>'
  38. h += '<div id="puzzlepart10" class="puzzlepart1" ></div>'
  39. h += '<div id="puzzlepart11" class="puzzlepart1" ></div>'
  40. h += '<div id="puzzlepart12" class="puzzlepart1" ></div>'
  41. h += '<div id="puzzlepart13" class="puzzlepart1" ></div>'
  42. h += '<div id="puzzlepart14" class="puzzlepart1" ></div>'
  43. h += '<div id="puzzlepart15" class="puzzlepart1" ></div>'
  44. h += '</div>'
  45. h += '<div id="puzzleMinOther1" class="puzzleMinOther" ></div>'
  46. h += '<div id="puzzleMinOther2" class="puzzleMinOther" ></div>'
  47. h += '<div id="puzzleMinOther3" class="puzzleMinOther" ></div>'
  48. h += '<div id="puzzleMinOther4" class="puzzleMinOther" ></div>'
  49. h += '<div class="card-one" onclick="cardOpenCardView();" ></div>'
  50. h += '<div class="linescissors" ></div>'
  51. h += '<div id="viewDeckBottom" class="viewDeckBottom" onClick="minimizePuzzle()" ></div>'
  52. h += '<div id="messagePackDeck" class="messagePackDeck" >' + mess1 + '</div>'
  53. h += '<div id="scissors" class="scissorsrightinit" onclick="animationOpenCardView();" ></div>'
  54. h += '</div>'
  55. h += '</article>'
  56. $('.page-content').before(h)
  57. } else {
  58. $('#home-card').fadeToggle()
  59. }
  60. }
  61. /**
  62. * Animate the scissors
  63. */
  64. function animationOpenCardView () {
  65. $('#scissors').addClass('scissorsrightinitfinal')
  66. setTimeout(function () {
  67. $('#scissors').fadeOut()
  68. $('.linescissors').fadeOut()
  69. $('#messagePackDeck').css('display', 'none')
  70. $('#messagePackDeck').removeClass('messagePackDeck')
  71. }, 2600)
  72. setTimeout(function () {
  73. $('.cardgame-pack').addClass('cardgame-open')
  74. $('.card-one').addClass('card-one-2')
  75. }, 3000)
  76. }
  77. function cardOpenCardView () {
  78. $('.card-one').removeClass('card-one-2')
  79. setTimeout(function () {
  80. $('.puzzlecardone').fadeIn()
  81. randomOpenCardView()
  82. }, 700)
  83. }
  84. function randomOpenCardView () {
  85. var part = Math.floor(Math.random() * (15 - 1 + 1)) + 1
  86. $('.puzzlecardone').css('display', 'block')
  87. $('#scissors').fadeOut()
  88. $('.linescissors').fadeOut()
  89. $('#messagePackDeck').css('display', 'none')
  90. $('#messagePackDeck').removeClass('messagePackDeck')
  91. var memocardgame = $('#memocardgame').html()
  92. var parts = memocardgame
  93. var arrayOfStrings = parts.split(';')
  94. var findDouble = false
  95. for (var i = 0; i < arrayOfStrings.length; i++) {
  96. var idpart = arrayOfStrings[i]
  97. idpart = idpart.replace('!!', '')
  98. idpart = idpart.replace('!', '')
  99. idpart = idpart.replace('!', '')
  100. idpart = idpart.replace(';', '')
  101. $('#puzzlepart' + idpart).css('opacity', 0)
  102. if (part == idpart) {
  103. findDouble = true
  104. }
  105. }
  106. if (findDouble) {
  107. part = Math.floor(Math.random() * (15 - 1 + 1)) + 1
  108. }
  109. if (memocardgame.indexOf('!' + part + ';') != -1) {
  110. part = Math.floor(Math.random() * (15 - 1 + 1)) + 1
  111. }
  112. if (memocardgame.indexOf('!' + part + ';') != -1) {
  113. part = Math.floor(Math.random() * (15 - 1 + 1)) + 1
  114. }
  115. if (memocardgame.indexOf('!' + part + ';') != -1) {
  116. var mess2 = $('#cardgameloose').html()
  117. $('#messagePackDeck').html(mess2)
  118. $('#messagePackDeck').css('display', 'block')
  119. $('#messagePackDeck').css('backgroundColor', 'red')
  120. $('#messagePackDeck').addClass('messagePackDeckBottom')
  121. var lk = $('#linkcardgame').html()
  122. $.ajax({ url: lk + '?loose=1' }).done(function () { })
  123. } else {
  124. var lk = $('#linkcardgame').html()
  125. $.ajax({ url: lk + '?part=' + part }).done(function () { })
  126. setTimeout(function () {
  127. $('#puzzlepart' + part).addClass('puzzlepartstar')
  128. }, 600)
  129. setTimeout(function () {
  130. $('#puzzlepart' + part).css('opacity', 0)
  131. }, 1200)
  132. setTimeout(function () {
  133. var mess2 = $('#cardgameengage').html()
  134. $('#messagePackDeck').html(mess2)
  135. $('#messagePackDeck').css('display', 'block')
  136. $('#messagePackDeck').addClass('messagePackDeckBottom')
  137. $('#viewDeckBottom').css('display', 'block')
  138. }, 1500)
  139. }
  140. $('#plugin-cardgame-icon').removeClass('enjoy-cardgame-active')
  141. $('#plugin-cardgame-icon').addClass('enjoy-cardgame')
  142. }
  143. /**
  144. * This function adds the cardgame area block (in invisible state), then
  145. * changes the visibility of blocks inside the puzzle area to show them
  146. */
  147. function onlyOpenCardView () {
  148. installCardView();
  149. var memocardgame = $('#memocardgame').html()
  150. $('.puzzlecardone').css('display', 'block')
  151. $('#scissors').css('display', 'none')
  152. $('.linescissors').css('display', 'none')
  153. $('#messagePackDeck').css('display', 'none')
  154. $('#messagePackDeck').removeClass('messagePackDeck')
  155. var lk = $('#linkcardgame').html()
  156. var parts = memocardgame
  157. // alert(parts);
  158. var arrayOfStrings = parts.split(';')
  159. for (var i = 0; i < arrayOfStrings.length; i++) {
  160. var idpart = arrayOfStrings[i]
  161. idpart = idpart.replace('!!', '')
  162. idpart = idpart.replace('!', '')
  163. idpart = idpart.replace('!', '')
  164. idpart = idpart.replace(';', '')
  165. $('#puzzlepart' + idpart).css('opacity', 0)
  166. }
  167. var mess2 = $('#cardgameengage').html()
  168. $('#messagePackDeck').html(mess2)
  169. $('#messagePackDeck').css('display', 'block')
  170. $('#messagePackDeck').addClass('messagePackDeckBottom')
  171. $('#viewDeckBottom').css('display', 'block')
  172. }
  173. function minimizePuzzle () {
  174. $('.puzzlecardone').addClass('puzzleMin')
  175. setTimeout(function () {
  176. $('.puzzleMinOther').css('display', 'block')
  177. var panNumber = parseInt($('#pancardgame').html())
  178. if (panNumber > 1) {
  179. $('#puzzleMinOther1').addClass('pimg01')
  180. }
  181. if (panNumber > 2) {
  182. $('#puzzleMinOther2').addClass('pimg02')
  183. }
  184. if (panNumber > 3) {
  185. $('#puzzleMinOther3').addClass('pimg03')
  186. }
  187. if (panNumber > 4) {
  188. $('#puzzleMinOther4').addClass('pimg04')
  189. }
  190. }, 1000)
  191. }