Skip to content

Commit

Permalink
add popup msg and return home btn
Browse files Browse the repository at this point in the history
  • Loading branch information
@sfrancisw
sfrancisw committed Jun 9, 2024
1 parent 4942eb2 commit b98713e
Show file tree
Hide file tree
Showing 3 changed files with 105 additions and 1 deletion.
Binary file added engine2shine/graphic/home_btn.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
53 changes: 53 additions & 0 deletions engine2shine/js/app.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,18 @@ var endTurnButton;
var newGameButton;
var deckId;

const home_button = new Button(app.renderer.width - 120, 20, Sprite.from('graphic/home_btn.png'));
home_button.sprite.width = 100;
home_button.sprite.height = 100;
home_button.sprite.interactive = true;
home_button.sprite.cursor = 'pointer';
home_button.sprite.eventMode = 'static';
home_button.sprite.on('pointerdown', function() {
window.location.href = "https://t2s.maiwald.cc/";
}
);
app.stage.addChild(home_button.sprite);

function startup() {
/*
const { texture } = app.loader.resources.cardDeck;
Expand Down Expand Up @@ -360,6 +372,7 @@ async function endTurn(playerCards, hand, isKi) {

isEndTurn = true;
if((cardValue <=21 && kiCardValue < cardValue) || (cardValue <=21 && kiCardValue > 21)) {
showInfoBanner("You WIN!", "green");
console.log("You WIN!");
score += 3;
/*
Expand All @@ -376,9 +389,11 @@ async function endTurn(playerCards, hand, isKi) {

} else {
if((cardValue == kiCardValue) || (cardValue > 21 && kiCardValue > 21)) {
showInfoBanner("It's a DRAW!", "orange");
console.log("It's a DRAW!");
score += 1;
} else {
showInfoBanner("You LOOSE!", "red");
console.log("You LOOSE!");
score -= 1;
}
Expand Down Expand Up @@ -423,6 +438,7 @@ function sendScore() {
console.error('Error:', error);
});
score = 0;
showInfoBanner("Your score has been submitted successfully!", 'green');

}

Expand All @@ -441,6 +457,43 @@ function sendScore() {
console.error("Error generating deck:", error);
}
}

function showInfoBanner(message, color, duration = 3000) {
// Create the banner element if it doesn't exist
let banner = document.getElementById('info-banner');
if (!banner) {
banner = document.createElement('div');
banner.id = 'info-banner';
banner.style.position = 'fixed';
banner.style.top = '25px';
banner.style.left = '25px';
//banner.style.transform = 'translateX(-50%)';
banner.style.color = '#fff';
banner.style.padding = '10px 20px';
banner.style.borderRadius = '5px';
banner.style.boxShadow = '0px 0px 10px rgba(0, 0, 0, 0.1)';
banner.style.zIndex = '1000';
banner.style.opacity = '0';
banner.style.transition = 'opacity 0.5s ease';
banner.style.maxWidth = 'calc(100% - 100px)';
banner.style.textAlign = 'left';
document.body.appendChild(banner);
}

// Set the banner message and show it
banner.textContent = message;
banner.style.backgroundColor = color;
banner.style.display = 'block';
banner.style.opacity = '1';

// Hide the banner after the specified duration
setTimeout(() => {
banner.style.opacity = '0';
setTimeout(() => {
banner.style.display = 'none';
}, 500); // Match the transition duration
}, duration);
}
/*
async function drawCard() {
try {
Expand Down
53 changes: 52 additions & 1 deletion engine2shine/js/snake.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,7 @@ app.loader.add('cardDeck', 'graphic/CardBackTemp.jpg')
.add('grass_light', 'graphic/grass_light.png')
.add('snake_body', 'graphic/snake_body.png')
.add('snake_head', 'graphic/snake_head.png')
.add('home_btn', 'graphic/home_btn.png')
.load(startup);

var fullBoard = new Array();
Expand Down Expand Up @@ -123,6 +124,18 @@ const button = new Button(screenSize + 50, screenSize - 100, Sprite.from('graphi
}
);

const home_button = new Button(app.renderer.width - 120, 20, Sprite.from('graphic/home_btn.png'));
home_button.sprite.width = 100;
home_button.sprite.height = 100;
home_button.sprite.interactive = true;
home_button.sprite.cursor = 'pointer';
home_button.sprite.eventMode = 'static';
home_button.sprite.on('pointerdown', function() {
window.location.href = "https://t2s.maiwald.cc/";
}
);
app.stage.addChild(home_button.sprite);

//snakes[0] = [new PlayerBody(0, 0, tileSize, tileSize, fullBoard[0][0]), new PlayerBody(1, 0, tileSize, tileSize, fullBoard[0][1]), new PlayerHead(2, 0, tileSize, tileSize, fullBoard[0][2])]
//snakes[1] = [new PlayerBody(0, 1, tileSize, tileSize, fullBoard[1][0]), new PlayerBody(1, 1, tileSize, tileSize, fullBoard[1][1]), new PlayerHead(2, 1, tileSize, tileSize, fullBoard[1][2])]
//var player = new PlayerBody(0, 0, tileSize, tileSize);
Expand Down Expand Up @@ -434,6 +447,7 @@ async function gameClock(action) {
tack = false;
console.log("NEW GAME");
sendScore();
showInfoBanner("Your score has been submitted successfully!", 'green');
}
}
if (action == "startEnemyClock") {
Expand Down Expand Up @@ -552,4 +566,41 @@ function turnSnakeHead(snake) {
console.error('Error:', error);
});

}
}

function showInfoBanner(message, color, duration = 3000) {
// Create the banner element if it doesn't exist
let banner = document.getElementById('info-banner');
if (!banner) {
banner = document.createElement('div');
banner.id = 'info-banner';
banner.style.position = 'fixed';
banner.style.top = '25px';
banner.style.left = '25px';
//banner.style.transform = 'translateX(-50%)';
banner.style.color = '#fff';
banner.style.padding = '10px 20px';
banner.style.borderRadius = '5px';
banner.style.boxShadow = '0px 0px 10px rgba(0, 0, 0, 0.1)';
banner.style.zIndex = '1000';
banner.style.opacity = '0';
banner.style.transition = 'opacity 0.5s ease';
banner.style.maxWidth = 'calc(100% - 100px)';
banner.style.textAlign = 'left';
document.body.appendChild(banner);
}

// Set the banner message and show it
banner.textContent = message;
banner.style.backgroundColor = color;
banner.style.display = 'block';
banner.style.opacity = '1';

// Hide the banner after the specified duration
setTimeout(() => {
banner.style.opacity = '0';
setTimeout(() => {
banner.style.display = 'none';
}, 500); // Match the transition duration
}, duration);
}

0 comments on commit b98713e

Please sign in to comment.