added stream pre-game page
Avinav Bhandari
parent
6b850db777
commit
2ff4ae934a
@ -0,0 +1,227 @@
|
|||||||
|
<script>
|
||||||
|
import mqtt from "mqtt";
|
||||||
|
|
||||||
|
let div_id;
|
||||||
|
|
||||||
|
|
||||||
|
/** @type {string[]} */
|
||||||
|
|
||||||
|
let red_teams = [];
|
||||||
|
let blue_teams = [];
|
||||||
|
let field_matches = [];
|
||||||
|
|
||||||
|
|
||||||
|
let latest_start_time = 0;
|
||||||
|
let active_field = 0;
|
||||||
|
let offset = 0;
|
||||||
|
|
||||||
|
|
||||||
|
let event_name = "Mecha Mayhem 2024";
|
||||||
|
let match_name = "No Match";
|
||||||
|
let match_name_show = "No Match";
|
||||||
|
/** @type {string[]} */
|
||||||
|
let teams_red = [];
|
||||||
|
/** @type {string[]} */
|
||||||
|
let teams_blue = [];
|
||||||
|
|
||||||
|
/** @type {undefined | Date} */
|
||||||
|
let timer_end = undefined;
|
||||||
|
/** @type {undefined | ReturnType<typeof setInterval>} */
|
||||||
|
let timer_next_tick = undefined;
|
||||||
|
let timer = "Next Match";
|
||||||
|
|
||||||
|
/** @type {string} */
|
||||||
|
let display_state = "init";
|
||||||
|
|
||||||
|
/** @type {string} */
|
||||||
|
let display_class = "side-display";
|
||||||
|
|
||||||
|
const client = mqtt.connect("ws://metznet.ca:8883");
|
||||||
|
|
||||||
|
function stop_timer() {
|
||||||
|
if(timer_next_tick === undefined) {
|
||||||
|
} else {
|
||||||
|
clearInterval(timer_next_tick);
|
||||||
|
timer_next_tick = undefined;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function tick_timer() {
|
||||||
|
if(timer_end === undefined) {
|
||||||
|
stop_timer();
|
||||||
|
return
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
const now = new Date()
|
||||||
|
const time_diff = timer_end.getTime() - now.getTime() + offset;
|
||||||
|
if (time_diff <= 0) {
|
||||||
|
timer = "0:00";
|
||||||
|
stop_timer();
|
||||||
|
} else {
|
||||||
|
const seconds_total = Math.ceil(time_diff/ 1000);
|
||||||
|
const minutes = Math.floor(seconds_total / 60);
|
||||||
|
const seconds = seconds_total - (minutes * 60);
|
||||||
|
timer = `${minutes}:${seconds.toString().padStart(2, '0')}`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
client.on("message", (topic, message) => {
|
||||||
|
/** @type {RegExp} */
|
||||||
|
let field_metadata_topic = /^field\/\d+\/(\d+)$/;
|
||||||
|
/** @type {RegExp} */
|
||||||
|
let field_state_topic = /^field\/\d+\/(\d+)\/state$/;
|
||||||
|
|
||||||
|
let topic_str = topic.toString();
|
||||||
|
let message_str = message.toString();
|
||||||
|
let field_state_match = field_state_topic.exec(topic_str);
|
||||||
|
let field_metadata_match = field_metadata_topic.exec(topic_str);
|
||||||
|
|
||||||
|
console.log(`${topic_str} - ${message_str}`);
|
||||||
|
|
||||||
|
if (field_state_match) {
|
||||||
|
console.log("here")
|
||||||
|
let [_, field] = field_state_match;
|
||||||
|
const state_obj = JSON.parse(message_str);
|
||||||
|
if (state_obj.state != "Scheduled") { return; }
|
||||||
|
if (state_obj.start <= latest_start_time) { return; }
|
||||||
|
|
||||||
|
latest_start_time = parseFloat(state_obj.start);
|
||||||
|
active_field = parseInt(field);
|
||||||
|
console.log(`${latest_start_time}`);
|
||||||
|
console.log(`active field: ${active_field}`);
|
||||||
|
|
||||||
|
let field_obj = field_matches[active_field];
|
||||||
|
red_teams = [field_obj.red_teams[0], field_obj.red_teams[1]];
|
||||||
|
blue_teams = [field_obj.blue_teams[0], field_obj.blue_teams[1]];
|
||||||
|
}
|
||||||
|
else if (field_metadata_match) {
|
||||||
|
let [_, field] = field_metadata_match;
|
||||||
|
const field_obj = JSON.parse(message_str);
|
||||||
|
|
||||||
|
field_matches[parseInt(field)] = field_obj;
|
||||||
|
if(field == active_field) {
|
||||||
|
red_teams = [field_obj.red_teams[0], field_obj.red_teams[1]];
|
||||||
|
blue_teams = [field_obj.blue_teams[0], field_obj.blue_teams[1]];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
console.log(`${topic_str} not defined`);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// switch(topic_str){
|
||||||
|
// case "time":
|
||||||
|
// let local = Date.now();
|
||||||
|
// let server = JSON.parse(message_str) * 1000;
|
||||||
|
// offset = local - server;
|
||||||
|
// console.log(`NEW offset: ${local} - ${server} = ${offset}`);
|
||||||
|
// break;
|
||||||
|
// case field_metadata_topic:
|
||||||
|
// const field_obj = JSON.parse(message_str);
|
||||||
|
// teams_red = [field_obj.red_teams[0], field_obj.red_teams[1]];
|
||||||
|
// teams_blue = [field_obj.blue_teams[0], field_obj.blue_teams[1]];
|
||||||
|
// let num = field_obj.tuple.match_num;
|
||||||
|
// let round = field_obj.tuple.round;
|
||||||
|
// match_name = `${round} ${num}`;
|
||||||
|
// break;
|
||||||
|
// case field_state_topic:
|
||||||
|
// stop_timer();
|
||||||
|
|
||||||
|
// const state_obj = JSON.parse(message_str);
|
||||||
|
// const start_ms = state_obj.start * 1000;
|
||||||
|
// console.log(`Start_ms: ${start_ms}`);
|
||||||
|
// switch(state_obj.state) {
|
||||||
|
// case "Scheduled":
|
||||||
|
// timer = match_name;
|
||||||
|
// match_name_show = "Next Match";
|
||||||
|
// if (state_obj.start > latest_start_time) {
|
||||||
|
// latest_start_time = state_obj.start;
|
||||||
|
// active_field = parseFloat(topic_str.split("/")[2]);
|
||||||
|
// console.log(`${latest_start_time}`);
|
||||||
|
// console.log(`${active_field}`);
|
||||||
|
// }
|
||||||
|
// break;
|
||||||
|
// }
|
||||||
|
// break;
|
||||||
|
// default:
|
||||||
|
// console.log(`Unhandled topic ${topic_str}`)
|
||||||
|
// }
|
||||||
|
});
|
||||||
|
|
||||||
|
import { onMount } from 'svelte';
|
||||||
|
onMount(() => {
|
||||||
|
const search_params = new URLSearchParams(window.location.search);
|
||||||
|
div_id = search_params.get("division");
|
||||||
|
if (div_id === null) {
|
||||||
|
div_id = "default";
|
||||||
|
}
|
||||||
|
// field_metadata_topic = `field/${div_id}/+`;
|
||||||
|
// field_state_topic = `field/${div_id}/+/state`;
|
||||||
|
|
||||||
|
client.on("connect", () => {
|
||||||
|
console.log("connected to mqtt");
|
||||||
|
|
||||||
|
client.subscribe(`field/${div_id}/#`, (err) => {
|
||||||
|
if (err) {
|
||||||
|
console.log("failed to subscribe to field metadata")
|
||||||
|
console.log(err);
|
||||||
|
} else {
|
||||||
|
console.log(`subscribed`);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="img-grid">
|
||||||
|
{#each Object.entries(red_teams) as [index, team]}
|
||||||
|
<div class="item">
|
||||||
|
<video autoplay loop muted playsinline src="./{team}.mp4" alt="video {team}"></video>
|
||||||
|
<div class="text">{team}</div>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
{#each Object.entries(blue_teams) as [index, team]}
|
||||||
|
<div class="item">
|
||||||
|
<video autoplay loop muted playsinline src="./{team}.mp4" alt="video {team}"></video>
|
||||||
|
<div class="text">{team}</div>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
|
||||||
|
|
||||||
|
.img-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, lfr);
|
||||||
|
grid-template-rows: repeat(2, lfr);
|
||||||
|
gap: 20px;
|
||||||
|
width: 1920px;
|
||||||
|
height: 1080px;
|
||||||
|
justify-content: center;
|
||||||
|
align-content: center;
|
||||||
|
margin: auto;
|
||||||
|
background-color: #2ae400;
|
||||||
|
font-family: 'Bebas Neue';
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue