Skip to content

Changes from Joel Burton: #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
joelburton wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Changes from Joel Burton: #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file removed dark_geometric_@2X.png
View file
Open in desktop
Binary file not shown.
122 changes: 22 additions & 100 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,106 +1,28 @@
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./style.css">
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<title>Pro Set</title>
<link rel="stylesheet" href="proset.css">
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<title>Pro Set</title>
</head>
<body>
<div id="wrapper">
<h1>PRO SET</h1>
<div class="scorecard">Your Score: <span id="score">0</span></div>

<div id="deck">
<div class="card_back"></div><div class="card_back"></div><div class="card_back"></div>
<div class="card_back"></div><div class="card_back"></div><div class="card_back"></div>
<div class="card_back"></div><div class="card_back"></div><div class="card_back"></div>
<div class="card_back"></div><div class="card_back"></div><div class="card_back"></div>
<div class="card_back"></div><div class="card_back"></div><div class="card_back"></div>
<div class="card_back"></div><div class="card_back"></div><div class="card_back"></div>
<div class="card_back"></div><div class="card_back"></div><div class="card_back"></div>
<div class="card_back"></div><div class="card_back"></div><div class="card_back"></div>
<div class="card_back"></div><div class="card_back"></div><div class="card_back"></div>
<div class="card_back"></div><div class="card_back"></div><div class="card_back"></div>
<div class="card_back"></div><div class="card_back"></div><div class="card_back"></div>
<div class="card_back"></div><div class="card_back"></div><div class="card_back"></div>
<div class="card_back"></div><div class="card_back"></div><div class="card_back"></div>
<div class="card_back"></div><div class="card_back"></div><div class="card_back"></div>
<div class="card_back"></div><div class="card_back"></div><div class="card_back"></div>
<div class="card_back"></div><div class="card_back"></div><div class="card_back"></div>
<div class="card_back"></div><div class="card_back"></div><div class="card_back"></div>
<div class="card_back"></div><div class="card_back"></div><div class="card_back"></div>
<div class="card_back"></div><div class="card_back"></div><div class="card_back"></div>
<div class="card_back"></div><div class="card_back"></div><div class="card_back"></div>
<div class="card_back"></div><div class="card_back"></div><div class="card_back"></div>
<div class="card_back"></div><div class="card_back"></div><div class="card_back"></div>
<div class="card_back"></div>


</div>
<div class="table">
<div id="0" class="card">
<div class="top-left dot"></div>
<div class="mid-left dot"></div>
<div class="bottom-left dot"></div>
<div class="top-right dot"></div>
<div class="mid-right dot"></div>
<div class="bottom-right dot"></div>
</div>
<div id="1" class="card">
<div class="top-left dot"></div>
<div class="mid-left dot"></div>
<div class="bottom-left dot"></div>
<div class="top-right dot"></div>
<div class="mid-right dot"></div>
<div class="bottom-right dot"></div>
</div>
<div id="2" class="card">
<div class="top-left dot"></div>
<div class="mid-left dot"></div>
<div class="bottom-left dot"></div>
<div class="top-right dot"></div>
<div class="mid-right dot"></div>
<div class="bottom-right dot"></div>
</div>
<div id="3" class="card">
<div class="top-left dot"></div>
<div class="mid-left dot"></div>
<div class="bottom-left dot"></div>
<div class="top-right dot"></div>
<div class="mid-right dot"></div>
<div class="bottom-right dot"></div>
</div>
<div id="4" class="card">
<div class="top-left dot"></div>
<div class="mid-left dot"></div>
<div class="bottom-left dot"></div>
<div class="top-right dot"></div>
<div class="mid-right dot"></div>
<div class="bottom-right dot"></div>
</div>
<div id="5" class="card">
<div class="top-left dot"></div>
<div class="mid-left dot"></div>
<div class="bottom-left dot"></div>
<div class="top-right dot"></div>
<div class="mid-right dot"></div>
<div class="bottom-right dot"></div>
</div>
<div id="6" class="card">
<div class="top-left dot"></div>
<div class="mid-left dot"></div>
<div class="bottom-left dot"></div>
<div class="top-right dot"></div>
<div class="mid-right dot"></div>
<div class="bottom-right dot"></div>
</div>
<div class="text-block">
<p>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 <em>actually impossible</em> for there to not be a set, so quit your belly-aching and look harder.</p>
</div>
</div>

</div>
<script type="text/javascript" src="./prosetTest.js"></script>
<div id="wrapper">
<h1>PRO SET</h1>
<div class="scorecard">
Your Score: <span id="score">0</span>
Round: <span id="round">0</span>
</div>
<div id="board"></div>
<p class="instructions">
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
<em>actually impossible</em> for there to not be a set, so quit your belly-aching and
look harder. Or <button id="hint">get a hint</button> or
<button id="cheat" type="button">cheat</button>.
</p>
</div>
<script src="proset.js"></script>
</body>
</html>
64 changes: 64 additions & 0 deletions proset.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
}
94 changes: 94 additions & 0 deletions proset.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = $("<div/>", {id: cardnum, class: "card"});
DOTS.forEach(function (dot) { elem.append($("<div/>", {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();
}());
Loading