From 4a25fbea8611b58ca17b36e0bc304abc6f563e17 Mon Sep 17 00:00:00 2001 From: dev sp Date: Sat, 23 Dec 2023 09:00:00 +0000 Subject: [PATCH] add conditional color --- public/assets/pencil.png | Bin 0 -> 7402 bytes public/assets/svg/pencil.svg | 1 + src/components/MainHeader.vue | 217 +------------------------ src/pages/cross/index.astro | 235 +++++++++++++++++++++++++++ src/pages/drawing/index.astro | 296 ++++++---------------------------- src/pages/drawing/v2.astro | 53 ++++++ src/pages/tick/v1.astro | 41 +++-- src/pages/tick/v2.astro | 43 +++-- 8 files changed, 393 insertions(+), 493 deletions(-) create mode 100644 public/assets/pencil.png create mode 100644 public/assets/svg/pencil.svg create mode 100644 src/pages/cross/index.astro create mode 100644 src/pages/drawing/v2.astro diff --git a/public/assets/pencil.png b/public/assets/pencil.png new file mode 100644 index 0000000000000000000000000000000000000000..dd2a6d13e339309bb803e06786ea1dd8c3aefcd5 GIT binary patch literal 7402 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 literal 0 HcmV?d00001 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/`, {