work in new drawing and change api from old drawing

pull/2/head
dev sp 2023-12-28 15:30:53 +00:00
parent d40c6a1121
commit 1992331b96
4 changed files with 46 additions and 24 deletions

BIN
public/assets/texture.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 291 KiB

View File

@ -61,12 +61,15 @@ import Layout from '../../layouts/Layout.astro';
const params = new URLSearchParams(window.location.search);
const paramsID = params.get('id');
const data = fetch(`https://management.beanstalkedu.com/items/game_drawing/${encodeURIComponent(paramsID)}`)
const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drawing/${encodeURIComponent(paramsID)}`)
.then(response => response.json())
.then(({data}) => {
console.log(data)
// colorList = data.colors;
const {image} = data;
assetsList.image = "https://management.beanstalkedu.com/assets/" + image; // + "?width=450";
assetsList.image = "https://game-du.teachertrainingkolkata.in/assets/" + image; // + "?width=450";
console.log(assetsList)
const config = {
type: Phaser.AUTO,
width: window.innerWidth,
@ -109,7 +112,7 @@ import Layout from '../../layouts/Layout.astro';
function create() {
const params = new URLSearchParams(window.location.search);
const paramsID = params.get('id');
fetch(`https://management.beanstalkedu.com/items/game_drawing/${encodeURIComponent(paramsID)}`)
fetch(`https://game-du.teachertrainingkolkata.in/items/game_drawing/${encodeURIComponent(paramsID)}`)
.then(response => response.json())
.then(({ data }) => {
// console.log(data.colors)

View File

@ -26,10 +26,12 @@ import Layout from '../../layouts/Layout.astro';
downloadHeight = 200;
learningWidth = 200;
learningHeight = 365
image1Width = 4;
image1Width = 3.7;
image1Height = 2.5;
image2Width = 0;
image2Height = 0;
image2Width = 2;
image2Right = 65;
image2Height = 2;
image2Bottom = 110;
} else {
submitWidth = 380;
submitHeight = 95;
@ -40,9 +42,11 @@ import Layout from '../../layouts/Layout.astro';
learningWidth = 450;
learningHeight = 350;
image1Width = 4;
image1Height = 0;
image2Width = 0;
image2Height = 0;
image1Height = 1.8;
image2Width = 2;
image2Right = 400;
image2Height = 1.8;
image2Bottom = 0;
}
var assetsList = {}
var snapshotButton;
@ -117,7 +121,9 @@ import Layout from '../../layouts/Layout.astro';
this.load.image('image2', assetsList.image2);
this.load.image('topLogo', '/assets/top_logo.png');
this.load.svg('buttonIcons', '/assets/svg/button-icon.svg');
this.load.svg('cursorImage', '/assets/svg/pencil.svg')
this.load.svg('cursorImage', '/assets/svg/pencil.svg');
this.load.image('waxTexture', '/assets/texture.png');
}
function create() {
@ -192,23 +198,15 @@ 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');
}
// image1Width
// image1Height
// image2Width
// image2Height
const outlineImage1 = this.add.image(customWidth / image1Width, customHeight / image1Height, 'image1');
const outlineImage2 = this.add.image(customWidth / image2Width + image2Right, customHeight / image2Height + image2Bottom, 'image2');
if(isMobile){
outlineImage1.setDepth(-1).setScale(0.33);
outlineImage1.setDepth(1).setScale(0.28);
outlineImage2.setDepth(1).setScale(0.28);
} else{
outlineImage1.setDepth(-1).setScale(0.65);
outlineImage1.setDepth(1).setScale(0.65);
outlineImage2.setDepth(1).setScale(0.65);
}
const outlineImage2 = this.add.image(customWidth / image2Width, customHeight / image2Height, 'image2');
if(isMobile){
outlineImage2.setDepth(-1).setScale(0.33);
} else{
outlineImage2.setDepth(-1).setScale(0.65);
}
graphics = this.add.graphics();
const colorContainer = document.createElement('div');
colorContainer.style.position = 'absolute';
@ -451,7 +449,8 @@ import Layout from '../../layouts/Layout.astro';
// graphics.clear();
});
}
function startDrawing(x, y) {
function startDrawing(x, y, t) {
if (!isErasing) {
graphics.lineStyle(brushSize * 2, Phaser.Display.Color.HexStringToColor(defaultColor).color);
} else {

20
src/pages/image.astro Normal file
View File

@ -0,0 +1,20 @@
---
const planResp = await fetch('https://management.beanstalkedu.com/items/game_drawing');
const planRespJson = await planResp.json();
const data = planRespJson.data;
console.log(data)
---
<main>
<div class="container mx-auto">
{data.map((plan: {details2: string | undefined; info: string | undefined; image: string | undefined; slug: string | undefined; name: string | undefined}) =>
<img class="p-4" src={'https://management.beanstalkedu.com/assets/' + plan.image+'download'} alt="" />
<a onclick="changeBG()" id="markedDownload" class="bg-blue-700 text-white p-4 text-xl rounded-xl active:bg-red-700" href={'https://management.beanstalkedu.com/assets/'+plan.image+'?download'}>Download</a>
)}
</div>
</main>
<script is:inline>
function changeBG(){
document.getElementById('markedDownload').style.backgroundColor = 'red';
}
</script>