diff --git a/public/assets/svg/retry.svg b/public/assets/svg/retry.svg
new file mode 100644
index 0000000..4aa9f52
--- /dev/null
+++ b/public/assets/svg/retry.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/pages/drag/v2.astro b/src/pages/drag/v2.astro
index 5273deb..af8bbc7 100644
--- a/src/pages/drag/v2.astro
+++ b/src/pages/drag/v2.astro
@@ -62,8 +62,8 @@ import Layout from '../../layouts/Layout.astro';
noticeHeight = 0;
buttonWidth = 67;
buttonHeight = 0;
- retryButtonWidth = window.innerWidth / 2 - 50;
- retryButtonHeight = window.innerHeight - 70;
+ retryButtonWidth = window.innerWidth / 2 - 140;
+ retryButtonHeight = window.innerHeight - 50;
leftTargetZoneW = window.innerWidth / 6;
rightTargetZoneW = window.innerWidth * 0.9 - 40;
} else {
@@ -79,6 +79,8 @@ import Layout from '../../layouts/Layout.astro';
let submitButton;
let formattedDateTime;
let shortUniqueID;
+ let allElement = element1, element2, element3, element4, element5, element6, element7, element8;
+ allElement.setVisible(false)
gameResult = [];
window.onload = function() {
// Get the current date and time
@@ -190,7 +192,7 @@ import Layout from '../../layouts/Layout.astro';
},
];
// console.log(blockMatches.blockName, blockMatches.targetName)
- var assetsList = {}
+ var assetsList = {};
const params = new URLSearchParams(window.location.search);
const paramsID = params.get('id');
const data = fetch(`https://management.beanstalkedu.com/items/game_drag/${encodeURIComponent(paramsID)}`)
@@ -203,14 +205,15 @@ import Layout from '../../layouts/Layout.astro';
imageCustomWidth = "?width=100";
}
const assetsURL = "https://management.beanstalkedu.com/assets/"
- assetsList.left_image1 = assetsURL + left_image1 + imageCustomWidth;
- assetsList.left_image2 = assetsURL + left_image2 + imageCustomWidth;
- assetsList.left_image3 = assetsURL + left_image3 + imageCustomWidth;
- assetsList.left_image4 = assetsURL + left_image4 + imageCustomWidth;
- assetsList.right_image1 = assetsURL + right_image1 + imageCustomWidth;
- assetsList.right_image2 = assetsURL + right_image2 + imageCustomWidth;
- assetsList.right_image3 = assetsURL + right_image3 + imageCustomWidth;
- assetsList.right_image4 = assetsURL + right_image4 + imageCustomWidth;
+ assetsList.element1 = assetsURL + left_image1 + imageCustomWidth;
+ assetsList.element2 = assetsURL + left_image2 + imageCustomWidth;
+ assetsList.element3 = assetsURL + left_image3 + imageCustomWidth;
+ assetsList.element4 = assetsURL + left_image4 + imageCustomWidth;
+ assetsList.element5 = assetsURL + right_image1 + imageCustomWidth;
+ assetsList.element6 = assetsURL + right_image2 + imageCustomWidth;
+ assetsList.element7 = assetsURL + right_image3 + imageCustomWidth;
+ assetsList.element8 = assetsURL + right_image4 + imageCustomWidth;
+ // console.log(assetsList.left_image1)
const config = {
type: Phaser.AUTO,
width: window.innerWidth,
@@ -295,45 +298,47 @@ import Layout from '../../layouts/Layout.astro';
this.load.image("topMatch", "/assets/top_match.jpg");
this.load.image("topLogo", "/assets/top_logo.jpg");
this.load.image("tick", '/assets/tick.png');
+ this.load.image("retryIcon", "/assets/svg/retry.svg")
// this.load.image("bg", '/assets/bgwhite.jpg');
// this.load.image("target1", assetsList.right_image1);
// this.load.image("target2", '/assets/hay.png');
// this.load.image("target3", '/assets/mat.png');
// this.load.image("target4", '/assets/star.png');
this.load.image("border", '/assets/squar.png');
- this.load.spritesheet("blocks1", assetsList.right_image1,{
+ element1 = this.load.spritesheet("blocks1", assetsList.element5,{
frameWidth: 100,
frameHeight: 100,
});
- this.load.spritesheet("blocks2", assetsList.right_image2,{
+ element2 = this.load.spritesheet("blocks2", assetsList.element6,{
frameWidth: 100,
frameHeight: 100,
});
- this.load.spritesheet("blocks3", assetsList.right_image3,{
+ element3 = this.load.spritesheet("blocks3", assetsList.element7,{
frameWidth: 100,
frameHeight: 100,
});
- this.load.spritesheet("blocks4", assetsList.right_image4,{
+ element4 =this.load.spritesheet("blocks4", assetsList.element8,{
frameWidth: 100,
frameHeight: 100,
});
- this.load.spritesheet("blocks5", assetsList.left_image1,{
+ element5 = this.load.spritesheet("blocks5", assetsList.element1,{
frameWidth: 100,
frameHeight: 100,
});
- this.load.spritesheet("blocks6", assetsList.left_image2, {
+ element6 = this.load.spritesheet("blocks6", assetsList.element2, {
frameWidth: 100,
frameHeight: 100,
});
- this.load.spritesheet("blocks7", assetsList.left_image3, {
+ element7 = this.load.spritesheet("blocks7", assetsList.element3, {
frameWidth: 100,
frameHeight: 100,
});
- this.load.spritesheet("blocks8", assetsList.left_image4, {
+ element8 = this.load.spritesheet("blocks8", assetsList.element4, {
frameWidth: 100,
frameHeight: 100,
});
}
+
create() {
const params = new URLSearchParams(window.location.search);
const paramsID = params.get('id');
@@ -430,49 +435,49 @@ import Layout from '../../layouts/Layout.astro';
// this.add.image(displayW * 0.9-43, 680, "border").setAlpha(0.4).setScale(0.65);
const blocks = [
{
- x: displayW / 15 - 15,
+ x: displayW / 2,
y: window.innerHeight - 120,
textureKey: "blocks1",
id: "block1",
},
{
- x: displayW / 15 - 15 + 120,
+ x: displayW / 2,
y: window.innerHeight - 120,
textureKey: "blocks2",
id: "block2",
},
{
- x: displayW / 15 - 15 + 240,
+ x: displayW / 2,
y: window.innerHeight - 120,
textureKey: "blocks3",
id: "block3",
},
{
- x: displayW / 15 - 15 + 360,
+ x: displayW / 2,
y: window.innerHeight - 120,
textureKey: "blocks4",
id: "block4",
},
{
- x: displayW / 15 - 15 + 480,
+ x: displayW / 2,
y: window.innerHeight - 120,
textureKey: "blocks5",
id: "block5",
},
{
- x: displayW / 15 - 15 + 600,
+ x: displayW / 2,
y: window.innerHeight - 120,
textureKey: "blocks6",
id: "block6",
},
{
- x: displayW / 15 - 15 + 720,
+ x: displayW / 2,
y: window.innerHeight - 120,
textureKey: "blocks7",
id: "block7",
},
{
- x: displayW / 15 - 15 + 840,
+ x: displayW / 2,
y: window.innerHeight - 120,
textureKey: "blocks8",
id: "block8",
@@ -489,7 +494,7 @@ import Layout from '../../layouts/Layout.astro';
blocks.forEach((block, index) => {
const newBlock = this.add.sprite(block.x, block.y, block.textureKey, 10).setOrigin(0, 0).setInteractive({ draggable: true }).setScale(1);
- this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setAlpha(0.3);
+ // this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setAlpha(0.3);
newBlock.on("drag", (pointer, dragX, dragY) => {
newBlock.setScale(1.3);
newBlock.x = dragX;
@@ -530,13 +535,15 @@ import Layout from '../../layouts/Layout.astro';
displayResult(droppedBlocks);
}
});
- });
- let retryButton = this.add.text(retryButtonWidth, retryButtonHeight, 'Reset', {
- font: '600 30px Quicksand',
- fill: '#fff',
- backgroundColor: 'blue',
- padding: { x: 20, y: 10 },
- })
+ });
+
+ // let retryButton = this.add.text(retryButtonWidth, retryButtonHeight, 'Reset', {
+ // font: '600 30px Quicksand',
+ // fill: '#fff',
+ // backgroundColor: 'blue',
+ // padding: { x: 20, y: 10 },
+ // })
+ let retryButton = this.add.image(retryButtonWidth, retryButtonHeight, 'retryIcon')
retryButton.setInteractive().on('pointerdown', () => {
window.location.reload();
})
@@ -552,13 +559,14 @@ import Layout from '../../layouts/Layout.astro';
};
let score = 0;
let counter = 0;
+ let bottomElement = 0;
const isMatch = (blockName, targetName) => {
if(isMatch){
counter++;
// console.log(counter)
- if(counter === 4){
+ if(counter === 8){
const overlap = document.getElementById("overlap");
overlap.style.display = "block";
console.log(counter)
diff --git a/src/pages/drawing/index.astro b/src/pages/drawing/index.astro
index d8ad63c..9c4ad6d 100644
--- a/src/pages/drawing/index.astro
+++ b/src/pages/drawing/index.astro
@@ -106,7 +106,7 @@ import Layout from '../../layouts/Layout.astro';
this.load.image('outline', assetsList.image);
this.load.image('topLogo', '/assets/top_logo.png');
this.load.svg('buttonIcons', '/assets/svg/button-icon.svg');
- this.load.svg('cursorImage', '/assets/svg/pencil.svg')
+ this.load.svg('cursorImage', '/assets/svg/pencil.svg');
}
function create() {
@@ -383,13 +383,17 @@ import Layout from '../../layouts/Layout.astro';
});
// Add the Clear and Eraser buttons to the container
buttonsContainer.appendChild(clearButton);
- buttonsContainer.appendChild(eraserButton);
+ // buttonsContainer.appendChild(eraserButton).setVisible;
const sliderContainer = document.createElement('div');
sliderContainer.className = 'slider-container';
// sliderContainer.style.position = 'absolute';
// sliderContainer.style.top = '25%';
sliderContainer.style.left = '100%';
+ if(!isMobile){
+ sliderContainer.style.marginLeft = '-75px'
+ sliderContainer.style.marginTop = '15px'
+ }
// Create the slider
const slider = document.createElement('input');
diff --git a/src/pages/drawing/v2.astro b/src/pages/drawing/v2.astro
index 182aa28..e2fb7c4 100644
--- a/src/pages/drawing/v2.astro
+++ b/src/pages/drawing/v2.astro
@@ -226,7 +226,7 @@ import Layout from '../../layouts/Layout.astro';
if(!isMobile){
colorButtonsContainer.style.flexDirection = 'column';
}
- const buttonX = 30;
+ const buttonX = 300;
// const colorPaletteY = drawingZone.y - 20;
let selectedButton = null;
@@ -247,11 +247,15 @@ import Layout from '../../layouts/Layout.astro';
button.style.width = `45px`;
button.style.height = `45px`;
}
- button.innerHTML = ``;
- button.style.boxShadow = '5px 10px 30px #7c4c2390';
- button.style.borderRadius = '20%';
+ if(isMobile){
+ button.innerHTML = ``;
+ button.style.boxShadow = '5px 10px 30px #7c4c2390';
+ button.style.borderRadius = '20%';
+ } else{
+ button.innerHTML = ``
+ }
button.style.marginRight = `${buttonSpacing}px`;
- button.addEventListener('click', () => {
+ button.addEventListener('click', () => {
if (selectedButton) {
selectedButton.style.border = 'none';
selectedButton.style.scale = '1';
@@ -259,15 +263,17 @@ import Layout from '../../layouts/Layout.astro';
selectedButton.style.marginTop = '0px';
selectedButton.style.marginBottom = '0px';
}
+ if(isMobile){
+ button.style.border = "2px solid";
+ button.style.borderColor = color;
+ }
defaultColor = color;
- button.style.border = "2px solid";
- button.style.borderColor = color;
button.style.scale = '1.1';
if(!isMobile){
button.style.transform = 'translateX(0.75rem)';
button.style.transition = 'transform 0.6s ease';
- button.style.marginTop = '5px';
- button.style.marginBottom = '5px';
+ // button.style.marginTop = '5px';
+ // button.style.marginBottom = '5px';
}
selectedButton = button;
});
@@ -290,12 +296,14 @@ import Layout from '../../layouts/Layout.astro';
buttonsContainer.style.marginTop = '30px';
if(!isMobile){
// buttonsContainer.style.position = 'fixed';
- buttonsContainer.style.top = '25%';
+ buttonsContainer.style.top = '13%';
buttonsContainer.style.flexDirection = 'column';
- buttonsContainer.style.marginLeft = '60px';
+ buttonsContainer.style.marginLeft = '-20px';
buttonsContainer.style.marginTop = '0%';
- }
- buttonsContainer.style.left = '20px';
+ } else{
+ buttonsContainer.style.left = '-20px';
+ }
+
document.body.appendChild(buttonsContainer);
// Create the Clear button
const clearButton = document.createElement('button');
@@ -303,7 +311,7 @@ import Layout from '../../layouts/Layout.astro';
// clearButton.style.border = '3px solid blue';
clearButton.style.color = 'blue';
clearButton.style.width = 'fit-content';
- clearButton.style.marginRight = '10px';
+ clearButton.style.marginLeft = '30px';
if(isMobile){
clearButton.style.padding = '2px 8px';
buttonsContainer.style.top = '17%';
@@ -331,6 +339,7 @@ import Layout from '../../layouts/Layout.astro';
eraserButton.style.padding = '5px 5px';
eraserButton.style.marginTop = '15px';
eraserButton.style.marginBottom = '15px';
+ eraserButton.style.marginLeft = '30px';
}
eraserButton.style.fontWeight = 'bold';
eraserButton.style.borderRadius = '20%';
@@ -355,7 +364,11 @@ import Layout from '../../layouts/Layout.astro';
const sliderContainer = document.createElement('div');
sliderContainer.className = 'slider-container';
// sliderContainer.style.position = 'absolute';
- // sliderContainer.style.top = '25%';
+ if(isMobile){
+ sliderContainer.style.marginTop = '10px';
+ } else{
+ sliderContainer.style.marginLeft = '20px';
+ }
sliderContainer.style.left = '100%';
// Create the slider
diff --git a/src/pages/tick/v3.astro b/src/pages/tick/v3.astro
index a2d6e60..1d45d58 100644
--- a/src/pages/tick/v3.astro
+++ b/src/pages/tick/v3.astro
@@ -66,15 +66,15 @@ import Layout from "../../layouts/Layout.astro";
gameData = data.data;
console.log(gameData)
document.getElementById("gameDescription").innerHTML = gameData.description;
- if(gameData.label1){
- document.getElementById("label1").innerHTML = gameData.label1;
- }
- if(gameData.label2){
- document.getElementById("label2").innerHTML = gameData.label2;
- }
- if(gameData.label3){
- document.getElementById("label3").innerHTML = gameData.label3;
- }
+ // if(gameData.label1){
+ // document.getElementById("label1").innerHTML = gameData.label1;
+ // }
+ // if(gameData.label2){
+ // document.getElementById("label2").innerHTML = gameData.label2;
+ // }
+ // if(gameData.label3){
+ // document.getElementById("label3").innerHTML = gameData.label3;
+ // }
document.getElementById('LearningArea').innerHTML = gameData.LearningArea;
document.getElementById('LearningSubArea').innerHTML = gameData.LearningSubArea;