Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Finished winning effect on memorize #1614

Open
wants to merge 1 commit into
base: dev
Choose a base branch
from
Open

Finished winning effect on memorize #1614

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions activities/Memorize.activity/css/activity.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -288,3 +288,24 @@ textarea {
background-color: #808080;
border: 2px solid #808080;
}



@keyframes fireworks {
0% { transform: scale(0.2); opacity: 1; }
100% { transform: scale(1); opacity: 0; }
}

.firework {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 10px;
height: 10px;
background: red;
border-radius: 50%;
animation: fireworks 1s ease-out forwards;

display: none;
}
7 changes: 7 additions & 0 deletions activities/Memorize.activity/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@

<link rel="stylesheet" href="css/activity.css">
<link rel="stylesheet" href="css/introjs.css">
<script src="lib/fireworks.js"></script>

<!---->
<script src="lib/intro.js"></script>
Expand Down Expand Up @@ -53,12 +54,18 @@

</div>


<button class="toolbutton" id="unfullscreen-button" title="Unfullscreen"></button>

<!-- Wrapper for entire game board -->
<div id="game-grid"></div>
<div id="game-editor" style="display:none; "></div>
<div id="game-players" style="display:none;"></div>





</body>

</html>
119 changes: 115 additions & 4 deletions activities/Memorize.activity/js/memorize-app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,8 @@ define(["activity/sample-ressources", "activity/palettes/template-palette", "act
cards: [],
currentPlayer: "",
players: [],
size: 4
size: 4,
solvedPairsCount: 0 // ** NEW ADDITION ** , relevant for isGameOver() function
},
computeCards: computeCards,
inEditMode: false,
Expand All @@ -192,7 +193,9 @@ define(["activity/sample-ressources", "activity/palettes/template-palette", "act
};

function shuffle(array) {
console.log('cards shuffling')
var currentIndex = array.length, temporaryValue, randomIndex;
MemorizeApp.game.solvedPairsCount = 0;

while (0 !== currentIndex) {
randomIndex = Math.floor(Math.random() * currentIndex);
Expand Down Expand Up @@ -227,6 +230,9 @@ define(["activity/sample-ressources", "activity/palettes/template-palette", "act
function computeCards(ignoreSave) {
MemorizeApp.game.cards = [];
MemorizeApp.game.selectedCards = [];
MemorizeApp.game.solvedPairsCount = 0;
//console.log(MemorizeApp.game.solvedPairsCount)


if (!MemorizeApp.game.template) {
return;
Expand Down Expand Up @@ -464,7 +470,101 @@ define(["activity/sample-ressources", "activity/palettes/template-palette", "act
return div;
}

function cardClick(div, fromMe, user) {
// ** NEW FUNCTION
function isGameOver() {
var totalPairs = MemorizeApp.game.cards.length / 2;
return MemorizeApp.game.solvedPairsCount >= totalPairs;
}

// ** NEW FUNCTION
function celebrateWin() {
console.log('celebrateWin running')
console.log(document)
MemorizeApp.ui.gameGrid.style = "display;none"

document.body.style.backgroundColor = '#000000';

var fireworksContainer = document.createElement('div');
fireworksContainer.setAttribute("id", "fireworks");
fireworksContainer.style.display = 'block';
fireworksContainer.style.width = '100vw';
fireworksContainer.style.height = '100vh';
fireworksContainer.style.top = '0';
fireworksContainer.style.left = '0';
fireworksContainer.style.zIndex = '9999';

var appluase = new Audio('sounds/applause.mp3');

var winMessage = document.createElement('div');
winMessage.textContent = 'Congratulations! You Won Memorize!';
winMessage.style.position = 'fixed';
winMessage.style.top = '50%';
winMessage.style.left = '50%';
winMessage.style.transform = 'translate(-50%, -50%)';
winMessage.style.fontSize = '3em';
winMessage.style.color = 'white';
winMessage.style.zIndex = '10000';
winMessage.style.textAlign = 'center';
//winMessage.setAttribute('id', 'winMessage');

document.body.appendChild(fireworksContainer)
document.body.appendChild(winMessage);

if (window.Fireworks) {
const fireworks = new Fireworks.default(fireworksContainer, {
autoresize: true,
opacity: 0.75,
acceleration: 2.05,
friction: 0.97,
gravity: 1.5,
particles: 50,
traceLength: 3,
traceSpeed: 10,
explosion: 5,
intensity: 30,
flickering: 50,
lineStyle: 'round',
hue: {
min: 0,
max: 360
}
})
document.body.appendChild(MemorizeApp.ui.gameGrid)
fireworks.start();
appluase.play();

setTimeout(() => {
fireworks.stop();
fireworksContainer.style.display = 'none';
document.body.removeChild(winMessage)
document.body.removeChild(fireworksContainer)
document.body.style.backgroundColor = '#c0c0c0';
resetGame()
}, 3000);
} else {
console.error("Fireworks library not loaded");
}
//winMessage.textContent = '';

}

function resetGame() {
for (var i = 0; i < MemorizeApp.game.players.length; i++) {
MemorizeApp.game.players[i].score = 0;
}
MemorizeApp.game.selectedCards = [];
MemorizeApp.game.cards = [];
displayUsersAndScores();
MemorizeApp.computeCards();
MemorizeApp.drawGame();
sendMessage({action: "updateGame", game: MemorizeApp.game});
return
}


async function cardClick(div, fromMe, user) {
console.log(MemorizeApp.game.solvedPairsCount)

var middle = MemorizeApp.game.cards.length / 2;

createAudioContextIfMissing();
Expand Down Expand Up @@ -532,6 +632,8 @@ define(["activity/sample-ressources", "activity/palettes/template-palette", "act
MemorizeApp.game.selectedCards[0].card.solved = true;
t.card.solved = true;

MemorizeApp.game.solvedPairsCount++; // Incrementing the count for each new pair

if (MemorizeApp.game.players.length == 1){
MemorizeApp.game.players[0].score = MemorizeApp.game.players[0].score + 1;
} else {
Expand All @@ -551,7 +653,17 @@ define(["activity/sample-ressources", "activity/palettes/template-palette", "act
}, 1000);

MemorizeApp.game.selectedCards = [];
saveGame();

///GRID_STYLE = MemorizeApp.ui.gameGrid.style
if (isGameOver()) {
console.log('Congrats. You did it. You win!!!');
celebrateWin();
MemorizeApp.ui.gameGrid.style = "width: 715px; margin-left: auto; margin-right: auto;"


} else {
saveGame();
}
return;
}

Expand Down Expand Up @@ -845,7 +957,6 @@ define(["activity/sample-ressources", "activity/palettes/template-palette", "act
MemorizeApp.ui.gameGrid = document.getElementById("game-grid");
MemorizeApp.ui.gamePlayers = document.getElementById("game-players");
MemorizeApp.ui.gameEditor = document.getElementById("game-editor");

MemorizeApp.ui.gameTemplatesButton = document.getElementById("game-templates-button");

var gt = new templatePalette.TemplatePalette(MemorizeApp.ui.gameTemplatesButton, undefined, MemorizeApp.templates);
Expand Down
8 changes: 8 additions & 0 deletions activities/Memorize.activity/lib/fireworks.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

10 changes: 10 additions & 0 deletions activities/Memorize.activity/lib/sugar-web/graphics/css/sugar-96dpi.css
View file
Open in desktop
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This file is a common Sugar library it's not suppose to be updated.

Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,16 @@ body {
font-size: 10pt;
background-color: #c0c0c0;
}

#fireworksContainer {
position: fixed; /* or 'absolute' if that fits better into your layout */
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 9999; /* High z-index to ensure it is above other content */
}

.unselectable {
-webkit-user-select: none;
-moz-user-select: none;
Expand Down
Binary file added activities/Memorize.activity/sounds/applause.mp3
View file
Open in desktop
Binary file not shown.
Loading