Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- const host = window.document.location.host.replace(/:.*/, '');
- const client = new Colyseus.Client(location.protocol.replace("http", "ws") + host + (location.port ? ':' + location.port : ''));
- const room = client.join("state_handler");
- const placedStackElement = $( ".placed-stack" );
- const guessedStackElement = $( ".guessed-stack" );
- const donePlacingBtnElement = $( ".done-placing-btn" );
- const doneGuessingBtnElement = $( ".done-guessing-btn" );
- const popPlacedBtnElement = $( ".pop-placed-btn" );
- const popGuessedBtnElement = $( ".pop-guessed-btn" );
- const placeBtnToolbarElement = $( ".place-btn-toolbar" );
- const guessBtnToolbarElement = $( ".guess-btn-toolbar" );
- const placeBtnGroupElement = $( ".place-btn-group" );
- const guessBtnGroupElement = $( ".guess-btn-group" );
- const announcementContainerElement = $( ".announcement-container" );
- const announcementParagraphElement = $( ".announcement-paragraph" );
- const winsParagraphElement = $( ".wins-paragraph" );
- function redrawStackElement(balls, stackElement) {
- stackElement.empty();
- balls.forEach(color => {
- stackElement.append( `<div class="ball" style="background: ${color}"></div>` );
- });
- }
- function updateButtons(balls, doneBtnElement, popBtnElement, btnGroupElement) {
- popBtnElement.prop('disabled', !balls.length);
- doneBtnElement.prop('disabled', balls.length < 5);
- btnGroupElement.children().prop('disabled', balls.length === 5);
- }
- function hideShowElements() {
- placeBtnToolbarElement.children().hide();
- guessBtnToolbarElement.children().hide();
- announcementContainerElement.hide();
- placedStackElement.hide();
- if (state.phase === 1) {
- if (state.role === 1) {
- placeBtnToolbarElement.children().show();
- placedStackElement.show();
- }
- } else if (state.phase === 2) {
- announcementContainerElement.show();
- placedStackElement.show();
- countDown();
- } else if (state.phase === 3) {
- if (state.role === 2) {
- guessBtnToolbarElement.children().show();
- }
- }
- }
- function update() {
- hideShowElements();
- redrawStackElement(state.placedBalls, placedStackElement);
- redrawStackElement(state.guessedBalls, guessedStackElement);
- updateButtons(state.placedBalls, donePlacingBtnElement, popPlacedBtnElement, placeBtnGroupElement);
- updateButtons(state.guessedBalls, doneGuessingBtnElement, popGuessedBtnElement, guessBtnGroupElement);
- winsParagraphElement.text("Wins: " + state.wins);
- }
- async function countDown() {
- function timer(ms) {
- return new Promise(res => setTimeout(res, ms));
- }
- async function load () {
- for (var i = 5; i >= 0; i--) {
- announcementParagraphElement.text(i);
- await timer(1000);
- }
- }
- load();
- await timer(5000);
- doneWatching();
- }
- class State {
- players = {};
- placedBalls = [];
- guessedBalls = [];
- phase = 1;
- role = 1;
- wins = 0;
- playerTaken = null;
- refresh() {
- this.placedBalls = [];
- this.guessedBalls = [];
- this.phase = 1;
- this.role = 1;
- this.wins = 0;
- update();
- }
- }
- const state = new State();
- update();
- room.listen("players/:id", change => {
- if (change.operation === "add") {
- if (!change.value.taken) {
- takePlayer(change.path.id);
- }
- state.players[change.path.id] = 1;
- } else if (change.operation === "remove") {
- delete state.players[change.path.id];
- state.refresh();
- }
- update();
- });
- room.listen("players/:taken", change => {
- if (change.value && !state.playerTaken && !change.value.taken) {
- state.players[change.path.taken] = 1;
- state.playerTaken = change.path.taken;
- state.role = Object.keys(state.players).length;
- state.placedBalls = change.value.placedBallColors;
- state.guessedBalls = change.value.guessedBallColors;
- }
- update();
- });
- room.listen("players/:role", change => {
- update();
- });
- room.listen("placedBallColors/:", change => {
- if (change.operation === "add") {
- state.placedBalls.push(change.value);
- } else if (change.operation === "remove") {
- state.placedBalls.pop();
- }
- update();
- });
- room.listen("guessedBallColors/:", change => {
- if (change.operation === "add") {
- state.guessedBalls.push(change.value);
- } else if (change.operation === "remove") {
- state.guessedBalls.pop();
- }
- update();
- });
- room.listen("switchRoles/:n", change => {
- state.role = state.role === 2 ? 1 : 2;
- update();
- });
- room.listen("phase/:id", change => {
- state.phase = change.value;
- update();
- });
- room.listen("guesserWon/:win", change => {
- console.log(change.value, state.role)
- if (change.value && state.role === 1) {
- state.wins++;
- }
- update();
- });
- function takePlayer (playerId) {
- room.send({ takePlayer: playerId });
- }
- function placeRed () {
- room.send({ placed: "red" });
- }
- function placeGreen () {
- room.send({ placed: "green" });
- }
- function placeBlue () {
- room.send({ placed: "blue" })
- }
- function placeYellow () {
- room.send({ placed: "yellow" })
- }
- function popPlaced () {
- room.send({ popPlaced: true })
- }
- function guessRed () {
- room.send({ guessed: "red" });
- }
- function guessGreen () {
- room.send({ guessed: "green" });
- }
- function guessBlue () {
- room.send({ guessed: "blue" })
- }
- function guessYellow () {
- room.send({ guessed: "yellow" })
- }
- function popGuessed () {
- room.send({ popGuessed: true })
- }
- function donePlacing () {
- room.send({ donePlacing: true });
- }
- function doneWatching () {
- room.send({ doneWatching: true })
- }
- function doneGuessing () {
- room.send({ doneGuessing: true })
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement