kar
/
phaser-game-bs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add label in tick v1,v2

pull/2/head
dev sp 2023-12-19 14:31:48 +00:00
parent 9edeb97f67
commit 9dd93344dd
3 changed files with 126 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
src/pages/drag/index.astro
View File

@ -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 width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
height: window.innerHeight / 2, 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 submitButton;
let formattedDateTime; let formattedDateTime;
let shortUniqueID; let shortUniqueID;
@ -71,7 +86,7 @@ import Layout from '../../layouts/Layout.astro';
// Log the formatted date and time to the console // Log the formatted date and time to the console
// // console.log("Page loaded on: " + formattedDateTime); // // console.log("Page loaded on: " + formattedDateTime);
}; };
function generateShortUniqueID(length) { function generateShortUniqueID(length) {14
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
let result = ''; let result = '';
for (let i = 0; i < length; i++) { for (let i = 0; i < length; i++) {
@ -81,17 +96,6 @@ import Layout from '../../layouts/Layout.astro';
return result; return result;
}; };
shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length 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 = [ const targetZones = [
{ {
@ -299,16 +303,16 @@ import Layout from '../../layouts/Layout.astro';
fill: '#7c4c23', fill: '#7c4c23',
}).setOrigin(0.5); }).setOrigin(0.5);
// Left Image Name // Left Image Name
this.add.text(displayW / 14, 240, data.left_image1_name).setTint(0x7c4c23); this.add.text(displayW / 14 - 15, 240, data.left_image1_name).setTint(0x7c4c23);
this.add.text(displayW / 14, 409, data.left_image2_name).setTint(0x7c4c23); this.add.text(displayW / 14 - 15, 409, data.left_image2_name).setTint(0x7c4c23);
this.add.text(displayW / 14, 579, data.left_image3_name).setTint(0x7c4c23); this.add.text(displayW / 14 - 15, 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, 750, data.left_image4_name).setTint(0x7c4c23);
//Right Image Name //Right Image Name
this.add.text(displayW * 0.9-50, 240, data.right_image1_name).setTint(0x7c4c23); this.add.text(displayW * 0.9-80, 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-80, 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-80, 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, 750, data.right_image4_name).setTint(0x7c4c23);
}) })
.catch(error => { .catch(error => {
console.error('Error fetching initial data:', 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 / 6, 30, "topMatch").setScale();
this.add.image(displayW * 0.80-5, 30, "topLogo").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, "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, "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, "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, "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 = [ const blocks = [
{ {
x: displayW / 15 - 10, x: displayW / 15 - 15,
y: 120, y: 120,
textureKey: "blocks1", textureKey: "blocks1",
id: "block1", id: "block1",
}, },
{ {
x: displayW / 15 - 10, x: displayW / 15 - 15,
y: 280, y: 280,
textureKey: "blocks2", textureKey: "blocks2",
id: "block2", id: "block2",
}, },
{ {
x: displayW / 15 - 10, x: displayW / 15 - 15,
y: 460, y: 460,
textureKey: "blocks3", textureKey: "blocks3",
id: "block3", id: "block3",
}, },
{ {
x: displayW / 15 - 10, x: displayW / 15 - 15,
y: 640, y: 640,
textureKey: "blocks4", textureKey: "blocks4",
id: "block4", id: "block4",
@ -404,7 +408,7 @@ import Layout from '../../layouts/Layout.astro';
const targetZoneBorders = []; const targetZoneBorders = [];
targetZones.forEach((targetZone) => { targetZones.forEach((targetZone) => {
const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0); 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); targetZoneBorders.push(targetBorder);
targetZone.block = null; targetZone.block = null;
}), }),
@ -471,6 +475,15 @@ import Layout from '../../layouts/Layout.astro';
} }
}); });
}); });
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", { // let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {

39
src/pages/tick/v1.astro
View File

@ -16,40 +16,46 @@ import Layout from "../../layouts/Layout.astro";
<div class="flex flex-col gap-6 place-items-center"> <div class="flex flex-col gap-6 place-items-center">
<label for="a1" class="round-checkbox-label"> <label for="a1" class="round-checkbox-label">
<img id="image1" src="" alt="" draggable="false" class="select-none" /> <img id="image1" src="" alt="" draggable="false" class="select-none" />
<p id="label1"></p>
</label> </label>
<input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox" value="a1"/> <input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox" value="a1"/>
<label for="a2" class="round-checkbox-label"> <label for="a2" class="round-checkbox-label">
<img id="image2" src="" alt="" draggable="false" class="select-none" /> <img id="image2" src="" alt="" draggable="false" class="select-none" />
<p id="label2"></p>
</label> </label>
<input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox" value="a2"/> <input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox" value="a2"/>
</div> </div>
<div class="flex flex-col gap-6 place-items-center"> <div class="flex flex-col gap-6 place-items-center">
<label for="a3" class="round-checkbox-label"> <label for="a3" class="round-checkbox-label">
<img id="image3" src="" alt="" draggable="false" class="select-none" /> <img id="image3" src="" alt="" draggable="false" class="select-none" />
<p id="label3"></p>
</label> </label>
<input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox" value="a3"/> <input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox" value="a3"/>
<label for="a4" class="round-checkbox-label"> <label for="a4" class="round-checkbox-label">
<img id="image4" src="" alt="" draggable="false" class="select-none" /> <img id="image4" src="" alt="" draggable="false" class="select-none" />
<p id="label4"></p>
</label> </label>
<input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox" value="a4"/> <input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox" value="a4"/>
</div> </div>
<div class="flex flex-col gap-6 place-items-center"> <div class="flex flex-col gap-6 place-items-center">
<label for="a5" class="round-checkbox-label"> <label for="a5" class="round-checkbox-label">
<img id="image5" src="" alt="" draggable="false" class="select-none" /> <img id="image5" src="" alt="" draggable="false" class="select-none" />
<p id="label5"></p>
</label> </label>
<input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox" value="a5"/> <input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox" value="a5"/>
<label for="a6" class="round-checkbox-label"> <label for="a6" class="round-checkbox-label">
<img id="image6" src="" alt="" draggable="false" class="select-none" /> <img id="image6" src="" alt="" draggable="false" class="select-none" />
<p id="label6"></p>
</label> </label>
<input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox" value="a6"/> <input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox" value="a6"/>
</div> </div>
</div> </div>
<div class="flex flex-col place-items-center justify-center pt-8"> <div class="flex flex-col place-items-center justify-center pt-8">
<p id="savedMessage"></p> <p id="savedMessage"></p>
<input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Save"> <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit">
</div> </div>
</form> </form>
</div> </div>
@ -66,7 +72,26 @@ import Layout from "../../layouts/Layout.astro";
.then(res => res.json()) .then(res => res.json())
.then(data => { .then(data => {
gameData = data.data; gameData = data.data;
// console.log(gameData)
document.getElementById("gameDescription").innerHTML = gameData.description; 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/'; const assetsURL = 'https://management.beanstalkedu.com/assets/';
for (let i = 1; i <= 6; i++) { for (let i = 1; i <= 6; i++) {
const imageId = `image${i}`; const imageId = `image${i}`;
@ -297,6 +322,9 @@ import Layout from "../../layouts/Layout.astro";
</script> --> </script> -->
<style> <style>
@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Quicksand:wght@500;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Lobster&family=Quicksand:wght@500;700&display=swap');
body{
font-family: Quicksand;
}
.greenBorder{ .greenBorder{
border: 4px solid #008000; border: 4px solid #008000;
border-radius: 10%; border-radius: 10%;
@ -306,9 +334,16 @@ import Layout from "../../layouts/Layout.astro";
border: 4px solid red; border: 4px solid red;
border-radius: 10%; border-radius: 10%;
} }
#image1, #image2, #image3, #image4, #image5, #image6, #image7, #image8, #image9{ #image1, #image2, #image3, #image4, #image5, #image6{
width: 150px; width: 150px;
} }
#label1, #label2, #label3, #label4, #label5, #label6{
text-align: center;
font-weight: bold;
color: #7C4C23;
font-size: 20px;
padding-top: 10px;
}
.round-checkbox-label { .round-checkbox-label {
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;

46
src/pages/tick/v2.astro
View File

@ -16,48 +16,57 @@ import Layout from "../../layouts/Layout.astro";
<div class="flex flex-col gap-6 place-items-center"> <div class="flex flex-col gap-6 place-items-center">
<label for="a1" class="round-checkbox-label"> <label for="a1" class="round-checkbox-label">
<img id="image1" src="" alt="" draggable="false" class="select-none" /> <img id="image1" src="" alt="" draggable="false" class="select-none" />
<p id="label1"></p>
</label> </label>
<input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox" value="a1"/> <input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox" value="a1"/>
<label for="a2" class="round-checkbox-label"> <label for="a2" class="round-checkbox-label">
<img id="image2" src="" alt="" draggable="false" class="select-none" /> <img id="image2" src="" alt="" draggable="false" class="select-none" />
<p id="label2"></p>
</label> </label>
<input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox" value="a2"/> <input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox" value="a2"/>
<label for="a3" class="round-checkbox-label"> <label for="a3" class="round-checkbox-label">
<img id="image3" src="" alt="" draggable="false" class="select-none" /> <img id="image3" src="" alt="" draggable="false" class="select-none" />
<p id="label3"></p>
</label> </label>
<input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox" value="a3"/> <input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox" value="a3"/>
</div> </div>
<div class="flex flex-col gap-6 place-items-center"> <div class="flex flex-col gap-6 place-items-center">
<label for="a4" class="round-checkbox-label"> <label for="a4" class="round-checkbox-label">
<img id="image4" src="" alt="" draggable="false" class="select-none" /> <img id="image4" src="" alt="" draggable="false" class="select-none" />
<p id="label4"></p>
</label> </label>
<input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox" value="a4"/> <input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox" value="a4"/>
<label for="a5" class="round-checkbox-label"> <label for="a5" class="round-checkbox-label">
<img id="image5" src="" alt="" draggable="false" class="select-none" /> <img id="image5" src="" alt="" draggable="false" class="select-none" />
<p id="label5"></p>
</label> </label>
<input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox" value="a5"/> <input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox" value="a5"/>
<label for="a6" class="round-checkbox-label"> <label for="a6" class="round-checkbox-label">
<img id="image6" src="" alt="" draggable="false" class="select-none" /> <img id="image6" src="" alt="" draggable="false" class="select-none" />
<p id="label6"></p>
</label> </label>
<input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox" value="a6"/> <input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox" value="a6"/>
</div> </div>
<div class="flex flex-col gap-6 place-items-center"> <div class="flex flex-col gap-6 place-items-center">
<label for="a7" class="round-checkbox-label"> <label for="a7" class="round-checkbox-label">
<img id="image7" src="" alt="" draggable="false" class="select-none" /> <img id="image7" src="" alt="" draggable="false" class="select-none" />
<p id="label7"></p>
</label> </label>
<input onclick="checkResult2('image7');" type="checkbox" id="a7" class="round-checkbox-input myCheckbox" value="a7"/> <input onclick="checkResult2('image7');" type="checkbox" id="a7" class="round-checkbox-input myCheckbox" value="a7"/>
<label for="a8" class="round-checkbox-label"> <label for="a8" class="round-checkbox-label">
<img id="image8" src="" alt="" draggable="false" class="select-none" /> <img id="image8" src="" alt="" draggable="false" class="select-none" />
<p id="label8"></p>
</label> </label>
<input onclick="checkResult2('image8');" type="checkbox" id="a8" class="round-checkbox-input myCheckbox" value="a8"/> <input onclick="checkResult2('image8');" type="checkbox" id="a8" class="round-checkbox-input myCheckbox" value="a8"/>
<label for="a9" class="round-checkbox-label"> <label for="a9" class="round-checkbox-label">
<img id="image9" src="" alt="" draggable="false" class="select-none" /> <img id="image9" src="" alt="" draggable="false" class="select-none" />
<p id="label9"></p>
</label> </label>
<input onclick="checkResult2('image9');" type="checkbox" id="a9" class="round-checkbox-input myCheckbox" value="a9"/> <input onclick="checkResult2('image9');" type="checkbox" id="a9" class="round-checkbox-input myCheckbox" value="a9"/>
</div> </div>
@ -81,6 +90,33 @@ import Layout from "../../layouts/Layout.astro";
.then(data => { .then(data => {
gameData = data.data; gameData = data.data;
document.getElementById("gameDescription").innerHTML = gameData.description; 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;
}
if(gameData.label7){
document.getElementById("label7").innerHTML = gameData.label7;
}
if(gameData.label8){
document.getElementById("label8").innerHTML = gameData.label8;
}
if(gameData.label9){
document.getElementById("label9").innerHTML = gameData.label9;
}
const assetsURL = 'https://management.beanstalkedu.com/assets/'; const assetsURL = 'https://management.beanstalkedu.com/assets/';
for (let i = 1; i <= 9; i++) { for (let i = 1; i <= 9; i++) {
const imageId = `image${i}`; const imageId = `image${i}`;
@ -328,6 +364,9 @@ import Layout from "../../layouts/Layout.astro";
</script> --> </script> -->
<style> <style>
@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Quicksand:wght@500;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Lobster&family=Quicksand:wght@500;700&display=swap');
body{
font-family: Quicksand;
}
.greenBorder{ .greenBorder{
border: 4px solid #008000; border: 4px solid #008000;
border-radius: 10%; border-radius: 10%;
@ -340,6 +379,13 @@ import Layout from "../../layouts/Layout.astro";
#image1, #image2, #image3, #image4, #image5, #image6, #image7, #image8, #image9{ #image1, #image2, #image3, #image4, #image5, #image6, #image7, #image8, #image9{
width: 150px; width: 150px;
} }
#label1, #label2, #label3, #label4, #label5, #label6, #label7, #label8, #label9{
text-align: center;
font-weight: bold;
color: #7C4C23;
font-size: 20px;
padding-top: 10px;
}
.round-checkbox-label { .round-checkbox-label {
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;