diff --git a/public/assets/pencil.png b/public/assets/pencil.png new file mode 100644 index 0000000..dd2a6d1 Binary files /dev/null and b/public/assets/pencil.png differ diff --git a/public/assets/svg/pencil.svg b/public/assets/svg/pencil.svg new file mode 100644 index 0000000..759f931 --- /dev/null +++ b/public/assets/svg/pencil.svg @@ -0,0 +1 @@ + pencil \ No newline at end of file diff --git a/src/components/MainHeader.vue b/src/components/MainHeader.vue index 04b163e..d722c13 100644 --- a/src/components/MainHeader.vue +++ b/src/components/MainHeader.vue @@ -1,216 +1,3 @@ - - \ No newline at end of file +
Header
+ \ No newline at end of file diff --git a/src/pages/cross/index.astro b/src/pages/cross/index.astro new file mode 100644 index 0000000..10759c8 --- /dev/null +++ b/src/pages/cross/index.astro @@ -0,0 +1,235 @@ +--- +import Layout from "../../layouts/Layout.astro"; +--- + +
+
+
+
+
+

Tick

+ +
+
+

+

+
+

+
+
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+
+

+ +
+
+
+
+
+
+ + + diff --git a/src/pages/drawing/index.astro b/src/pages/drawing/index.astro index 80cd3e8..e282685 100644 --- a/src/pages/drawing/index.astro +++ b/src/pages/drawing/index.astro @@ -64,6 +64,7 @@ import Layout from '../../layouts/Layout.astro'; const data = fetch(`https://management.beanstalkedu.com/items/game_drawing/${encodeURIComponent(paramsID)}`) .then(response => response.json()) .then(({data}) => { + colorList = data.colors; const {image} = data; assetsList.image = "https://management.beanstalkedu.com/assets/" + image; // + "?width=450"; const config = { @@ -96,11 +97,13 @@ import Layout from '../../layouts/Layout.astro'; const cursorSizeMultiplier = 1; let isErasing = false; let snapNotice; + let colorList; function preload() { this.load.image('outline', assetsList.image); 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') } function create() { @@ -109,7 +112,7 @@ import Layout from '../../layouts/Layout.astro'; fetch(`https://management.beanstalkedu.com/items/game_drawing/${encodeURIComponent(paramsID)}`) .then(response => response.json()) .then(({ data }) => { - console.log(data) + // console.log(data.colors) const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const baseFontSize = 15; const responsiveFontSize = (window.innerWidth / 280) * baseFontSize; @@ -179,7 +182,7 @@ import Layout from '../../layouts/Layout.astro'; if(isMobile){ outlineImage.setDepth(-1).setScale(0.33); } else{ - outlineImage.setDepth(-1).setScale(0.75); + outlineImage.setDepth(-1).setScale(0.65); } graphics = this.add.graphics(); @@ -219,9 +222,12 @@ import Layout from '../../layouts/Layout.astro'; selectedColor = event.target.value; // Update selectedColor if not erasing } }); - // Append the color picker to the color container + // Append the color picker to the color container data colorContainer.appendChild(colorPicker); - const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff']; + // const colors = data.colors; + // console.log(colorList) + var colors = colorList; + // const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff']; const buttonSize = 50; const buttonSpacing = 15; // Create a container div for the color buttons @@ -250,15 +256,16 @@ import Layout from '../../layouts/Layout.astro'; // Other button styles remain the same // ${color} // Create the SVG element with dynamic fill color - button.innerHTML = ` `; if (!isMobile) { + pencilSize = '40px'; button.style.width = `${buttonSize}px`; button.style.height = `${buttonSize}px`; } else { + pencilSize = '40px'; button.style.width = `45px`; button.style.height = `45px`; } - + button.innerHTML = ` `; button.style.boxShadow = '5px 10px 30px #7c4c2390'; button.style.borderRadius = '20%'; button.style.marginRight = `${buttonSpacing}px`; @@ -446,7 +453,7 @@ import Layout from '../../layouts/Layout.astro'; snapshotButton.on('pointerdown', () => { captureSnapshot(this); }); - snapNotice = this.add.text(customWidth / 2, customHeight / 2, 'Succecfully Downloded', {font :'700 30px Quicksand', fill: '#05b3a4'}); + snapNotice = this.add.text(customWidth / 2, customHeight / 2, 'Succecfully Downloaded', {font :'700 30px Quicksand', fill: '#05b3a4'}); snapNotice.setVisible(false); } function captureSnapshot(drawingZone) { @@ -498,7 +505,6 @@ import Layout from '../../layouts/Layout.astro'; function clearDrawing() { graphics.clear(); } - function update() { const slider = document.querySelector('input[type="range"]'); if (slider && !isDrawing) { @@ -517,250 +523,37 @@ import Layout from '../../layouts/Layout.astro'; customCursor.y = this.input.y; } - - - - - -// const config = { -// type: Phaser.AUTO, -// width: window.innerWidth, -// height: window.innerHeight, -// backgroundColor: '#05b3a4', -// scale: { -// mode: Phaser.Scale.FIT, -// autoCenter: Phaser.Scale.CENTER_HORIZONTALLY, -// }, -// scene: { -// preload: preload, -// create: create, -// update: update, -// }, -// }; - -// const drawingZone = new Phaser.Game(config); -// const customWidth = window.innerWidth; -// const customHeight = window.innerHeight; - -// let graphics; -// let outlineImage; -// let isDrawing = false; -// let selectedColor = '#ff0000'; // Default color -// let brushSize = 5; // Default brush size - -// function preload() { -// this.load.image('outline', '/assets/cow.png'); -// } - -// function create() { -// outlineImage = this.add.image(customWidth / 2, customHeight / 2, 'outline'); - -// graphics = this.add.graphics(); - -// // Create a color picker using HTML input type color -// const colorPicker = document.createElement('input'); -// colorPicker.type = 'color'; -// colorPicker.value = selectedColor; -// colorPicker.className = 'color-picker'; -// colorPicker.addEventListener('input', (event) => { -// selectedColor = event.target.value; -// }); -// document.body.appendChild(colorPicker); - -// // Create a brush size slider using HTML input type range -// const sliderContainer = document.createElement('div'); -// sliderContainer.className = 'slider-container'; -// document.body.appendChild(sliderContainer); - -// const slider = document.createElement('input'); -// slider.type = 'range'; -// slider.min = '2'; -// slider.max = '20'; -// slider.value = brushSize.toString(); // Set initial value to brushSize -// 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'; -// clearButton.addEventListener('click', () => { -// clearDrawing(); -// }); -// document.body.appendChild(clearButton); -// 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() { -// // Update the slider position based on the pointer's movement -// 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 config = { - // type: Phaser.AUTO, - // width: window.innerWidth, - // height: window.innerHeight, - // backgroundColor: '#05b3a4', - // scale: { - // mode: Phaser.Scale.FIT, - // autoCenter: Phaser.Scale.CENTER_HORIZONTALLY, - // }, - // scene: { - // preload: preload, - // create: create, - // update: update - // } - // }; - - // const game = new Phaser.Game(config); - // const customWidth = window.innerWidth; - // const customHeight = window.innerHeight; - - // let graphics; - // let outlineImage; - // let isDrawing = false; - // let selectedColor = 0xff0000; // Default color - // let brushSize = 5; // Default brush size - - // function preload() { - // this.load.image('outline', '/assets/cow.png'); - // } - - // function create() { - // outlineImage = this.add.image(customWidth / 2, customHeight / 2, 'outline'); - - // graphics = this.add.graphics(); - - // // Create color palette buttons - // const colorPalette = [0xff0000, 0x00ff00, 0x0000ff]; // Example colors - - // colorPalette.forEach((color, index) => { - // const button = this.add.rectangle(50 + index * 70, 500, 50, 50, color); - // button.setInteractive(); - // button.on('pointerdown', () => { - // selectedColor = color; - // }); - // }); - - // // Create a brush size slider using HTML input type range - // const sliderContainer = document.createElement('div'); - // sliderContainer.className = 'slider-container'; - // document.body.appendChild(sliderContainer); - - // const slider = document.createElement('input'); - // slider.type = 'range'; - // slider.min = '2'; - // slider.max = '20'; - // slider.value = brushSize.toString(); // Set initial value to brushSize - // 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'; - // clearButton.addEventListener('click', () => { - // clearDrawing(); - // }); - // document.body.appendChild(clearButton); - - // 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, selectedColor); - // 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() { - // // Update the slider position based on the pointer's movement - // 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 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; + // const cursorScale = 1; // Adjust this value to increase/decrease the cursor size + + // // Assuming 'this' refers to your Phaser.Scene instance + // if (!this.customCursor) { + // // Create the custom cursor sprite + // this.customCursor = this.add.sprite(0, 0, 'cursorImage'); // Replace 'yourCursorImage' with the key of your loaded PNG image + // this.customCursor.setOrigin(0.3, 0.8); + // } + + // // Set the tint or fill color dynamically based on the selectedColor + // const color = Phaser.Display.Color.HexStringToColor(selectedColor).color; + // this.customCursor.setTint(color); + + // // Resize the cursor + // this.customCursor.setScale( cursorScale); + + // // Position the cursor at the current mouse pointer coordinates + // this.customCursor.x = this.input.x; + // this.customCursor.y = this.input.y; // } + \ No newline at end of file diff --git a/src/pages/drawing/v2.astro b/src/pages/drawing/v2.astro new file mode 100644 index 0000000..d0d68b0 --- /dev/null +++ b/src/pages/drawing/v2.astro @@ -0,0 +1,53 @@ +--- +import Layout from "../../layouts/Layout.astro"; +--- + +
+
+
+ + + \ No newline at end of file diff --git a/src/pages/tick/v1.astro b/src/pages/tick/v1.astro index 6dba41d..d8f94d0 100644 --- a/src/pages/tick/v1.astro +++ b/src/pages/tick/v1.astro @@ -131,24 +131,34 @@ import Layout from "../../layouts/Layout.astro"; }; function saveUserData() { - // Get checkbox values - const checkboxValues = { - a1: document.getElementById('a1').checked, - a2: document.getElementById('a2').checked, - a3: document.getElementById('a3').checked, - a4: document.getElementById('a4').checked, - a5: document.getElementById('a5').checked, - a6: document.getElementById('a6').checked, - }; - console.log(checkboxValues) + // Get checkbox values and corresponding elements + const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6']; + const checkboxValues = checkboxes.map(id => { + const checkbox = document.getElementById(id); + const element = document.getElementById('image' + id.slice(-1)); + return { + id: id, + checked: checkbox.checked, + element: element + }; + }); + + // Count points based on checkbox values and "greenBorder" class + let totalPoints = 0; + checkboxValues.forEach(checkbox => { + if (checkbox.checked && checkbox.element.classList.contains('greenBorder')) { + totalPoints += 1; + } + }); + // Move the userData object creation inside the saveUserData function if needed let userData = { - 'user': 'tick-v1@beanstalkedu.com', - 'game_name': gameName, - 'starts': formatedDateTime, - 'game_start' : gameStartTime, + 'user': 'tick-v1@beanstalkedu.com', + 'game_name': gameName, + 'starts': formatedDateTime, + 'score': totalPoints, // Include the totalPoints in the userData }; - + console.log(userData); fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { method: 'POST', headers: { @@ -168,6 +178,7 @@ import Layout from "../../layouts/Layout.astro"; }); } + document.addEventListener('DOMContentLoaded', function () { const contactForm = document.getElementById('contactForm'); contactForm.addEventListener('submit', async function (event) { diff --git a/src/pages/tick/v2.astro b/src/pages/tick/v2.astro index 39b29c4..105b739 100644 --- a/src/pages/tick/v2.astro +++ b/src/pages/tick/v2.astro @@ -157,22 +157,41 @@ import Layout from "../../layouts/Layout.astro"; }; function saveUserData() { - const checkboxValues = { - a1: document.getElementById('a1').checked, - a2: document.getElementById('a2').checked, - a3: document.getElementById('a3').checked, - a4: document.getElementById('a4').checked, - a5: document.getElementById('a5').checked, - a6: document.getElementById('a6').checked, - a7: document.getElementById('a7').checked, - a8: document.getElementById('a8').checked, - a9: document.getElementById('a9').checked, - }; + // const checkboxValues = { + // a1: document.getElementById('a1').checked, + // a2: document.getElementById('a2').checked, + // a3: document.getElementById('a3').checked, + // a4: document.getElementById('a4').checked, + // a5: document.getElementById('a5').checked, + // a6: document.getElementById('a6').checked, + // a7: document.getElementById('a7').checked, + // a8: document.getElementById('a8').checked, + // a9: document.getElementById('a9').checked, + // }; + const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8', 'a9']; + const checkboxValues = checkboxes.map(id => { + const checkbox = document.getElementById(id); + const element = document.getElementById('image' + id.slice(-1)); + return { + id: id, + checked: checkbox.checked, + element: element + }; + }); + + // Count points based on checkbox values and "greenBorder" class + let totalPoints = 0; + checkboxValues.forEach(checkbox => { + if (checkbox.checked && checkbox.element.classList.contains('greenBorder')) { + totalPoints += 1; + } + }); let userData = { 'user': 'tick-v2@beanstalkedu.com', 'game_name': gameName, 'starts': formatedDateTime, - 'game_start' : gameStartTime, + // 'game_start' : gameStartTime, + 'score' : totalPoints, }; fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {