@@ -51,12 +51,13 @@ <h5 class="card-title">There are <span id="actors">0</span> actors loaded</h5>
5151 </ div >
5252 </ div >
5353 </ div >
54- <!--<div class="btn-group" role="group" aria-label="Basic outlined example">
55- <button type="button" class="btn btn-outline-primary opacity-75">Spawn Meteor</button>
56- <button type="button" class="btn btn-outline-primary opacity-75">Spawn Raincloud</button>
57- <button type="button" class="btn btn-outline-primary opacity-75">Spawn MetalSpot</button>
58- <button type="button" class="btn btn-outline-primary opacity-75">Spawn Fish/Ripple</button>
59- </div>-->
54+ < div class ="btn-group " role ="group " aria-label ="Basic outlined example ">
55+ < button id ="fish_spawn_alien " type ="button " class ="btn btn-outline-primary opacity-75 spawn "> Spawn Meteor</ button >
56+ < button id ="raincloud " type ="button " class ="btn btn-outline-primary opacity-75 spawn "> Spawn Raincloud</ button >
57+ < button id ="metalspot " type ="button " class ="btn btn-outline-primary opacity-75 spawn "> Spawn MetalSpot</ button >
58+ < button id ="fish_spawn " type ="button " class ="btn btn-outline-primary opacity-75 spawn "> Spawn Fish/Ripple</ button >
59+ < button id ="void_portal " type ="button " class ="btn btn-outline-primary opacity-75 spawn "> Spawn Void Portal</ button >
60+ </ div >
6061 </ div >
6162 < div class ="col-4 ">
6263 < div class ="card mb-4 ">
@@ -72,19 +73,41 @@ <h5 class="card-title">There are <span id="actors">0</span> actors loaded</h5>
7273 </ main >
7374 < script >
7475 const eventSource = new EventSource ( '/status' ) ;
76+
7577 const chat = document . getElementById ( 'chat' ) ;
7678 const playerList = document . getElementById ( 'playerlist' ) ;
7779 const message = document . getElementById ( 'message' ) ;
7880 const sendButton = document . getElementById ( 'send_message' ) ;
7981
82+
83+ // Add a eventlistener for the different stats that are being sent
84+ const stats = [ 'players' , 'banned' , 'actors' ]
85+ stats . forEach ( stat => {
86+ eventSource . addEventListener ( stat , event => {
87+ update ( stat , event . data ) ;
88+ } ) ;
89+ } ) ;
90+
91+ // Update the stats at the top
92+ function update ( name , data ) {
93+ let element = document . getElementById ( name ) ;
94+ element . innerHTML = `${ data } ;
95+ }
96+
97+ eventSource . onerror = function ( ) {
98+ console . error ( 'Connection to the server lost.' ) ;
99+ } ;
100+
101+ // Add the eventlistener for sending messages
80102 sendButton . addEventListener ( 'click' , ( e ) => sendMessage ( message . value ) ) ;
81103 message . addEventListener ( 'keypress' , ( e ) => {
82104 if ( e . key === "Enter" ) sendMessage ( message . value ) ;
83105 } ) ;
84106
107+ // Send a message to all players
85108 function sendMessage ( msg ) {
86109 message . value = "" ;
87- fetch ( "chat" , {
110+ fetch ( "action/ chat/ " , {
88111 method : "POST" ,
89112 body : msg ,
90113 headers : {
@@ -93,43 +116,86 @@ <h5 class="card-title">There are <span id="actors">0</span> actors loaded</h5>
93116 } ) ;
94117 }
95118
96- function update ( name , data ) {
97- let element = document . getElementById ( name ) ;
98- element . innerHTML = `${ data } ;
99- }
100-
101- const stats = [ 'players' , 'banned' , 'actors' ]
102- stats . forEach ( stat => {
103- eventSource . addEventListener ( stat , event => {
104- update ( stat , event . data ) ;
105- } ) ;
106- } ) ;
107-
119+ // Append messages to list
108120 eventSource . addEventListener ( 'message' , event => {
109-
110121 let chatElement = document . createElement ( 'li' ) ;
111122 chatElement . className = "list-group-item" ;
112123 chatElement . innerHTML = event . data ;
113124 chat . appendChild ( chatElement )
114125 chat . scrollTop = chat . scrollHeight ;
115126 } ) ;
116127
128+
129+ // Add the eventlistener for spawning actors
130+ Array . from ( document . getElementsByClassName ( 'spawn' ) ) . forEach ( function ( element ) {
131+ element . addEventListener ( 'click' , ( e ) => spawnActor ( element . id ) ) ;
132+ } ) ;
133+
134+ // Spawn the actor of the given type
135+ function spawnActor ( actor ) {
136+ fetch ( 'action/spawn/' , {
137+ method : "POST" ,
138+ body : actor ,
139+ headers : {
140+ "Content-type" : "text/plain; charset=UTF-8"
141+ }
142+ } ) ;
143+ }
144+
145+ // Add the player to the list when they join
117146 eventSource . addEventListener ( 'join' , event => {
118- let playerElement = document . createElement ( 'li' ) ;
119- playerElement . className = "list-group-item" ;
120- playerElement . id = event . data ;
121- playerElement . innerHTML = event . data ;
147+ let eventPlayer = JSON . parse ( event . data ) ;
148+ let playerElement = createPlayerItem ( eventPlayer ) ;
122149 playerList . appendChild ( playerElement )
123150 } ) ;
124151
152+ // Create a list item with the player name and kick/ban buttons
153+ function createPlayerItem ( data ) {
154+ let listElement = document . createElement ( 'li' ) ;
155+ listElement . className = 'list-group-item d-flex align-items-center' ;
156+ listElement . id = data . SteamID . AccountId ;
157+
158+ // Player Name
159+ let playerName = document . createElement ( 'span' ) ;
160+ playerName . className = 'me-auto' ;
161+ playerName . innerHTML = data . Name ;
162+ listElement . appendChild ( playerName ) ;
163+
164+ // Kick Button
165+ let kickButton = document . createElement ( 'button' ) ;
166+ kickButton . className = 'btn btn-sm btn-primary' ;
167+ kickButton . innerHTML = 'Kick' ;
168+ kickButton . addEventListener ( 'click' , ( e ) => punishPlayer ( 'kick' , data . SteamID . AccountId ) )
169+ listElement . appendChild ( kickButton ) ;
170+
171+ // Ban Button
172+ let banButton = document . createElement ( 'button' ) ;
173+ banButton . className = 'btn btn-sm btn-danger ms-1' ;
174+ banButton . innerHTML = 'Ban' ;
175+ banButton . addEventListener ( 'click' , ( e ) => punishPlayer ( 'ban' , data . SteamID . AccountId ) )
176+ listElement . appendChild ( banButton ) ;
177+
178+ return listElement ;
179+ }
180+
181+ // Kick / Ban the player
182+ function punishPlayer ( type , player ) {
183+ fetch ( 'action/' + type + '/' , {
184+ method : "POST" ,
185+ body : player ,
186+ headers : {
187+ "Content-type" : "text/plain; charset=UTF-8"
188+ }
189+ } ) ;
190+ }
191+
192+ // Remove the player from the list when they leave
125193 eventSource . addEventListener ( 'leave' , event => {
126- let playerElement = document . getElementById ( event . data ) ;
194+ let eventPlayer = JSON . parse ( event . data ) ;
195+ let playerElement = document . getElementById ( eventPlayer . SteamID . AccountId ) ;
127196 playerList . removeChild ( playerElement )
128197 } ) ;
129198
130- eventSource . onerror = function ( ) {
131- console . error ( 'Connection to the server lost.' ) ;
132- } ;
133199 </ script >
134200 < script src ="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js " integrity ="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz " crossorigin ="anonymous "> </ script >
135201</ body >
0 commit comments