Skip to content

Commit

Permalink
v8.10 update for fiveOnline
Browse files Browse the repository at this point in the history
  • Loading branch information
@aiksxd
aiksxd committed Aug 10, 2024
1 parent 45b94cb commit f32141a
Show file tree
Hide file tree
Showing 5 changed files with 169 additions and 70 deletions.
110 changes: 82 additions & 28 deletions P2PGameFiveOnLineHost.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,8 +70,9 @@
<div id="playersList"></div>
<span id="nowTurn">Now Turn: 1 </span>
<span id="sumOfRoom">Members: 1</span><br />
<input type="checkbox" id="ifAutoClean">Auto-clean Msgs[max to 100]<br />
<input type="checkbox" id="ifAutoClean">Auto-clean Msgs[max->100]<br />
<button onclick="cleanMsg()">CleanMsgs</button><br />
Click number to kick player in game.
</div>
</div>

Expand Down Expand Up @@ -140,7 +141,7 @@
const WebVideo = document.getElementById('canvasMap');

// For game
let players = [5];
let players = [5]; // [ maxPlayerNumber, [number, peerId, icon, name] ]
let deliver = null;
let unavailablePosition = [];
let positionOwners = [];
Expand All @@ -160,6 +161,7 @@
let gameMap = [mapSize]
let startTime = null;
let myNumber = null;
let kickNumbers = new Array();
let offlinePlayer = [];
let lastGameMap = null;
let gameInfo = [6, players, gameMap, gameMode, startTime, unavailablePosition, positionOwners];
Expand Down Expand Up @@ -284,7 +286,7 @@
}
}
if(! position){
let newPlayer = [players.length, data[2], data[3], data[4]]
let newPlayer = [players.length, data[2], data[3], data[4]]; // [number, peerId, icon, name]
players.push(newPlayer);
displayNewPlayer(newPlayer);
liveSend([8, 1, newPlayer]);
Expand Down Expand Up @@ -593,6 +595,17 @@
if(turn >= players.length){
turn = 1;
}
let controller = false;
while (kickNumbers.includes(turn)) {
turn++;
if(turn >= players.length){
if (controller) {
break;
}
turn = 1;
controller = true;
}
}
if (turn == myNumber) {
document.getElementById("canvasMap").style.backgroundColor = 'rgb(80,83,80)';
}
Expand Down Expand Up @@ -654,12 +667,23 @@
}


function reDraw(playerNumber) {
function reDraw(playerNumber, reDrawType) {
let t = 0;
let aims = document.getElementsByClassName("owner"+ playerNumber);
while (t < aims.length) {
aims[t].setAttribute('src', players[playerNumber][2]);
}
let aims = document.getElementsByClassName("owner"+ playerNumber);
while (t < aims.length) {
aims[t].removeAttribute("style");
switch (reDrawType) {
case 1: // update chessmans icon
aims[t].setAttribute('src', players[playerNumber][2]);
break;
case 2: // kick someone
aims[t].removeAttribute("src");
aims[t].classList.remove("owner"+ playerNumber);
break;
default:
break;
}
}
}

function energy() {
Expand All @@ -680,29 +704,57 @@
function kick(number) {
if(confirm("Do you want to kick the "+number+"th player?")){
liveSend([8, 2, Number(number)]);
let i = number;
players.splice(i, 1);
document.getElementsByClassName("playersInfo")[i-1].remove();
while(i<players.length){
if(players[i] instanceof Array){
players[i][0]--;
let player = players[i];
if(!player[2]){
let colour = 255*((player[0] + 2)/(player[0] + 4));
document.getElementsByClassName("playersInfo")[i-1].children[1].setAttribute("style", "background-color: rgb("+parseInt(((((player[0]+1) % 5) + 1)/5)*colour)+", "+parseInt(((((player[0]+1) % 4) + 1)/4)*colour)+", "+parseInt(((((player[0]+1) % 3) + 1)/3)*colour)+")");
// let i = number;
kickNumbers.push(number);
// players.splice(i, 1);
document.getElementsByClassName("playersInfo")[number-1].childNodes[2].innerHTML = document.getElementsByClassName("playersInfo")[number-1].childNodes[2].innerHTML + "(kicked)";
if (number == myNumber) {
document.getElementById("canvasMap").style.backgroundColor = 'rgb(34,39,46)';
myNumber = null;
}
if (turn == number) {
turn++;
if(turn >= players.length){
turn = 1;
}
let controller = false;
while (kickNumbers.includes(turn)) {
turn++;
if(turn >= players.length){
if (controller) {
alert("Error: no player in game");
break;
}
turn = 1;
controller = true;
}
document.getElementsByClassName("playersInfo")[i-1].children[0].setAttribute("onclick", "kick("+ player[0] +")");
document.getElementsByClassName("playersInfo")[i-1].children[0].innerHTML = i+": ";
}
i++;
}
if(number < myNumber){
myNumber--;
}
if(turn >= players.length){
turn = 1;
if (turn == myNumber) {
document.getElementById("canvasMap").style.backgroundColor = 'rgb(80,83,80)';
}
document.getElementById("nowTurn").innerHTML = "Now Turn: "+turn+" ";
}
appearMsg([ 0, null, "System", "player: "+ players[number][3]+" was kicked"]);
// while(i<players.length){
// if(players[i] instanceof Array){
// players[i][0]--;
// let player = players[i];
// if(!player[2]){ // kick and change default color
// let colour = 255*((player[0] + 2)/(player[0] + 4));
// document.getElementsByClassName("playersInfo")[i-1].children[1].setAttribute("style", "background-color: rgb("+parseInt(((((player[0]+1) % 5) + 1)/5)*colour)+", "+parseInt(((((player[0]+1) % 4) + 1)/4)*colour)+", "+parseInt(((((player[0]+1) % 3) + 1)/3)*colour)+")");
// }
// document.getElementsByClassName("playersInfo")[i-1].children[0].setAttribute("onclick", "kick("+ player[0] +")");
// document.getElementsByClassName("playersInfo")[i-1].children[0].innerHTML = i+": ";
// }
// i++;
// }
// if(number < myNumber){
// myNumber--;
// }
// if(turn >= players.length){
// turn = 1;
// document.getElementById("nowTurn").innerHTML = "Now Turn: "+turn+" ";
// }
}
}

Expand Down Expand Up @@ -811,7 +863,9 @@
root.close();
// event.preventDefault();
});

if (/Mobi|Android|iPhone/i.test(navigator.userAgent)) {
document.getElementById("playersList").style.maxHeight = '200px';
}
</script>
</body>
</html>
120 changes: 82 additions & 38 deletions P2PGameFiveOnLinePlayer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,8 @@
<div id="playersList"></div>
<span id="nowTurn">Now Turn: 1 </span>
<span id="sumOfRoom">Members: 1</span><br />
<input type="checkbox" id="ifAutoClean">Auto-clean Msgs[max to 100]<br />
<input type="checkbox" id="ifAutoClean">Auto-clean Msgs[max->100]<br />
<button onclick="cleanMsg()">CleanMsgs</button><br />
</div>
</div>

Expand Down Expand Up @@ -137,6 +138,7 @@
let gameMap = [mapSize]
let startTime = null;
let myNumber = null;
let kickNumbers = new Array();
let offlinePlayer = [];
let lastGameMap = null;
let gameInfo = [6, players, gameMap, gameMode, startTime, unavailablePosition, positionOwners];
Expand Down Expand Up @@ -429,6 +431,7 @@
}
}
displayNewPlayer(data[2]);
break;
case 2: // kick SB
deliverId = parent.peer;
liveSend(data);
Expand All @@ -437,44 +440,69 @@
if(document.getElementById("join")){
document.getElementById("join").innerHTML = "Join Game";
}
document.getElementById("canvasMap").style.backgroundColor = 'rgb(28, 33, 40)';
}
let i = 1;
let position = false;
while(i<players.length){
if(players[i] instanceof Array){
if(position){
players[i][0]--;
document.getElementsByClassName("playersInfo")[i-1].children[0].innerHTML = i+": ";
if(!players[i][2]){
player = players[i];
let colour = 255*((player[0] + 2)/(player[0] + 4));
document.getElementsByClassName("playersInfo")[i-1].children[1].setAttribute("style", "background-color: rgb("+parseInt(((((player[0]+1) % 5) + 1)/5)*colour)+", "+parseInt(((((player[0]+1) % 4) + 1)/4)*colour)+", "+parseInt(((((player[0]+1) % 3) + 1)/3)*colour)+")");
kickNumbers.push(data[2]);
document.getElementsByClassName("playersInfo")[data[2]-1].childNodes[2].innerHTML = document.getElementsByClassName("playersInfo")[data[2]-1].childNodes[2].innerHTML + "(kicked)";
if (turn == data[2]) {
turn++;
if(turn >= players.length){
turn = 1;
}
let controller = false;
while (kickNumbers.includes(turn)) {
turn++;
if(turn >= players.length){
if (controller) {
alert("Error: no player in game");
break;
}
turn = 1;
controller = true;
}
if(players[i][0] == data[2] && (!position)){ // refer to number
players.splice(i, 1);
document.getElementsByClassName("playersInfo")[i-1].remove();
position = i; // changed
} else {
i++;
}
} else {i++;}
}
if(position){
if(position < myNumber){
myNumber--;
}
}
if(turn >= players.length){
trun = 1;
if (turn == myNumber) {
document.getElementById("canvasMap").style.backgroundColor = 'rgb(80, 83, 80)';
}
document.getElementById("nowTurn").innerHTML = "Now Turn: "+turn+" ";
}
// if(data[3] == peer.id){
// peer.distory();
// } else if (audienceIds.includes(data[3])){
// audiences[audienceIds.indexOf(data[3])].close();
// let i = 1;
// // let position = false;
// while(i<players.length){
// if(players[i] instanceof Array){
// // if(position){
// // players[i][0]--;
// // document.getElementsByClassName("playersInfo")[i-1].children[0].innerHTML = i+": ";
// // if(!players[i][2]){ // kick and change default color
// // player = players[i];
// // let colour = 255*((player[0] + 2)/(player[0] + 4));
// // document.getElementsByClassName("playersInfo")[i-1].children[1].setAttribute("style", "background-color: rgb("+parseInt(((((player[0]+1) % 5) + 1)/5)*colour)+", "+parseInt(((((player[0]+1) % 4) + 1)/4)*colour)+", "+parseInt(((((player[0]+1) % 3) + 1)/3)*colour)+")");
// // }
// // }
// if(players[i][0] == data[2] && (!position)){ // refer to number
// // players.splice(i, 1);
// document.getElementsByClassName("playersInfo")[i-1].remove();
// position = i; // changed
// } else {
// i++;
// }
// } else {i++;}
// }
// appearMsg("..."); // kick Msg todo
// // if(position){
// // if(position < myNumber){
// // myNumber--;
// // }
// // }
// // if(turn >= players.length){
// // trun = 1;
// // document.getElementById("nowTurn").innerHTML = "Now Turn: "+turn+" ";
// // }
// // if(data[3] == peer.id){
// // peer.distory();
// // } else if (audienceIds.includes(data[3])){
// // audiences[audienceIds.indexOf(data[3])].close();
// // }
appearMsg([ 0, null, "System", "player: "+ players[data[2]][3]+" was kicked"]);
break;
case 3: // SB quit in gameing
// TODO
Expand Down Expand Up @@ -842,6 +870,9 @@
if(turn >= players.length){
turn = 1;
}
while (kickNumbers.includes(turn)) {
turn++;
}
if (turn == myNumber) {
document.getElementById("canvasMap").style.backgroundColor = 'rgb(80,83,80)';
}
Expand Down Expand Up @@ -902,12 +933,23 @@
}
}

function reDraw(playerNumber) {
function reDraw(playerNumber, reDrawType) {
let t = 0;
let aims = document.getElementsByClassName("owner"+ playerNumber);
while (t < aims.length) {
aims[t].setAttribute('src', players[playerNumber][2]);
}
let aims = document.getElementsByClassName("owner"+ playerNumber);
while (t < aims.length) {
aims[t].removeAttribute("style");
switch (reDrawType) {
case 1: // update chessmans icon
aims[t].setAttribute('src', players[playerNumber][2]);
break;
case 2: // kick someone
aims[t].removeAttribute("src");
aims[t].classList.remove("owner"+ playerNumber);
break;
default:
break;
}
}
}

function energy() {
Expand Down Expand Up @@ -1010,7 +1052,9 @@
}
// event.preventDefault();
});

if (/Mobi|Android|iPhone/i.test(navigator.userAgent)) {
document.getElementById("playersList").style.maxHeight = '200px';
}
</script>
</body>
</html>
2 changes: 1 addition & 1 deletion P2PLiveAudience.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@
</div>
<div class="box">
<span id="sumOfRoom">Members: 1</span><br />
<input type="checkbox" id="ifAutoClean">Auto-clean Msgs[max to 100]<br />
<input type="checkbox" id="ifAutoClean">Auto-clean Msgs[max->100]<br />
<button onclick="cleanMsg()">CleanMsgs</button><br />
</div>
</div>
Expand Down
3 changes: 2 additions & 1 deletion P2PLiveHost.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,8 @@
</div>
<div class="box">
<span id="sumOfRoom">Members: 1</span><br />
<input type="checkbox" id="ifAutoClean">Auto-clean Msgs[max to 100]<br />
<input type="checkbox" id="ifAutoClean">Auto-clean Msgs[max->100]<br />
<button onclick="cleanMsg()">CleanMsgs</button><br />
</div>
</div>

Expand Down
Loading

0 comments on commit f32141a

Please sign in to comment.