Skip to content

Commit

Permalink
Merge pull request #82 from joshzcold/generic_alert
Browse files Browse the repository at this point in the history 
New button to "show" a mistake happened without counting towards a team.
  • Loading branch information
@joshzcold
joshzcold authored Mar 24, 2024
2 parents d68472e + d2a5bc5 commit ec8c88b
Show file tree
Hide file tree
Showing 4 changed files with 190 additions and 145 deletions.
47 changes: 35 additions & 12 deletions components/admin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,22 +82,23 @@ function FinalRoundButtonControls(props) {
return controlRound?.map((x, i) => (
<div key={`round-${i}`} className="flex-col flex space-y-5 p-12 border-2">
<p className="text-3xl font-bold text-foreground">{x.question}</p>
{props.game.is_final_second &&
{props.game.is_final_second && (
<div className="flex flex-row space-x-5 pb-2">
{/* PARTNER'S ANSWER PROVIDED FINAL ROUND */}
<div className="w-48 flex-grow text-foreground text-3xl p-5 align-middle">
<i>{t("Partner's Answer")}</i>: {props.game.final_round[i].input || `(${t("No Answer")})`}
<i>{t("Partner's Answer")}</i>:{" "}
{props.game.final_round[i].input || `(${t("No Answer")})`}
</div>
{props.game.final_round[i].input &&
{props.game.final_round[i].input && (
<button
className="border-4 rounded p-5 text-2xl flex-grow bg-secondary-300 text-foreground"
onClick={() => props.send({ action: "duplicate" })}
>
{t("Already Answered")}
</button>
}
)}
</div>
}
)}
<div className="flex flex-row space-x-5 pb-2">
{/* ANSWER PROVIDED FINAL ROUND */}
<input
Expand Down Expand Up @@ -144,10 +145,12 @@ function FinalRoundButtonControls(props) {
<button
className="border-4 rounded p-5 text-2xl flex-grow bg-secondary-300 text-foreground"
onClick={() => {
x.points = (x.selection !== -1) ? x.answers[x.selection][1] : 0;
x.points = x.selection !== -1 ? x.answers[x.selection][1] : 0;
props.setGame((prv) => ({ ...prv }));
props.send({ action: "data", data: props.game });
props.send({ action: (x.selection !== -1) ? "final_submit" : "mistake" });
props.send({
action: x.selection !== -1 ? "final_submit" : "mistake",
});
}}
>
{t("Award points")}
Expand Down Expand Up @@ -227,7 +230,7 @@ function TitleLogoUpload(props) {
if (fileSize > 2098) {
console.error("Logo image is too large");
props.setError(
t("Logo image is too large. 2MB is the limit")
t("Logo image is too large. 2MB is the limit"),
);
return;
}
Expand All @@ -237,7 +240,7 @@ function TitleLogoUpload(props) {
rawData = evt.target.result;
var headerarr = new Uint8Array(evt.target.result).subarray(
0,
4
4,
);
var header = "";
for (var i = 0; i < headerarr.length; i++) {
Expand Down Expand Up @@ -276,7 +279,7 @@ function TitleLogoUpload(props) {
};
reader.readAsArrayBuffer(file);
}
document.getElementById("logoUpload").value = null
document.getElementById("logoUpload").value = null;
}}
/>
</div>
Expand Down Expand Up @@ -389,7 +392,7 @@ export default function Admin(props) {
setInterval(() => {
if (ws.current.readyState !== 1) {
setError(
`lost connection to server refreshing in ${10 - refreshCounter}`
`lost connection to server refreshing in ${10 - refreshCounter}`,
);
refreshCounter++;
if (refreshCounter >= 10) {
Expand Down Expand Up @@ -567,7 +570,7 @@ export default function Admin(props) {
setError(t("Unknown file type in game load"));
}
// allow same file to be selected again
document.getElementById("gamePicker").value = null
document.getElementById("gamePicker").value = null;
}}
/>
</div>
Expand Down Expand Up @@ -807,6 +810,26 @@ export default function Admin(props) {
>
{t("Next Round")}
</button>
<button
className="border-4 rounded p-10 flex-grow text-2xl bg-secondary-300 text-foreground flex flex-row justify-center items-center"
onClick={() => {
send({ action: "show_mistake" });
}}
>
<img className={`w-3/12`} src="x.svg" />
</button>
<button
className="border-4 rounded p-10 flex-grow text-2xl bg-secondary-300 text-foreground"
onClick={() => {
for (let team in props.game.teams) {
props.game.teams[team].mistakes = 0;
}
props.setGame((prv) => ({ ...prv }));
send({ action: "data", data: props.game });
}}
>
{t("Reset Mistakes")}
</button>
</div>

{/* GETS POINTS MISTAKE */}
Expand Down
197 changes: 104 additions & 93 deletions components/buzzer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ export default function Buzzer(props) {
const [buzzerReg, setBuzzerReg] = useState(null);
const [error, setErrorVal] = useState("");
const [timer, setTimer] = useState(0);
const [showMistake, setShowMistake] = useState(false);
let refreshCounter = 0;

function setError(e) {
Expand All @@ -29,7 +30,7 @@ export default function Buzzer(props) {
let game = props.game;
let ws = props.ws;

const send = function (data) {
const send = function(data) {
data.room = props.room;
data.id = props.id;
ws.current.send(JSON.stringify(data));
Expand All @@ -39,7 +40,7 @@ export default function Buzzer(props) {
setInterval(() => {
if (ws.current.readyState !== 1) {
setError(
`lost connection to server refreshing in ${10 - refreshCounter}`
`lost connection to server refreshing in ${10 - refreshCounter}`,
);
refreshCounter++;
if (refreshCounter >= 10) {
Expand All @@ -62,6 +63,15 @@ export default function Buzzer(props) {
// server gets the average latency periodically
console.debug(props.id);
send({ action: "pong", id: props.id });
} else if (json.action === "mistake" || json.action === "show_mistake") {
var audio = new Audio("wrong.mp3");
audio.play();
if (json.action === "mistake" || json.action === "show_mistake") {
setShowMistake(true);
setTimeout(() => {
setShowMistake(false);
}, 2000);
}
} else if (json.action === "quit") {
props.setGame(null);
props.setTeam(null);
Expand Down Expand Up @@ -112,6 +122,12 @@ export default function Buzzer(props) {
console.debug(game);
return (
<>
<img
className={`lg:w-1/2 sm:w-10/12 md:w-3/4 w-11/12 top-2/4 pointer-events-none ${
showMistake ? "opacity-90" : "opacity-0"
} transition-opacity ease-in-out duration-300 absolute`}
src="x.svg"
/>
<button
className="shadow-md rounded-lg p-2 bg-secondary-900 hover:bg-secondary-300 text-1xl font-bold uppercase w-24 self-end"
onClick={() => {
Expand All @@ -127,22 +143,25 @@ export default function Buzzer(props) {
<Round game={game} />

{/* Buzzer Section TODO replace with function*/}
<div className="" style={{ width: "100%", textAlign: "center" }}>
<div
className=""
style={{ width: "100%", textAlign: "center" }}
>
{buzzed ? (
<img
style={{ width: "50%", display: "inline-block" }}
src="buzzed.svg"
/>
) : (
<img
className="cursor-pointer"
style={{ width: "50%", display: "inline-block" }}
onClick={() => {
send({ action: "buzz", id: props.id });
}}
src="buzz.svg"
/>
)}
<img
className="cursor-pointer"
style={{ width: "50%", display: "inline-block" }}
onClick={() => {
send({ action: "buzz", id: props.id });
}}
src="buzz.svg"
/>
)}
<p className="text-secondary-900 p-2 italic">
{t("buzzer is reset between rounds")}
</p>
Expand Down Expand Up @@ -193,91 +212,83 @@ export default function Buzzer(props) {
</div>
</div>
) : (
<>
{game.is_final_round ? (
<div>
<Final game={game} timer={timer} />
</div>
) : (
<div>
{props.game.settings.logo_url ? (
<img
src={`${props.game.settings.logo_url}`}
/>
) : (
<TitleLogo
insert={props.game.title_text}
/>
<>
{game.is_final_round ? (
<div>
<Final game={game} timer={timer} />
</div>
) : (
<div>
{props.game.settings.logo_url ? (
<img src={`${props.game.settings.logo_url}`} />
) : (
<TitleLogo insert={props.game.title_text} />
)}
<p className="text-3xl text-center py-12 text-foreground">
{t("Waiting for host to start")}
</p>
</div>
)}
<p className="text-3xl text-center py-12 text-foreground">
{t("Waiting for host to start")}
</p>
</div>
)}
</>
)}
</>
)}
</>
) : (
<>
{props.game.settings.logo_url ? (
<img
src={`${props.game.settings.logo_url}`}
/>
) : (
<TitleLogo
insert={props.game.title_text}
/>
)}
<div className="flex flex-row justify-center">
<h1 className="text-3xl text-foreground">
{t("team")}:{" "}
{props.team != null
? game.teams[props.team].name
: t("pick your team")}
</h1>
</div>
<div className="grid grid-cols-2 gap-4">
<button
className="hover:shadow-md rounded-md bg-primary-200 p-5"
onClick={() => {
cookieCutter.set("session", `${props.room}:${props.id}:0`);
props.setTeam(0);
}}
>
{game.teams[0].name}
</button>
<>
{props.game.settings.logo_url ? (
<img src={`${props.game.settings.logo_url}`} />
) : (
<TitleLogo insert={props.game.title_text} />
)}
<div className="flex flex-row justify-center">
<h1 className="text-3xl text-foreground">
{t("team")}:{" "}
{props.team != null
? game.teams[props.team].name
: t("pick your team")}
</h1>
</div>
<div className="grid grid-cols-2 gap-4">
<button
className="hover:shadow-md rounded-md bg-primary-200 p-5"
onClick={() => {
cookieCutter.set("session", `${props.room}:${props.id}:0`);
props.setTeam(0);
}}
>
{game.teams[0].name}
</button>

<button
className="hover:shadow-md rounded-md bg-primary-200 p-5"
onClick={() => {
cookieCutter.set("session", `${props.room}:${props.id}:1`);
props.setTeam(1);
}}
>
{game.teams[1].name}
</button>
</div>
<div className="flex flex-row justify-center">
<button
className="py-8 px-16 hover:shadow-md rounded-md bg-success-200 uppercase"
onClick={() => {
if (props.team != null) {
send({ action: "registerbuzz", team: props.team });
} else {
let errors = [];
props.team == null
? errors.push(t("pick your team"))
: null;
setError(errors.join(` ${t("and")} `));
}
}}
>
{t("play")}
</button>
</div>
{error != null && error !== "" ? <p>👾 {error}</p> : null}
</>
)}
<button
className="hover:shadow-md rounded-md bg-primary-200 p-5"
onClick={() => {
cookieCutter.set("session", `${props.room}:${props.id}:1`);
props.setTeam(1);
}}
>
{game.teams[1].name}
</button>
</div>
<div className="flex flex-row justify-center">
<button
className="py-8 px-16 hover:shadow-md rounded-md bg-success-200 uppercase"
onClick={() => {
if (props.team != null) {
send({ action: "registerbuzz", team: props.team });
} else {
let errors = [];
props.team == null
? errors.push(t("pick your team"))
: null;
setError(errors.join(` ${t("and")} `));
}
}}
>
{t("play")}
</button>
</div>
{error != null && error !== "" ? <p>👾 {error}</p> : null}
</>
)}
</>
);
} else {
Expand Down
Loading

0 comments on commit ec8c88b

Please sign in to comment.