diff --git a/README.md b/README.md index c185530..a8bd67c 100644 --- a/README.md +++ b/README.md @@ -5,6 +5,9 @@ Just click the box to filp the card, if two filped card are the same in look, it You should take as fewer as possiable steps to filp all cards, And than you will get a rank about the level of your menory. +Adapted for my child who is eager to play memory and touch a computer/tablet/phone, to use characters/words as icons. +Click on the gear to modify the characters used as card icons. + # How to play Click [this link](https://poblue.github.io/memory-game/) diff --git a/css/style.css b/css/style.css index cfa3256..b978d62 100644 --- a/css/style.css +++ b/css/style.css @@ -23,6 +23,10 @@ body { overflow: hidden; font-family: 'Coda', cursive; } +.total-panel { + width=100% +} + h1 { font-family: 'Open Sans', sans-serif; @@ -31,7 +35,7 @@ h1 { } .deck { - width: 690px; + width: 60%; margin: 0 auto; background: -webkit-linear-gradient(290deg, #02CCBA 0%, #AA7ECD 100%); background: linear-gradient(160deg, #02CCBA 0%, #AA7ECD 100%); @@ -40,11 +44,11 @@ h1 { box-shadow: 12px 15px 20px 0px rgba(46, 61, 73, 0.5); } .deck .card { - height: 150px; - width: 150px; + height: 100px; + width: 21%; background: #2e3d49; display: inline-block; - margin: 0 30px 30px 0; + margin: 2%; line-height: 280px; font-size: 0; color: #ffffff; @@ -61,9 +65,14 @@ h1 { transition: transform .3s ease; transition: transform .3s ease, -webkit-transform .3s ease; font-family: FontAwesome; - line-height: 150px; + line-height: 98px; +} + +.fa.char { + font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive; } + @media only screen and (max-width: 800px){ .deck .card{ width: 75px; @@ -89,15 +98,6 @@ h1 { } } -.deck .card:nth-child(4n) { - margin: 0 0 15px 0; -} -.deck .card:nth-child(n+13) { - margin: 0 30px 0 0; -} -.deck .card:nth-child(n+13):nth-child(4n) { - margin: 0; -} .deck .card.open { -webkit-transform: rotateY(0); transform: rotateY(0); @@ -105,23 +105,29 @@ h1 { cursor: default; } .deck .card.show { - font-size: 33px; + font-size: 45px; } .deck .card.match { -webkit-transform: rotateY(0); transform: rotateY(0); cursor: default; background: #02ccba; - font-size: 33px; + font-size: 45px; } .deck .card.notmatch { background: #f95c3c; } #score-panel { + width: 60%; text-align: left; - width: 345px; margin-bottom: 10px; + font-size: 23px; +} +input { + font-size: 23px; + height:30px; + width: 16em; } #score-panel .stars { margin: 0; @@ -133,18 +139,11 @@ h1 { list-style: none; display: inline-block; } -#score-panel .restart { +#score-panel .restart, .reconfigure { float: right; cursor: pointer; -} - -*::-moz-selection { - background: transparent; -} - -*::selection { - background: transparent; -} + margin-left: 1em; + } .swal2-overlay { background-color: white; @@ -153,3 +152,20 @@ h1 { .font-color { color: white; } +.timers {float: right;} +.timers .timer {display: inline-block;} +.timers .timer h3 {margin: 0px;} +.timers .restart {display: inline-block;} +.timers .reconfigure {display: inline-block;} +.containerdiv {max-width: 690px; width: 100%; margin: 0 auto;} +.leftdiv {float: left;} +.clear {clear: both;} +.font-color { + color: white; +} +.closed { + display: none; +} +.inline { + display: inline-block; +} diff --git a/index.html b/index.html index 1b23a4b..b1483e2 100644 --- a/index.html +++ b/index.html @@ -15,16 +15,39 @@

Matching Game

+
0 Moves - | Time: 0 s -
- -
+
+
+
+

Time: 0:00

+
+
+ +
+
+ +
+ + + + +
+
+
+
@@ -32,4 +55,4 @@

Matching Game

- \ No newline at end of file + diff --git a/js/index.js b/js/index.js index 18fa848..d80f72a 100644 --- a/js/index.js +++ b/js/index.js @@ -1,22 +1,26 @@ -let symbols = ['bicycle', 'bicycle', 'leaf', 'leaf', 'cube', 'cube', 'anchor', 'anchor', 'paper-plane-o', 'paper-plane-o', 'bolt', 'bolt', 'bomb', 'bomb', 'diamond', 'diamond'], - opened = [], - match = 0, - moves = 0, - $deck = $('.deck'), - $scorePanel = $('#score-panel'), - $moveNum = $('.moves'), - $ratingStars = $('.fa-star'), - $restart = $('.restart'), - delay = 400, - currentTimer, - second = 0, - $timer = $('.timer'), - totalCard = symbols.length / 2, - rank3stars = 10, - rank2stars = 16, - rank1stars = 20; +let fa_icons= [ '-bicycle', '-leaf', '-cube', '-anchor', '-paper-plane-o', '-bolt', '-bomb', '-diamond', 'diamond'], + chars = [ 'a', 'b', 'd', 'e', 's', 'o', 'm', 'n'], + symbols = chars, + opened = [], + match = 0, + moves = 0, + $deck = $('.deck'), + $scorePanel = $('#score-panel'), + $moveNum = $('.moves'), + $ratingStars = $('.fa-star'), + $restart = $('.restart'), + $reconfigure = $('.reconfigure'), + delay = 400, + currentTimer, + second = 0, + $timer = $('.timer'), + totalCard = symbols.length, + rank3stars = 10, + rank2stars = 16, + rank1stars = 20; function shuffle(array) { + array = array.concat(array); var currentIndex = array.length, temporaryValue, randomIndex; while (0 !== currentIndex) { @@ -32,21 +36,25 @@ function shuffle(array) { // Initial Game function initGame() { - var cards = shuffle(symbols); - $deck.empty(); - match = 0; - moves = 0; - $moveNum.text('0'); - $ratingStars.removeClass('fa-star-o').addClass('fa-star'); - for (var i = 0; i < cards.length; i++) { - $deck.append($('
    • ')) + var cards = shuffle(symbols); + $deck.empty(); + match = 0; + moves = 0; + $moveNum.text('0'); + $ratingStars.removeClass('fa-star-o').addClass('fa-star'); + for (var i = 0; i < cards.length; i++) { + if (cards[i].startsWith("-")) { + $deck.append($('
    • ')) + } else { + $deck.append($('
  • ' + cards[i] + '
    • ')) } - addCardListener(); + } + addCardListener(); - resetTimer(currentTimer); - second = 0; - $timer.text(`${second}`) - initTime(); + resetTimer(currentTimer); + second = 0; + $timer.text(second) + initTime(); }; // Set Rating and final Score @@ -84,6 +92,7 @@ function endGame(moves, score) { // Restart Game $restart.bind('click', function () { + console.log("restart clicked"); swal({ allowEscapeKey: false, allowOutsideClick: false, @@ -100,11 +109,25 @@ $restart.bind('click', function () { } }) }); +$reconfigure.bind('click', ()=> { + console.log("cog clicked"); + $('.input.closed').css('display','inline-block'); + $('#values').val($.unique(symbols).join(" ")) +}); +$('.set-reconfigure').on('click', function(e) { + symbols = $('#values').val().split(/\s+/) + console.log('check clicked') + $('.input.closed').css('display','none'); + initGame(); + return false; +}); + var addCardListener = function () { // Card flip - $deck.find('.card').bind('click', function () { + $deck.find('.card').bind('click', function () { + console.log("card clicked") var $this = $(this) if ($this.hasClass('show') || $this.hasClass('match')) { return true; } @@ -150,7 +173,7 @@ var addCardListener = function () { function initTime() { currentTimer = setInterval(function () { - $timer.text(`${second}`) + $timer.text(`Time ${second}`) second = second + 1 }, 1000); } @@ -161,4 +184,4 @@ function resetTimer(timer) { } } -initGame(); \ No newline at end of file +initGame();