work in new drawing and change api from old drawing
parent
d40c6a1121
commit
1992331b96
Binary file not shown.
After Width: | Height: | Size: 291 KiB |
|
@ -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)
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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>
|
Loading…
Reference in New Issue