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

all_likes_good

pull/5/head
Dev 1 2023-09-01 20:35:27 +05:30
parent dc84dad317
commit aa659478a1
1 changed files with 200 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,29 +10,28 @@ import Layout from '../../layouts/Layout.astro';
</Layout> </Layout>
<script is:inline> <script is:inline>
var assetsList = {} var assetsList = {}
const params = new URLSearchParams(window.location.search); const params = new URLSearchParams(window.location.search);
const paramsID = params.get('id'); const paramsID = params.get('id');
const data = fetch(`https://management.beanstalkedu.com/items/game_drawing/${encodeURIComponent(paramsID)}`) const data = fetch(`https://management.beanstalkedu.com/items/game_drawing/${encodeURIComponent(paramsID)}`)
.then(response => response.json()) .then(response => response.json())
.then(({data}) => { .then(({data}) => {
const {image} = data; const {image} = data;
assetsList.image = "https://management.beanstalkedu.com/assets/" + image ; assetsList.image = "https://management.beanstalkedu.com/assets/" + image ; //+ "?width=450";
const config = {
const config = { type: Phaser.AUTO,
type: Phaser.AUTO, width: window.innerWidth,
width: window.innerWidth, height: window.innerHeight,
height: window.innerHeight, backgroundColor: '#ffffff',
backgroundColor: '#05b3a4', scale: {
scale: { mode: Phaser.Scale.FIT,
mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
autoCenter: Phaser.Scale.CENTER_HORIZONTALLY, },
}, scene: {
scene: { preload: preload,
preload: preload, create: create,
create: create, update: update,
update: update, },
}, };
};
const game = new Phaser.Game(config); const game = new Phaser.Game(config);
}) })
@ -40,146 +39,192 @@ const params = new URLSearchParams(window.location.search);
console.error('Error fetching initial data:', error); console.error('Error fetching initial data:', error);
}); });
// const config = { const displayW = window.innerWidth;
// type: Phaser.AUTO, const displayH = window.innerHeight;
// width: window.innerWidth,
// height: window.innerHeight,
// backgroundColor: '#ffffff',
// scale: {
// mode: Phaser.Scale.FIT,
// autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
// },
// scene: {
// preload: preload,
// create: create,
// update: update,
// },
// };
// const game = new Phaser.Game(config);
const displayW = window.innerWidth;
const displayH = window.innerHeight;
let graphics; let graphics;
let outlineImage; let isDrawing = false;
let isDrawing = false; let selectedColor = '#f00f0f'; // Default color
let selectedColor = '#ff0000'; // Default color let brushSize = 40; // Default brush size
let brushSize = 1; // Default brush size let customCursor;
const cursorSizeMultiplier = 1;
function preload() { function preload() {
// this.load.image('outline', '/assets/cow.png'); this.load.image('outline', assetsList.image);
this.load.image('outline', assetsList.image);
}
function create() {
outlineImage = this.add.image(displayW / 2, displayH / 2, 'outline');
graphics = this.add.graphics();
const colorPicker = document.createElement('input');
colorPicker.type = 'color';
colorPicker.value = selectedColor;
colorPicker.className = 'color-picker';
document.body.appendChild(colorPicker);
colorPicker.style.position = 'absolute';
// colorPicker.textContent = 'Clear';
colorPicker.style.top = '30px';
colorPicker.style.left = '20px';
colorPicker.addEventListener('input', (event) => {
selectedColor = event.target.value; // Update selectedColor
});
const sliderContainer = document.createElement('div');
sliderContainer.className = 'slider-container';
document.body.appendChild(sliderContainer);
sliderContainer.style.position = 'absolute';
sliderContainer.style.top = '20px';
sliderContainer.style.right = '20px';
const slider = document.createElement('input');
slider.type = 'range';
slider.min = '2';
slider.max = '20';
slider.value = brushSize.toString();
slider.className = 'slider';
sliderContainer.appendChild(slider);
slider.addEventListener('input', (event) => {
brushSize = parseInt(event.target.value);
slider.style.backgroundSize = `calc(${(brushSize - 2) * 100 / 18}% + 20px) 100%`;
});
const clearButton = document.createElement('button');
clearButton.textContent = 'Clear';
// clearButton.className = 'clear-button';
document.body.appendChild(clearButton);
clearButton.style.position = 'absolute';
clearButton.style.top = '20px';
clearButton.style.left = '120px';
clearButton.style.backgroundColor = 'blue';
clearButton.style.color = 'white';
clearButton.style.padding = '10px 30px';
clearButton.style.fontSize = '20px';
clearButton.style.fontWeight = 'bold';
clearButton.style.borderRadius = '50%';
clearButton.style.boxShadow = "5px 20px 30px #7c4c2390";
clearButton.addEventListener('click', () => {
clearDrawing();
});
this.input.on('pointerdown', () => {
isDrawing = true;
startDrawing(this.input.x, this.input.y);
});
this.input.on('pointermove', () => {
if (isDrawing) {
continueDrawing(this.input.x, this.input.y);
}
});
this.input.on('pointerup', () => {
if (isDrawing) {
finishDrawing();
}
isDrawing = false;
});
}
function startDrawing(x, y) {
graphics.lineStyle(brushSize * 2, Phaser.Display.Color.HexStringToColor(selectedColor).color);
graphics.beginPath();
graphics.moveTo(x, y);
}
function continueDrawing(x, y) {
graphics.lineTo(x, y);
graphics.strokePath();
}
function finishDrawing() {
// No need for additional actions here
}
function clearDrawing() {
graphics.clear();
}
function update() {
const slider = document.querySelector('input[type="range"]');
if (slider && !isDrawing) {
const sliderValue = parseInt(slider.value);
const max = parseInt(slider.max);
const width = slider.offsetWidth;
const offsetX = (sliderValue - 2) / (max - 2) * width;
slider.style.background = `linear-gradient(to right, #000 0%, #000 ${offsetX}px, #fff ${offsetX}px, #fff 100%)`;
} }
}
function create() {
const params = new URLSearchParams(window.location.search);
const paramsID = params.get('id');
fetch(`https://management.beanstalkedu.com/items/game_drawing/${encodeURIComponent(paramsID)}`)
.then(response => response.json())
.then(({ data }) => {
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 60;
const responsiveFontSize = (window.innerWidth / 950) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 20, data.description, {
font: `${responsiveFontSize}px quicksand`,
fill: '#7c4c23',
}).setOrigin(0.5);
})
.catch(error => {
console.error('Error fetching initial data:', error);
});
outlineImage = this.add.image(displayW / 2, displayH / 2, 'outline').setScale(0.5);
graphics = this.add.graphics();
const colorPicker = document.createElement('input');
colorPicker.type = 'color';
colorPicker.value = selectedColor;
colorPicker.className = 'color-picker';
document.body.appendChild(colorPicker);
colorPicker.style.position = 'absolute';
// colorPicker.textContent = 'Clear';
colorPicker.style.top = '10%';
colorPicker.style.left = '20px';
colorPicker.style.width = '38px';
colorPicker.style.height = '38px';
// colorPicker.style.borderRadius = '50%';
colorPicker.addEventListener('input', (event) => {
selectedColor = event.target.value; // Update selectedColor
});
const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
const buttonSize = 40;
const buttonSpacing = 10;
// Define the horizontal position for the vertical palette
const colorPaletteX = 40; // Adjusted position
// Define the starting position for the vertical palette
const paletteY = displayH / 1.9 - (colors.length / 1 * (buttonSize + buttonSpacing));
// Keep track of the selected color
let selectedButton = null;
colors.forEach((color, index) => {
const y = paletteY + index * (buttonSize + buttonSpacing);
const button = this.add.circle(colorPaletteX, y, buttonSize / 2, Phaser.Display.Color.HexStringToColor(color).color);
button.setInteractive();
button.on('pointerdown', function () {
// Remove the mark from the previously selected button, if any
if (selectedButton) {
selectedButton.setStrokeStyle(0); // Remove the border
}
// Set the new selected color
selectedColor = color;
// Add a border or tick mark to indicate the selected color
button.setStrokeStyle(3, 0x000000); // Add a white border (you can customize this)
// Update the selectedButton variable to the current button
selectedButton = button;
});
});
const sliderContainer = document.createElement('div');
sliderContainer.className = 'slider-container';
document.body.appendChild(sliderContainer);
sliderContainer.style.position = 'absolute';
sliderContainer.style.top = '10%';
sliderContainer.style.right = '20px';
const slider = document.createElement('input');
slider.type = 'range';
slider.min = '2';
slider.max = '80';
slider.value = brushSize.toString();
slider.className = 'slider';
sliderContainer.appendChild(slider);
slider.addEventListener('input', (event) => {
brushSize = parseInt(event.target.value);
slider.style.backgroundSize = `calc(${(brushSize - 2) * 100 / 18}% + 20px) 100%`;
});
const clearButton = document.createElement('button');
clearButton.textContent = 'Clear';
// clearButton.className = 'clear-button';
document.body.appendChild(clearButton);
clearButton.style.position = 'absolute';
clearButton.style.top = '10%';
clearButton.style.left = '120px';
clearButton.style.backgroundColor = 'blue';
clearButton.style.color = 'white';
clearButton.style.padding = '10px 30px';
clearButton.style.fontSize = '20px';
clearButton.style.fontWeight = 'bold';
clearButton.style.borderRadius = '50%';
clearButton.style.boxShadow = "5px 20px 30px #7c4c2390";
clearButton.addEventListener('click', () => {
clearDrawing();
});
this.input.on('pointerdown', () => {
isDrawing = true;
startDrawing(this.input.x, this.input.y);
});
this.input.on('pointermove', () => {
if (isDrawing) {
continueDrawing(this.input.x, this.input.y);
}
});
this.input.on('pointerup', () => {
if (isDrawing) {
finishDrawing();
}
isDrawing = false;
});
customCursor = this.add.graphics();
// Disable the default cursor
this.input.setDefaultCursor('none');
}
function startDrawing(x, y) {
graphics.lineStyle(brushSize * 2, Phaser.Display.Color.HexStringToColor(selectedColor).color);
graphics.beginPath();
graphics.moveTo(x, y);
}
function continueDrawing(x, y) {
graphics.lineTo(x, y);
graphics.strokePath();
}
function finishDrawing() {
// No need for additional actions here
}
function clearDrawing() {
graphics.clear();
}
function update() {
const slider = document.querySelector('input[type="range"]');
if (slider && !isDrawing) {
const sliderValue = parseInt(slider.value);
const max = parseInt(slider.max);
const width = slider.offsetWidth;
const offsetX = (sliderValue - 2) / (max - 2) * width;
slider.style.background = `linear-gradient(to right, #000 0%, #000 ${offsetX}px, #fff ${offsetX}px, #fff 100%)`;
};
const cursorSize = brushSize * cursorSizeMultiplier;
customCursor.clear(); // Clear the previous frame
customCursor.fillStyle(Phaser.Display.Color.HexStringToColor(selectedColor).color); // Use the selected drawing color
// customCursor.setStrokeStyle(0xff0000); // Color of the cursor outline
customCursor.fillCircle(0, 0, cursorSize);
// Position the cursor at the current mouse pointer coordinates
customCursor.x = this.input.x;
customCursor.y = this.input.y;
}