add submit options
dev sp
parent
f6d46a8abd
commit
1253dd5911
|
|
@ -4,8 +4,8 @@
|
|||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "astro dev --host --port 2008",
|
||||
"start": "astro dev --host --port 2008",
|
||||
"dev": "astro dev --host --port 2022",
|
||||
"start": "astro dev --host --port 2022",
|
||||
"build": "astro build",
|
||||
"preview": "astro preview",
|
||||
"astro": "astro"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,272 @@
|
|||
import { assetsList, submitButton, targetZones, isMatch, displayResult } from "./index.astro.inline.mjs";
|
||||
|
||||
export class MyGame extends Phaser.Scene {
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
preload() {
|
||||
var progressBar = this.add.graphics();
|
||||
var progressBox = this.add.graphics();
|
||||
progressBox.fillStyle(2236962, 0.8);
|
||||
progressBox.fillRect(240, 270, 320, 50);
|
||||
|
||||
var width = this.cameras.main.width;
|
||||
var height = this.cameras.main.height;
|
||||
var loadingText = this.make.text({
|
||||
x: width / 2,
|
||||
y: height / 2 - 50,
|
||||
text: 'Loading...',
|
||||
style: {
|
||||
font: '20px monospace',
|
||||
fill: '#ffffff'
|
||||
}
|
||||
});
|
||||
loadingText.setOrigin(0.5, 0.5);
|
||||
var percentText = this.make.text({
|
||||
x: width / 2,
|
||||
y: height / 2 - 5,
|
||||
text: '0%',
|
||||
style: {
|
||||
font: '18px monospace',
|
||||
fill: '#ffffff'
|
||||
}
|
||||
});
|
||||
percentText.setOrigin(0.5, 0.5);
|
||||
var assetText = this.make.text({
|
||||
x: width / 2,
|
||||
y: height / 2 + 50,
|
||||
text: '',
|
||||
style: {
|
||||
font: '18px monospace',
|
||||
fill: '#ffffff'
|
||||
}
|
||||
});
|
||||
assetText.setOrigin(0.5, 0.5);
|
||||
this.load.on('progress', function (value) {
|
||||
percentText.setText(parseInt(value * 100) + '%');
|
||||
progressBar.clear();
|
||||
progressBar.fillStyle(16777215, 1);
|
||||
progressBar.fillRect(250, 280, 300 * value, 30);
|
||||
});
|
||||
this.load.on('fileprogress', function (file) {
|
||||
assetText.setText('Loading asset: ' + file.key);
|
||||
});
|
||||
this.load.on('complete', function () {
|
||||
progressBar.destroy();
|
||||
progressBox.destroy();
|
||||
loadingText.destroy();
|
||||
percentText.destroy();
|
||||
assetText.destroy();
|
||||
});
|
||||
// this.load.image('logo', 'zenvalogo.png');
|
||||
for (var i = 0; i < 5; i++) {
|
||||
this.load.image('logo' + i, '/assets/background.jpg');
|
||||
}
|
||||
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("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("target1", assetsList.right_image1, {
|
||||
frameWidth: 100,
|
||||
frameHeight: 100,
|
||||
});
|
||||
this.load.spritesheet("target2", assetsList.right_image2, {
|
||||
frameWidth: 100,
|
||||
frameHeight: 100,
|
||||
});
|
||||
this.load.spritesheet("target3", assetsList.right_image3, {
|
||||
frameWidth: 100,
|
||||
frameHeight: 100,
|
||||
});
|
||||
this.load.spritesheet("target4", assetsList.right_image4, {
|
||||
frameWidth: 100,
|
||||
frameHeight: 100,
|
||||
});
|
||||
|
||||
this.load.spritesheet("blocks1", assetsList.left_image1, {
|
||||
frameWidth: 100,
|
||||
frameHeight: 100,
|
||||
});
|
||||
this.load.spritesheet("blocks2", assetsList.left_image2, {
|
||||
frameWidth: 100,
|
||||
frameHeight: 100,
|
||||
});
|
||||
this.load.spritesheet("blocks3", assetsList.left_image3, {
|
||||
frameWidth: 100,
|
||||
frameHeight: 100,
|
||||
});
|
||||
this.load.spritesheet("blocks4", assetsList.left_image4, {
|
||||
frameWidth: 100,
|
||||
frameHeight: 100,
|
||||
});
|
||||
}
|
||||
create() {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const paramsID = params.get('id');
|
||||
fetch(`https://management.beanstalkedu.com/items/game_drag/${encodeURIComponent(paramsID)}`)
|
||||
.then(response => response.json())
|
||||
.then(({ data }) => {
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
// Base font size for your text
|
||||
const baseFontSize = 20;
|
||||
// Calculate responsive font size based on screen width
|
||||
const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width
|
||||
const descrptText = this.add.text(screenCenterX, 70, data.description, {
|
||||
font: `600 ${responsiveFontSize}px Quicksand`,
|
||||
fill: '#7c4c23',
|
||||
}).setOrigin(0.5);
|
||||
// Left Image Name
|
||||
this.add.text(displayW / 14, 240, data.left_image1_name).setTint(8145955);
|
||||
this.add.text(displayW / 14, 409, data.left_image2_name).setTint(8145955);
|
||||
this.add.text(displayW / 14, 579, data.left_image3_name).setTint(8145955);
|
||||
this.add.text(displayW / 14, 750, data.left_image4_name).setTint(8145955);
|
||||
|
||||
//Right Image Name
|
||||
this.add.text(displayW * 0.9 - 50, 240, data.right_image1_name).setTint(8145955);
|
||||
this.add.text(displayW * 0.9 - 50, 409, data.right_image2_name).setTint(8145955);
|
||||
this.add.text(displayW * 0.9 - 50, 579, data.right_image3_name).setTint(8145955);
|
||||
this.add.text(displayW * 0.9 - 50, 750, data.right_image4_name).setTint(8145955);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching initial data:', error);
|
||||
});
|
||||
const displayW = window.innerWidth;
|
||||
async; submitUserData(); {
|
||||
try {
|
||||
const response = await fetch(`https://management.beanstalkedu.com/items/game_result`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify('Test submission')
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
console.log('Data Saved', response);
|
||||
} else {
|
||||
console.log('Something Wrong', response);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('An error occurred', error);
|
||||
}
|
||||
}
|
||||
submitButton = this.add.text(window.innerWidth / 2, window.innerHeight / 2, "Submit", {
|
||||
font: '600 40px Quicksand',
|
||||
fill: '#fff',
|
||||
backgroundColor: '#05b3a4',
|
||||
});
|
||||
submitButton.setVisible(true);
|
||||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
console.log('Clicked');
|
||||
});
|
||||
// this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4);
|
||||
this.add.image(displayW / 6, 30, "topMatch").setScale();
|
||||
this.add.image(displayW * 0.8 - 5, 30, "topLogo").setScale();
|
||||
this.add.image(displayW * 0.9 - 32, 170, "target1"),
|
||||
this.add.image(displayW * 0.9 - 32, 170, "border").setAlpha(0.4).setScale(0.7),
|
||||
this.add.image(displayW * 0.9 - 32, 340, "target2"),
|
||||
this.add.image(displayW * 0.9 - 32, 340, "border").setAlpha(0.4).setScale(0.7),
|
||||
this.add.image(displayW * 0.9 - 32, 510, "target3"),
|
||||
this.add.image(displayW * 0.9 - 32, 510, "border").setAlpha(0.4).setScale(0.7),
|
||||
this.add.image(displayW * 0.9 - 32, 680, "target4"),
|
||||
this.add.image(displayW * 0.9 - 32, 680, "border").setAlpha(0.4).setScale(0.7);
|
||||
const blocks = [
|
||||
{
|
||||
x: displayW / 15 - 10,
|
||||
y: 120,
|
||||
textureKey: "blocks1",
|
||||
id: "block1",
|
||||
},
|
||||
{
|
||||
x: displayW / 15 - 10,
|
||||
y: 280,
|
||||
textureKey: "blocks2",
|
||||
id: "block2",
|
||||
},
|
||||
{
|
||||
x: displayW / 15 - 10,
|
||||
y: 460,
|
||||
textureKey: "blocks3",
|
||||
id: "block3",
|
||||
},
|
||||
{
|
||||
x: displayW / 15 - 10,
|
||||
y: 640,
|
||||
textureKey: "blocks4",
|
||||
id: "block4",
|
||||
},
|
||||
];
|
||||
const droppedBlocks = [];
|
||||
const targetZoneBorders = [];
|
||||
targetZones.forEach((targetZone) => {
|
||||
const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0);
|
||||
const targetBorder = this.add.image(targetZone.x = displayW * 0.9 - 172, targetZone.y, "border").setAlpha(0.2).setScale(0.7);
|
||||
targetZoneBorders.push(targetBorder);
|
||||
targetZone.block = null;
|
||||
}),
|
||||
|
||||
blocks.forEach((block, index) => {
|
||||
const newBlock = this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setInteractive({ draggable: true });
|
||||
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;
|
||||
newBlock.y = dragY;
|
||||
});
|
||||
newBlock.on("dragend", () => {
|
||||
newBlock.setScale(1);
|
||||
let droppedOnTargetZone = false;
|
||||
targetZones.forEach((targetZone, targetIndex) => {
|
||||
if (Phaser.Geom.Intersects.RectangleToRectangle(
|
||||
newBlock.getBounds(),
|
||||
new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 200, 100)
|
||||
)) {
|
||||
if (targetZone.block === null) {
|
||||
newBlock.setPosition(targetZone.x - 50, targetZone.y - 50);
|
||||
newBlock.disableInteractive();
|
||||
targetZone.block = newBlock;
|
||||
droppedBlocks.push(newBlock);
|
||||
if (isMatch(newBlock.texture.key, targetZone.name)) {
|
||||
// console.log(isMatch(newBlock.texture.key, targetZone.name))
|
||||
// if(isMatch(newBlock.texture.key, targetZone.name)){
|
||||
// score++;
|
||||
// // console.log(score);
|
||||
// if(score === 4){
|
||||
// const overlap = document.getElementById("overlap");
|
||||
// overlap.style.display = "block";
|
||||
// let finalDom;
|
||||
// }
|
||||
// console.log(score)
|
||||
// if(score >= 2){
|
||||
// console.log("Win")
|
||||
// } else{
|
||||
// console.log("Loose")
|
||||
// }
|
||||
// }
|
||||
//counter++; // Increment the counter when a match is found
|
||||
}
|
||||
} else {
|
||||
newBlock.setPosition(block.x, block.y);
|
||||
}
|
||||
droppedOnTargetZone = true;
|
||||
targetZoneBorders[targetIndex].setVisible(true);
|
||||
targetZoneBorders[targetIndex].setAlpha(1);
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
if (!droppedOnTargetZone) {
|
||||
newBlock.setPosition(block.x, block.y);
|
||||
}
|
||||
if (droppedBlocks.length === targetZones.length) {
|
||||
displayResult(droppedBlocks);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -57,6 +57,31 @@ import Layout from '../../layouts/Layout.astro';
|
|||
width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
|
||||
height: window.innerHeight / 2,
|
||||
};
|
||||
let submitButton;
|
||||
let formattedDateTime;
|
||||
gameResult = [];
|
||||
window.onload = function() {
|
||||
// Get the current date and time
|
||||
currentDate = new Date();
|
||||
|
||||
// Format the date and time as a string
|
||||
formattedDateTime = currentDate.toLocaleString();
|
||||
|
||||
// Log the formatted date and time to the console
|
||||
console.log("Page loaded on: " + formattedDateTime);
|
||||
};
|
||||
if(isMobile){
|
||||
noticeWidth = 100;
|
||||
noticeHeight = 0;
|
||||
buttonWidth = 67;
|
||||
buttonHeight = 0;
|
||||
} else {
|
||||
noticeWidth = 100;
|
||||
noticeHeight = 0;
|
||||
buttonWidth = 100;
|
||||
buttonHeight = 0;
|
||||
}
|
||||
|
||||
const targetZones = [
|
||||
{
|
||||
x: 0,
|
||||
|
|
@ -142,7 +167,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
|
||||
console.error('Error fetching initial data:', error);
|
||||
});
|
||||
class MyGame extends Phaser.Scene {
|
||||
class MyGame extends Phaser.Scene {
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
|
@ -250,13 +275,10 @@ class MyGame extends Phaser.Scene {
|
|||
create() {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const paramsID = params.get('id');
|
||||
|
||||
fetch(`https://management.beanstalkedu.com/items/game_drag/${encodeURIComponent(paramsID)}`)
|
||||
.then(response => response.json())
|
||||
.then(({ data }) => {
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
|
||||
// Base font size for your text
|
||||
const baseFontSize = 20;
|
||||
// Calculate responsive font size based on screen width
|
||||
|
|
@ -265,7 +287,6 @@ class MyGame extends Phaser.Scene {
|
|||
font: `600 ${responsiveFontSize}px Quicksand`,
|
||||
fill: '#7c4c23',
|
||||
}).setOrigin(0.5);
|
||||
|
||||
// Left Image Name
|
||||
this.add.text(displayW / 14, 240, data.left_image1_name).setTint(0x7c4c23);
|
||||
this.add.text(displayW / 14, 409, data.left_image2_name).setTint(0x7c4c23);
|
||||
|
|
@ -282,6 +303,53 @@ class MyGame extends Phaser.Scene {
|
|||
console.error('Error fetching initial data:', error);
|
||||
});
|
||||
const displayW = window.innerWidth;
|
||||
const URL = window.location.href;
|
||||
const gameName = URL.split('/');
|
||||
var gameResult = {
|
||||
'f1' : gameName[3],
|
||||
'f2' : formattedDateTime,
|
||||
}
|
||||
function submitUserData() {
|
||||
fetch(`https://management.beanstalkedu.com/items/game_result`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type' : 'application/json'
|
||||
},
|
||||
body: JSON.stringify(gameResult)
|
||||
})
|
||||
.then(response => {
|
||||
if(response.ok){
|
||||
console.log('Data Saved', response)
|
||||
} else{
|
||||
console.log('Something Wrong', response)
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('An error occured', error)
|
||||
});
|
||||
};
|
||||
// window.load
|
||||
|
||||
const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: 'blue'
|
||||
}).setDepth(1);
|
||||
submitNotic.setVisible(false);
|
||||
submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
|
||||
font: '600 30px Quicksand',
|
||||
fill: '#fff',
|
||||
backgroundColor: 'blue',
|
||||
padding: { x: 20, y: 10 },
|
||||
}).setDepth(1);
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
// window.location.reload();
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
})
|
||||
// this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4);
|
||||
this.add.image(displayW / 6, 30, "topMatch").setScale();
|
||||
this.add.image(displayW * 0.80-5, 30, "topLogo").setScale();
|
||||
|
|
@ -389,94 +457,107 @@ class MyGame extends Phaser.Scene {
|
|||
displayResult(droppedBlocks);
|
||||
}
|
||||
});
|
||||
})
|
||||
});
|
||||
}
|
||||
}
|
||||
const displayResult = (droppedBlocks) => {
|
||||
}
|
||||
// let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
|
||||
// font: '900 24px quicksand',
|
||||
// fill: '#05b3a4',
|
||||
// backgroundColor: '#7c4c23',
|
||||
// padding: { x: 20, y: 10 },
|
||||
// borderRadius: '15px', // Border radius
|
||||
// shadow: {
|
||||
// offsetX: 2, // X offset for the shadow
|
||||
// offsetY: 2, // Y offset for the shadow
|
||||
// color: '#000', // Shadow color
|
||||
// blur: 5, // Shadow blur
|
||||
// fill: true // Apply shadow to fill (background color)
|
||||
// }
|
||||
// });
|
||||
const displayResult = (droppedBlocks) => {
|
||||
// const overlap = document.getElementById("overlap");
|
||||
// overlap.style.display = "block";
|
||||
// let finalDom;
|
||||
droppedBlocks.forEach((block) => {
|
||||
const targetZone = targetZones.find((zone) => zone.name === block.texture.key);
|
||||
});
|
||||
};
|
||||
let score = 0;
|
||||
let counter = 0;
|
||||
};
|
||||
let score = 0;
|
||||
let counter = 0;
|
||||
|
||||
const isMatch = (blockName, targetName) => {
|
||||
if(isMatch){
|
||||
const isMatch = (blockName, targetName) => {
|
||||
if(isMatch){
|
||||
counter++;
|
||||
// console.log(counter)
|
||||
|
||||
|
||||
if(counter === 4){
|
||||
|
||||
const overlap = document.getElementById("overlap");
|
||||
overlap.style.display = "block";
|
||||
// console.log("Done")
|
||||
console.log(counter)
|
||||
submitButton.setVisible(true);
|
||||
}
|
||||
}
|
||||
}
|
||||
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
|
||||
|
||||
let scoreTotal=0;
|
||||
if(match){
|
||||
scoreTotal++;
|
||||
// console.log(scoreTotal)
|
||||
}
|
||||
console.log(scoreTotal)
|
||||
// console.log(match)
|
||||
if(match){
|
||||
score++;
|
||||
console.log(score)
|
||||
let day;
|
||||
switch (score) {
|
||||
case 0:
|
||||
day = "Points - 1";
|
||||
break;
|
||||
case 2:
|
||||
day = "Points - 2";
|
||||
break;
|
||||
case 4:
|
||||
day = "Points - 4";
|
||||
// console.log(scoreTotal)
|
||||
// // console.log(match)
|
||||
// if(match){
|
||||
// score++;
|
||||
// console.log(score)
|
||||
// let day;
|
||||
// switch (score) {
|
||||
// case 0:
|
||||
// day = "Points - 1";
|
||||
// break;
|
||||
// case 2:
|
||||
// day = "Points - 2";
|
||||
// break;
|
||||
// case 4:
|
||||
// day = "Points - 4";
|
||||
|
||||
}
|
||||
console.log(day)
|
||||
finalDom = document.getElementById("good");
|
||||
finalDom.classList.add("good");
|
||||
document.getElementById("good").innerHTML = day;
|
||||
document.getElementById("good").style.color = '#7c4c23'
|
||||
// console.log(totalScore)
|
||||
// if(score === 2){
|
||||
// }
|
||||
// console.log(day)
|
||||
// finalDom = document.getElementById("good");
|
||||
// finalDom.classList.add("good");
|
||||
// document.getElementById("good").innerHTML = " Good";
|
||||
// document.getElementById("good").innerHTML = day;
|
||||
// document.getElementById("good").style.color = '#7c4c23'
|
||||
// // console.log(totalScore)
|
||||
// // if(score === 2){
|
||||
// // finalDom = document.getElementById("good");
|
||||
// // finalDom.classList.add("good");
|
||||
// // document.getElementById("good").innerHTML = " Good";
|
||||
// // document.getElementById("good").style.color = '#7c4c23'
|
||||
|
||||
|
||||
// // let img = document.createElement("img");
|
||||
// // img.src = "/assets/party-feestje.gif";
|
||||
// // img.width = 100;
|
||||
// // document.getElementById('win').appendChild(img);
|
||||
// }
|
||||
// else if(score === 4) {
|
||||
// finalDom = document.getElementById("verryGood");
|
||||
// finalDom.classList.add("verryGood");
|
||||
// document.getElementById("verryGood").innerHTML = "Verry Good";
|
||||
// document.getElementById("verryGood").style.color = '#7c4c23'
|
||||
// }
|
||||
// else {
|
||||
// // finalDom = document.getElementById("lost");
|
||||
// // finalDom.classList.add("lost");
|
||||
// // document.getElementById("lost").innerHTML = " Lost";
|
||||
// // document.getElementById("lost").style.color = '#7c4c23'
|
||||
// // console.log("Losttttt")
|
||||
// }
|
||||
// // // let img = document.createElement("img");
|
||||
// // // img.src = "/assets/party-feestje.gif";
|
||||
// // // img.width = 100;
|
||||
// // // document.getElementById('win').appendChild(img);
|
||||
// // }
|
||||
// // else if(score === 4) {
|
||||
// // finalDom = document.getElementById("verryGood");
|
||||
// // finalDom.classList.add("verryGood");
|
||||
// // document.getElementById("verryGood").innerHTML = "Verry Good";
|
||||
// // document.getElementById("verryGood").style.color = '#7c4c23'
|
||||
// // }
|
||||
// // else {
|
||||
// // // finalDom = document.getElementById("lost");
|
||||
// // // finalDom.classList.add("lost");
|
||||
// // // document.getElementById("lost").innerHTML = " Lost";
|
||||
// // // document.getElementById("lost").style.color = '#7c4c23'
|
||||
// // // console.log("Losttttt")
|
||||
// // }
|
||||
|
||||
// } else{
|
||||
// score = score
|
||||
// }
|
||||
// return match !== undefined;
|
||||
};
|
||||
|
||||
} else{
|
||||
score = score
|
||||
}
|
||||
return match !== undefined;
|
||||
};
|
||||
</script>
|
||||
<style href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet" >
|
||||
* {
|
||||
|
|
|
|||
|
|
@ -17,8 +17,32 @@ import Layout from '../../layouts/Layout.astro';
|
|||
width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
|
||||
height: window.innerHeight / 2,
|
||||
};
|
||||
if(isMobile){
|
||||
submitWidth = 230;
|
||||
submitHeight = 95;
|
||||
noticeWidth = 100;
|
||||
noticeHeight = 0;
|
||||
} else {
|
||||
submitWidth = 380;
|
||||
submitHeight = 95;
|
||||
noticeWidth = 0;
|
||||
noticeHeight = 0;
|
||||
}
|
||||
var assetsList = {}
|
||||
var snapshotButton;
|
||||
let submitButton;
|
||||
let formattedDateTime;
|
||||
gameResult = [];
|
||||
window.onload = function() {
|
||||
// Get the current date and time
|
||||
currentDate = new Date();
|
||||
|
||||
// Format the date and time as a string
|
||||
formattedDateTime = currentDate.toLocaleString();
|
||||
|
||||
// Log the formatted date and time to the console
|
||||
console.log("Page loaded on: " + formattedDateTime);
|
||||
};
|
||||
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const paramsID = params.get('id');
|
||||
|
|
@ -78,6 +102,50 @@ import Layout from '../../layouts/Layout.astro';
|
|||
.catch(error => {
|
||||
console.error('Error fetching initial data:', error);
|
||||
});
|
||||
const URL = window.location.href;
|
||||
const gameName = URL.split('/');
|
||||
var gameResult = {
|
||||
'f1' : gameName[3],
|
||||
'f2' : formattedDateTime,
|
||||
}
|
||||
function submitUserData() {
|
||||
fetch(`https://management.beanstalkedu.com/items/game_result`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type' : 'application/json'
|
||||
},
|
||||
body: JSON.stringify(gameResult)
|
||||
})
|
||||
.then(response => {
|
||||
if(response.ok){
|
||||
console.log('Data Saved', response)
|
||||
} else{
|
||||
console.log('Something Wrong', response)
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('An error occured', error)
|
||||
});
|
||||
};
|
||||
// window.load
|
||||
const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: 'blue'
|
||||
}).setDepth(1);
|
||||
submitNotic.setVisible(false);
|
||||
submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
|
||||
font: '600 30px Quicksand',
|
||||
fill: '#fff',
|
||||
backgroundColor: 'blue',
|
||||
padding: { x: 20, y: 10 },
|
||||
});
|
||||
submitButton.setVisible(true);
|
||||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
console.log('Clicked');
|
||||
submitNotic.setVisible(true);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
})
|
||||
const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
|
||||
if(!isMobile){
|
||||
this.add.text(customWidth / 10, 20, "Drawing", textStyle);
|
||||
|
|
@ -361,7 +429,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
snapNotice.setVisible(false);
|
||||
}
|
||||
function captureSnapshot(drawingZone) {
|
||||
snapNotice.setVisible(true);
|
||||
// snapNotice.setVisible(true);
|
||||
snapshotButton.setVisible(false);
|
||||
customCursor.setVisible(false);
|
||||
drawingZone.renderer.snapshot((image) => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue