all_likes_good
parent
dc84dad317
commit
aa659478a1
|
|
@ -10,19 +10,18 @@ import Layout from '../../layouts/Layout.astro';
|
|||
</Layout>
|
||||
<script is:inline>
|
||||
var assetsList = {}
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const paramsID = params.get('id');
|
||||
const data = fetch(`https://management.beanstalkedu.com/items/game_drawing/${encodeURIComponent(paramsID)}`)
|
||||
.then(response => response.json())
|
||||
.then(({data}) => {
|
||||
const {image} = data;
|
||||
assetsList.image = "https://management.beanstalkedu.com/assets/" + image ;
|
||||
|
||||
assetsList.image = "https://management.beanstalkedu.com/assets/" + image ; //+ "?width=450";
|
||||
const config = {
|
||||
type: Phaser.AUTO,
|
||||
width: window.innerWidth,
|
||||
height: window.innerHeight,
|
||||
backgroundColor: '#05b3a4',
|
||||
backgroundColor: '#ffffff',
|
||||
scale: {
|
||||
mode: Phaser.Scale.FIT,
|
||||
autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
|
||||
|
|
@ -32,7 +31,7 @@ const params = new URLSearchParams(window.location.search);
|
|||
create: create,
|
||||
update: update,
|
||||
},
|
||||
};
|
||||
};
|
||||
const game = new Phaser.Game(config);
|
||||
|
||||
})
|
||||
|
|
@ -40,68 +39,102 @@ const params = new URLSearchParams(window.location.search);
|
|||
|
||||
console.error('Error fetching initial data:', error);
|
||||
});
|
||||
// const config = {
|
||||
// type: Phaser.AUTO,
|
||||
// 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;
|
||||
const displayW = window.innerWidth;
|
||||
const displayH = window.innerHeight;
|
||||
|
||||
let graphics;
|
||||
let outlineImage;
|
||||
let isDrawing = false;
|
||||
let selectedColor = '#ff0000'; // Default color
|
||||
let brushSize = 1; // Default brush size
|
||||
let graphics;
|
||||
let isDrawing = false;
|
||||
let selectedColor = '#f00f0f'; // Default color
|
||||
let brushSize = 40; // Default brush size
|
||||
let customCursor;
|
||||
const cursorSizeMultiplier = 1;
|
||||
|
||||
function preload() {
|
||||
// this.load.image('outline', '/assets/cow.png');
|
||||
function preload() {
|
||||
this.load.image('outline', assetsList.image);
|
||||
}
|
||||
}
|
||||
|
||||
function create() {
|
||||
outlineImage = this.add.image(displayW / 2, displayH / 2, 'outline');
|
||||
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 = '30px';
|
||||
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 = '20px';
|
||||
sliderContainer.style.top = '10%';
|
||||
sliderContainer.style.right = '20px';
|
||||
|
||||
const slider = document.createElement('input');
|
||||
slider.type = 'range';
|
||||
slider.min = '2';
|
||||
slider.max = '20';
|
||||
slider.max = '80';
|
||||
slider.value = brushSize.toString();
|
||||
slider.className = 'slider';
|
||||
sliderContainer.appendChild(slider);
|
||||
|
|
@ -117,7 +150,7 @@ function create() {
|
|||
document.body.appendChild(clearButton);
|
||||
|
||||
clearButton.style.position = 'absolute';
|
||||
clearButton.style.top = '20px';
|
||||
clearButton.style.top = '10%';
|
||||
clearButton.style.left = '120px';
|
||||
clearButton.style.backgroundColor = 'blue';
|
||||
clearButton.style.color = 'white';
|
||||
|
|
@ -148,28 +181,32 @@ function create() {
|
|||
}
|
||||
isDrawing = false;
|
||||
});
|
||||
}
|
||||
customCursor = this.add.graphics();
|
||||
|
||||
function startDrawing(x, y) {
|
||||
// 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) {
|
||||
function continueDrawing(x, y) {
|
||||
graphics.lineTo(x, y);
|
||||
graphics.strokePath();
|
||||
}
|
||||
}
|
||||
|
||||
function finishDrawing() {
|
||||
function finishDrawing() {
|
||||
// No need for additional actions here
|
||||
}
|
||||
}
|
||||
|
||||
function clearDrawing() {
|
||||
function clearDrawing() {
|
||||
graphics.clear();
|
||||
}
|
||||
}
|
||||
|
||||
function update() {
|
||||
function update() {
|
||||
const slider = document.querySelector('input[type="range"]');
|
||||
if (slider && !isDrawing) {
|
||||
const sliderValue = parseInt(slider.value);
|
||||
|
|
@ -177,9 +214,17 @@ function update() {
|
|||
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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue