Skip to content

Commit

Permalink
release
Browse files Browse the repository at this point in the history
  • Loading branch information
Acceptto authored Jan 29, 2024
0 parents commit bf3d83d
Show file tree
Hide file tree
Showing 5 changed files with 134 additions and 0 deletions.
2 changes: 2 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
## License
This project is licensed under the MIT License - see the LICENSE file for details.
34 changes: 34 additions & 0 deletions game.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<html>
<head>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
<style>
html, body {
height: 100%;
}
body {
margin: 0;
display: flex;

/* This centers our sketch horizontally. */
justify-content: center;

/* This centers our sketch vertically. */
align-items: center;
}
</style>
<script src="https://telegram.org/js/telegram-web-app.js"></script>
<!-- Expand the window as soon as the Telegram Web App API is loaded -->
<script>
window.onload = function() {
if (window.Telegram && window.Telegram.WebApp) {
window.Telegram.WebApp.expand();
}
};
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.min.js"></script>
<script src="slideit.js"></script>
</head>
<body>
</body>
</html>
96 changes: 96 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
<html>
<head>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
<script src="https://telegram.org/js/telegram-web-app.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.7.4/lottie.min.js"></script>
<style>
#beautifulText {
text-align: center;
margin: 20px auto;
padding: 15px;
font-size: 20px;
color: #333; /* Dark text color for contrast */
background-color: #f8f8f8; /* Light background for universality */
border-radius: 10px; /* Optional: for rounded corners */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: subtle shadow for depth */
max-width: 80%;
text-align: left; /* Aligns paragraph text to the left */
}
/* Other styles */
</style>
</head>
<body>
<!-- Lottie animation container -->
<div id="lottieAnimation" style="width: 300px; height: 300px; margin: auto;"></div>
<!-- Beautiful text section -->
<div id="beautifulText">
Welcome! ✨
<p>Dive into our captivating puzzle game and put your finger agility to the test. Ready for the challenge?</p>
</div>
<script>

var lottieAnimationInstance; // To store the Lottie animation instance

function loadLottieAnimation() {
lottieAnimationInstance = lottie.loadAnimation({
container: document.getElementById('lottieAnimation'),
path: 'main.json',
renderer: 'svg',
loop: true,
autoplay: true
});
}

// Init TWA
Telegram.WebApp.ready();

window.onload = function() {
if (window.Telegram && window.Telegram.WebApp) {
window.Telegram.WebApp.expand();
loadLottieAnimation(); // Initialize the Lottie animation
}
};

// Event occurs whenever theme settings are changed in the user's Telegram app (including switching to night mode).
Telegram.WebApp.onEvent('themeChanged', function() {
document.documentElement.className = Telegram.WebApp.colorScheme;
});

// Show main button
Telegram.WebApp.MainButton.setParams({
text: 'PLAY NOW'
});
Telegram.WebApp.MainButton.show();

// Modify the MainButton onClick event
Telegram.WebApp.MainButton.onClick(function () {
// Hide and stop the Lottie animation
var lottieContainer = document.getElementById('lottieAnimation');
if (lottieAnimationInstance) {
lottieAnimationInstance.stop();
}

if (lottieContainer) {
lottieContainer.remove();
}

var textBlock = document.getElementById('beautifulText');
if (textBlock) {
textBlock.remove();
}

// Hide the Main Button
Telegram.WebApp.MainButton.hide();

// Load game.html as a new page
loadGame();
});

function loadGame() {
// Redirect to game.html
window.location.href = 'game.html';
}
</script>
</body>
</html>
1 change: 1 addition & 0 deletions main.json

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions slideit.js

Large diffs are not rendered by default.

0 comments on commit bf3d83d

Please sign in to comment.