Skip to content

Commit

Permalink
Merge pull request #30 from joshzcold/team_viewer
Browse files Browse the repository at this point in the history 
team viewer/kicker component
  • Loading branch information
@joshzcold
joshzcold authored Jun 13, 2021
2 parents b196dbc + f6884d9 commit 80318c2
Show file tree
Hide file tree
Showing 4 changed files with 121 additions and 30 deletions.
67 changes: 67 additions & 0 deletions components/Admin/players.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
import { useTranslation } from "react-i18next";
import '../../i18n/i18n'
import "tailwindcss/tailwind.css";
import { useState, useEffect, useRef } from 'react';

export default function Players(props){
let game = props.game
const { i18n, t } = useTranslation();
let team1 = []
let team2 = []

if(game.registeredPlayers){
for (const [id, player] of Object.entries(game.registeredPlayers)) {
if(player.hasOwnProperty("team")){
let content = {id: id, name: player.name}
player.team === 0? team1.push(content) : team2.push(content)
}
}
}

function teamSection(team){
return(
<div>
{team.map((x,i) =>
<div class="border-2 flex flex-row space-x-5 items-center m-2">
{/* information about player */}
<div class="flex-grow">
<p class="uppercase">{x.name}</p>
</div>
<button class="border-4 bg-red-300 hover:bg-red-500 p-2 rounded-lg" onClick={() => {
// props.send({action: "quit", id: })
props.ws.current.send(JSON.stringify({
action:"quit", host: false,
id: x.id, room: props.room
}))
}}>
{/* cancel.svg */}
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 717 718" ><path d="M651.22 154c98 139 85 334-40 459s-318 137-458 40c-16-12-34-26-49-40c-15-15-28-32-39-49c-98-139-86-334 39-459s319-137 459-40c16 12 33 26 48 40c15 15 29 32 40 49zm-522 345l370-370c-104-63-242-50-331 39c-90 90-102 228-39 331zm458-280l-370 369c104 63 242 50 331-39c90-90 102-227 39-330z" fill="#ffffff"/><rect x="0" y="0" width="717" height="718" fill="rgba(0, 0, 0, 0)" /></svg>
</button>
</div>
)}

</div>
)
}

return(
<div class="flex-grow ">
<div class="h-48 overflow-y-scroll border-4 rounded p-2 text-center flex flex-row flex-grow">
{/* team 1 section */}
<div class="flex-grow">
<p>{ game.teams[0].name }</p>
<hr/>
{teamSection(team1)}
</div>
{/* seperator */}
<div class="bg-gray-300 border h-full"/>
{/* team 2 section */}
<div class="flex-grow">
<p>{ game.teams[1].name }</p>
<hr/>
{teamSection(team2)}
</div>
</div>
</div>
)
}
75 changes: 46 additions & 29 deletions components/admin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { useState, useEffect, useRef } from 'react';
import "tailwindcss/tailwind.css";
import { useTranslation } from "react-i18next";
import '../i18n/i18n'
import Players from './Admin/players'
import LanguageSwitcher from "./language"

export default function Admin(props){
Expand Down Expand Up @@ -99,13 +100,13 @@ export default function Admin(props){
</button>
</a>
</div>
<div class="flex-grow">
<a href="/new">
<button class="hover:shadow-md rounded-md bg-blue-200 p-2">
{t("newGame")}
</button>
</a>
</div>
<div class="flex-grow">
<a href="/new">
<button class="hover:shadow-md rounded-md bg-blue-200 p-2">
{t("newGame")}
</button>
</a>
</div>
<button class="hover:shadow-md rounded-md bg-red-200 p-2"
onClick={() => {
props.quitGame(true)
Expand Down Expand Up @@ -328,30 +329,46 @@ export default function Admin(props){

{!game.is_final_round?
<div>
<div class="border-4 rounded m-5 p-5 space-y-2 text-center">
<h1 class="text-2xl">{t("buzzerOrder")}</h1>
<hr/>
<div>
{game.buzzed.map((x,i) =>
<div class="flex flex-row space-x-5 justify-center">
<p>{t("number", {count: i+1})}. {game.registeredPlayers[x.id].name}</p>
<p>{t("team")}: {game.teams[game.registeredPlayers[x.id].team].name}</p>
<p>{t("time")}: {(((x.time - game.tick)/1000) % 60).toFixed(2)} {t("seconds")}</p>
</div>
)}
<div class="grid grid-cols-2 gap-4 p-5">
<h1 class="text-2xl capitalize">{t("buzzerOrder")}</h1>
<h1 class="text-2xl capitalize">{t("players")}</h1>
<div class="border-4 h-48 overflow-y-scroll rounded p-5 text-center">
<div class="flex flex-col h-full space-y-2 justify-between">
<div class="">
{game.buzzed.length > 0?
<div class="flex flex-row items-center space-x-5">
{/* active clear buzzers button */}
<button class="border-4 bg-red-200 hover:bg-red-400 rounded-lg p-2" onClick={() => {
send({action: "clearbuzzers"})
}} >
{t("clearBuzzers")}
</button>
<p class="text-black text-opacity-50">{t("buzzerHelpText")}</p>
</div>
:
<div class="flex flex-row items-center space-x-5">
{/* disabled clear buzzers button */}
<button class="border-4 bg-gray-300 rounded-lg p-2" >
{t("clearBuzzers")}
</button>
<p class="text-black text-opacity-50">{t("buzzerHelpText")}</p>
</div>
}
</div>
<hr/>
<div class="flex-grow">
{game.buzzed.map((x,i) =>
<div class="flex flex-row space-x-5 justify-center">
<p>{t("number", {count: i+1})}. {game.registeredPlayers[x.id].name}</p>
<p>{t("team")}: {game.teams[game.registeredPlayers[x.id].team].name}</p>
<p>{t("time")}: {(((x.time - game.tick)/1000) % 60).toFixed(2)} {t("seconds")}</p>
</div>
)}

<hr/>
</div>
</div>
</div>
{game.buzzed.length > 0?
<div class="flex flex-row items-center space-x-5">
<button class="border-4 bg-red-200 rounded-lg p-2" onClick={() => {
send({action: "clearbuzzers"})
}} >
{t("clearBuzzers")}
</button>
<p class="text-black text-opacity-50">{t("buzzerHelpText")}</p>
</div>:null
}
<Players game={game} ws={ws} room={props.room}/>
</div>
<div class="text-center">
<h2 class="text-2xl p-2 ">{t("gameBoard")}</h2>
Expand Down
1 change: 0 additions & 1 deletion pages/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,6 @@ export default function Home(){
else if (json.action === "quit"){
console.debug("player quit")
setPlayerID(null)
setRoomCode("")
setRegisteredRoomCode(null)
setGame({})
setHost(false)
Expand Down
8 changes: 8 additions & 0 deletions server.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -223,19 +223,27 @@ wss.on('connection', function connection(ws, req) {
clearInterval(entry)
}
}
// clear ws from server
if(rooms[message.room].connections){
for (const [id, ws_entry] of Object.entries(rooms[message.room].connections)) {
ws_entry.close()
}
}
delete rooms[message.room]
}else{
let interval = rooms[message.room].intervals[message.id]
console.debug("Clear interval =>", interval)
if(interval){
clearInterval(interval)
}
let ws = rooms[message.room].connections[message.id]
ws.send(JSON.stringify({ action: "quit" }))
rooms[message.room].game.buzzed.forEach((b, index) => {
if(b.id === message.id){
rooms[message.room].game.buzzed.splice(index, 1)
}
})
ws.close()
delete rooms[message.room].game.registeredPlayers[message.id]
delete rooms[message.room].connections[message.id]
wss.broadcast(message.room,JSON.stringify(
Expand Down

0 comments on commit 80318c2

Please sign in to comment.