Skip to content

Commit 671bad2

Browse files
josef-stipsjosef-stips
committed
finished current online games design
1 parent 4326494 commit 671bad2

File tree

4 files changed

+154
-10
lines changed

4 files changed

+154
-10
lines changed

‎src/script/public/App/UserPopUp.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -178,7 +178,8 @@ const TryToCloseUserInfoPopUp = () => {
178178
getComputedStyle(scoreboard_pop_up).display == "flex" ||
179179
getComputedStyle(SearchPlayerPopUp).display == "flex" ||
180180
getComputedStyle(FriendsListPopUp).display == "flex" ||
181-
getComputedStyle(gameLog_popUp).display != "none") {
181+
getComputedStyle(gameLog_popUp).display != "none" ||
182+
getComputedStyle(current_games_pop_up).display != "none") {
182183

183184
DarkLayer.style.display = "block";
184185

‎src/script/public/App/features/pop_ups/current_online_games.js

Lines changed: 61 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ class GlobalOnlineGames_PopUp {
1717
};
1818

1919
fetch() {
20-
this.list.textContent = null;
20+
// this.list.textContent = null;
2121

2222
return new Promise(resolve => {
2323
socket.emit('get_curr_online_games', cb => {
@@ -54,16 +54,57 @@ class OnlineGame {
5454
this.players_data = game_data.player_data_rows;
5555

5656
console.log(this.game_data);
57-
this.display();
57+
this.display(game_data);
5858
};
5959

60-
display() {
60+
display(data) {
6161
let item = document.createElement('li');
62-
this.declare_css_values(item);
63-
62+
let wrapper1 = document.createElement('div');
63+
let wrapper2 = document.createElement('div');
64+
let wrapper21 = document.createElement('div');
65+
let wrapper22 = document.createElement('div');
66+
let level_icon = document.createElement('img');
67+
let level_name = document.createElement('h1');
68+
let level_player_display = document.createElement('span');
69+
let player1_display = document.createElement('p');
70+
let player2_display = document.createElement('p');
71+
let point_relation = document.createElement('p');
72+
let blocker_el = document.createElement('p');
73+
74+
wrapper1.classList.add('game_item_wrapper1');
75+
wrapper2.classList.add('game_item_wrapper2');
76+
wrapper22.classList.add('game_item_wrapper22');
77+
wrapper21.classList.add('game_item_wrapper21');
78+
level_player_display.classList.add('game_item_player_wrapper');
79+
80+
player1_display.classList.add('cursor_btn');
81+
player2_display.classList.add('cursor_btn');
82+
83+
level_icon.src = data.costumIcon;
84+
level_name.textContent = data.fieldTitle;
85+
player1_display.textContent = `${data.player1_name} vs`;
86+
player2_display.textContent = `${data.player2_name}`;
87+
point_relation.textContent = `${data.p1_points ? data.p1_points : 0}:${data.p2_points ? data.p2_points : 0}`;
88+
blocker_el.textContent = `blocker: ${data.player3_id ? data.player3_name : 'None'}`;
89+
90+
blocker_el.style.margin = `0.5vw`;
91+
point_relation.style.margin = `0.5vw`;
6492

93+
this.declare_css_values(item);
94+
this.init_player_events(player1_display, player2_display, data.player1_id, data.player2_id);
6595

6696
this.game_handler.list.append(item);
97+
item.appendChild(wrapper1);
98+
item.appendChild(wrapper2);
99+
wrapper1.appendChild(level_icon);
100+
wrapper22.appendChild(level_name);
101+
wrapper22.appendChild(level_player_display);
102+
level_player_display.appendChild(player1_display);
103+
level_player_display.appendChild(player2_display);
104+
wrapper2.appendChild(wrapper22);
105+
wrapper2.appendChild(wrapper21);
106+
wrapper21.appendChild(point_relation);
107+
wrapper21.appendChild(blocker_el);
67108
};
68109

69110
declare_css_values(item) {
@@ -74,6 +115,20 @@ class OnlineGame {
74115
item.style.setProperty(`--second-color`, `var(--gradient-second-color-${this.game_data.RoomID})`);
75116
};
76117

118+
init_player_events(p1_el, p2_el, p1_id, p2_id) {
119+
p1_el.addEventListener('click', () => {
120+
socket.emit("GetDataByID", p1_id, cb => {
121+
ClickedOnPlayerInfo(cb);
122+
});
123+
});
124+
125+
p2_el.addEventListener('click', () => {
126+
socket.emit("GetDataByID", p2_id, cb => {
127+
ClickedOnPlayerInfo(cb);
128+
});
129+
});
130+
};
131+
77132
watch() {
78133
return new Promise(resolve => {
79134
socket.emit('try_to_watch_game', this.game_data.RoomID, cb => {
@@ -118,6 +173,6 @@ curr_games_pop_up_close_btn.addEventListener('click', () => {
118173
});
119174

120175
curr_games_pop_up_quest_btn.addEventListener('click', () => {
121-
let box = new QABOX(1, [`You can only watch online games`], { 'online games': 'green' }, { 'Y': [0, 0, 0, 0] }, false);
176+
let box = new QABOX(2, [`You can only watch online games.`, `select a game by clicking its row and click on "watch".`], { 'online games': 'green', 'select': 'green' }, { 'Y': [0, 0, 0, 0], 's': [0, 0, 0, 0] }, false);
122177
box.open();
123178
});

‎src/script/public/Game/processWinner.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -623,6 +623,15 @@ function chooseSubWinner(Player1_won, Player2_won, WinCombination, extra_points)
623623
scorePlayer1.textContent = score_Player1_numb;
624624
scoreUp_animation(1, score_Player1_numb, points_to_win);
625625

626+
try {
627+
if (personal_GameData.role == 'admin') {
628+
socket.emit('update_game_points', personal_GameData.currGameID, score_Player1_numb, score_Player2_numb);
629+
};
630+
631+
} catch (error) {
632+
console.log(error);
633+
};
634+
626635
// player made a point in advanture mode
627636
if (inAdvantureMode) {
628637
statusText.textContent = `You just gained a point!`;
@@ -682,6 +691,15 @@ function chooseSubWinner(Player1_won, Player2_won, WinCombination, extra_points)
682691
scorePlayer2.textContent = score_Player2_numb;
683692
scoreUp_animation(2, score_Player2_numb, points_to_win);
684693

694+
try {
695+
if (personal_GameData.role == 'admin') {
696+
socket.emit('update_game_points', personal_GameData.currGameID, score_Player1_numb, score_Player2_numb);
697+
};
698+
699+
} catch (error) {
700+
console.log(error);
701+
};
702+
685703
// the opponent made a point in advanture mode
686704
if (inAdvantureMode) {
687705
statusText.textContent = `the unknown just gained a point`;

‎src/script/public/index.css

Lines changed: 73 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11885,7 +11885,8 @@ ul.default_sb_list.best_players_list div:first-child {
1188511885

1188611886
.curr_games_main {
1188711887
width: 90%;
11888-
height: 80%;
11888+
height: 82%;
11889+
margin: 1vh 0 0 0;
1188911890
background-color: var(--bg-app-color);
1189011891
border: white solid 0.4vh;
1189111892
}
@@ -11902,7 +11903,9 @@ ul.default_sb_list.best_players_list div:first-child {
1190211903
--first-color: white;
1190311904
--second-color: red;
1190411905
width: 100%;
11905-
height: 22.5%;
11906+
height: 14vh;
11907+
min-height: 14vh;
11908+
max-height: 14vh;
1190611909
display: flex;
1190711910
flex-direction: row;
1190811911
border-bottom: 0.4vh solid white;
@@ -11928,7 +11931,7 @@ ul.default_sb_list.best_players_list div:first-child {
1192811931

1192911932
.curr_games_footer>i {
1193011933
font-size: 10vh;
11931-
top: -10vh;
11934+
top: -9.5vh;
1193211935
color: var(--line-color);
1193311936
position: absolute;
1193411937
}
@@ -11952,6 +11955,73 @@ ul.default_sb_list.best_players_list div:first-child {
1195211955
border-color: gray;
1195311956
}
1195411957

11958+
.game_item_wrapper1 {
11959+
/* border-right: 0.4vh solid white; */
11960+
width: 18%;
11961+
height: 100%;
11962+
display: flex;
11963+
align-items: center;
11964+
justify-content: center;
11965+
font-size: 3vw;
11966+
}
11967+
11968+
.game_item_wrapper2 {
11969+
height: 100%;
11970+
width: 82%;
11971+
display: flex;
11972+
align-items: flex-start;
11973+
justify-content: flex-start;
11974+
flex-direction: row;
11975+
}
11976+
11977+
.game_item_wrapper2 h1 {
11978+
font-size: 3vw;
11979+
color: white;
11980+
text-wrap: nowrap;
11981+
width: min-content;
11982+
}
11983+
11984+
.game_item_wrapper2 p {
11985+
font-size: 1.5vw;
11986+
color: rgb(139, 155, 172);
11987+
text-wrap: nowrap;
11988+
}
11989+
11990+
.game_item_wrapper1 img {
11991+
width: 4vw;
11992+
height: 4vw;
11993+
padding: 1vw;
11994+
border-radius: 100%;
11995+
border: 0.4vh solid white;
11996+
}
11997+
11998+
.game_item_player_wrapper {
11999+
width: 50%;
12000+
height: 100%;
12001+
display: flex;
12002+
flex-direction: row;
12003+
gap: 0.5vw;
12004+
align-items: flex-start;
12005+
justify-content: flex-start;
12006+
}
12007+
12008+
.game_item_wrapper22 {
12009+
display: flex;
12010+
flex-direction: column;
12011+
gap: 0.5vh;
12012+
width: -webkit-fill-available;
12013+
}
12014+
12015+
.game_item_wrapper21 {
12016+
display: flex;
12017+
flex-direction: column;
12018+
gap: 0.5vh;
12019+
align-items: flex-end;
12020+
justify-content: space-between;
12021+
width: 20%;
12022+
height: 100%;
12023+
}
12024+
1195512025

1195612026
/* Animations */
1195712027

0 commit comments

Comments
 (0)