Bläddra i källkod

Minor - Code styling

Yannick Warnier 6 år sedan
förälder
incheckning
a14136e199
2 ändrade filer med 443 tillägg och 441 borttagningar
  1. 237 231
      plugin/card_game/resources/css/cardgame.css
  2. 206 210
      plugin/card_game/resources/js/cardgame.js

+ 237 - 231
plugin/card_game/resources/css/cardgame.css

@@ -1,232 +1,238 @@
-
-#home-card{
-	overflow:hidden;
-}
-
-.enjoy-cardgame-active{
-	position:relative;
-	left : 50%;
-	top : 90%;
-	width:40px;
-	height:40px;
-	margin-top:-35px;
-	margin-left:10px;
-	background-image: url('card-acces-active.svg');
-	background-color: transparent;
-	background-repeat:  no-repeat;
-	background-position: center fixed;
-	-webkit-background-size: cover;
-	background-size: cover;
-	cursor:pointer;
-	z-index:1000;
-}
-
-.enjoy-cardgame{
-	position:relative;
-	left : 50%;
-	top : 90%;
-	width:40px;
-	height:40px;
-	margin-top:-35px;
-	margin-left:10px;
-	background-image: url('card-acces.svg');
-	background-color: transparent;
-	background-repeat:  no-repeat;
-	background-position: center fixed;
-	-webkit-background-size: cover;
-	background-size: cover;
-	cursor:pointer;
-	z-index:1000;
-}
-
-.card-one{
-	position : absolute;
-	transform: rotate(160deg);
-	background-image: url('card1.jpg');
-	background-position: center center;
-	left : 130%;
-	top : 50px;
-	width : 220px;
-	height : 330px;
-	margin-left:-110px;
-	background-color : #CECEF6;
-	border : solid 2px green;
-	cursor:pointer;
-	border-radius : 20px;
-	-webkit-transition: all 1s ease-in-out;
-	transition: all 1s ease-in-out;
-	opacity: 0.1;
-}
-.card-one-2{
-	transform: rotate(0deg);
-	left : 50%;
-	opacity: 1;
-}
-
-.cardgame-pack{
-	position:relative;
-	width:100%;
-	height:450px;
-	background-image: url('cardpack450.jpg');
-	background-color: transparent;
-	background-position: -500px bottom ;
-	-webkit-transition: all 1s ease-in-out;
-	transition: all 1s ease-in-out;
-}
-.cardgame-open{
-	background-position: 0px 0px ;
-}
-
-.linescissors{
-	position:absolute;
-	left : 60px;
-	top : 135px;
-	width:220px;
-	height:6px;
-	transform: rotate(-26deg);
-	border-top:dotted 3px gray;
-}
-
-.messagePackDeck{
-	position : absolute;
-	text-align:center;
-	right : 20px;
-	top : 30px;
-	width : 200px;
-	padding : 20px;
-	font-size : 22px;
-	border-radius:15px;
-	background-color : #8A0886;
-	color : white;
-}
-
-
-.viewDeckBottom{
-	position : absolute;
-	left : 3px;
-	bottom:5px;
-	width : 73px;
-	height : 60px;
-	background-image: url('galerie.png');
-	background-color: transparent;
-	background-repeat:  no-repeat;
-	background-position: center fixed;
-	-webkit-background-size: cover;
-	background-size: cover;
-	display:none;
-	cursor:pointer;
-}		
-.messagePackDeckBottom{
-	position : absolute;
-	text-align:center;
-	left : 85px;
-	bottom : 10px;
-	right : 20px;
-	padding : 14px;
-	font-size : 16px;
-	border-radius:15px;
-	background-color : #8A0886;
-	color : white;
-}
-
-.scissorsrightinit{
-	transform: rotate(160deg);
-	position:absolute;
-	left : 260px;
-	top : 50px;
-	width:60px;
-	height:60px;
-	background-image: url('scissorsright.gif');
-	background-color: transparent;
-	background-repeat:  no-repeat;
-	background-position: center fixed;
-	-webkit-background-size: cover;
-	background-size: cover;
-	cursor:pointer;
-	z-index:1000;
-	-webkit-transition: all 3s ease-in-out;
-	transition: all 3s ease-in-out;
-}
-
-.scissorsrightinitfinal{
-	left : 10px;
-	top : 170px;
-}
-
-.puzzlecardone{
-	position:absolute;
-	display:none;
-	left : 5%;
-	top : 2%;
-	width:90%;
-	height:80%;
-	background-color: gray;
-	background-repeat:  no-repeat;
-	background-position: center fixed;
-	-webkit-background-size: cover;
-	background-size: cover;
-	border : solid 1px green;
-	overflow:hidden;
-}
-
-
-.puzzleMin{
-	float:left;
-	position:relative;
-	left : 10px;
-	top : 10px;
-	margin-right:10px;
-	margin-bottom:10px;
-	width:150px;
-	height:100px;
-	-webkit-transition: all 1s ease-in-out;
-	transition: all 1s ease-in-out;
-}
-
-.puzzleMinOther{
-	float:left;
-	position:relative;
-	left : 10px;
-	top : 10px;
-	margin-right:10px;
-	margin-bottom:10px;
-	width:150px;
-	height:100px;
-	background-image: url('b-back.jpg');
-	background-repeat:  no-repeat;
-	background-position: center center;
-	-webkit-background-size: cover;
-	background-size: cover;
-	display:none;
-	-webkit-transition: all 1s ease-in-out;
-	transition: all 1s ease-in-out;
-}
-.pimg01{
-	background-image: url('img01.jpg');
-}
-.pimg02{
-	background-image: url('img02.jpg');
-}
-.pimg03{
-	background-image: url('img03.jpg');
-}
-.pimg04{
-	background-image: url('img04.jpg');
-}
-.puzzlepart1{
-	position:relative;
-	border-right : dotted 3px green;
-	border-bottom : dotted 3px green;
-	float:left;
-	left : 0%;
-	top : 0%;
-	width:20%;
-	height:33.34%;
-	background-image: url('b-back.jpg');
-	background-color: transparent;
-	background-position: center center;
-}
-
-.puzzlepartstar{
-	background-image: url('animstar.png');
+/** CSS used to show a 5x3 table of cells hiding a big image */
+#home-card {
+    overflow: hidden;
+}
+
+.enjoy-cardgame-active {
+    position: relative;
+    left: 50%;
+    top: 90%;
+    width: 40px;
+    height: 40px;
+    margin-top: -35px;
+    margin-left: 10px;
+    background-image: url('card-acces-active.svg');
+    background-color: transparent;
+    background-repeat: no-repeat;
+    background-position: center fixed;
+    -webkit-background-size: cover;
+    background-size: cover;
+    cursor: pointer;
+    z-index: 1000;
+}
+
+.enjoy-cardgame {
+    position: relative;
+    left: 50%;
+    top: 90%;
+    width: 40px;
+    height: 40px;
+    margin-top: -35px;
+    margin-left: 10px;
+    background-image: url('card-acces.svg');
+    background-color: transparent;
+    background-repeat: no-repeat;
+    background-position: center fixed;
+    -webkit-background-size: cover;
+    background-size: cover;
+    cursor: pointer;
+    z-index: 1000;
+}
+
+.card-one {
+    position: absolute;
+    transform: rotate(160deg);
+    background-image: url('card1.jpg');
+    background-position: center center;
+    left: 130%;
+    top: 50px;
+    width: 220px;
+    height: 330px;
+    margin-left: -110px;
+    background-color: #CECEF6;
+    border: solid 2px green;
+    cursor: pointer;
+    border-radius: 20px;
+    -webkit-transition: all 1s ease-in-out;
+    transition: all 1s ease-in-out;
+    opacity: 0.1;
+}
+
+.card-one-2 {
+    transform: rotate(0deg);
+    left: 50%;
+    opacity: 1;
+}
+
+.cardgame-pack {
+    position: relative;
+    width: 100%;
+    height: 450px;
+    background-image: url('cardpack450.jpg');
+    background-color: transparent;
+    background-position: -500px bottom;
+    -webkit-transition: all 1s ease-in-out;
+    transition: all 1s ease-in-out;
+}
+
+.cardgame-open {
+    background-position: 0px 0px;
+}
+
+.linescissors {
+    position: absolute;
+    left: 60px;
+    top: 135px;
+    width: 220px;
+    height: 6px;
+    transform: rotate(-26deg);
+    border-top: dotted 3px gray;
+}
+
+.messagePackDeck {
+    position: absolute;
+    text-align: center;
+    right: 20px;
+    top: 30px;
+    width: 200px;
+    padding: 20px;
+    font-size: 22px;
+    border-radius: 15px;
+    background-color: #8A0886;
+    color: white;
+}
+
+.viewDeckBottom {
+    position: absolute;
+    left: 3px;
+    bottom: 5px;
+    width: 73px;
+    height: 60px;
+    background-image: url('galerie.png');
+    background-color: transparent;
+    background-repeat: no-repeat;
+    background-position: center fixed;
+    -webkit-background-size: cover;
+    background-size: cover;
+    display: none;
+    cursor: pointer;
+}
+
+.messagePackDeckBottom {
+    position: absolute;
+    text-align: center;
+    left: 85px;
+    bottom: 10px;
+    right: 20px;
+    padding: 14px;
+    font-size: 16px;
+    border-radius: 15px;
+    background-color: #8A0886;
+    color: white;
+}
+
+.scissorsrightinit {
+    transform: rotate(160deg);
+    position: absolute;
+    left: 260px;
+    top: 50px;
+    width: 60px;
+    height: 60px;
+    background-image: url('scissorsright.gif');
+    background-color: transparent;
+    background-repeat: no-repeat;
+    background-position: center fixed;
+    -webkit-background-size: cover;
+    background-size: cover;
+    cursor: pointer;
+    z-index: 1000;
+    -webkit-transition: all 3s ease-in-out;
+    transition: all 3s ease-in-out;
+}
+
+.scissorsrightinitfinal {
+    left: 10px;
+    top: 170px;
+}
+
+.puzzlecardone {
+    position: absolute;
+    display: none;
+    left: 5%;
+    top: 2%;
+    width: 90%;
+    height: 80%;
+    background-color: gray;
+    background-repeat: no-repeat;
+    background-position: center fixed;
+    -webkit-background-size: cover;
+    background-size: cover;
+    border: solid 1px green;
+    overflow: hidden;
+}
+
+.puzzleMin {
+    float: left;
+    position: relative;
+    left: 10px;
+    top: 10px;
+    margin-right: 10px;
+    margin-bottom: 10px;
+    width: 150px;
+    height: 100px;
+    -webkit-transition: all 1s ease-in-out;
+    transition: all 1s ease-in-out;
+}
+
+.puzzleMinOther {
+    float: left;
+    position: relative;
+    left: 10px;
+    top: 10px;
+    margin-right: 10px;
+    margin-bottom: 10px;
+    width: 150px;
+    height: 100px;
+    background-image: url('b-back.jpg');
+    background-repeat: no-repeat;
+    background-position: center center;
+    -webkit-background-size: cover;
+    background-size: cover;
+    display: none;
+    -webkit-transition: all 1s ease-in-out;
+    transition: all 1s ease-in-out;
+}
+
+.pimg01 {
+    background-image: url('img01.jpg');
+}
+
+.pimg02 {
+    background-image: url('img02.jpg');
+}
+
+.pimg03 {
+    background-image: url('img03.jpg');
+}
+
+.pimg04 {
+    background-image: url('img04.jpg');
+}
+
+.puzzlepart1 {
+    position: relative;
+    border-right: dotted 3px green;
+    border-bottom: dotted 3px green;
+    float: left;
+    left: 0%;
+    top: 0%;
+    width: 20%;
+    height: 33.34%;
+    background-image: url('b-back.jpg');
+    background-color: transparent;
+    background-position: center center;
+}
+
+.puzzlepartstar {
+    background-image: url('animstar.png');
 }

+ 206 - 210
plugin/card_game/resources/js/cardgame.js

@@ -1,12 +1,12 @@
 /* For license terms, see /license.txt */
-$(document).ready(function($){
-	
-	if (!document.getElementById("havedeckcardgame")){
-		$('.sidebar .panel-body .img-circle').parent().parent().after('<div class="enjoy-cardgame" onClick="onlyOpenCardView();" ></div>');
-	} else {
-		$('.sidebar .panel-body .img-circle').parent().parent().after('<div class="enjoy-cardgame-active" onClick="installCardView()" ></div>');
-	}
-});
+$(document).ready(function ($) {
+
+  if (!document.getElementById('havedeckcardgame')) {
+    $('.sidebar .panel-body .img-circle').parent().parent().after('<div class="enjoy-cardgame" onClick="onlyOpenCardView();" ></div>')
+  } else {
+    $('.sidebar .panel-body .img-circle').parent().parent().after('<div class="enjoy-cardgame-active" onClick="installCardView()" ></div>')
+  }
+})
 
 /**
  * This function inserts the <article> element 'home-card' for the card game
@@ -14,220 +14,216 @@ $(document).ready(function($){
  * "my courses" page) only if the element with id 'home-card' does not exist
  * yet.
  */
-function installCardView(){
-	if (!document.getElementById("home-card")) {
-		var mess1 = $("#cardgamemessage").html();
-		var h = '<article id="home-card" style="border:solid 1px gray;" >';
-		h += '<div class="cardgame-pack" >';
-		var panClass = 'pimg0' + $("#pancardgame").html();
-		
-		h += '<div class="puzzlecardone ' + panClass + '" >';
-		h += '<div id="puzzlepart1" class="puzzlepart1" ></div>';
-		h += '<div id="puzzlepart2" class="puzzlepart1" ></div>';
-		h += '<div id="puzzlepart3" class="puzzlepart1" ></div>';
-		h += '<div id="puzzlepart4" class="puzzlepart1" ></div>';
-		h += '<div id="puzzlepart5" class="puzzlepart1" ></div>';
-		
-		h += '<div id="puzzlepart6" class="puzzlepart1" ></div>';
-		h += '<div id="puzzlepart7" class="puzzlepart1" ></div>';
-		h += '<div id="puzzlepart8" class="puzzlepart1" ></div>';
-		h += '<div id="puzzlepart9" class="puzzlepart1" ></div>';
-		h += '<div id="puzzlepart10" class="puzzlepart1" ></div>';
-		
-		h += '<div id="puzzlepart11" class="puzzlepart1" ></div>';
-		h += '<div id="puzzlepart12" class="puzzlepart1" ></div>';
-		h += '<div id="puzzlepart13" class="puzzlepart1" ></div>';
-		h += '<div id="puzzlepart14" class="puzzlepart1" ></div>';
-		h += '<div id="puzzlepart15" class="puzzlepart1" ></div>';
-		
-		h += '</div>';
-		
-		
-		h += '<div id="puzzleMinOther1" class="puzzleMinOther" ></div>';
-		h += '<div id="puzzleMinOther2" class="puzzleMinOther" ></div>';
-		h += '<div id="puzzleMinOther3" class="puzzleMinOther" ></div>';
-		h += '<div id="puzzleMinOther4" class="puzzleMinOther" ></div>';
-		
-		h += '<div class="card-one" onclick="cardOpenCardView();" ></div>';
-		h += '<div class="linescissors" ></div>';
-		
-		h += '<div id="viewDeckBottom" class="viewDeckBottom" onClick="minimizePuzzle()" ></div>';
-		h += '<div id="messagePackDeck" class="messagePackDeck" >'+mess1+'</div>';
-		
-		h += '<div id="scissors" class="scissorsrightinit" onclick="animationOpenCardView();" ></div>';
-		h += '</div>';
-		h += '</article>';
-		
-		$('.page-content').before(h);
-		
-	} else {
-		$('#home-card').fadeToggle();
-	}
-	
+function installCardView () {
+  if (!document.getElementById('home-card')) {
+    var mess1 = $('#cardgamemessage').html()
+    var h = '<article id="home-card" style="border:solid 1px gray;" >'
+    h += '<div class="cardgame-pack" >'
+    var panClass = 'pimg0' + $('#pancardgame').html()
+
+    // Setup the 3x5 table of images
+    h += '<div class="puzzlecardone ' + panClass + '" >'
+    h += '<div id="puzzlepart1"  class="puzzlepart1" ></div>'
+    h += '<div id="puzzlepart2"  class="puzzlepart1" ></div>'
+    h += '<div id="puzzlepart3"  class="puzzlepart1" ></div>'
+    h += '<div id="puzzlepart4"  class="puzzlepart1" ></div>'
+    h += '<div id="puzzlepart5"  class="puzzlepart1" ></div>'
+    h += '<div id="puzzlepart6"  class="puzzlepart1" ></div>'
+    h += '<div id="puzzlepart7"  class="puzzlepart1" ></div>'
+    h += '<div id="puzzlepart8"  class="puzzlepart1" ></div>'
+    h += '<div id="puzzlepart9"  class="puzzlepart1" ></div>'
+    h += '<div id="puzzlepart10" class="puzzlepart1" ></div>'
+    h += '<div id="puzzlepart11" class="puzzlepart1" ></div>'
+    h += '<div id="puzzlepart12" class="puzzlepart1" ></div>'
+    h += '<div id="puzzlepart13" class="puzzlepart1" ></div>'
+    h += '<div id="puzzlepart14" class="puzzlepart1" ></div>'
+    h += '<div id="puzzlepart15" class="puzzlepart1" ></div>'
+    h += '</div>'
+
+    h += '<div id="puzzleMinOther1" class="puzzleMinOther" ></div>'
+    h += '<div id="puzzleMinOther2" class="puzzleMinOther" ></div>'
+    h += '<div id="puzzleMinOther3" class="puzzleMinOther" ></div>'
+    h += '<div id="puzzleMinOther4" class="puzzleMinOther" ></div>'
+
+    h += '<div class="card-one" onclick="cardOpenCardView();" ></div>'
+    h += '<div class="linescissors" ></div>'
+
+    h += '<div id="viewDeckBottom" class="viewDeckBottom" onClick="minimizePuzzle()" ></div>'
+    h += '<div id="messagePackDeck" class="messagePackDeck" >' + mess1 + '</div>'
+
+    h += '<div id="scissors" class="scissorsrightinit" onclick="animationOpenCardView();" ></div>'
+    h += '</div>'
+    h += '</article>'
+
+    $('.page-content').before(h)
+
+  } else {
+    $('#home-card').fadeToggle()
+  }
+
 }
 
-function animationOpenCardView(){
-	
-	$('#scissors').addClass('scissorsrightinitfinal');
-
-	setTimeout(function(){
-		$('#scissors').fadeOut();
-		$('.linescissors').fadeOut();
-		$('#messagePackDeck').css('display','none');
-		$('#messagePackDeck').removeClass('messagePackDeck');
-	
-	}, 2600);
-	
-	setTimeout(function(){
-		$('.cardgame-pack').addClass('cardgame-open');
-		$('.card-one').addClass('card-one-2');
-	}, 3000);
-	
+function animationOpenCardView () {
+
+  $('#scissors').addClass('scissorsrightinitfinal')
+
+  setTimeout(function () {
+    $('#scissors').fadeOut()
+    $('.linescissors').fadeOut()
+    $('#messagePackDeck').css('display', 'none')
+    $('#messagePackDeck').removeClass('messagePackDeck')
+
+  }, 2600)
+
+  setTimeout(function () {
+    $('.cardgame-pack').addClass('cardgame-open')
+    $('.card-one').addClass('card-one-2')
+  }, 3000)
+
 }
 
-function cardOpenCardView(){
-	
-	$('.card-one').removeClass('card-one-2');
-	
-	setTimeout(function(){
-		$('.puzzlecardone').fadeIn();
-		randomOpenCardView();
-	},700);
-	
+function cardOpenCardView () {
+
+  $('.card-one').removeClass('card-one-2')
+
+  setTimeout(function () {
+    $('.puzzlecardone').fadeIn()
+    randomOpenCardView()
+  }, 700)
+
 }
 
-function randomOpenCardView(){
-	
-	var part = Math.floor(Math.random() * (15 - 1 + 1)) + 1;
-	
-	$('.puzzlecardone').css('display','block');
-	$('#scissors').fadeOut();
-	$('.linescissors').fadeOut();
-	$('#messagePackDeck').css('display','none');
-	$('#messagePackDeck').removeClass('messagePackDeck');
-	
-	var memocardgame = $("#memocardgame").html();
-	var parts = memocardgame;
-	var arrayOfStrings = parts.split(';');
-	
-	var findDouble = false;
-	for (var i=0; i < arrayOfStrings.length; i++){
-		var idpart = arrayOfStrings[i];
-		idpart = idpart.replace('!!','');
-		idpart = idpart.replace('!','');
-		idpart = idpart.replace('!','');
-		idpart = idpart.replace(';','');
-		$('#puzzlepart' + idpart).css('opacity',0);
-		
-		if(part==idpart){
-			findDouble = true;
-		}
-		
-	}
-	if(findDouble){
-		part = Math.floor(Math.random() * (15 - 1 + 1)) + 1;
-	}
-	if(memocardgame.indexOf("!"+part+';')!=-1){
-		part = Math.floor(Math.random() * (15 - 1 + 1)) + 1;
-	}
-	if(memocardgame.indexOf("!"+part+';')!=-1){
-		part = Math.floor(Math.random() * (15 - 1 + 1)) + 1;
-	}
-	
-	if(memocardgame.indexOf("!"+part+';')!=-1){
-		var mess2 = $("#cardgameloose").html();
-		$("#messagePackDeck").html(mess2);
-		$('#messagePackDeck').css('display','block');
-		$('#messagePackDeck').css('backgroundColor','red');
-		$('#messagePackDeck').addClass('messagePackDeckBottom');
-	}else{
-		
-		var lk = $("#linkcardgame").html();
-		
-		$.ajax({
-		  url: lk + "?part=" + part
-		}).done(function() {
-			
-		});
-		
-		setTimeout(function(){
-			$('#puzzlepart' + part).addClass('puzzlepartstar');
-		},600);
-		
-		setTimeout(function(){
-
-			$('#puzzlepart' + part).css('opacity',0);
-		},1200);
-		
-		setTimeout(function(){
-			var mess2 = $("#cardgameengage").html();
-			$("#messagePackDeck").html(mess2);
-			$('#messagePackDeck').css('display','block');
-			$('#messagePackDeck').addClass('messagePackDeckBottom');
-			$('#viewDeckBottom').css('display','block');
-		},1500);
-			
-		
-	}
+function randomOpenCardView () {
+
+  var part = Math.floor(Math.random() * (15 - 1 + 1)) + 1
+
+  $('.puzzlecardone').css('display', 'block')
+  $('#scissors').fadeOut()
+  $('.linescissors').fadeOut()
+  $('#messagePackDeck').css('display', 'none')
+  $('#messagePackDeck').removeClass('messagePackDeck')
+
+  var memocardgame = $('#memocardgame').html()
+  var parts = memocardgame
+  var arrayOfStrings = parts.split(';')
+
+  var findDouble = false
+  for (var i = 0; i < arrayOfStrings.length; i++) {
+    var idpart = arrayOfStrings[i]
+    idpart = idpart.replace('!!', '')
+    idpart = idpart.replace('!', '')
+    idpart = idpart.replace('!', '')
+    idpart = idpart.replace(';', '')
+    $('#puzzlepart' + idpart).css('opacity', 0)
+
+    if (part == idpart) {
+      findDouble = true
+    }
+
+  }
+  if (findDouble) {
+    part = Math.floor(Math.random() * (15 - 1 + 1)) + 1
+  }
+  if (memocardgame.indexOf('!' + part + ';') != -1) {
+    part = Math.floor(Math.random() * (15 - 1 + 1)) + 1
+  }
+  if (memocardgame.indexOf('!' + part + ';') != -1) {
+    part = Math.floor(Math.random() * (15 - 1 + 1)) + 1
+  }
+
+  if (memocardgame.indexOf('!' + part + ';') != -1) {
+    var mess2 = $('#cardgameloose').html()
+    $('#messagePackDeck').html(mess2)
+    $('#messagePackDeck').css('display', 'block')
+    $('#messagePackDeck').css('backgroundColor', 'red')
+    $('#messagePackDeck').addClass('messagePackDeckBottom')
+  } else {
+
+    var lk = $('#linkcardgame').html()
+
+    $.ajax({
+      url: lk + '?part=' + part
+    }).done(function () {
+
+    })
+
+    setTimeout(function () {
+      $('#puzzlepart' + part).addClass('puzzlepartstar')
+    }, 600)
+
+    setTimeout(function () {
+
+      $('#puzzlepart' + part).css('opacity', 0)
+    }, 1200)
+
+    setTimeout(function () {
+      var mess2 = $('#cardgameengage').html()
+      $('#messagePackDeck').html(mess2)
+      $('#messagePackDeck').css('display', 'block')
+      $('#messagePackDeck').addClass('messagePackDeckBottom')
+      $('#viewDeckBottom').css('display', 'block')
+    }, 1500)
+
+  }
 }
 
 /**
  * This function changes the visibility of blocks inside the puzzle area
  */
-function onlyOpenCardView(){
-	
-	installCardView();
-	
-	var memocardgame = $("#memocardgame").html();
-	
-	$('.puzzlecardone').css('display','block');
-	$('#scissors').css('display','none');
-	$('.linescissors').css('display','none');
-	$('#messagePackDeck').css('display','none');
-	$('#messagePackDeck').removeClass('messagePackDeck');
-	
-	var lk = $("#linkcardgame").html();
-	var parts = memocardgame;
-	// alert(parts);
-	var arrayOfStrings = parts.split(';');
-	
-	for (var i=0; i < arrayOfStrings.length; i++){
-		var idpart = arrayOfStrings[i];
-		idpart = idpart.replace('!!','');
-		idpart = idpart.replace('!','');
-		idpart = idpart.replace('!','');
-		idpart = idpart.replace(';','');
-		$('#puzzlepart' + idpart).css('opacity',0);
-	}
-    
-	var mess2 = $("#cardgameengage").html();
-	$("#messagePackDeck").html(mess2);
-	$('#messagePackDeck').css('display','block');
-	$('#messagePackDeck').addClass('messagePackDeckBottom');
-	$('#viewDeckBottom').css('display','block');
+function onlyOpenCardView () {
+
+  installCardView()
+
+  var memocardgame = $('#memocardgame').html()
+
+  $('.puzzlecardone').css('display', 'block')
+  $('#scissors').css('display', 'none')
+  $('.linescissors').css('display', 'none')
+  $('#messagePackDeck').css('display', 'none')
+  $('#messagePackDeck').removeClass('messagePackDeck')
+
+  var lk = $('#linkcardgame').html()
+  var parts = memocardgame
+  // alert(parts);
+  var arrayOfStrings = parts.split(';')
+
+  for (var i = 0; i < arrayOfStrings.length; i++) {
+    var idpart = arrayOfStrings[i]
+    idpart = idpart.replace('!!', '')
+    idpart = idpart.replace('!', '')
+    idpart = idpart.replace('!', '')
+    idpart = idpart.replace(';', '')
+    $('#puzzlepart' + idpart).css('opacity', 0)
+  }
+
+  var mess2 = $('#cardgameengage').html()
+  $('#messagePackDeck').html(mess2)
+  $('#messagePackDeck').css('display', 'block')
+  $('#messagePackDeck').addClass('messagePackDeckBottom')
+  $('#viewDeckBottom').css('display', 'block')
 }
 
-function minimizePuzzle(){
-	
-	$('.puzzlecardone').addClass('puzzleMin');
-	setTimeout(function() {
-		
-		$('.puzzleMinOther').css('display','block');
-		
-		var panNumber= parseInt($("#pancardgame").html());
-		
-		if(panNumber>1){
-			$('#puzzleMinOther1').addClass('pimg01');
-		}
-		if(panNumber>2){
-			$('#puzzleMinOther2').addClass('pimg02');
-		}
-		if(panNumber>3){
-			$('#puzzleMinOther3').addClass('pimg03');
-		}
-		if(panNumber>4){
-			$('#puzzleMinOther4').addClass('pimg04');
-		}
-	}, 1000);
+function minimizePuzzle () {
+
+  $('.puzzlecardone').addClass('puzzleMin')
+  setTimeout(function () {
+
+    $('.puzzleMinOther').css('display', 'block')
+
+    var panNumber = parseInt($('#pancardgame').html())
+
+    if (panNumber > 1) {
+      $('#puzzleMinOther1').addClass('pimg01')
+    }
+    if (panNumber > 2) {
+      $('#puzzleMinOther2').addClass('pimg02')
+    }
+    if (panNumber > 3) {
+      $('#puzzleMinOther3').addClass('pimg03')
+    }
+    if (panNumber > 4) {
+      $('#puzzleMinOther4').addClass('pimg04')
+    }
+  }, 1000)
 }