Skip to content

Instantly share code, notes, and snippets.

@acbart
Created April 8, 2021 04:19
Show Gist options
  • Select an option

  • Save acbart/e5ccdcabcb94d84c2987147a138f3b4a to your computer and use it in GitHub Desktop.

Select an option

Save acbart/e5ccdcabcb94d84c2987147a138f3b4a to your computer and use it in GitHub Desktop.
Ohyay Showcase Buttons
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ohyay.co/js/api.js"></script>
<!-- Jquery -->
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</head>
<body style="background-color: transparent">
<div class="p-3 mb-2 bg-light text-dark">
Click below to go to a room.
</div>
<div class="container">
<div class="row" id="buttons">
</div>
</div>
<script>
const REFRESH_DELAY = 5000;
let roomLinks = [];
async function loadButtons() {
const userId = await ohyay.getCurrentUserId();
const rooms = await ohyay.getRooms(["showcase"]);
const keptRoomLinks = [];
rooms.forEach((room) => {
/* if (room.title === "Research Room [Template]") {
return;
}*/
const roomBuiltId = "room-"+room.id;
keptRoomLinks.push(roomBuiltId);
if (roomLinks.includes(roomBuiltId)) {
return;
}
const button = document.createElement("button");
button.onclick = () => {
ohyay.updateUser(userId, {currentRoomId: room.id})
};
button.classList.add("btn", "btn-light", "p-2", "m-3");
button.textContent = room.title;
const column = $("<div class='col bg-dark p-2 m-2 d-flex justify-content-center'></div>");
column.attr("id", roomBuiltId);
column.append(button);
$("#buttons").append(column);
roomLinks.push(roomBuiltId);
});
roomLinks = roomLinks.filter((roomLink) => {
const kept = keptRoomLinks.includes(roomLink);
if (!kept) {
$("#"+roomLink).remove();
}
return kept;
});
}
ohyay.setApiLoadedListener(loadButtons);
setInterval(loadButtons, REFRESH_DELAY);
//document.body.append('Ready...', new Date().toLocaleTimeString());
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment