From 969e30469e6f2829de54b7e1cf7f52ec857fca87 Mon Sep 17 00:00:00 2001 From: jeroen dijkmeijer Date: Sat, 14 Apr 2018 18:05:59 +0200 Subject: [PATCH 1/7] works for pc --- css/style.css | 32 ++++++++++++++++---- index.html | 23 ++++++++++---- js/index.js | 83 ++++++++++++++++++++++++++++++++------------------- 3 files changed, 97 insertions(+), 41 deletions(-) diff --git a/css/style.css b/css/style.css index cfa3256..b019c72 100644 --- a/css/style.css +++ b/css/style.css @@ -40,7 +40,7 @@ h1 { box-shadow: 12px 15px 20px 0px rgba(46, 61, 73, 0.5); } .deck .card { - height: 150px; + height: 100px; width: 150px; background: #2e3d49; display: inline-block; @@ -61,9 +61,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", cursive; +} + + @media only screen and (max-width: 800px){ .deck .card{ width: 75px; @@ -120,7 +125,6 @@ h1 { #score-panel { text-align: left; - width: 345px; margin-bottom: 10px; } #score-panel .stars { @@ -133,10 +137,11 @@ h1 { list-style: none; display: inline-block; } -#score-panel .restart { +#score-panel .restart, .reconfigure { float: right; cursor: pointer; -} + margin-left: 1em; + } *::-moz-selection { background: transparent; @@ -153,3 +158,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..f39d8b3 100644 --- a/index.html +++ b/index.html @@ -15,16 +15,29 @@

Matching Game

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

Time: 0:00

+
+
+ +
+
+ +
+
+
+
+
+
@@ -32,4 +45,4 @@

Matching Game

- \ No newline at end of file + diff --git a/js/index.js b/js/index.js index 18fa848..16a0ca2 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 @@ -100,6 +108,19 @@ $restart.bind('click', function () { } }) }); +$reconfigure.bind('click', ()=> { + console.log("clicked"); + $('.input.closed').css('display','inline-block'); + $('#values').val($.unique(symbols).join(" ")) +}); +$('.set-reconfigure').on('click', function(e) { + symbols = $('#values').val().split(" ") + $('.input.closed').css('display','none'); + initGame(); + e.preventDefault(); + return false; +}); + var addCardListener = function () { @@ -161,4 +182,4 @@ function resetTimer(timer) { } } -initGame(); \ No newline at end of file +initGame(); From 37fbaabacdeea8ab02d124628f061b0df9a4215b Mon Sep 17 00:00:00 2001 From: jeroen dijkmeijer Date: Sat, 14 Apr 2018 22:30:02 +0200 Subject: [PATCH 2/7] style sheet shit --- css/style.css | 30 ++++++++++++++++-------------- index.html | 4 ++-- js/index.js | 2 +- 3 files changed, 19 insertions(+), 17 deletions(-) diff --git a/css/style.css b/css/style.css index b019c72..9faafec 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%); @@ -41,10 +45,10 @@ h1 { } .deck .card { height: 100px; - width: 150px; + width: 21%; background: #2e3d49; display: inline-block; - margin: 0 30px 30px 0; + margin: 2%; line-height: 280px; font-size: 0; color: #ffffff; @@ -94,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); @@ -110,22 +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; margin-bottom: 10px; + font-size: 23px; +} +input { + font-size: 23px; + height:30px; + width: 22em; } #score-panel .stars { margin: 0; diff --git a/index.html b/index.html index f39d8b3..2f4ff41 100644 --- a/index.html +++ b/index.html @@ -24,9 +24,9 @@

    Matching Game

    0 Moves
    -
    +

    Time: 0:00

    -
    +
    diff --git a/js/index.js b/js/index.js index 16a0ca2..14f1558 100644 --- a/js/index.js +++ b/js/index.js @@ -171,7 +171,7 @@ var addCardListener = function () { function initTime() { currentTimer = setInterval(function () { - $timer.text(`${second}`) + $timer.text(`Time ${second}`) second = second + 1 }, 1000); } From ff21579da86f20e7e023ce71f0e383f9c70b84a9 Mon Sep 17 00:00:00 2001 From: jeroen dijkmeijer Date: Sun, 15 Apr 2018 12:26:51 +0200 Subject: [PATCH 3/7] comic sans does not exist for safari --- css/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index 9faafec..7c3faa3 100644 --- a/css/style.css +++ b/css/style.css @@ -69,7 +69,7 @@ h1 { } .fa.char { - font-family: "Comic Sans MS", "Comic Sans", cursive; + font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive; } From 3fc7ccb2a7ee69515fc71349030c40eeae716661 Mon Sep 17 00:00:00 2001 From: jeroen dijkmeijer Date: Sun, 15 Apr 2018 13:41:11 +0200 Subject: [PATCH 4/7] logging for finding click event --- index.html | 6 +++--- js/index.js | 8 +++++--- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 2f4ff41..7578f0f 100644 --- a/index.html +++ b/index.html @@ -30,10 +30,10 @@

    Time: 0:00

    -
    - +
    +
    -
    +
    diff --git a/js/index.js b/js/index.js index 14f1558..f8a2a63 100644 --- a/js/index.js +++ b/js/index.js @@ -92,6 +92,7 @@ function endGame(moves, score) { // Restart Game $restart.bind('click', function () { + console.log("restart clicked"); swal({ allowEscapeKey: false, allowOutsideClick: false, @@ -109,15 +110,15 @@ $restart.bind('click', function () { }) }); $reconfigure.bind('click', ()=> { - console.log("clicked"); + 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(" ") + console.log('check clicked') $('.input.closed').css('display','none'); initGame(); - e.preventDefault(); return false; }); @@ -125,7 +126,8 @@ $('.set-reconfigure').on('click', function(e) { 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; } From fcff8ad8123a326c4107223fd5489529d552c0ce Mon Sep 17 00:00:00 2001 From: jeroen dijkmeijer Date: Wed, 18 Apr 2018 09:01:46 +0200 Subject: [PATCH 5/7] fixed ms backquotes incompatability, input selection error. --- css/style.css | 10 +--------- js/index.js | 2 +- 2 files changed, 2 insertions(+), 10 deletions(-) diff --git a/css/style.css b/css/style.css index 7c3faa3..b978d62 100644 --- a/css/style.css +++ b/css/style.css @@ -127,7 +127,7 @@ h1 { input { font-size: 23px; height:30px; - width: 22em; + width: 16em; } #score-panel .stars { margin: 0; @@ -145,14 +145,6 @@ input { margin-left: 1em; } -*::-moz-selection { - background: transparent; -} - -*::selection { - background: transparent; -} - .swal2-overlay { background-color: white; } diff --git a/js/index.js b/js/index.js index f8a2a63..21cef2c 100644 --- a/js/index.js +++ b/js/index.js @@ -53,7 +53,7 @@ function initGame() { resetTimer(currentTimer); second = 0; - $timer.text(`${second}`) + $timer.text(second) initTime(); }; From c4723cd7d74f387a9904926e807a8e17f4c625d4 Mon Sep 17 00:00:00 2001 From: jeroen dijkmeijer Date: Mon, 14 May 2018 21:54:19 +0200 Subject: [PATCH 6/7] dropdown with text, improved split --- index.html | 12 +++++++++++- js/index.js | 2 +- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 7578f0f..b1483e2 100644 --- a/index.html +++ b/index.html @@ -32,7 +32,17 @@

    Time: 0:00

    -
    +
    + + +
    diff --git a/js/index.js b/js/index.js index 21cef2c..d80f72a 100644 --- a/js/index.js +++ b/js/index.js @@ -115,7 +115,7 @@ $reconfigure.bind('click', ()=> { $('#values').val($.unique(symbols).join(" ")) }); $('.set-reconfigure').on('click', function(e) { - symbols = $('#values').val().split(" ") + symbols = $('#values').val().split(/\s+/) console.log('check clicked') $('.input.closed').css('display','none'); initGame(); From e8f479d62eab857dcb371142225ac84b81365e21 Mon Sep 17 00:00:00 2001 From: jeroen Date: Tue, 15 May 2018 15:02:03 +0200 Subject: [PATCH 7/7] Update README.md explained the reason for this branch --- README.md | 3 +++ 1 file changed, 3 insertions(+) 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/)