Play
:quality(85)/https://cdn.frvr.ai/6843bbe233fa79837078f759.png)
:quality(85)/https://cdn.upit.com/ywm9keacalifwpnsplvo3iv3.jpeg)
:quality(85)/https://cdn.frvr.ai/6843bc8e33fa79837078f766.png)
#mahjong
#shapematch
#puzzle
#mobilegame
#highscore
Creation History
User prompt
In level6 there's 10 grids on the bottom line make it 9 that means removing 1 grid from other lines
User prompt
restrict the max grids 9x9 so the items will not be appeared outside the screen
User prompt
When no moves restart same level without resetting the score like it continue
Code edit (1 edits merged)
Please save this source code
User prompt
replace the circle_Tile two!
User prompt
replace pyramid_Tile and rect_Tile with same assets of recent levels
User prompt
no need to do pyramid with new assets you can use the same assets and build it like a pyramid
User prompt
game over again!
User prompt
The game over appeared after finishing level1 thats wrong!
User prompt
don't do gameover when finished level1! continue level2 3 4 ... etc...
User prompt
add 10 levels with same assets just shape the layers as circles or rectangle or triangle
User prompt
let's add something can give more bonuses like: when matching same objects 2 times the points will doubled and if 3 time it will tripled so on...
User prompt
Please fix the bug: 'Uncaught TypeError: LK.getLeaderboard is not a function' in or related to this line: 'var leaderboard = LK.getLeaderboard();' Line Number: 620 ↪💡 Consider importing and using the following plugins: @upit/storage.v1
User prompt
Did you do highscore for otherplayers? if not then do so they will be appeared below the highscore
User prompt
add other levels till level10 when finished level1 go to level2..so on
User prompt
add more levels don't do game over like i said before you can change shape of 6x8 try to do a triangle or circles or serpent have many layers on it each time shape the layers.
User prompt
remove it
User prompt
check if there is no match available do game over
User prompt
Do more levels of any shapes for the mahjong pieces like circles or rectangles, pyramid or even a mix. A timer for level 1 2 3 5:00 min, for level 4 5 6 3:00 min, for the rest till level10 2:00 min.
User prompt
Make the game more hard like hard to match an image by placing another pack of the same assets on them but shuffled two packs of 6x8
User prompt
Resize the Mahjong assets to 200x300
User prompt
Create background for the scores when highscore button is clicked
Code edit (1 edits merged)
Please save this source code
User prompt
fit the intro background to the screen
Code edit (1 edits merged)
Please save this source code
/****
* Plugins
****/
var tween = LK.import("@upit/tween.v1");
var storage = LK.import("@upit/storage.v1", {
highScore: 0
});
/****
* Classes
****/
//Library for using the camera (the background becomes the user's camera video feed) and the microphone. It can access face coordinates for interactive play, as well detect microphone volume / voice interactions
//var facekit = LK.import('@upit/facekit.v1');
//Classes can only be defined here. You cannot create inline classes in the games code.
var Tile = Container.expand(function (assetId, row, col, layer) {
var self = Container.call(this);
self.assetId = assetId;
self.row = row;
self.col = col;
self.layer = layer || 0;
self.isMatched = false;
self.isCovered = false;
var tileGraphics = self.attachAsset(assetId, {
anchorX: 0.5,
anchorY: 0.5,
scaleX: 2,
scaleY: 3
});
self.down = function (x, y, obj) {
if (!self.isMatched && !self.isCovered) {
tileSelected(self);
}
};
self.destroy = function () {
self.isMatched = true;
// tween the tile out or fade it
tween(self, {
alpha: 0,
scaleX: 0,
scaleY: 0
}, {
duration: 300,
onFinish: function onFinish() {
// Remove from game scene
self.parent.removeChild(self);
// Remove from tiles array
var index = tiles.indexOf(self);
if (index > -1) {
tiles.splice(index, 1);
}
// Uncover tiles below this one
updateCoveredTiles();
// Check for game win condition
if (tiles.length === 0) {
LK.showYouWin();
}
}
});
};
return self; //You must return self if you want other classes to be able to inherit from this class
});
/****
* Initialize Game
****/
var game = new LK.Game({
backgroundColor: 0x4682B4 // Init game with a steelblue background
});
/****
* Game Code
****/
//Storage library which should be used for persistent game data
//Minimalistic tween library which should be used for animations over time, including tinting / colouring an object, scaling, rotating, or changing any game object property.
//Only include the plugins you need to create the game.
//We have access to the following plugins. (Note that the variable names used are mandetory for each plugin)
// Initialize assets used in this game. Scale them according to what is needed for the game.
// or via static code analysis based on their usage in the code.
// Assets are automatically created and loaded either dynamically during gameplay
/*
Supported Types:
1. Shape:
- Simple geometric figures with these properties:
* width: (required) pixel width of the shape.
* height: (required) pixel height of the shape.
* color: (required) color of the shape.
* shape: (required) type of shape. Valid options: 'box', 'ellipse'.
2. Image:
- Imported images with these properties:
* width: (required) pixel resolution width.
* height: (required) pixel resolution height.
* id: (required) identifier for the image.
* flipX: (optional) horizontal flip. Valid values: 0 (no flip), 1 (flip).
* flipY: (optional) vertical flip. Valid values: 0 (no flip), 1 (flip).
* orientation: (optional) rotation in multiples of 90 degrees, clockwise. Valid values:
- 0: No rotation.
- 1: Rotate 90 degrees.
- 2: Rotate 180 degrees.
- 3: Rotate 270 degrees.
Note: Width and height remain unchanged upon flipping.
3. Sound:
- Sound effects with these properties:
* id: (required) identifier for the sound.
* volume: (optional) custom volume. Valid values are a float from 0 to 1.
4. Music:
- In contract to sound effects, only one music can be played at a time
- Music is using the same API to initilize just like sound.
- Music loops by default
- Music with these config options:
* id: (required) identifier for the sound.
* volume: (optional) custom volume. Valid values are a float from 0 to 1.
* start: (optional) a float from 0 to 1 used for cropping and indicates the start of the cropping
* end: (optional) a float from 0 to 1 used for cropping and indicates the end of the cropping
*/
// Global variables
var selectedTile = null;
var tiles = [];
var scoreTxt;
var highScoreTxt;
var gameBoard; // Container for tiles
// Game dimensions
var gameWidth = 2048;
var gameHeight = 2732;
// Tile dimensions and spacing
var tileWidth = 200;
var tileHeight = 300;
var tileSpacing = 20;
// Game board dimensions
var boardCols = 8;
var boardRows = 6;
var boardLayers = 2; // Two layers of tiles
var boardWidth = boardCols * (tileWidth + tileSpacing) - tileSpacing;
var boardHeight = boardRows * (tileHeight + tileSpacing) - tileSpacing;
// Available nature-themed assets
var availableAssets = ['potato', 'tomato', 'carrot', 'flower', 'tree', 'apple', 'corn', 'mushroom', 'pumpkin', 'sunflower', 'broccoli', 'strawberry'];
// Intro screen container
var introContainer;
// Function to generate the game board layout
function generateBoardLayout(rows, cols, layers) {
var layout = [];
var totalTilesPerLayer = rows * cols;
// Create layout for each layer
for (var layer = 0; layer < layers; layer++) {
layout[layer] = [];
var allTiles = [];
// Ensure an even number of tiles
if (totalTilesPerLayer % 2 !== 0) {
totalTilesPerLayer--;
}
// Create pairs of tiles for this layer
for (var i = 0; i < totalTilesPerLayer / 2; i++) {
var randomAssetId = availableAssets[Math.floor(Math.random() * availableAssets.length)];
allTiles.push(randomAssetId);
allTiles.push(randomAssetId);
}
// Shuffle the tiles
for (var i = allTiles.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = allTiles[i];
allTiles[i] = allTiles[j];
allTiles[j] = temp;
}
// Arrange tiles into a grid layout
for (var r = 0; r < rows; r++) {
layout[layer][r] = [];
for (var c = 0; c < cols; c++) {
if (allTiles.length > 0) {
layout[layer][r][c] = allTiles.pop();
} else {
layout[layer][r][c] = null; // Handle odd number of tiles if needed
}
}
}
}
return layout;
}
// Function to create and position tiles
function createBoard(layout) {
gameBoard = new Container();
game.addChild(gameBoard);
// Center the board on the screen
gameBoard.x = (gameWidth - boardWidth) / 2;
gameBoard.y = (gameHeight - boardHeight) / 2 + 100; // Adjust vertical position to avoid top menu
// Create tiles for each layer
for (var layer = 0; layer < layout.length; layer++) {
var layerOffset = layer * 30; // Offset each layer for visual depth
for (var r = 0; r < layout[layer].length; r++) {
for (var c = 0; c < layout[layer][r].length; c++) {
var assetId = layout[layer][r][c];
if (assetId) {
var tile = new Tile(assetId, r, c, layer);
tile.x = c * (tileWidth + tileSpacing) + tileWidth / 2 + layerOffset;
tile.y = r * (tileHeight + tileSpacing) + tileHeight / 2 - layerOffset;
gameBoard.addChild(tile);
tiles.push(tile);
}
}
}
}
// Sort tiles by layer so upper layers are drawn on top
tiles.sort(function (a, b) {
return a.layer - b.layer;
});
// Update which tiles are covered
updateCoveredTiles();
}
// Function to update which tiles are covered by tiles above them
function updateCoveredTiles() {
// Reset all tiles to uncovered
for (var i = 0; i < tiles.length; i++) {
tiles[i].isCovered = false;
tiles[i].alpha = 1;
}
// Check each tile to see if it's covered
for (var i = 0; i < tiles.length; i++) {
var tile = tiles[i];
// Check if any tile above this one overlaps it
for (var j = 0; j < tiles.length; j++) {
var otherTile = tiles[j];
if (otherTile.layer > tile.layer && !otherTile.isMatched) {
// Check if tiles overlap (considering the offset)
var layerDiff = otherTile.layer - tile.layer;
var offsetX = layerDiff * 30;
var offsetY = layerDiff * 30;
var overlapX = Math.abs(tile.x - offsetX - otherTile.x) < tileWidth;
var overlapY = Math.abs(tile.y + offsetY - otherTile.y) < tileHeight;
if (overlapX && overlapY) {
tile.isCovered = true;
tile.alpha = 0.5; // Make covered tiles semi-transparent
break;
}
}
}
}
}
// Function to handle tile selection and matching
function tileSelected(tile) {
if (selectedTile === null) {
selectedTile = tile;
// Highlight the selected tile (optional)
// tween(selectedTile, { tint: 0xffff00 }, { duration: 100 });
} else if (selectedTile === tile) {
// Deselect the same tile
// tween(selectedTile, { tint: 0xffffff }, { duration: 100 });
selectedTile = null;
} else {
// Check for a match
if (selectedTile.assetId === tile.assetId) {
// Match found
LK.getSound('match_sound').play();
LK.setScore(LK.getScore() + 10);
scoreTxt.setText('Score: ' + LK.getScore());
selectedTile.destroy();
tile.destroy();
selectedTile = null;
} else {
// No match
LK.getSound('no_match_sound').play();
// Optionally indicate no match (e.g., flash tiles red)
// tween(selectedTile, { tint: 0xff0000 }, { duration: 200, onFinish: function() { tween(selectedTile, { tint: 0xffffff }, { duration: 200 }); } });
// tween(tile, { tint: 0xff0000 }, { duration: 200, onFinish: function() { tween(tile, { tint: 0xffffff }, { duration: 200 }); } });
selectedTile = null;
}
}
}
// Initialize score and high score display (created but not shown until game starts)
scoreTxt = new Text2('Score: 0', {
size: 80,
fill: 0xFFFFFF
});
scoreTxt.anchor.set(0.5, 0);
scoreTxt.y = 20; // Position below the top menu area
highScoreTxt = new Text2('High Score: ' + storage.highScore, {
size: 80,
fill: 0xFFFFFF
});
highScoreTxt.anchor.set(0.5, 0);
highScoreTxt.y = 120; // Position below the score display
// Create intro container
introContainer = new Container();
game.addChild(introContainer);
// Add intro background
var introBg = introContainer.attachAsset('Introbackground', {
anchorX: 0.5,
anchorY: 0.5,
x: gameWidth / 2,
y: gameHeight / 2
});
// Get the actual dimensions of the background asset
var bgWidth = introBg.width;
var bgHeight = introBg.height;
// Calculate scale to cover the entire screen
var scaleX = gameWidth / bgWidth;
var scaleY = gameHeight / bgHeight;
// Use the larger scale to ensure full coverage
var scale = Math.max(scaleX, scaleY);
// Apply the scale
introBg.scale.set(scale, scale);
// Start button with image asset
var startButton = introContainer.attachAsset('Startbutton', {
anchorX: 0.5,
anchorY: 0.5,
x: gameWidth / 2,
y: gameHeight - 200 // 200px from bottom
});
// Smooth continuous blinking animation using tween
function animateStartButton() {
tween(startButton, {
alpha: 0.3
}, {
duration: 1000,
easing: tween.easeInOut,
onFinish: function onFinish() {
tween(startButton, {
alpha: 1
}, {
duration: 1000,
easing: tween.easeInOut,
onFinish: animateStartButton // Loop the animation
});
}
});
}
animateStartButton();
// Handle tap on start button to begin the game
startButton.down = function (x, y, obj) {
tween.stop(startButton); // Stop the blinking animation
introContainer.parent.removeChild(introContainer);
startGame();
};
// High score button beside start button from the left side by 600px
var highScoreButton = introContainer.attachAsset('Highscorebutton', {
anchorX: 0.5,
anchorY: 0.5,
x: gameWidth / 2 - 600,
// 100px to the left of start button
y: gameHeight - 200 // Same Y position as start button
});
// Handle tap on high score button
highScoreButton.down = function (x, y, obj) {
// Create high score display overlay
var highScoreOverlay = new Container();
introContainer.addChild(highScoreOverlay);
// Create a dark semi-transparent background for scores
var bgOverlay = LK.getAsset('box', {
width: gameWidth,
height: gameHeight,
color: 0x000000,
shape: 'box',
anchorX: 0.5,
anchorY: 0.5,
x: gameWidth / 2,
y: gameHeight / 2,
alpha: 0.8
});
highScoreOverlay.addChild(bgOverlay);
// High score text
var hsText = new Text2('High Score\n' + storage.highScore, {
size: 150,
fill: 0xFFFFFF
});
hsText.anchor.set(0.5, 0.5);
hsText.x = gameWidth / 2;
hsText.y = gameHeight / 2;
highScoreOverlay.addChild(hsText);
// Close button
var closeText = new Text2('Tap to Close', {
size: 80,
fill: 0xFFFF00
});
closeText.anchor.set(0.5, 0.5);
closeText.x = gameWidth / 2;
closeText.y = gameHeight / 2 + 200;
highScoreOverlay.addChild(closeText);
// Handle tap to close overlay
highScoreOverlay.down = function (x, y, obj) {
highScoreOverlay.parent.removeChild(highScoreOverlay);
};
};
// Function to start the game
function startGame() {
LK.setScore(0);
scoreTxt.setText('Score: 0');
LK.gui.top.addChild(scoreTxt);
LK.gui.top.addChild(highScoreTxt);
var boardLayout = generateBoardLayout(boardRows, boardCols, boardLayers);
createBoard(boardLayout);
LK.playMusic('bg_music');
}
// Game update loop (currently not needed for this game's logic, but included for structure)
game.update = function () {
// Update high score if current score is higher
if (LK.getScore() > storage.highScore) {
storage.highScore = LK.getScore();
highScoreTxt.setText('High Score: ' + storage.highScore);
}
}; ===================================================================
--- original.js
+++ change.js
@@ -11,22 +11,24 @@
****/
//Library for using the camera (the background becomes the user's camera video feed) and the microphone. It can access face coordinates for interactive play, as well detect microphone volume / voice interactions
//var facekit = LK.import('@upit/facekit.v1');
//Classes can only be defined here. You cannot create inline classes in the games code.
-var Tile = Container.expand(function (assetId, row, col) {
+var Tile = Container.expand(function (assetId, row, col, layer) {
var self = Container.call(this);
self.assetId = assetId;
self.row = row;
self.col = col;
+ self.layer = layer || 0;
self.isMatched = false;
+ self.isCovered = false;
var tileGraphics = self.attachAsset(assetId, {
anchorX: 0.5,
anchorY: 0.5,
scaleX: 2,
scaleY: 3
});
self.down = function (x, y, obj) {
- if (!self.isMatched) {
+ if (!self.isMatched && !self.isCovered) {
tileSelected(self);
}
};
self.destroy = function () {
@@ -45,8 +47,10 @@
var index = tiles.indexOf(self);
if (index > -1) {
tiles.splice(index, 1);
}
+ // Uncover tiles below this one
+ updateCoveredTiles();
// Check for game win condition
if (tiles.length === 0) {
LK.showYouWin();
}
@@ -123,45 +127,49 @@
var tileSpacing = 20;
// Game board dimensions
var boardCols = 8;
var boardRows = 6;
+var boardLayers = 2; // Two layers of tiles
var boardWidth = boardCols * (tileWidth + tileSpacing) - tileSpacing;
var boardHeight = boardRows * (tileHeight + tileSpacing) - tileSpacing;
// Available nature-themed assets
var availableAssets = ['potato', 'tomato', 'carrot', 'flower', 'tree', 'apple', 'corn', 'mushroom', 'pumpkin', 'sunflower', 'broccoli', 'strawberry'];
// Intro screen container
var introContainer;
// Function to generate the game board layout
-function generateBoardLayout(rows, cols) {
+function generateBoardLayout(rows, cols, layers) {
var layout = [];
- var allTiles = [];
- var totalTiles = rows * cols;
- // Ensure an even number of tiles
- if (totalTiles % 2 !== 0) {
- totalTiles--;
- // You might want to handle this case, e.g., reduce a row or column
- }
- // Create pairs of tiles
- for (var i = 0; i < totalTiles / 2; i++) {
- var randomAssetId = availableAssets[Math.floor(Math.random() * availableAssets.length)];
- allTiles.push(randomAssetId);
- allTiles.push(randomAssetId);
- }
- // Shuffle the tiles
- for (var i = allTiles.length - 1; i > 0; i--) {
- var j = Math.floor(Math.random() * (i + 1));
- var temp = allTiles[i];
- allTiles[i] = allTiles[j];
- allTiles[j] = temp;
- }
- // Arrange tiles into a grid layout
- for (var r = 0; r < rows; r++) {
- layout[r] = [];
- for (var c = 0; c < cols; c++) {
- if (allTiles.length > 0) {
- layout[r][c] = allTiles.pop();
- } else {
- layout[r][c] = null; // Handle odd number of tiles if needed
+ var totalTilesPerLayer = rows * cols;
+ // Create layout for each layer
+ for (var layer = 0; layer < layers; layer++) {
+ layout[layer] = [];
+ var allTiles = [];
+ // Ensure an even number of tiles
+ if (totalTilesPerLayer % 2 !== 0) {
+ totalTilesPerLayer--;
+ }
+ // Create pairs of tiles for this layer
+ for (var i = 0; i < totalTilesPerLayer / 2; i++) {
+ var randomAssetId = availableAssets[Math.floor(Math.random() * availableAssets.length)];
+ allTiles.push(randomAssetId);
+ allTiles.push(randomAssetId);
+ }
+ // Shuffle the tiles
+ for (var i = allTiles.length - 1; i > 0; i--) {
+ var j = Math.floor(Math.random() * (i + 1));
+ var temp = allTiles[i];
+ allTiles[i] = allTiles[j];
+ allTiles[j] = temp;
+ }
+ // Arrange tiles into a grid layout
+ for (var r = 0; r < rows; r++) {
+ layout[layer][r] = [];
+ for (var c = 0; c < cols; c++) {
+ if (allTiles.length > 0) {
+ layout[layer][r][c] = allTiles.pop();
+ } else {
+ layout[layer][r][c] = null; // Handle odd number of tiles if needed
+ }
}
}
}
return layout;
@@ -172,21 +180,60 @@
game.addChild(gameBoard);
// Center the board on the screen
gameBoard.x = (gameWidth - boardWidth) / 2;
gameBoard.y = (gameHeight - boardHeight) / 2 + 100; // Adjust vertical position to avoid top menu
- for (var r = 0; r < layout.length; r++) {
- for (var c = 0; c < layout[r].length; c++) {
- var assetId = layout[r][c];
- if (assetId) {
- var tile = new Tile(assetId, r, c);
- tile.x = c * (tileWidth + tileSpacing) + tileWidth / 2;
- tile.y = r * (tileHeight + tileSpacing) + tileHeight / 2;
- gameBoard.addChild(tile);
- tiles.push(tile);
+ // Create tiles for each layer
+ for (var layer = 0; layer < layout.length; layer++) {
+ var layerOffset = layer * 30; // Offset each layer for visual depth
+ for (var r = 0; r < layout[layer].length; r++) {
+ for (var c = 0; c < layout[layer][r].length; c++) {
+ var assetId = layout[layer][r][c];
+ if (assetId) {
+ var tile = new Tile(assetId, r, c, layer);
+ tile.x = c * (tileWidth + tileSpacing) + tileWidth / 2 + layerOffset;
+ tile.y = r * (tileHeight + tileSpacing) + tileHeight / 2 - layerOffset;
+ gameBoard.addChild(tile);
+ tiles.push(tile);
+ }
}
}
}
+ // Sort tiles by layer so upper layers are drawn on top
+ tiles.sort(function (a, b) {
+ return a.layer - b.layer;
+ });
+ // Update which tiles are covered
+ updateCoveredTiles();
}
+// Function to update which tiles are covered by tiles above them
+function updateCoveredTiles() {
+ // Reset all tiles to uncovered
+ for (var i = 0; i < tiles.length; i++) {
+ tiles[i].isCovered = false;
+ tiles[i].alpha = 1;
+ }
+ // Check each tile to see if it's covered
+ for (var i = 0; i < tiles.length; i++) {
+ var tile = tiles[i];
+ // Check if any tile above this one overlaps it
+ for (var j = 0; j < tiles.length; j++) {
+ var otherTile = tiles[j];
+ if (otherTile.layer > tile.layer && !otherTile.isMatched) {
+ // Check if tiles overlap (considering the offset)
+ var layerDiff = otherTile.layer - tile.layer;
+ var offsetX = layerDiff * 30;
+ var offsetY = layerDiff * 30;
+ var overlapX = Math.abs(tile.x - offsetX - otherTile.x) < tileWidth;
+ var overlapY = Math.abs(tile.y + offsetY - otherTile.y) < tileHeight;
+ if (overlapX && overlapY) {
+ tile.isCovered = true;
+ tile.alpha = 0.5; // Make covered tiles semi-transparent
+ break;
+ }
+ }
+ }
+ }
+}
// Function to handle tile selection and matching
function tileSelected(tile) {
if (selectedTile === null) {
selectedTile = tile;
@@ -335,9 +382,9 @@
LK.setScore(0);
scoreTxt.setText('Score: 0');
LK.gui.top.addChild(scoreTxt);
LK.gui.top.addChild(highScoreTxt);
- var boardLayout = generateBoardLayout(boardRows, boardCols);
+ var boardLayout = generateBoardLayout(boardRows, boardCols, boardLayers);
createBoard(boardLayout);
LK.playMusic('bg_music');
}
// Game update loop (currently not needed for this game's logic, but included for structure)
:quality(85)/https://cdn.frvr.ai/684395ea33fa79837078f638.png%3F3)
:quality(85)/https://cdn.frvr.ai/6843963933fa79837078f63c.png%3F3)
:quality(85)/https://cdn.frvr.ai/68439c3933fa79837078f66a.png%3F3)
:quality(85)/https://cdn.frvr.ai/68439c8b33fa79837078f679.png%3F3)
:quality(85)/https://cdn.frvr.ai/68439f9333fa79837078f693.png%3F3)
:quality(85)/https://cdn.frvr.ai/6843a07433fa79837078f6a2.png%3F3)
:quality(85)/https://cdn.frvr.ai/6843a13633fa79837078f6b1.png%3F3)
:quality(85)/https://cdn.frvr.ai/6843a2d833fa79837078f6c0.png%3F3)
:quality(85)/https://cdn.frvr.ai/6843a81433fa79837078f6e5.png%3F3)
:quality(85)/https://cdn.frvr.ai/6843a89633fa79837078f6f4.png%3F3)
:quality(85)/https://cdn.frvr.ai/6843a91d33fa79837078f703.png%3F3)
:quality(85)/https://cdn.frvr.ai/6843a97533fa79837078f712.png%3F3)
:quality(85)/https://cdn.frvr.ai/6843a9eb33fa79837078f721.png%3F3)
:quality(85)/https://cdn.frvr.ai/6843aae933fa79837078f730.png%3F3)
:quality(85)/https://cdn.frvr.ai/6843af6e33fa79837078f73c.png%3F3)
:quality(85)/https://cdn.frvr.ai/6843badb33fa79837078f74e.png%3F3)
Used plugins
@upit/tween@upit/storage
