From 9dd93344dd1ab4aa6563c619657026f2812efaac Mon Sep 17 00:00:00 2001 From: dev sp Date: Tue, 19 Dec 2023 14:31:48 +0000 Subject: [PATCH] add label in tick v1,v2 --- src/pages/drag/index.astro | 73 ++++++++++++++++++++++---------------- src/pages/tick/v1.astro | 39 ++++++++++++++++++-- src/pages/tick/v2.astro | 46 ++++++++++++++++++++++++ 3 files changed, 126 insertions(+), 32 deletions(-) diff --git a/src/pages/drag/index.astro b/src/pages/drag/index.astro index 421e08a..638453a 100644 --- a/src/pages/drag/index.astro +++ b/src/pages/drag/index.astro @@ -57,6 +57,21 @@ 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){ + noticeWidth = 100; + noticeHeight = 0; + buttonWidth = 67; + buttonHeight = 0; + retryButtonWidth = window.innerWidth / 2 - 50; + retryButtonHeight = window.innerHeight - 70; + } else { + noticeWidth = 100; + noticeHeight = 0; + buttonWidth = 100; + buttonHeight = 0; + retryButtonWidth = window.innerWidth / 2 - 50; + retryButtonHeight = window.innerHeight - 70; + } let submitButton; let formattedDateTime; let shortUniqueID; @@ -71,7 +86,7 @@ import Layout from '../../layouts/Layout.astro'; // Log the formatted date and time to the console // // console.log("Page loaded on: " + formattedDateTime); }; - function generateShortUniqueID(length) { + function generateShortUniqueID(length) {14 const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; let result = ''; for (let i = 0; i < length; i++) { @@ -81,17 +96,6 @@ import Layout from '../../layouts/Layout.astro'; return result; }; shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length - if(isMobile){ - noticeWidth = 100; - noticeHeight = 0; - buttonWidth = 67; - buttonHeight = 0; - } else { - noticeWidth = 100; - noticeHeight = 0; - buttonWidth = 100; - buttonHeight = 0; - } const targetZones = [ { @@ -299,16 +303,16 @@ import Layout from '../../layouts/Layout.astro'; 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); - this.add.text(displayW / 14, 579, data.left_image3_name).setTint(0x7c4c23); - this.add.text(displayW / 14, 750, data.left_image4_name).setTint(0x7c4c23); + this.add.text(displayW / 14 - 15, 240, data.left_image1_name).setTint(0x7c4c23); + this.add.text(displayW / 14 - 15, 409, data.left_image2_name).setTint(0x7c4c23); + this.add.text(displayW / 14 - 15, 579, data.left_image3_name).setTint(0x7c4c23); + this.add.text(displayW / 14 - 15, 750, data.left_image4_name).setTint(0x7c4c23); //Right Image Name - this.add.text(displayW * 0.9-50, 240, data.right_image1_name).setTint(0x7c4c23); - this.add.text(displayW * 0.9-50, 409, data.right_image2_name).setTint(0x7c4c23); - this.add.text(displayW * 0.9-50, 579, data.right_image3_name).setTint(0x7c4c23); - this.add.text(displayW * 0.9-50, 750, data.right_image4_name).setTint(0x7c4c23); + this.add.text(displayW * 0.9-80, 240, data.right_image1_name).setTint(0x7c4c23); + this.add.text(displayW * 0.9-80, 409, data.right_image2_name).setTint(0x7c4c23); + this.add.text(displayW * 0.9-80, 579, data.right_image3_name).setTint(0x7c4c23); + this.add.text(displayW * 0.9-80, 750, data.right_image4_name).setTint(0x7c4c23); }) .catch(error => { console.error('Error fetching initial data:', error); @@ -367,34 +371,34 @@ import Layout from '../../layouts/Layout.astro'; this.add.image(displayW / 6, 30, "topMatch").setScale(); this.add.image(displayW * 0.80-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-43, 170, "border").setAlpha(0.4).setScale(0.65), 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-43, 340, "border").setAlpha(0.4).setScale(0.65), 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-43, 510, "border").setAlpha(0.4).setScale(0.65), this.add.image(displayW * 0.9-32, 680, "target4"), - this.add.image(displayW * 0.9-32, 680, "border").setAlpha(0.4).setScale(0.7); + this.add.image(displayW * 0.9-43, 680, "border").setAlpha(0.4).setScale(0.65); const blocks = [ { - x: displayW / 15 - 10, + x: displayW / 15 - 15, y: 120, textureKey: "blocks1", id: "block1", }, { - x: displayW / 15 - 10, + x: displayW / 15 - 15, y: 280, textureKey: "blocks2", id: "block2", }, { - x: displayW / 15 - 10, + x: displayW / 15 - 15, y: 460, textureKey: "blocks3", id: "block3", }, { - x: displayW / 15 - 10, + x: displayW / 15 - 15, y: 640, textureKey: "blocks4", id: "block4", @@ -404,7 +408,7 @@ import Layout from '../../layouts/Layout.astro'; 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); + const targetBorder = this.add.image(targetZone.x = displayW * 0.9 - 172, targetZone.y, "border").setAlpha(0.2).setScale(0.65); targetZoneBorders.push(targetBorder); targetZone.block = null; }), @@ -470,7 +474,16 @@ 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 }, + }) + retryButton.setInteractive().on('pointerdown', () => { + window.location.reload(); + }) } } // let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", { diff --git a/src/pages/tick/v1.astro b/src/pages/tick/v1.astro index 26f669f..4dcbb39 100644 --- a/src/pages/tick/v1.astro +++ b/src/pages/tick/v1.astro @@ -16,40 +16,46 @@ import Layout from "../../layouts/Layout.astro";

- +
@@ -66,7 +72,26 @@ import Layout from "../../layouts/Layout.astro"; .then(res => res.json()) .then(data => { 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.label4){ + document.getElementById("label4").innerHTML = gameData.label4; + } + if(gameData.label5){ + document.getElementById("label5").innerHTML = gameData.label5; + } + if(gameData.label6){ + document.getElementById("label6").innerHTML = gameData.label6; + } const assetsURL = 'https://management.beanstalkedu.com/assets/'; for (let i = 1; i <= 6; i++) { const imageId = `image${i}`; @@ -297,6 +322,9 @@ import Layout from "../../layouts/Layout.astro"; -->