basic project card and projects page setup
This commit is contained in:
Josh Ashton
@@ -0,0 +1,5 @@
|
||||
# Default ignored files
|
||||
/shelf/
|
||||
/workspace.xml
|
||||
# Editor-based HTTP Client requests
|
||||
/httpRequests/
|
||||
@@ -0,0 +1,8 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ProjectModuleManager">
|
||||
<modules>
|
||||
<module fileurl="file://$PROJECT_DIR$/.idea/tic-tac-toe.iml" filepath="$PROJECT_DIR$/.idea/tic-tac-toe.iml" />
|
||||
</modules>
|
||||
</component>
|
||||
</project>
|
||||
@@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<module type="WEB_MODULE" version="4">
|
||||
<component name="NewModuleRootManager">
|
||||
<content url="file://$MODULE_DIR$">
|
||||
<excludeFolder url="file://$MODULE_DIR$/temp" />
|
||||
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
|
||||
<excludeFolder url="file://$MODULE_DIR$/tmp" />
|
||||
</content>
|
||||
<orderEntry type="inheritedJdk" />
|
||||
<orderEntry type="sourceFolder" forTests="false" />
|
||||
</component>
|
||||
</module>
|
||||
Binary file not shown.
@@ -0,0 +1,12 @@
|
||||
* {
|
||||
|
||||
margin: auto;
|
||||
position: relative;
|
||||
|
||||
font-family: Lato sans-serif;
|
||||
font-size: 1em;
|
||||
|
||||
background-color: #4A245E;
|
||||
color: white;
|
||||
|
||||
}
|
||||
Binary file not shown.
@@ -0,0 +1,67 @@
|
||||
* {
|
||||
|
||||
font-family: Lato sans-serif;
|
||||
|
||||
background-color: #4A245E;
|
||||
color: white;
|
||||
|
||||
}
|
||||
|
||||
body {
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
|
||||
.grid {
|
||||
|
||||
margin-top: 10em;
|
||||
position: absolute;
|
||||
|
||||
display: grid;
|
||||
|
||||
grid-template-columns: 10em 10em 10em;
|
||||
grid-template-rows: 10em 10em 10em;
|
||||
|
||||
width: 75%;
|
||||
|
||||
}
|
||||
|
||||
.box {
|
||||
|
||||
font-size: 5em;
|
||||
|
||||
border: 3px solid #4A245E;
|
||||
|
||||
padding: 1em;
|
||||
|
||||
display: flex;
|
||||
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
margin: 0;
|
||||
|
||||
background-color: white;
|
||||
color: #4A245E;
|
||||
|
||||
}
|
||||
|
||||
#output {
|
||||
|
||||
position: relative;
|
||||
padding: 5em;
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
button {
|
||||
|
||||
background-color: white;
|
||||
color: #4A245E;
|
||||
padding: 1em;
|
||||
font-size: 1em;
|
||||
border-radius: 15px;
|
||||
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
|
||||
<meta name = "viewport" content = "width=device-width, initial-scale=1" charset="UTF-8">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
|
||||
<title>Tic-Tac-Toe</title>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="output">
|
||||
|
||||
<h1 id="output-text"></h1>
|
||||
<button id="clear" onclick="resetAndClear()" hidden>Clear</button>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
|
||||
<div class="box" id="0" onclick="clickTracker(this)"></div>
|
||||
<div class="box" id="1" onclick="clickTracker(this)"></div>
|
||||
<div class="box" id="2" onclick="clickTracker(this)"></div>
|
||||
|
||||
<div class="box" id="3" onclick="clickTracker(this)"></div>
|
||||
<div class="box" id="4" onclick="clickTracker(this)"></div>
|
||||
<div class="box" id="5" onclick="clickTracker(this)"></div>
|
||||
|
||||
<div class="box" id="6" onclick="clickTracker(this)"></div>
|
||||
<div class="box" id="7" onclick="clickTracker(this)"></div>
|
||||
<div class="box" id="8" onclick="clickTracker(this)"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<table>
|
||||
|
||||
<tr>
|
||||
|
||||
<th id="playerX"></th>
|
||||
<th id="playerO"></th>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<td id="xScore"></td>
|
||||
<td id="oScore"></td>
|
||||
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
|
||||
</body>
|
||||
|
||||
<footer>
|
||||
|
||||
<script src="js/script.js"></script>
|
||||
|
||||
</footer>
|
||||
|
||||
</html>
|
||||
Binary file not shown.
@@ -0,0 +1,197 @@
|
||||
const playerX = prompt("Please enter player one's name:");
|
||||
const playerO = prompt("Please enter player two's name:");
|
||||
|
||||
const boxes = document.getElementsByClassName("box");
|
||||
|
||||
let currentPlayer = playerX;
|
||||
|
||||
const posX = [];
|
||||
let indexX = 0;
|
||||
|
||||
const posO = [];
|
||||
let indexO = 0;
|
||||
|
||||
let marks = 0;
|
||||
|
||||
document.getElementById("output-text").innerHTML = currentPlayer + "\'s turn."
|
||||
document.getElementById("clear").hidden = true;
|
||||
|
||||
function clickTracker(button) {
|
||||
|
||||
if(button.innerHTML === "") {
|
||||
|
||||
mark(button.id);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function mark(index) {
|
||||
|
||||
let winstate = false;
|
||||
|
||||
marks++;
|
||||
|
||||
if(currentPlayer === playerX) {
|
||||
|
||||
boxes[index].innerHTML = "X"
|
||||
|
||||
posX[indexX] = index;
|
||||
indexX++;
|
||||
|
||||
if(marks > 4) {
|
||||
|
||||
winstate = checkForWin(posX);
|
||||
|
||||
}
|
||||
|
||||
if(winstate === 1) {
|
||||
|
||||
document.getElementById("output-text").innerHTML = currentPlayer + " WON!"
|
||||
document.getElementById("clear").hidden = false;
|
||||
|
||||
} else if(winstate === 2) {
|
||||
|
||||
document.getElementById("output-text").innerHTML = "It's a tic-tac-tie!";
|
||||
document.getElementById("clear").hidden = false;
|
||||
|
||||
} else {
|
||||
|
||||
currentPlayer = playerO;
|
||||
document.getElementById("output-text").innerHTML = currentPlayer + "'s turn."
|
||||
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
boxes[index].innerHTML = "O"
|
||||
|
||||
posO[indexO] = index;
|
||||
indexO++;
|
||||
|
||||
if(marks > 4) {
|
||||
|
||||
winstate = checkForWin(posO);
|
||||
|
||||
}
|
||||
|
||||
if(winstate === 1) {
|
||||
|
||||
document.getElementById("output-text").innerHTML = currentPlayer + " WON!"
|
||||
document.getElementById("clear").hidden = false;
|
||||
|
||||
} else if(winstate === 2) {
|
||||
|
||||
document.getElementById("output-text").innerHTML = "It's a tic-tac-tie!";
|
||||
document.getElementById("clear").hidden = false;
|
||||
|
||||
} else {
|
||||
|
||||
currentPlayer = playerX;
|
||||
document.getElementById("output-text").innerHTML = currentPlayer + "'s turn."
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
function checkForWin(player) {
|
||||
|
||||
const winstates = [
|
||||
|
||||
[0,1,2],
|
||||
[3,4,5],
|
||||
[6,7,8],
|
||||
[0,3,6],
|
||||
[1,4,7],
|
||||
[2,5,8],
|
||||
[0,4,8],
|
||||
[2,4,6]
|
||||
|
||||
];
|
||||
|
||||
let count = 0;
|
||||
|
||||
for(let j = 0; j < winstates.length; j++) {
|
||||
|
||||
for(let k = 0; k < player.length; k++) {
|
||||
|
||||
for(let i = 0; i < winstates[j].length; i++) {
|
||||
|
||||
if(player[k] == winstates[j][i]) {
|
||||
|
||||
count++;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
if(count === 3) {
|
||||
|
||||
for (let i = 0; i < winstates[j].length; i++) {
|
||||
|
||||
boxes[winstates[j][i]].style.backgroundColor = "#4A245E";
|
||||
boxes[winstates[j][i]].style.color = "white";
|
||||
|
||||
}
|
||||
|
||||
return 1;
|
||||
|
||||
} else if(marks === 9) {
|
||||
|
||||
return 2;
|
||||
|
||||
} else {
|
||||
|
||||
count = 0;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
return -1;
|
||||
|
||||
}
|
||||
|
||||
function resetAndClear() {
|
||||
|
||||
for(let i = 0; i < boxes.length; i++) {
|
||||
|
||||
boxes[i].innerHTML = ""
|
||||
boxes[i].style.backgroundColor = "white";
|
||||
boxes[i].style.color = "#4A245E";
|
||||
|
||||
}
|
||||
|
||||
if(currentPlayer === playerX) {
|
||||
|
||||
currentPlayer = playerO;
|
||||
|
||||
} else {
|
||||
|
||||
currentPlayer = playerX;
|
||||
|
||||
}
|
||||
|
||||
for(let i = 0; i < posX.length; i++) {
|
||||
|
||||
posX[i] = -1;
|
||||
|
||||
}
|
||||
|
||||
for(let i = 0; i < posO.length; i++) {
|
||||
|
||||
posO[i] = -1;
|
||||
|
||||
}
|
||||
|
||||
marks = 0;
|
||||
|
||||
document.getElementById("output-text").innerHTML = currentPlayer + "\'s turn"
|
||||
document.getElementById("clear").hidden = true;
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user