diff --git a/dark_geometric_@2X.png b/dark_geometric_@2X.png deleted file mode 100644 index 07f5137..0000000 Binary files a/dark_geometric_@2X.png and /dev/null differ diff --git a/index.html b/index.html index 850287b..312591a 100644 --- a/index.html +++ b/index.html @@ -1,106 +1,28 @@ + - - - - - Pro Set + + + + + Pro Set -
-

PRO SET

-
Your Score: 0
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-

You like Set? Well THIS SET IS FOR PROS. It's Pro Set. Dots cancel each other out between cards. Find sets of cards where every dot is cancelled out. Seven cards makes it actually impossible for there to not be a set, so quit your belly-aching and look harder.

-
-
- -
- +
+

PRO SET

+
+ Your Score: 0 + Round: 0 +
+
+

+ You like Set? Well, THIS SET IS FOR PROS. It's Pro Set. Dots cancel each other out between + cards. Find sets of cards where every is cancelled out. Seven cards makes it + actually impossible for there to not be a set, so quit your belly-aching and + look harder. Or or + . +

+
+ \ No newline at end of file diff --git a/proset.css b/proset.css new file mode 100644 index 0000000..c5a0e43 --- /dev/null +++ b/proset.css @@ -0,0 +1,64 @@ +body { + font-size: 0.75em; + font-family: 'Montserrat', sans-serif; + padding: 1em; +} + +h1 { + font-size: 4em; +} + +#wrapper { + margin: 0 auto; + max-width: 75em; + text-align: center; +} + +.card { + background-color: #2a2b2a; + width: 12em; + height: 16em; + margin: 3%; + position: relative; + display:inline-block; + transition: background-color s, transform s; +} + +.card > div { /* dots */ + width: 2em; + height: 2em; + border-radius: 50%; + content: ' '; + position: absolute; +} + +.top { top: 2em; } .left { left: 2em; } .right { right: 2em; } +.mid { top: 44%; } +.bottom { bottom: 2em; } + +.top.left { background-color: #c23d4b; } .top.right { background-color: #8177b7; } +.mid.left { background-color: #4287c7; } .mid.right { background-color: #f1ca1b; } +.bottom.left { background-color: #1d7d3d; } .bottom.right { background-color: #e16326; } + +.scorecard { + font-size: 1.5em; + background-color: #2a2b2a; + color: white; + width: 10%; + padding: 1em 1.5em; + position: fixed; + border-radius: 20px; + right: -20px; + top: 100px; +} + +.instructions { + margin: 7%; + text-align: left; + background-color: #ddd; + padding: 3em 10%; +} + +.selected { + background: repeating-linear-gradient(135deg, #444, #444 10px, black 10px, black 20px); +} \ No newline at end of file diff --git a/proset.js b/proset.js new file mode 100644 index 0000000..9826a2d --- /dev/null +++ b/proset.js @@ -0,0 +1,94 @@ +(function () { // IIFE + const POOL_SIZE = 7; + const DOTS = ["top left", "mid left", "bottom left", "top right", "mid right", "bottom right"]; + var selected = []; + var score = 0; + var round = 0; + var pool = []; + var board = $("#board"); + var deck; + + function displayPool() { + // Display pool; turn on/off dot visibility on each card + for (var card = 0; card < pool.length; card++) { + for (var dotNum = 0; dotNum < 6; dotNum++) { + var dot = $('.card' + '#' + card + ' div' + ':eq(' + dotNum + ')'); + dot.css('visibility', pool[card] & (1 << dotNum) ? 'visible' : 'hidden'); + } + } + for (var unseen = pool.length; unseen < POOL_SIZE; unseen++) + $('.card' + '#' + unseen).hide(); + $('.card').removeClass('selected'); + } + + function highlightAndCheckSet(id) { + // Add or remove clicked item from selected, depending if it was already selected + if (_.contains(selected, pool[id])) { + $('#' + id).removeClass('selected'); + selected = _.without(selected, pool[id]); + } else { + selected.push(pool[id]); + $('#' + id).addClass('selected'); + } + // Check if win (selected set XORed against self == 0) + if (selected.length && selected.reduce(function (x, y) { return x ^ y }) == 0) { + showSolution(selected, 150); + $('#score').text(++score); + } + } + + function showSolution(solution, nsecs_fade) { + // Blank out winning cards and replace with new from deck + for (var p = 0; p < pool.length; p++) { + if (_.contains(solution, pool[p])) { + $('#' + p).fadeOut(nsecs_fade).fadeIn(nsecs_fade).removeClass('selected'); + pool[p] = deck.pop(); + } + } + // Get rid of blank cards (end of deck); if all blank, deal a new deck + pool = pool.filter(function(x) { return x }); + if (pool.length == 0) + setUpDeck(); + setTimeout(function () { displayPool(pool) }, nsecs_fade); // wait until fadeout/in done + selected = []; + $("#round").text(++round); + } + + function findSolution() { + // Iterate through all combinations and return winning line (XOR of set = 0) + for (var i = 1; i < (2 << (pool.length - 1)); i++) { + var test_solution = pool.filter(function(item, index) { return 1 << index & i }); + if (test_solution.reduce(function(x, y) { return x ^ y}) == 0) + return test_solution; + } + } + + function getHint() { + $('.card').removeClass('selected'); // get rid of existing selections + selected = [_.sample(findSolution())]; // set selected to random card fr om a solution + $('#' + _.indexOf(pool, selected[0])).addClass('selected'); // and highlight it + } + + function setUpGame() { + // Insert HTML for board + for (var cardnum = 0; cardnum < POOL_SIZE; cardnum++) { + var elem = $("
", {id: cardnum, class: "card"}); + DOTS.forEach(function (dot) { elem.append($("
", {class: dot})) }); + board.append(elem); + } + $('.card').on('click', function () { highlightAndCheckSet($(this).attr('id')) }); + $('#cheat').on('click', function() { showSolution(findSolution(), 600)}); + $('#hint').on('click', function() { getHint() }); + setUpDeck(); + } + + function setUpDeck() { + deck = _.shuffle(_.range(1, 64)); // Skip card 0, which is blank (too easy!) + // deal initial pool and display it + for (var i = 0; i < POOL_SIZE; pool[i++] = deck.pop()) { } + $(".card").show(); + displayPool(pool); + } + + setUpGame(); +}()); \ No newline at end of file diff --git a/prosetTest.js b/prosetTest.js deleted file mode 100644 index c24f41f..0000000 --- a/prosetTest.js +++ /dev/null @@ -1,154 +0,0 @@ -var pool_size = 7; -var selected = []; -var score = 0; - -var binaryString = function (int) { - // prints and pads, used to display dots - binary_string = int.toString(2); - while (binary_string.length < 6){ - binary_string = '0' + binary_string; - } - return binary_string; -} - -var create_deck = function () { - //just an array from 1 to 64 - unshuffled_deck = [] - var i = 1; // Stewart Stewart says: The trivial card is too trivial (exclude the blank card, 64 (2^6) permutations but 63 cards) - while (i < 64){ - unshuffled_deck.push(i); - i ++; - } - return unshuffled_deck; -} - -var shuffle = function (unshuffled_deck) { - shuffled_deck = []; - while (unshuffled_deck.length>0){ - randInt = Math.floor(Math.random() * (unshuffled_deck.length)); - shuffled_deck.push(unshuffled_deck.splice(randInt,1)[0]); - } - return shuffled_deck; -} - -var deal = function (shuffled_deck, pool, index) { - pool[index] = null; - if (shuffled_deck){ - // removes card from deck display - $('div#deck > div:first').remove(); - - // adds card from deck into corect index - pool[index]=(shuffled_deck.pop()) - return pool; - - } -} - -var game_over = function (pool){ - for (var i = 0; i < pool.length; i++){ - console.log(i); - if (pool[i]){ - console.log("card exists: ", pool[i]); - return false; - } - } - return true; -} - -var display = function (pool, deck) { - // turns css on and off - var wrapper = document.getElementById("wrapper"); - for (var i = 0; i < pool.length; i++) { - // if card has been dealt - if (pool[i]){ - var binary_string = binaryString(pool[i]); - for (var j = 0; j < 6; j ++) { - var card_id_and_dot = 'div.card' + '#' + i + ' .dot' + ':eq(' + j + ')' ; - if (binary_string[j] == 0) { - $(card_id_and_dot).removeClass('on').addClass('off'); - } - else { - $(card_id_and_dot).removeClass('off').addClass('on'); - } - } - }else{ - // turn card off - $('div.card#'+i).addClass('off'); - $('div.card#'+i+"> .dot").addClass('off'); - } - } -} - - -var check = function (id) { - // poorly named function - - // if card is selected, deselect it. Else, select it. - var index = $.inArray(pool[id], selected); //returns -1 if not in array - if (index != -1) { - selected.splice(index, 1); - $('#'+ id).removeClass('selected'); - } - else { - selected.push(pool[id]); - $('#'+ id).addClass('selected'); - console.log(pool[id]) - } - - // once we've selected at least three cards and if they're a set - if (selected.length > 2 && my_xor(selected) == 0) { - for (var i = 0; i < selected.length; i ++) { - // find all the selected cards indices in the pool - var index = $.inArray(selected[i], pool); //have to find them all again, this is dumb - // flash them to indicate a set - $('#'+ index).fadeOut(150).fadeIn(150).removeClass('selected'); - // deal new cards - deal(shuffled_deck, pool, index); - } - setTimeout(function() { display(pool, deck); }, 150); //wait until fadeout/in is finished to display newly dealt cards - selected = []; - increment_score(); - - } - if (game_over(pool)){ - document.body.innerHTML = "

GAME OVER!

You found " + score + " sets.

" - } -} - -var my_xor = function (list) { - // regular xor for each card in the list - var result = list[0]; - for (var i = 1; i < list.length; i ++) { - result = result ^ list[i]; - } - return result; -} - - -var increment_score = function () { - score ++; - $('#score').text(score); -} - -var deck = create_deck(); -for (var i = 0; i < 3; i ++){ - $('div#deck').append("
") -} - - - - -var shuffled_deck = shuffle(deck); -//initialize pool of cards -var pool = []; -for (var i = 0; i < pool_size; i ++) { - pool = deal(shuffled_deck, pool, i); -} - -display(pool, deck); - -$('div.card').bind('click', function() { - // console.log($(this).attr('id')) - check($(this).attr('id')) -}); - diff --git a/prosetTest.py b/prosetTest.py deleted file mode 100644 index 160917c..0000000 --- a/prosetTest.py +++ /dev/null @@ -1,27 +0,0 @@ -import random - - -def create_deck(): - unshuffled_deck = [] - for i in range(64): - binary = bin(i)[2:] - while len(binary) < 6: - binary += '0' - unshuffled_deck.append(binary) - - return unshuffled_deck - -def shuffle(unshuffled_deck): - shuffled_deck = [] - while unshuffled_deck: - randInt = int(random.random()*len(unshuffled_deck)-1) - shuffled_deck.append(unshuffled_deck.pop(randInt)) - return shuffled_deck - -deck = create_deck() -print deck - -shuffled_deck = shuffle(deck) -print shuffled_deck - - diff --git a/style.css b/style.css deleted file mode 100644 index cff257c..0000000 --- a/style.css +++ /dev/null @@ -1,159 +0,0 @@ -* { - margin:0; - padding:0; -} - -body { - font-size: .75em; - font-family: 'Montserrat', sans-serif; - text-align: center; - margin: 4em; -} - -h1 { - font-size: 4em; - font-weight: 700; - padding-bottom: 0.5em; -} - -#deck { - width:10%; - min-width: 6em; - margin-left: -10em; - margin-right: 5em; - display: inline-block; - /*vertical-align: top;*/ -} - -#wrapper { - width: 80%; - min-width: 40em; - display: inline-block; - vertical-align: top; - text-align: center; -} - -.card { - background-color: #2a2b2a; - width: 12em; - max-width: 20em; - height: 16em; - margin: 0 3% 2em 0; - position: relative; - display:inline-block; - -webkit-transition:background-color s, -webkit-transform s; - transition:background-color s, transform s; -} - - -.card_back{ - background-image: url("dark_geometric_@2X.png"); - margin-top: -11.6em; - margin-left:1px; - width: 10em; - height: 12em; - /*border: 1px solid #CCC;*/ -} - -.card_back:first-child{ - margin-top: 0; -} - -.dot { - width:2em; - height:2em; - border-radius: 50%; - content: ' '; -} - -.top-left { - /*red*/ - background-color: #c23d4b; - position:absolute; - top:2em; - left:2em; - -} -.mid-left { - /*blue*/ - background-color: #4287c7; - position:absolute; - top:44%; - left:2em; -} -.bottom-left { - /*green*/ - background-color: #1d7d3d; - position: absolute; - left:2em; - bottom:2em; -} -.top-right{ - /*purple*/ - background-color: #8177b7; - position:absolute; - top:2em; - right:2em; -} -.mid-right{ - /*yellow*/ - background-color: #f1ca1b; - position:absolute; - top:44%; - right:2em; -} -.bottom-right{ - /*orange*/ - background-color: #e16326; - position: absolute; - bottom:2em; - right:2em; -} -.on{ - visibility: visible; -} -.off{ - visibility: hidden; -} -.table{ - width:75%; - display: inline-block; - vertical-align: top; -} - -.scorecard { - font-size: 2em; - font-weight: 700; - padding-bottom:0.5em; - /*background-color: #2a2b2a;*/ - /*color:#fff;*/ - color: black; - width: 100%; - /*padding:1em 1.5em;*/ - /*position: fixed;*/ - /*border-radius: 20px;*/ - /*right: -20px;*/ - /*top: 100px;*/ -} - -.text-block { - margin:7%; - display: inline-block; - text-align: left; - background-color: #ddd; - width: 100%; - padding:3em 10%; - max-width: 50%; -} -.selected { - /*border: solid 12px grey; - /*background-color: black;*/ - background: repeating-linear-gradient( - 135deg, - #2a2b2a, - #2a2b2a 10px, - #000 10px, - #000 20px - ); - background-color: black; -} \ No newline at end of file