Skip to content

Commit c85ac97

Browse files
ayeeerubenayeeeruben
committed
close to finished game
1 parent 6fd9842 commit c85ac97

11 files changed

Lines changed: 210 additions & 36 deletions

File tree

‎.DS_Store‎

0 Bytes
Binary file not shown.

‎hw2/end.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<title>Game Over!</title>
8-
<link href="style.css" rel="stylesheet">
8+
<link href="end_style.css" rel="stylesheet">
99
</head>
1010
<body>
1111
<h1 id="message"></h1>

‎hw2/endScript.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,12 @@ message.textContent = `${WINNER} Has Won The Game!`;
1111
score.textContent = `Total Score: ${SCORE}`;
1212

1313
mainMenuBtn.addEventListener("click", function(){
14-
sessionStorage.removeItem("winner");
15-
sessionStorage.removeItem("score");
14+
sessionStorage.clear();
1615
window.location.href = "main.html";
1716
});
1817

1918
playAgainBtn.addEventListener("click", function(){
20-
sessionStorage.clear();
19+
sessionStorage.removeItem("winner");
20+
sessionStorage.removeItem("score");
2121
window.location.href = "game.html";
2222
});

‎hw2/end_style.css‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
button{
2+
background:rgb(24, 24, 24);
3+
color:white;
4+
border-radius:12px;
5+
border:none;
6+
padding:12px 16px;
7+
cursor:pointer;
8+
width:100%;
9+
margin-top:16px;
10+
transition:transform .2s ease;
11+
box-sizing:border-box;
12+
}
13+
button:hover {
14+
transform: scale(1.05);
15+
}
16+
body{
17+
margin:0;
18+
font-family: Roboto;
19+
color: black;
20+
21+
display:grid;
22+
place-items:start center;
23+
padding:48px 16px;
24+
}

‎hw2/game.html‎

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,24 +5,28 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<title>PIG</title>
8-
<link href="style.css" rel="stylesheet">
8+
<link href="game_style.css" rel="stylesheet">
99
</head>
1010
<body>
11-
<div>
12-
<p id="player1ScoreText"></p>
13-
<p id="currentPlayer1ScoreText"></p>
14-
</div>
15-
<p id="player1"></p>
16-
17-
<p id="dice"></p>
18-
19-
<button id="roll">Roll</button>
20-
<button id="passTurn">Pass Turn</button>
11+
<div class="gameUI">
12+
<h2 id="currentPlayer"></h2>
13+
<div class="player1Side">
14+
<p id="player1ScoreText"></p>
15+
<p id="currentPlayer1ScoreText"></p>
16+
<p id="player1"></p>
17+
</div>
18+
<div class="diceSide">
19+
<p id="dice"></p>
2120

22-
<p id="player2"></p>
23-
<div>
24-
<p id="player2ScoreText"></p>
25-
<p id="currentPlayer2ScoreText"></p>
21+
<button id="roll">Roll</button>
22+
<button id="passTurn">Pass Turn</button>
23+
</div>
24+
<div class="player2Side">
25+
<p id="player2ScoreText"></p>
26+
<p id="currentPlayer2ScoreText"></p>
27+
<p id="player2"></p>
28+
</div>
29+
<p id="rolled1"></p>
2630
</div>
2731
<script src="script.js"></script>
2832
</body>

‎hw2/game_style.css‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
button{
2+
background:rgb(24, 24, 24);
3+
color:white;
4+
border-radius:12px;
5+
border:none;
6+
padding:12px 16px;
7+
cursor:pointer;
8+
width:100%;
9+
margin-top:16px;
10+
transition:transform .2s ease;
11+
box-sizing:border-box;
12+
}
13+
button:hover {
14+
transform: scale(1.05);
15+
}
16+
body{
17+
margin:0;
18+
font-family: Roboto;
19+
color:black;
20+
min-height:100vh;
21+
display:grid;
22+
place-items:center;
23+
padding:24px;
24+
}
25+
.gameUI{
26+
display: grid;
27+
grid-template-columns: 1fr minmax(240px, 320px) 1fr;
28+
gap: 24px;
29+
align-items: start;
30+
width: 100%;
31+
max-width: 1100px;
32+
}
33+
.diceSide{
34+
display: grid;
35+
align-items: center;
36+
gap: 12px;
37+
padding-top:8px;
38+
grid-template-columns: 1fr 1fr;
39+
justify-items: stretch;
40+
}
41+
#dice{
42+
font-size: 150px;
43+
line-height: 1;
44+
text-align: center;
45+
grid-column: 1 / -1;
46+
}
47+
.player1Side{
48+
background:#fff;
49+
border:1px solid #e5e7eb;
50+
border-radius:16px;
51+
box-shadow:0 6px 22px rgba(0,0,0,.04);
52+
padding:18px 20px;
53+
font-size: 1.125rem;
54+
}
55+
.player2Side{
56+
background:#fff;
57+
border:1px solid #e5e7eb;
58+
border-radius:16px;
59+
box-shadow:0 6px 22px rgba(0,0,0,.04);
60+
padding:18px 20px;
61+
font-size: 1.125rem;
62+
}
63+
p{
64+
margin:8px 0;
65+
}
66+
#currentPlayer{
67+
grid-column: 1 / -1;
68+
text-align: center;
69+
margin: 0 0 12px;
70+
}
71+
#rolled1{
72+
grid-column: 1 / -1;
73+
text-align: center;
74+
margin-top: 12px;
75+
min-height: 24px;
76+
}

‎hw2/main.html‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,24 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<title>Game Menu</title>
8-
<link href="style.css" rel="stylesheet">
8+
<link href="main_style.css" rel="stylesheet">
99
</head>
1010
<body>
11-
<h1>Hello! Welcome to the dice game PIG! Before you begin, please type your Username!</h1>
11+
<div class="main">
12+
<div class="intro">
13+
<h1>Hello! Welcome to the dice game PIG! Before you begin, please type your Username!</h1>
14+
</div>
15+
<label for="username1">Player 1:
16+
<input id="username1">
17+
</label>
18+
<label for="username2"> Player 2:
19+
<input id="username2">
20+
</label>
21+
<p id="error"></p>
1222

13-
<label for="username1">Player 1:
14-
<input id="username1">
15-
</label> Player 2:
16-
<label for="username2">
17-
<input id="username2">
18-
</label>
19-
<p id="error"></p>
20-
21-
22-
<button id="startBtn">Start Game!</button>
2323

24+
<button id="startBtn">Start Game!</button>
25+
</div>
2426
<script src="menuScript.js"></script>
2527
</body>
2628
</html>

‎hw2/main_style.css‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
button{
2+
background:rgb(24, 24, 24);
3+
color:white;
4+
border-radius:12px;
5+
border:none;
6+
padding:12px 16px;
7+
cursor:pointer;
8+
width:100%;
9+
margin-top:16px;
10+
transition:transform .2s ease;
11+
box-sizing:border-box;
12+
}
13+
button:hover {
14+
transform: scale(1.05);
15+
}
16+
body{
17+
margin:0;
18+
font-family: Roboto;
19+
color: black;
20+
21+
display:grid;
22+
place-items:start center;
23+
padding:48px 16px;
24+
}
25+
.main{
26+
width:100%;
27+
max-width:720px;
28+
background:white;
29+
border:1px solid black;
30+
border-radius:16px;
31+
box-shadow:0 8px 30px rgba(0,0,0,.06);
32+
padding:32px;
33+
}
34+
.intro{
35+
text-align:center;
36+
margin:0 0 20px;
37+
}
38+
label{
39+
display:block;
40+
font-weight:600;
41+
margin:18px 0 12px;
42+
color:black;
43+
}
44+
input{
45+
width:100%;
46+
padding:12px 14px;
47+
border:1px solid black;
48+
border-radius:12px;
49+
background:white;
50+
outline:none;
51+
transition:border-color .2s, box-shadow .2s;
52+
box-sizing:border-box;
53+
}
54+
input:focus{
55+
border-color:#1c1fe7;
56+
box-shadow:0 0 0 4px rgba(99,102,241,.12);
57+
}

‎hw2/menuScript.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ startBtn.addEventListener("click", function(){
1212
window.location.href = "game.html";
1313
}
1414
else {
15-
error.textContent = "Please enter a username!";
15+
error.textContent = "Please enter both usernames!";
1616
error.style.color = "red";
1717
}
1818
});

‎hw2/script.js‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ let player1ScoreText = document.querySelector("#player1ScoreText");
1111
let player2ScoreText = document.querySelector("#player2ScoreText");
1212
let currentPlayer1ScoreText = document.querySelector("#currentPlayer1ScoreText");
1313
let currentPlayer2ScoreText = document.querySelector("#currentPlayer2ScoreText");
14+
let currentPlayer = document.querySelector("#currentPlayer");
15+
let rolled1 = document.querySelector("#rolled1");
1416

1517
let player1Score = 0;
1618
let currentPlayer1Score = 0;
@@ -21,10 +23,16 @@ let isPlayerTurn = true;
2123

2224

2325
function updateUI() {
24-
player1ScoreText.textContent = `${NAME1}'s Score: ${player1Score}`;
25-
currentPlayer1ScoreText.textContent = `${NAME1}'s Turn: ${currentPlayer1Score}`;
26-
player2ScoreText.textContent = `${NAME2}'s Score: ${player2Score}`;
27-
currentPlayer2ScoreText.textContent = `${NAME2}'s Turn: ${currentPlayer2Score}`;
26+
if(isPlayerTurn){
27+
currentPlayer.textContent = `${NAME1}'s Turn`;
28+
}
29+
else{
30+
currentPlayer.textContent = `${NAME2}'s Turn`;
31+
}
32+
player1ScoreText.textContent = `Score: ${player1Score}`;
33+
currentPlayer1ScoreText.textContent = `Turn Score: ${currentPlayer1Score}`;
34+
player2ScoreText.textContent = `Score: ${player2Score}`;
35+
currentPlayer2ScoreText.textContent = `Turn Score: ${currentPlayer2Score}`;
2836
}
2937
updateUI();
3038

@@ -66,7 +74,10 @@ roll.addEventListener("click", function(){
6674

6775
const value = rollDice();
6876
dice.textContent = DIE[value - 1];
77+
rolled1.textContent = "";
6978
if(value === 1){
79+
rolled1.textContent = "YOU ROLLED A ONE!";
80+
rolled1.style.color = "red";
7081
if (isPlayerTurn) {
7182
currentPlayer1Score = 0;
7283
} else {

0 commit comments

Comments
 (0)