Skip to content

Ariel checkpoint 1 #8

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
ArielHolman wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Ariel checkpoint 1 #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d515446
saving first commit so I can create a pull request later
ArielHolman Jul 21, 2020
78aa6f3
created all fuctions except the check for win
ArielHolman Jul 22, 2020
b0c3f40
updated wins function
ArielHolman Jul 23, 2020
01065ab
added testing
ArielHolman Jul 25, 2020
51fbb65
added photo, changed orientation and names etc.
ArielHolman Jul 27, 2020
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
31 changes: 31 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,3 +165,34 @@ Simply run `npm run lint`

1. Run `npm start`
1. To break out of the server, press `ctrl` + `c`


// **Code Plan** - Include this in a `README.md` file in your folder with comments in your code
// 1. movePiece - pop and push - select block and move it
// 2. isLegal - boolean - check if the stack is empty. check if smaller block already exists. use < or >.
// Test condition:
// 1) should not allow an illegal move
// 2) should allow a legal move
// 3. checkForWin - conditionals - if stack.c has all blocks stacked from largest to smallest
// Test condition:
// 3) should detect a win
// 4. stackTracker - codepen - track the blocks and what row/stack they are going to and then remove the previos block
// Test condition:
// 4) should be able to move a block
// codepen
// let stone = null
// function handleStone(id) {
// console.log("hello 1")
// let row = document.getElementById(id)
// if(stone) {
// console.log("hello 2")
// row.appendChild(stone)
// stone = null
// } else {
// console.log("hello 3")
// stone = row.removeChild(row.lastChild)
// }
// }

// White board:
//get all blocks to the 3rd row without stacking bigger blocks on top of a small one.
Binary file added images/towers.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/towers3.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
23 changes: 14 additions & 9 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,21 @@
</head>
<body>
<h1>Towers Of Hanoi</h1>
<hr/>
<div id="top-row" data-row="top" class="red row" onclick="selectRow(this)"></div>
<div id="middle-row" data-row="middle" class="yellow row" onclick="selectRow(this)"></div>
<div id="bottom-row" class="green row" data-row="bottom" onclick="selectRow(this)">
<div id="4" data-size="4" data-color="yellow" class="stone" ></div>
<div id="3" data-size="3" data-color="red" class="stone" ></div>
<div id="2" data-size="2" data-color="green" class="stone" ></div>
<div id="1" data-size="1" data-color="blue" class="stone" ></div>
<hr class="topHr"/>
<main>
<div id="rows-containter">
<div id="top-row" data-row="top" class="dark-blue row" onclick="selectRow(this)"></div>
<div id="middle-row" data-row="middle" class="middle-blue row" onclick="selectRow(this)"></div>
<div id="bottom-row" class="light-blue row" data-row="bottom" onclick="selectRow(this)">
<div id="4" data-size="4" data-color="brown" class="stone" ></div>
<div id="3" data-size="3" data-color="grey" class="stone" ></div>
<div id="2" data-size="2" data-color="grey-blue" class="stone" ></div>
<div id="1" data-size="1" data-color="mauve" class="stone" ></div>
</div>
</div>
<hr/>
</main>
<hr class="bottomHr"/>
<footer>Created with love by Ariel Holman</footer>
</body>
</html>

Expand Down
139 changes: 91 additions & 48 deletions main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,108 +1,151 @@
'use strict';
"use strict";

const assert = require('assert');
const readline = require('readline');
const assert = require("assert");
const readline = require("readline");
const rl = readline.createInterface({
input: process.stdin,
output: process.stdout
output: process.stdout,
});

// An object that represents the three stacks of Towers of Hanoi;
// * each key is an array of Numbers:
// * A is the far-left,
// * B is the middle,
// * C is the far-right stack
// * Each number represents the largest to smallest tokens:
// * 4 is the largest,
// * 1 is the smallest
//STARTING CODING LADY!!!

// An object that represents the three stacks of Towers of Hanoi;
// * each key is an array of Numbers:
// * A is the far-left,
// * B is the middle,
// * C is the far-right stack
// * Each number represents the largest to smallest tokens:
// * 4 is the largest,
// * 1 is the smallest

let stacks = {
a: [4, 3, 2, 1],
b: [],
c: []
c: [],
};

// Start here. What is this function doing?
const printStacks = () => {
console.log("a: " + stacks.a);
console.log("b: " + stacks.b);
console.log("c: " + stacks.c);
}
};

// Next, what do you think this function should do?
const movePiece = () => {
// Your code here

}
const movePiece = (startStack, endStack) => {
// pop off of start stack and push to end stack
stacks[endStack].push(stacks[startStack].pop());
};

// Before you move, should you check if the move it actually allowed? Should 3 be able to be stacked on 2
const isLegal = () => {
// Your code here

}
const isLegal = (firstMove, secondMove) => {
if (
!stacks[secondMove].length ||
stacks[secondMove][stacks[secondMove].length - 1] >
stacks[firstMove][stacks[firstMove].length - 1]
) {
return true;
} else {
return false;
}
};

// What is a win in Towers of Hanoi? When should this function run?
const checkForWin = () => {
// Your code here

}
if (
stacks["a"].length == 0 &&
(stacks["b"].length || stacks["c"].length == 4)
) {
console.log("Look what we got here, smarty pants!");
return true;
} else {
return false;
}
};

// When is this function called? What should it do with its argument?
const towersOfHanoi = (startStack, endStack) => {
// Your code here

}
const towersOfHanoi = (start, end) => {
// Your code here
if (isLegal(start, end)) {
movePiece(start, end);
checkForWin();
} else {
console.log("try again");
}
};

const getPrompt = () => {
printStacks();
rl.question('start stack: ', (startStack) => {
rl.question('end stack: ', (endStack) => {
rl.question("start stack: ", (startStack) => {
rl.question("end stack: ", (endStack) => {
towersOfHanoi(startStack, endStack);
getPrompt();
});
});
}
};

// Tests

if (typeof describe === 'function') {

describe('#towersOfHanoi()', () => {
it('should be able to move a block', () => {
towersOfHanoi('a', 'b');
if (typeof describe === "function") {
describe("#towersOfHanoi()", () => {
it("should be able to move a block", () => {
towersOfHanoi("a", "b");
assert.deepEqual(stacks, { a: [4, 3, 2], b: [1], c: [] });
});
});

describe('#isLegal()', () => {
it('should not allow an illegal move', () => {
//first test created
describe('#printStacks()', () => {
it('should print out all stacks', () => {
console.log("a: " + stacks.a);
console.log("b: " + stacks.b);
console.log("c: " + stacks.c);
});
});
describe("#isLegal()", () => {
it("should not allow an illegal move", () => {
stacks = {
a: [4, 3, 2],
b: [1],
c: []
c: [],
};
assert.equal(isLegal('a', 'b'), false);
assert.equal(isLegal("a", "b"), false);
});
it('should allow a legal move', () => {
it("should allow a legal move", () => {
stacks = {
a: [4, 3, 2, 1],
b: [],
c: []
c: [],
};
assert.equal(isLegal('a', 'c'), true);
assert.equal(isLegal("a", "c"), true);
});
});
describe('#checkForWin()', () => {
it('should detect a win', () => {
describe("#checkForWin()", () => {
it("should detect a win", () => {
stacks = { a: [], b: [4, 3, 2, 1], c: [] };
assert.equal(checkForWin(), true);
stacks = { a: [1], b: [4, 3, 2], c: [] };
assert.equal(checkForWin(), false);
});
//second test created
it("stack.a should equal 0, stack c can win", () => {
stacks = { a: [], b: [], c: [4, 3, 2, 1] };
assert.equal(checkForWin(), true);
stacks = { a: [1], b: [], c: [4, 3, 2] };
assert.equal(checkForWin(), false);
});
});
//third test created
describe("#movePiece", () => {
it("stack.a should start with all 4 pieces", () => {
stacks = {
a: [4, 3, 2, 1],
b: [],
c: [],
};
});
});

} else {

getPrompt();

}
74 changes: 55 additions & 19 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,33 @@
body{
background-image: url(./images/towers3.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 80vh;
width: auto;
text-align: center;
margin: 0pt;
}

#rows-containter{
display: flex;
flex-direction: column;
transform: rotate(270deg);
justify-content: center;
align-items: center;
padding-right: 350pt;
}


.topHr{
width: 220pt;
height: 2pt;
}

.bottomHr {
width: 1000pt;
margin-top: 250pt;
}
[data-row] {
display: flex;
justify-content: flex-start;
Expand All @@ -11,16 +41,22 @@
z-index: -10;
}

[data-row].red {
background-color: #f6c5c5;
[data-row].dark-blue {
background-color: #6C96A7;
width: 250pt;
padding: 5pt;
}

[data-row].yellow {
background-color: #ffffa9;
[data-row].middle-blue {
background-color: #97B0BF;
width: 250pt;
padding: 5pt;
}

[data-row].green {
background-color: #baf6ba;
[data-row].light-blue {
background-color: #B9C5CD;
width: 250pt;
padding: 5pt;
}

[data-row].blue {
Expand All @@ -32,28 +68,28 @@
}

[data-color] {
width: 25px;
width: 35px;
float: left;
}

[data-color="blue"] {
height: 33px;
background-color: blue;
[data-color="mauve"] {
height: 34px;
background-color: #9F9298;
}

[data-color="green"] {
height: 33px;
background-color: green;
[data-color="grey-blue"] {
height: 39px;
background-color: #415566;
}

[data-color="red"] {
height: 33px;
background-color: red;
[data-color="grey"] {
height: 44px;
background-color: #A0A49F;
}

[data-color="yellow"] {
height: 33px;
background-color: yellow;
[data-color="brown"] {
height: 50px;
background-color: #5F4C47;
}

#announce-game-won {
Expand Down