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

fix responsive issue

pull/19/head
Suvodip 2024-08-01 18:02:27 +05:30
parent fb55f85b6c
commit 2dd6c7143c
7 changed files with 33 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/pages/cross/cross_phonics_v2.astro
View File

@ -24,62 +24,62 @@ import Layout from "../../layouts/Layout.astro";
<p id="LearningArea"></p>
<p id="LearningSubArea_copy"></p>
</div> -->
<p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
<p class="sm:text-2xl md:text-3xl lg:text-3xl text-center font-[600] text-[#60C6CB] my-2 select-none" id="gameDescription"></p>
<form id="contactForm">
<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 text-[14px] md:text-2xl">
<img id="image1" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<img id="image1" src="" alt="" draggable="false" class="select-none sm:w-[90px] h-[110px]" />
<p id="label1" class="h-[50px] overflow-y-auto"></p>
</label>
<input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
<label for="a2" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image2" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<img id="image2" src="" alt="" draggable="false" class="select-none sm:w-[90px] h-[110px]" />
<p id="label2" class="h-[50px] overflow-y-auto"></p>
</label>
<input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
<label for="a3" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image3" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<img id="image3" src="" alt="" draggable="false" class="select-none sm:w-[90px] h-[110px]" />
<p id="label3" class="h-[50px] overflow-y-auto"></p>
</label>
<input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
</div>
<div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
<label for="a4" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image4" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<img id="image4" src="" alt="" draggable="false" class="select-none sm:w-[90px] h-[110px]" />
<p id="label4" class="h-[50px] overflow-y-auto"></p>
</label>
<input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/>
<label for="a5" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image5" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<img id="image5" src="" alt="" draggable="false" class="select-none sm:w-[90px] h-[110px]" />
<p id="label5" class="h-[50px] overflow-y-auto"></p>
</label>
<input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
<label for="a6" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image6" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<img id="image6" src="" alt="" draggable="false" class="select-none sm:w-[90px] h-[110px]" />
<p id="label6" class="h-[50px] overflow-y-auto"></p>
</label>
<input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
</div>
<div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
<label for="a7" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image7" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<img id="image7" src="" alt="" draggable="false" class="select-none sm:w-[90px] h-[110px]" />
<p id="label7" class="h-[50px] overflow-y-auto"></p>
</label>
<input onclick="checkResult2('image7');" type="checkbox" id="a7" class="round-checkbox-input myCheckbox largerCheckbox" value="a7"/>
<label for="a8" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image8" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<img id="image8" src="" alt="" draggable="false" class="select-none sm:w-[90px] h-[110px]" />
<p id="label8" class="h-[50px] overflow-y-auto"></p>
</label>
<input onclick="checkResult2('image8');" type="checkbox" id="a8" class="round-checkbox-input myCheckbox largerCheckbox" value="a8"/>
<label for="a9" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image9" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<img id="image9" src="" alt="" draggable="false" class="select-none sm:w-[90px] h-[110px]" />
<p id="label9" class="h-[50px] overflow-y-auto"></p>
</label>
<input onclick="checkResult2('image9');" type="checkbox" id="a9" class="round-checkbox-input myCheckbox largerCheckbox" value="a9"/>

4
src/pages/cross/v2.astro
View File

@ -24,9 +24,9 @@ import Layout from "../../layouts/Layout.astro";
<p id="LearningArea"></p>
<p id="LearningSubArea_copy"></p>
</div> -->
<p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
<p class="sm:text-2xl md:text-3xl lg:text-3xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
<form id="contactForm">
<div id="" class="flex flex-row place-content-between gap-4">
<div id="" class="flex flex-row place-content-between ">
<div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
<label for="a1" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image1" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />

8
src/pages/drawing/drawing_phonics.astro
View File

@ -274,7 +274,7 @@ import Layout from '../../layouts/Layout.astro';
colorContainer.appendChild(colorPicker);
// const colors = data.colors;
// var colors = colorList;
var colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#C0C0C0', '#FFD700'];
var colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB'];
// var colors = ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#FFA500', '#A52A2A', '#800080', '#FFC0CB', '#FFFFFF', '#000000', '#C0C0C0', '#FFD700'];
// const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
const buttonSize = 60;
@ -578,9 +578,9 @@ import Layout from '../../layouts/Layout.astro';
slider.min = '2';
slider.max = '80';
slider.value = brushSize.toString();
slider.style.transform = 'rotate(-90deg)';
slider.style.marginTop = '80px';
slider.style.marginLeft = '-40px';
slider.style.transform = 'rotate(0deg)';
slider.style.marginTop = '20px';
slider.style.marginLeft = '0px';
if(isMobile){
}

8
src/pages/drawing/drawing_writo.astro
View File

@ -283,7 +283,7 @@ import Layout from '../../layouts/Layout.astro';
colorContainer.appendChild(colorPicker);
// const colors = data.colors;
// var colors = colorList;
var colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#C0C0C0', '#FFD700'];
var colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB'];
// var colors = ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#FFA500', '#A52A2A', '#800080', '#FFC0CB', '#FFFFFF', '#000000', '#C0C0C0', '#FFD700'];
// const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
const buttonSize = 60;
@ -587,9 +587,9 @@ import Layout from '../../layouts/Layout.astro';
slider.min = '2';
slider.max = '80';
slider.value = brushSize.toString();
slider.style.transform = 'rotate(-90deg)';
slider.style.marginTop = '80px';
slider.style.marginLeft = '-40px';
slider.style.transform = 'rotate(0deg)';
slider.style.marginTop = '20px';
slider.style.marginLeft = '0px';
if(isMobile){
}

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

@ -210,9 +210,9 @@ import Layout from '../../layouts/Layout.astro';
// this.add.text(customWidth / 30, 0, "Drawing", textStyle);
// this.add.image(customWidth / 2 * 1.6 - 0.5, 25, 'topLogo');
}
const outlineImage = this.add.image(customWidth / 2, customHeight / 3, 'outline');
const outlineImage = this.add.image(customWidth / 2, customHeight / 2.2, 'outline');
if(isMobile){
outlineImage.setDepth(1).setScale(0.33);
outlineImage.setDepth(1).setScale(0.30);
}else if(isTab){
outlineImage.setDepth(1).setScale(0.40);
} else{
@ -276,7 +276,7 @@ import Layout from '../../layouts/Layout.astro';
colorContainer.appendChild(colorPicker);
// const colors = data.colors;
// var colors = colorList;
var colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#C0C0C0', '#FFD700'];
var colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB'];
// var colors = ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#FFA500', '#A52A2A', '#800080', '#FFC0CB', '#FFFFFF', '#000000', '#C0C0C0', '#FFD700'];
// const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
const buttonSize = 60;
@ -580,9 +580,9 @@ import Layout from '../../layouts/Layout.astro';
slider.min = '2';
slider.max = '80';
slider.value = brushSize.toString();
slider.style.transform = 'rotate(-90deg)';
slider.style.marginTop = '80px';
slider.style.marginLeft = '-40px';
slider.style.transform = 'rotate(0deg)';
slider.style.marginTop = '20px';
slider.style.marginLeft = '0px';
if(isMobile){
}

6
src/pages/drawing/v2.astro
View File

@ -585,9 +585,9 @@ import Layout from '../../layouts/Layout.astro';
slider.max = '80';
slider.value = brushSize.toString();
slider.className = 'slider';
slider.style.transform = 'rotate(-90deg)';
slider.style.marginTop = '80px';
slider.style.marginLeft = '-40px';
slider.style.transform = 'rotate(0deg)';
slider.style.marginTop = '30px';
slider.style.marginLeft = '0px';
// slider.style.width = `${window.innerWidth / 2}px`;
slider.addEventListener('input', (event) => {
brushSize = parseInt(event.target.value);

8
src/pages/drawing/v3.astro
View File

@ -304,7 +304,7 @@ import Layout from '../../layouts/Layout.astro';
colorContainer.appendChild(colorPicker);
// const colors = data.colors;
// var colors = colorList;
let colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#C0C0C0', '#FFD700'];
let colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB'];
// const colors = ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#FFA500', '#A52A2A', '#800080', '#FFC0CB', '#C0C0C0', '#FFD700'];
// const colors = ['#ff0000'];
const buttonSize = 60;
@ -615,9 +615,9 @@ import Layout from '../../layouts/Layout.astro';
slider.max = '80';
slider.value = brushSize.toString();
slider.className = 'slider';
slider.style.transform = 'rotate(-90deg)';
slider.style.marginTop = '70px';
slider.style.marginLeft = '-30px';
slider.style.transform = 'rotate(0deg)';
slider.style.marginTop = '0px';
slider.style.marginLeft = '0px';
// slider.style.width = `${window.innerWidth / 2}px`;
slider.addEventListener('input', (event) => {
brushSize = parseInt(event.target.value);