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

add learning are & sub_area

pull/2/head
dev sp 2023-12-19 15:17:26 +00:00
parent 9dd93344dd
commit a655a43e47
4 changed files with 46 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -293,15 +293,18 @@ import Layout from '../../layouts/Layout.astro';
fetch(`https://management.beanstalkedu.com/items/game_drag/${encodeURIComponent(paramsID)}`)
.then(response => response.json())
.then(({ data }) => {
// console.log(data)
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
// Base font size for your text
const baseFontSize = 20;
const baseFontSize = 30;
// 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`,
const descrptText = this.add.text(screenCenterX, 95, data.description, {
font: ` ${responsiveFontSize}px Quicksand`,
fill: '#7c4c23',
}).setOrigin(0.5);
this.add.text(displayW / 14 - 15, 50, data.LearningArea, {font: `20px`}).setTint(0x7c4c23);
this.add.text(displayW / 14 - 15, 70, data.LearningSubArea_copy, {font: `19px`}).setTint(0x7c4c23);
// Left Image Name
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);

7
src/pages/drawing/index.astro
View File

@ -24,6 +24,8 @@ import Layout from '../../layouts/Layout.astro';
noticeHeight = 0;
downloadWidth = 67;
downloadHeight = 200;
learningWidth = 200;
learningHeight = 400
} else {
submitWidth = 380;
submitHeight = 95;
@ -31,6 +33,8 @@ import Layout from '../../layouts/Layout.astro';
noticeHeight = 0;
downloadWidth = 180;
downloadHeight = 70;
learningWidth = 450;
learningHeight = 400
}
var assetsList = {}
var snapshotButton;
@ -105,10 +109,13 @@ import Layout from '../../layouts/Layout.astro';
fetch(`https://management.beanstalkedu.com/items/game_drawing/${encodeURIComponent(paramsID)}`)
.then(response => response.json())
.then(({ data }) => {
console.log(data)
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 15;
const responsiveFontSize = (window.innerWidth / 280) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 70, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', }).setOrigin(0.5);
this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight, data.LearningArea, {font: `20px`}).setTint(0X7C4C23)
this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight + 20, data.LearningSubArea, {font: `20px`}).setTint(0X7C4C23)
})
.catch(error => {
console.error('Error fetching initial data:', error);

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

@ -10,9 +10,13 @@ import Layout from "../../layouts/Layout.astro";
<p class="text-5xl text-[#5ac6c8] font-bold select-none">Tick</p>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
</div>
<p class="text-4xl text-center font-[600] text-[#7c4c23] my-16 select-none" id="gameDescription"></p>
<div class="flex flex-col">
<p id="LearningArea"></p>
<p id="LearningSubArea_copy"></p>
</div>
<p class="text-2xl lg:text-4xl text-center font-[600] text-[#7c4c23] my-6 select-none" id="gameDescription"></p>
<form id="contactForm">
<div id="itemForm" class="flex flex-row place-content-between">
<div id="itemForm" class="flex flex-row place-content-between gap-4">
<div class="flex flex-col gap-6 place-items-center">
<label for="a1" class="round-checkbox-label">
<img id="image1" src="" alt="" draggable="false" class="select-none" />
@ -72,7 +76,7 @@ import Layout from "../../layouts/Layout.astro";
.then(res => res.json())
.then(data => {
gameData = data.data;
// console.log(gameData)
console.log(gameData)
document.getElementById("gameDescription").innerHTML = gameData.description;
if(gameData.label1){
document.getElementById("label1").innerHTML = gameData.label1;
@ -92,6 +96,9 @@ import Layout from "../../layouts/Layout.astro";
if(gameData.label6){
document.getElementById("label6").innerHTML = gameData.label6;
}
document.getElementById('LearningArea').innerHTML = gameData.LearningArea;
document.getElementById('LearningSubArea_copy').innerHTML = gameData.LearningSubArea_copy;
const assetsURL = 'https://management.beanstalkedu.com/assets/';
for (let i = 1; i <= 6; i++) {
const imageId = `image${i}`;
@ -344,6 +351,11 @@ import Layout from "../../layouts/Layout.astro";
font-size: 20px;
padding-top: 10px;
}
#LearningArea, #LearningSubArea_copy{
font-size: 20px;
color: #7C4C23;
font-weight: bold;
}
.round-checkbox-label {
display: inline-block;
cursor: pointer;

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

@ -10,10 +10,14 @@ import Layout from "../../layouts/Layout.astro";
<p class="text-5xl text-[#5ac6c8] font-bold select-none">Tick</p>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
</div>
<p class="text-4xl text-center font-[600] text-[#7c4c23] my-16 select-none" id="gameDescription"></p>
<div class="flex flex-col">
<p id="LearningArea"></p>
<p id="LearningSubArea_copy"></p>
</div>
<p class="text-4xl text-center font-[600] text-[#7c4c23] mb-4 select-none" id="gameDescription"></p>
<form id="contactForm">
<div id="" class="flex flex-row place-content-between">
<div class="flex flex-col gap-6 place-items-center">
<div id="" class="flex flex-row place-content-between gap-4">
<div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
<label for="a1" class="round-checkbox-label">
<img id="image1" src="" alt="" draggable="false" class="select-none" />
<p id="label1"></p>
@ -32,7 +36,7 @@ import Layout from "../../layouts/Layout.astro";
</label>
<input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox" value="a3"/>
</div>
<div class="flex flex-col gap-6 place-items-center">
<div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
<label for="a4" class="round-checkbox-label">
<img id="image4" src="" alt="" draggable="false" class="select-none" />
<p id="label4"></p>
@ -51,7 +55,7 @@ import Layout from "../../layouts/Layout.astro";
</label>
<input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox" value="a6"/>
</div>
<div class="flex flex-col gap-6 place-items-center">
<div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
<label for="a7" class="round-checkbox-label">
<img id="image7" src="" alt="" draggable="false" class="select-none" />
<p id="label7"></p>
@ -73,7 +77,7 @@ import Layout from "../../layouts/Layout.astro";
</div>
<div class="flex flex-col justify-center place-items-center pt-8">
<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>
</form>
</div>
@ -89,6 +93,7 @@ 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;
@ -117,6 +122,8 @@ import Layout from "../../layouts/Layout.astro";
if(gameData.label9){
document.getElementById("label9").innerHTML = gameData.label9;
}
document.getElementById('LearningArea').innerHTML = gameData.LearningArea;
document.getElementById('LearningSubArea_copy').innerHTML = gameData.LearningSubArea_copy;
const assetsURL = 'https://management.beanstalkedu.com/assets/';
for (let i = 1; i <= 9; i++) {
const imageId = `image${i}`;
@ -386,6 +393,11 @@ import Layout from "../../layouts/Layout.astro";
font-size: 20px;
padding-top: 10px;
}
#LearningArea, #LearningSubArea_copy{
font-size: 20px;
color: #7C4C23;
font-weight: bold;
}
.round-checkbox-label {
display: inline-block;
cursor: pointer;