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

work on score calculations

pull/2/head
dev sp 2024-01-17 08:45:14 +00:00
parent 85924a90e6
commit 62565a5bf2
4 changed files with 61 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
src/pages/drag/index.astro
View File

@ -96,7 +96,7 @@ import Layout from '../../layouts/Layout.astro';
return result; return result;
}; };
shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
let blockMatches;
const targetZones = [ const targetZones = [
{ {
x: 0, x: 0,
@ -123,24 +123,24 @@ import Layout from '../../layouts/Layout.astro';
block: null, block: null,
}, },
]; ];
const blockMatches = [ // const blockMatches = [
{ // {
blockName: "blocks1", // blockName: "blocks1",
targetName: "target1", // targetName: "target1",
}, // },
{ // {
blockName: "blocks2", // blockName: "blocks2",
targetName: "target2", // targetName: "target2",
}, // },
{ // {
blockName: "blocks3", // blockName: "blocks3",
targetName: "target3", // targetName: "target3",
}, // },
{ // {
blockName: "blocks4", // blockName: "blocks4",
targetName: "target4", // targetName: "target4",
}, // },
]; // ];
// console.log(blockMatches.blockName, blockMatches.targetName) // console.log(blockMatches.blockName, blockMatches.targetName)
var assetsList = {} var assetsList = {}
const params = new URLSearchParams(window.location.search); const params = new URLSearchParams(window.location.search);
@ -303,6 +303,24 @@ import Layout from '../../layouts/Layout.astro';
font: ` ${responsiveFontSize}px Quicksand`, font: ` ${responsiveFontSize}px Quicksand`,
fill: '#7c4c23', fill: '#7c4c23',
}).setOrigin(0.5); }).setOrigin(0.5);
blockMatches = [
{
blockName: "blocks1",
targetName: `target${data.answer1}`,
},
{
blockName: "blocks2",
targetName: `target${data.answer2}`,
},
{
blockName: "blocks3",
targetName: `target${data.answer3}`,
},
{
blockName: "blocks4",
targetName: `target${data.answer4}`,
},
];
// this.add.text(displayW / 14 - 15, 50, data.LearningArea, {font: `20px`}).setTint(0x7c4c23); // this.add.text(displayW / 14 - 15, 50, data.LearningArea, {font: `20px`}).setTint(0x7c4c23);
// this.add.text(displayW / 14 - 15, 70, data.LearningSubArea_copy, {font: `19px`}).setTint(0x7c4c23); // this.add.text(displayW / 14 - 15, 70, data.LearningSubArea_copy, {font: `19px`}).setTint(0x7c4c23);
// Left Image Name // Left Image Name
@ -526,11 +544,12 @@ import Layout from '../../layouts/Layout.astro';
submitButton.setVisible(true); submitButton.setVisible(true);
} }
} }
let scoreTotal = 0;
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName); const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
let scoreTotal=0; console.log(match)
if(match){ if(match !== undefined){
scoreTotal++; scoreTotal++;
// console.log(scoreTotal) console.log(scoreTotal)
} }
// console.log(scoreTotal) // console.log(scoreTotal)
// // console.log(match) // // console.log(match)

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

@ -12,10 +12,10 @@ import Layout from '../../layouts/Layout.astro';
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const drawingZone = { const drawingZone = {
x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width x: 0,
y: window.innerHeight / 4, y: 0,
width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width width: window.innerWidth,
height: window.innerHeight / 2, height: window.innerHeight,
}; };
if(isMobile){ if(isMobile){
submitWidth = 250; submitWidth = 250;
@ -117,8 +117,8 @@ import Layout from '../../layouts/Layout.astro';
.then(({ data }) => { .then(({ data }) => {
// console.log(data.colors) // console.log(data.colors)
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 15; const baseFontSize = 22;
const responsiveFontSize = (window.innerWidth / 280) * baseFontSize; const responsiveFontSize = (window.innerWidth / 800) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 70, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', }).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 70, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', }).setOrigin(0.5);
// this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight, data.LearningArea, {font: `20px`}).setTint(0X7C4C23) // this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight, data.LearningArea, {font: `20px`}).setTint(0X7C4C23)
// this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight + 20, data.LearningSubArea, {font: `20px`}).setTint(0X7C4C23) // this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight + 20, data.LearningSubArea, {font: `20px`}).setTint(0X7C4C23)
@ -230,8 +230,8 @@ import Layout from '../../layouts/Layout.astro';
// const colors = data.colors; // const colors = data.colors;
// var colors = colorList; // var colors = colorList;
const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff']; const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
const buttonSize = 50; const buttonSize = 60;
const buttonSpacing = 15; const buttonSpacing = 5;
// Create a container div for the color buttons // Create a container div for the color buttons
const colorButtonsContainer = document.createElement('div'); const colorButtonsContainer = document.createElement('div');
colorButtonsContainer.style.display = 'flex'; // Display color buttons horizontally colorButtonsContainer.style.display = 'flex'; // Display color buttons horizontally
@ -468,10 +468,12 @@ import Layout from '../../layouts/Layout.astro';
snapNotice.setVisible(false); snapNotice.setVisible(false);
} }
function captureSnapshot(drawingZone) { function captureSnapshot(drawingZone) {
submitButton.setVisible(false);
// snapNotice.setVisible(true); // snapNotice.setVisible(true);
snapshotButton.setVisible(false); snapshotButton.setVisible(false);
customCursor.setVisible(false); customCursor.setVisible(false);
drawingZone.renderer.snapshot((image) => { drawingZone.renderer.snapshot((image) => {
submitButton.setVisible(true);
snapshotButton.setVisible(true); snapshotButton.setVisible(true);
customCursor.setVisible(true); customCursor.setVisible(true);
image.style.width = '160px'; image.style.width = '160px';

4
src/pages/drawing/v2.astro
View File

@ -219,7 +219,7 @@ import Layout from '../../layouts/Layout.astro';
colorContainer.style.flexDirection = 'column'; colorContainer.style.flexDirection = 'column';
} }
var colors = colorList; var colors = colorList;
const buttonSize = 50; const buttonSize = 60;
const buttonSpacing = 15; const buttonSpacing = 15;
const colorButtonsContainer = document.createElement('div'); const colorButtonsContainer = document.createElement('div');
colorButtonsContainer.style.display = 'flex'; colorButtonsContainer.style.display = 'flex';
@ -443,9 +443,11 @@ import Layout from '../../layouts/Layout.astro';
} }
function captureSnapshot(drawingZone) { function captureSnapshot(drawingZone) {
// snapNotice.setVisible(true); // snapNotice.setVisible(true);
submitButton.setVisible(false);
snapshotButton.setVisible(false); snapshotButton.setVisible(false);
customCursor.setVisible(false); customCursor.setVisible(false);
drawingZone.renderer.snapshot((image) => { drawingZone.renderer.snapshot((image) => {
submitButton.setVisible(true);
snapshotButton.setVisible(true); snapshotButton.setVisible(true);
customCursor.setVisible(true); customCursor.setVisible(true);
image.style.width = '160px'; image.style.width = '160px';

12
src/pages/drawing/v3.astro
View File

@ -23,7 +23,7 @@ import Layout from '../../layouts/Layout.astro';
noticeWidth = 100; noticeWidth = 100;
noticeHeight = 0; noticeHeight = 0;
downloadWidth = 67; downloadWidth = 67;
downloadHeight = 200; downloadHeight = 160;
learningWidth = 200; learningWidth = 200;
learningHeight = 400 learningHeight = 400
} else { } else {
@ -117,8 +117,8 @@ import Layout from '../../layouts/Layout.astro';
.then(({ data }) => { .then(({ data }) => {
// console.log(data.colors) // console.log(data.colors)
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 15; const baseFontSize = 22;
const responsiveFontSize = (window.innerWidth / 280) * baseFontSize; const responsiveFontSize = (window.innerWidth / 800) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 70, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', }).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 70, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', }).setOrigin(0.5);
// this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight, data.LearningArea, {font: `20px`}).setTint(0X7C4C23) // this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight, data.LearningArea, {font: `20px`}).setTint(0X7C4C23)
// this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight + 20, data.LearningSubArea, {font: `20px`}).setTint(0X7C4C23) // this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight + 20, data.LearningSubArea, {font: `20px`}).setTint(0X7C4C23)
@ -230,7 +230,7 @@ import Layout from '../../layouts/Layout.astro';
// const colors = data.colors; // const colors = data.colors;
// var colors = colorList; // var colors = colorList;
const colors = ['#ff0000']; const colors = ['#ff0000'];
const buttonSize = 50; const buttonSize = 60;
const buttonSpacing = 15; const buttonSpacing = 15;
// Create a container div for the color buttons // Create a container div for the color buttons
const colorButtonsContainer = document.createElement('div'); const colorButtonsContainer = document.createElement('div');
@ -452,7 +452,7 @@ import Layout from '../../layouts/Layout.astro';
// }; // };
// Add a "Save Snapshot" button // Add a "Save Snapshot" button
if(isMobile){ if(isMobile){
snapWidth = 50; snapWidth = 70;
snapHeight = 70; snapHeight = 70;
} else { } else {
snapWidth = 200; snapWidth = 200;
@ -468,10 +468,12 @@ import Layout from '../../layouts/Layout.astro';
snapNotice.setVisible(false); snapNotice.setVisible(false);
} }
function captureSnapshot(drawingZone) { function captureSnapshot(drawingZone) {
submitButton.setVisible(false);
// snapNotice.setVisible(true); // snapNotice.setVisible(true);
snapshotButton.setVisible(false); snapshotButton.setVisible(false);
customCursor.setVisible(false); customCursor.setVisible(false);
drawingZone.renderer.snapshot((image) => { drawingZone.renderer.snapshot((image) => {
submitButton.setVisible(true);
snapshotButton.setVisible(true); snapshotButton.setVisible(true);
customCursor.setVisible(true); customCursor.setVisible(true);
image.style.width = '160px'; image.style.width = '160px';