@@ -2,6 +2,7 @@ import {BASE_URL, loadPage, WEBSOCKET_URL} from "./spa.js";
22import { getActiveUserNickname } from "./utils.js" ;
33import BaseComponent from "../components/Component.js" ;
44import { notify } from "../components/Notification.js" ;
5+
56class TournamentPlayers extends BaseComponent {
67 constructor ( state , parentElement ) {
78 super ( state , parentElement ) ;
@@ -24,111 +25,126 @@ class TournamentPlayers extends BaseComponent {
2425 ` ) . join ( "" ) }
2526 ` ;
2627 }
28+
2729 render ( ) {
2830 this . html = this . handleHTML ( ) ;
2931 super . render ( ) ;
3032
3133 }
3234}
33- function handleButtons ( players , socket )
34- {
35+
36+ function handleButtons ( players , socket ) {
3537 const nickname = getActiveUserNickname ( ) ;
3638 const buttonWrapper = document . getElementById ( "button-wrapper" ) ;
3739 let player = players . find ( player => player . nickname === nickname )
38- if ( ! player )
40+ if ( ! player )
3941 return
40- if ( player . owner )
41- {
42+ if ( player . owner ) {
4243 buttonWrapper . innerHTML = `<button id="start-button">Start</button>`
4344 let button = document . getElementById ( "start-button" ) ;
4445 button . addEventListener ( "click" , ( ) => {
4546 socket . send ( JSON . stringify ( { send_type : "start" , data : { nickname : nickname } } ) ) ;
4647 } ) ;
47- }
48- else
49- {
48+ } else {
5049 buttonWrapper . innerHTML = `<button id="ready-button">Ready</button>`
5150 let button = document . getElementById ( "ready-button" ) ;
5251 button . addEventListener ( "click" , ( ) => {
5352 socket . send ( JSON . stringify ( { send_type : "ready" , data : { nickname : nickname } } ) ) ;
5453 } ) ;
5554 }
5655}
57- function handleErrorStates ( data )
58- {
59- notify ( data . message , 3 , 'error' )
56+
57+ function handleErrorStates ( data ) {
58+ notify ( data . message , 3 , 'error' )
59+ setTimeout ( ( ) => {
60+ loadPage ( "/home/" )
61+ } , 3000 ) ;
6062}
61- function renderTournamentInfo ( response , socket )
62- {
63- let parentElement = document . getElementById ( "tournament-participants" ) ;
63+
64+ function renderTournamentInfo ( response , socket ) {
65+ let parentElement = document . getElementById ( "tournament-participants" ) ;
6466 const tournamentPlayers = new TournamentPlayers ( { players : response . data . players } , parentElement ) ;
6567 tournamentPlayers . render ( ) ;
66- handleButtons ( response . data . players , socket )
68+ handleButtons ( response . data . players , socket )
6769 document . getElementById ( "tournament-header" ) . innerText = response . data . tournament_name ;
6870}
69- function handleGameRedirection ( response )
70- {
71- for ( let game of response . data )
72- {
73- if ( game . players . includes ( getActiveUserNickname ( ) ) )
74- {
71+
72+ function handleGameRedirection ( response ) {
73+ for ( let game of response . data ) {
74+ if ( game . players . includes ( getActiveUserNickname ( ) ) ) {
7575 console . log ( "redirecting to game" )
7676 loadPage ( `/game/${ game . game_id } )
7777 }
7878 }
7979}
80- function connectToSocket ( )
81- {
80+
81+ function handleFinishedTournament ( response ) {
82+ let winner = response . data . winner ;
83+ console . log ( "winner" , winner )
84+ let winnerHTML = `
85+ <div class="winner-wrapper">
86+ <div class="winner-image-wrapper">
87+ <img src="${ BASE_URL } ${ winner . profile_picture }
88+ </div>
89+ <h1>Winner is ${ winner . nickname }
90+ </div>
91+ `
92+
93+ let element = document . createElement ( "div" ) ;
94+ element . id = "game-message-wrapper" ;
95+ element . innerHTML = winnerHTML ;
96+ document . body . appendChild ( element ) ;
97+ setTimeout ( ( ) => {
98+ loadPage ( "/home/" )
99+ } , 5000 ) ;
100+ }
101+
102+ function connectToSocket ( ) {
82103 let errorStates = [
83104 "invalid_profile" ,
84105 "invalid_tournament" ,
85106 "tournament_started" ,
86107 "players_not_ready" ,
87108 "invalid_params" ,
109+ "tournament_finished"
88110 ]
89- try
90- {
111+ try {
91112 const nickname = getActiveUserNickname ( ) ;
92- const tournamentId = window . location . pathname . split ( "/" ) . filter ( Boolean ) [ 1 ] ;
113+ const tournamentId = window . location . pathname . split ( "/" ) . filter ( Boolean ) [ 1 ] ;
93114 const url = `${ WEBSOCKET_URL } ${ nickname } ${ tournamentId } ;
94115 const socket = new WebSocket ( url ) ;
95116
96117 socket . onopen = ( ) => {
97- if ( localStorage . getItem ( "tournament_id" ) )
98- {
99- localStorage . removeItem ( "tournament_id" ) ;
100- console . log ( "sending check_match" )
101- socket . send ( JSON . stringify ( { send_type : "checkMatch" } ) ) ;
102- }
118+ if ( localStorage . getItem ( "tournament_id" ) ) {
119+ localStorage . removeItem ( "tournament_id" ) ;
120+ socket . send ( JSON . stringify ( { send_type : "checkMatch" } ) ) ;
121+ }
103122 }
104123 socket . onmessage = ( event ) => {
105124 const response = JSON . parse ( event . data ) ;
106125 console . log ( "socket sent data" , response )
107- if ( errorStates . includes ( response . send_type ) )
108- {
126+ if ( errorStates . includes ( response . send_type ) ) {
109127 handleErrorStates ( response ) ;
110128 }
111- if ( response . send_type === "tournament_info" )
112- {
113- renderTournamentInfo ( response , socket ) ;
114- }
115- else if ( response . send_type === "game_info" )
116- {
129+ if ( response . send_type === "tournament_info" ) {
130+ renderTournamentInfo ( response , socket ) ;
131+ } else if ( response . send_type === "game_info" ) {
117132 handleGameRedirection ( response ) ;
133+ } else if ( response . send_type === "tournament_finished" ) {
134+ handleFinishedTournament ( response ) ;
118135 }
119136 }
120137 socket . onclose = ( ) => {
121138 console . log ( "disconnected from the server" ) ;
122139 }
123140
124- }
125- catch ( e )
126- {
141+ } catch ( e ) {
127142 console . error ( e ) ;
128143 }
129144}
130- async function App ( )
131- {
145+
146+ async function App ( ) {
132147 connectToSocket ( )
133148}
149+
134150App ( ) . catch ( e => console . error ( e ) )
0 commit comments