Skip to content

Commit

Permalink
Update html files
Browse files Browse the repository at this point in the history
  • Loading branch information
@Lauraluu04
Lauraluu04 committed Apr 15, 2024
1 parent 516ae4d commit 762eb0e
Show file tree
Hide file tree
Showing 3 changed files with 50 additions and 35 deletions.
2 changes: 1 addition & 1 deletion html/Styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@
.button5 {background-color: #555555;} /* Black */

textarea {resize:none;background-color:#e7e7e7;width:10;height:15;}
iframe {background-color:powderblue;frameBorder:0;scrolling:auto;width:135px;height:200px;}
iframe {background-color:powderblue;frameBorder:0;scrolling:auto;width:140px;height:200px;}
table {
border: 1px solid black;
border-collapse: collapse;
Expand Down
54 changes: 36 additions & 18 deletions html/WordSearchGame.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
const WIDTH = 50;
const HEIGHT = 50;
var selected_letters = "";
var players = 2;
var nick = "unknown";
var pin = "XXXX";
//let idx = Math.round(0 + Math.random() * 4);
var idx = 5;
const PlayerToColor = new Map([[0,"red"],[1,"orange"],[2,"green"],[3,"black"],[4,"royalblue"],[5,"DarkViolet"]]);
function GameRoom()
Expand Down Expand Up @@ -116,7 +112,7 @@
document.getElementById("p7bt3").className="button button4";
}
}
function FindGame()
function FindGame(i)
{
nick=document.getElementById("name").value;
pin=document.getElementById("pin").value;
Expand All @@ -128,54 +124,64 @@
document.getElementById("page4").style.display="block";
document.getElementById("page6").style.display="none";
document.getElementById("page7").style.display="none";
if(i==1)
addRow("p4table",nick,players+"-Player")
else {
deleteRow("p4table")
addRow("p4table",nick,players+"-Player");
}
}
else {
document.getElementById("p2errMsg2").innerHTML="Please enter your name and create a new pin.";
}
}
function FindGame2()
function FindGame2(i)
{
let nick=document.getElementById("name2").value;
let pin=document.getElementById("pin2").value;
nick=document.getElementById("name2").value;
pin=document.getElementById("pin2").value;
if(nick != "" && pin != "") {
document.getElementById("p4p").innerHTML="You are: "+nick;
document.getElementById("p4p2").innerHTML="Game Type: "+players+"-Player";
document.getElementById("page2").style.display="none";
document.getElementById("page3").style.display="none";
document.getElementById("page4").style.display="block";
if(i==1)
addRow("p4table",nick,players+"-Player")
else {
deleteRow("p4table")
addRow("p4table",nick,players+"-Player");
}
}
else {
document.getElementById("p3errMsg2").innerHTML="Please enter your name and pin number";
}
}
function change_color(id) {
let x = id % WIDTH;
let y = Math.floor(id / HEIGHT);
let x = id % 50;
let y = Math.floor(id / 50);
const letter = document.getElementById(id).innerHTML;
selected_letters += letter
document.getElementById("p5ta").value="selected "+letter+" at coordinate ("+x+","+y+")\nselected letters="+selected_letters;
let bcolor = document.getElementById(id).style.backgroundColor;
if(bcolor == "royalblue")
document.getElementById(id).style.backgroundColor = "PaleTurquoise";
else
document.getElementById(id).style.backgroundColor = "royalblue";
}
const Buttons = new Array(WIDTH*HEIGHT);
for (let index=0;index<Buttons.length;index++) {
const squareGrid = new Array(2500);
for (let index=0;index<squareGrid.length;index++) {
let charCode = Math.round(65 + Math.random() * 25);
Buttons[index]=String.fromCharCode(charCode);
squareGrid[index]=String.fromCharCode(charCode);
const button = document.createElement("button");
button.setAttribute("id",index);
button.setAttribute("onclick","change_color("+index+");");
button.innerHTML = Buttons[index];
button.innerHTML = squareGrid[index];
if(index % 50 == 0) {
linebreak = document.createElement("br");
board.appendChild(linebreak);
}
board.appendChild(button);
}
function ResetBoard() {
for (let i=0;i<Buttons.length;i++) {
for (let i=0;i<squareGrid.length;i++) {
let charCode = Math.round(65 + Math.random() * 25);
document.getElementById(i).innerHTML=String.fromCharCode(charCode);
let bcolor = document.getElementById(i).style.backgroundColor;
Expand All @@ -184,8 +190,20 @@
}
document.getElementById("p5ta").value=" ";
}
function addRow(tableID,item1,item2) {
var table = document.getElementById(tableID);
var row = table.insertRow(table.rows.length);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = item1;
cell2.innerHTML = item2;
}
function deleteRow(tableID) {
var table = document.getElementById(tableID);
table.deleteRow(table.rows.length-1);
}

var countDownDate = new Date("April 13, 2024 22:00:00").getTime();
var countDownDate = new Date("May 1, 2024 22:00:00").getTime();

// Update the count down every 1 second
var x = setInterval(function() {
Expand Down
29 changes: 13 additions & 16 deletions html/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,13 @@
</head>
<body>
<div id="page1" style="display:block;">
<center><h1 style="color:Navy;background-color:GreenYellow;display:block;">THE WORLD SEARCH GAME</h1>
<center><h1 style="color:Navy;background-color:GreenYellow;display:block;">THE WORD SEARCH GAME</h1>
<button class="button button4" onclick="NewPlayer()">New Player</button>
<button class="button button4" onclick="ReturnPlayer()">Returning Player</button></center>
</div>
<div id="page2" style="display:none;">
<center>
<h1 style="color:Navy;background-color:GreenYellow;display:block;">THE WORLD SEARCH GAME</h1>
<h1 style="color:Navy;background-color:GreenYellow;display:block;">THE WORD SEARCH GAME</h1>
<button class="button" onclick="">New Player</button>
<button class="button button4" onclick="ReturnPlayer()">Returning Player</button>
<h3>Welcome new player! Enter a unique player name.</h3>
Expand All @@ -26,13 +26,13 @@ <h4 id="p2Msg2" style="">Choose a game type.</h4>
<button id="p2bt3" class="button" onclick="SelectPlayer('p2bt3')">2-Player</button>
<button id="p2bt4" class="button button4" onclick="SelectPlayer('p2bt4')">3-Player</button>
<button id="p2bt5" class="button button4" onclick="SelectPlayer('p2bt5')">4-Player</button><br/>
<button id="p2bt6" class="button button2" onclick="FindGame()">Find Game</button><br>
<button id="p2bt6" class="button button2" onclick="FindGame(1)">Find Game</button><br>
<label id="p2errMsg2" style="color:red;height:auto;"></label>
</center>
</div>
<div id="page3" style="display:none;">
<center>
<h1 style="color:Navy;background-color:GreenYellow;display:block;">THE WORLD SEARCH GAME</h1>
<h1 style="color:Navy;background-color:GreenYellow;display:block;">THE WORD SEARCH GAME</h1>
<button class="button button4" onclick="NewPlayer()">New Player</button>
<button class="button" onclick="">Returning Player</button>
<h3>Welcome back! Enter your player name and PIN.</h3>
Expand All @@ -45,7 +45,7 @@ <h4 id="p3Msg" style="">Choose a game type.</h4>
<button id="p3bt3" class="button" onclick="SelectPlayer('p3bt3')">2-Player</button>
<button id="p3bt4" class="button button4" onclick="SelectPlayer('p3bt4')">3-Player</button>
<button id="p3bt5" class="button button4" onclick="SelectPlayer('p3bt5')">4-Player</button><br/>
<button id="p3bt6" class="button button2" onclick="FindGame2()">Find Game</button><br>
<button id="p3bt6" class="button button2" onclick="FindGame2(1)">Find Game</button><br>
<label id="p3errMsg2" style="color:red;height:auto;"></label>
</center>
</div>
Expand All @@ -58,7 +58,7 @@ <h3 id="p4Msg" style="">Waiting for 1 player(s) to join your game.</h3><br/>
<p class="block" id="p4p3">Active games: 1/5</p>
</div>
<br><br>
<table>
<table id="p4table">
<tr >
<th colspan="2">Players Waiting</th>
</tr>
Expand All @@ -82,7 +82,7 @@ <h3 id="p4Msg" style="">Waiting for 1 player(s) to join your game.</h3><br/>
<br/>
<h3 id="p4Msg2" style="">Server Leaderboards</h3><br/>
<div class="row" style="">
<table>
<table id="p4table2">
<tr >
<th colspan="2">Games Won Leaderboard</th>
</tr>
Expand All @@ -104,7 +104,7 @@ <h3 id="p4Msg2" style="">Server Leaderboards</h3><br/>
<td>1</td>
</tr>
</table>
<table>
<table id="p4table3">
<tr >
<th colspan="2">Points Leaderboard</th>
</tr>
Expand All @@ -130,7 +130,7 @@ <h3 id="p4Msg2" style="">Server Leaderboards</h3><br/>
</center>
</div>
<div id="page5" style="display:none;">
<center><h1 style="color:Navy;background-color:GreenYellow;display:block;">THE WORLD SEARCH GAME</h1></center>
<center><h1 style="color:Navy;background-color:GreenYellow;display:block;">THE WORD SEARCH GAME</h1></center>
<div class="row">
<div class="" style="width:20%;float:left;">
<p>GAME TIME LEFT:</p>
Expand Down Expand Up @@ -218,12 +218,12 @@ <h3 id="p4Msg3" style="">Server Leaderboards</h3><br/>
</div>
</div>
<div class="row">
<div style="width:13%;float:left;" id="gamechat">
<div style="width:12%;float:left;" id="gamechat">
<center><p>GAME CHAT</p></center>
<br/><textarea id="p5ta" name="p5ta" rows="15" cols="18"></textarea>
</div>
<div class="btn-group" style="width:76%;float:left;" id="board"></div>
<div style="width:11%;float:right;" id="wordbank">
<div style="width:12%;float:right;" id="wordbank">
<center>
<p>WORD BANK</p>
<br/><iframe src="words.txt" title="Word Bank"></iframe><br><br>
Expand Down Expand Up @@ -261,7 +261,7 @@ <h4 id="p6Msg">Select Game Type for new game.</h4>
<button id="p6bt3" class="button" onclick="SelectPlayer('p6bt3')">2-Player</button>
<button id="p6bt4" class="button button4" onclick="SelectPlayer('p6bt4')">3-Player</button>
<button id="p6bt5" class="button button4" onclick="SelectPlayer('p6bt5')">4-Player</button><br/>
<button id="p6bt6" class="button button2" onclick="FindGame()">Find Game</button><br>
<button id="p6bt6" class="button button2" onclick="FindGame(0)">Find Game</button><br>
<label id="errMsg2" style="color:red;height:auto;"></label>

</center>
Expand Down Expand Up @@ -291,13 +291,10 @@ <h4 id="p7Msg" style="">Select Game Type for new game.</h4>
<button id="p7bt3" class="button" onclick="SelectPlayer('p7bt3')">2-Player</button>
<button id="p7bt4" class="button button4" onclick="SelectPlayer('p7bt4')">3-Player</button>
<button id="p7bt5" class="button button4" onclick="SelectPlayer('p7bt5')">4-Player</button><br/>
<button id="p7bt6" class="button button2" onclick="FindGame()">Find Game</button><br>
<button id="p7bt6" class="button button2" onclick="FindGame(0)">Find Game</button><br>
<label id="errMsg2" style="color:red;height:auto;"></label>
</center>
</div>


</body>

<script src = "WordSearchGame.js"></script>
</html>

0 comments on commit 762eb0e

Please sign in to comment.