Skip to content

Commit

Permalink
Keeping the selected card when the page is reloaded
Browse files Browse the repository at this point in the history
  • Loading branch information
@oluizeduardo
oluizeduardo committed Jan 11, 2024
1 parent 80d7d7c commit 9961c8c
Show file tree
Hide file tree
Showing 3 changed files with 136 additions and 51 deletions.
20 changes: 10 additions & 10 deletions public/game.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,61 +130,61 @@
<!-- PANEL CARDS -->
<div class="panel-cards mb-3">
<div class="cards-container">
<button class="card">
<button id="card-1" class="card">
<div class="left-icon">1</div>
<div class="center-icon">1</div>
<div class="right-icon">1</div>
</button>

<button class="card">
<button id="card-2" class="card">
<div class="left-icon">2</div>
<div class="center-icon">2</div>
<div class="right-icon">2</div>
</button>

<button class="card">
<button id="card-3" class="card">
<div class="left-icon">3</div>
<div class="center-icon">3</div>
<div class="right-icon">3</div>
</button>

<button class="card">
<button id="card-5" class="card">
<div class="left-icon">5</div>
<div class="center-icon">5</div>
<div class="right-icon">5</div>
</button>

<button class="card">
<button id="card-8" class="card">
<div class="left-icon">8</div>
<div class="center-icon">8</div>
<div class="right-icon">8</div>
</button>

<button class="card">
<button id="card-13" class="card">
<div class="left-icon">13</div>
<div class="center-icon">13</div>
<div class="right-icon">13</div>
</button>

<button class="card">
<button id="card-21" class="card">
<div class="left-icon">21</div>
<div class="center-icon">21</div>
<div class="right-icon">21</div>
</button>

<button class="card">
<button id="card-34" class="card">
<div class="left-icon">34</div>
<div class="center-icon">34</div>
<div class="right-icon">34</div>
</button>

<button class="card">
<button id="card-?" class="card">
<div class="left-icon">?</div>
<div class="center-icon">?</div>
<div class="right-icon">?</div>
</button>

<button class="card">
<button id="card-COFFEE" class="card">
<div class="left-icon">&#9749;</div>
<div class="center-icon">&#9749;</div>
<div class="right-icon">&#9749;</div>
Expand Down
138 changes: 110 additions & 28 deletions public/js/cardSelection.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,38 +2,120 @@
import {emitChosenCard} from './socket-front-game.js';
import {getUserData, saveUserData} from './userSessionStorage.js';

const CLASS_CARD_SELECTED = 'card-selected';

const cardElements = document.getElementsByClassName('card');
let selectedCard = null;

const CLASS_CARD_SELECTED = 'card-selected';

Array.from(cardElements).forEach((ele) => {
ele.addEventListener('click', function() {
if (selectedCard != null) {
selectedCard.classList.remove(CLASS_CARD_SELECTED);
}
selectedCard = ele;
selectedCard.classList.add(CLASS_CARD_SELECTED);

const textDivInsideCard = ele.querySelector('.center-icon').textContent;
const adjustedText = (textDivInsideCard === '☕') ? 'COFFEE' : textDivInsideCard;
const userData = getUserData();

if (userData) {
const updatedUserData = {
...userData,
point: adjustedText,
};
saveUserData(updatedUserData);

const chosenCardData = {
userId: userData.userId,
roomId: userData.roomId,
point: adjustedText,
};
emitChosenCard(chosenCardData);
} else {
console.error('User data was not found in Session Storage.');
}
cardClickHandler(ele);
});
});

/**
* Handles the click event for a card element.
* @param {HTMLElement} ele - The clicked card element.
* @return {void}
*/
function cardClickHandler(ele) {
removeSelectedCardClass(selectedCard);
selectedCard = ele;
addSelectedCardClass(selectedCard);

const pointInText = ele.querySelector('.center-icon').textContent;
const adjustedText = getAdjustedPoint(pointInText);
const userData = getUserData();

if (userData) {
updateUserData(adjustedText, userData);
informServerAboutChosenCard(adjustedText, userData);
} else {
console.error('User data was not found in Session Storage.');
}
}

/**
* Removes the selected card class from a specified card or the previously selected card.
*
* @param {HTMLElement|null} card - The DOM element from which to remove the class.
* @return {void} - This function does not return a value.
*/
function removeSelectedCardClass(card) {
if (card == null) {
// It means the page was reloaded, however the selected card was kept.
removeSelectedCardClassFromPreviousSelectedCard();
} else {
card.classList.remove(CLASS_CARD_SELECTED);
}
}

/**
* Remove the selected card class from the card that was selected before reload the page.
*/
function removeSelectedCardClassFromPreviousSelectedCard() {
const {point} = getUserData();
if (point) {
const idCard = 'card-'+point;
document.getElementById(idCard).classList.remove(CLASS_CARD_SELECTED);
}
}

/**
* Adds the specified CSS class to a given DOM element's class list.
*
* @param {HTMLElement} card - The DOM element to which the class will be added.
* @throws {TypeError} Will throw an error if the provided parameter is not an HTMLElement.
*/
function addSelectedCardClass(card) {
card.classList.add(CLASS_CARD_SELECTED);
}

/**
* Returns the adjusted point based on the provided point text.
*
* This function checks if the given point text is '☕' (coffee) and returns 'COFFEE'
* in that case. Otherwise, it returns the original point text.
*
* @param {string} pointText - The text representing a point, typically obtained from a card.
* @return {string} Adjusted point text. If '☕' is provided, returns 'COFFEE'; otherwise, returns the original text.
*/
function getAdjustedPoint(pointText) {
return pointText === '☕' ? 'COFFEE' : pointText;
}

/**
* Updates user data by modifying the 'point' property and saves the updated data.
*
* @param {string} point - The new value for the 'point' property.
* @param {Object} userData - The user data object to be updated.
* @property {string} userData.userId - The user's unique identifier.
* @property {string} userData.roomId - The identifier of the room the user is in.
* @property {string} userData.point - The current value of the user's 'point' property.
* @return {void}
*/
function updateUserData(point, userData) {
const updatedUserData = {
...userData,
point: point,
};
saveUserData(updatedUserData);
}

/**
* Informs the server about the chosen card by emitting the chosen card data.
*
* @param {string} point - The value associated with the chosen card.
* @param {Object} userData - User data containing userId and roomId.
* @param {string} userData.userId - The user identifier.
* @param {string} userData.roomId - The room identifier.
* @return {void}
*/
function informServerAboutChosenCard(point, userData) {
const chosenCardData = {
userId: userData.userId,
roomId: userData.roomId,
point: point,
};
emitChosenCard(chosenCardData);
}
29 changes: 16 additions & 13 deletions public/js/game.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -247,24 +247,27 @@ function processesBasicSettings(data) {
saveUserData(data);
printRoomName(data.roomName);
printPlayerNameInProfileMenu(data.userName);
adjustComponentsForModerator(data.isModerator);
setBackgroundClassForSelectedCard(data.point);
if (data.isModerator) {
adjustComponentsForModerator();
}
}

function setBackgroundClassForSelectedCard(point) {
if (point) {
const idCard = 'card-'+point;
document.getElementById(idCard).classList.add('card-selected');
}
}

/**
* Adjusts components based on the moderator status.
*
* If the user is a moderator, this function changes the text in a menu item
* to 'Stop Moderating' and adjusts the visibility of a panel.
*
* @param {boolean} isModerator - A boolean indicating whether the user is a moderator.
* Adjusts components for moderator player.
* @return {void}
*/
function adjustComponentsForModerator(isModerator) {
if (isModerator) {
changeTextInMenuItem('Stop Moderating');
changePanelVisibility();
changeEditRoomNameVisibility();
}
function adjustComponentsForModerator() {
changeTextInMenuItem('Stop Moderating');
changePanelVisibility();
changeEditRoomNameVisibility();
}

/**
Expand Down

0 comments on commit 9961c8c

Please sign in to comment.