diff --git a/grids.js b/grids.js index 19e9c0b..32ca208 100644 --- a/grids.js +++ b/grids.js @@ -1,25 +1,25 @@ - function hexToRgb(hex) { +let selectedColorPalette; +let color; + +function hexToRgb(hex) { return { - r: ((hex >> 16) & 255) / 255, - g: ((hex >> 8) & 255) / 255, - b: (hex & 255) / 255 + r: ((hex >> 16) & 255) / 255, + g: ((hex >> 8) & 255) / 255, + b: (hex & 255) / 255 }; } - const colorMap = { - "Celestial Crimson": [0x811453, 0xdd2f59, 0xffb98a], - "Starlight Silver": [0x414e6d, 0xaebdc7, 0xe9ecef], - "Galactic Teal": [0x034752, 0x0092a6, 0x23c5e0], - "Nebula Purple": [0x490092, 0x8700e8, 0xba80e8], - "Cosmic Blue": [0x00171f, 0x0a4f62, 0x00a4c4], - "original": [0xff0000, 0x00ff00, 0x0000ff] +const colorMap = { + "Celestial Crimson": [0x811453, 0xbcd4e6, 0xfff5ee, 0x333333], + "Starlight Silver": [0x414e6d, 0x788995, 0xf5f5f5, 0x2c3e50], + "Galactic Teal": [0x034752, 0x3a5f6e, 0xe0f2f1, 0x1abc9c], + "Nebula Purple": [0x490092, 0x835a9b, 0xe6e6fa, 0x8e44ad], + "Cosmic Blue": [0x00171f, 0x16343a, 0xc6e2ff, 0x3498db], + "original": [0xB22222, 0xd3d3d3, 0xfff5ee, 0x333333] }; -let selectedColorPalette; -let color; - -function setColorFromPalette(){ - const selectedPalette=document.getElementById('colorSelect'); +function setColorFromPalette() { + const selectedPalette = document.getElementById('colorSelect'); if (!selectedPalette) { console.error("No color palette selected."); return; @@ -35,7 +35,6 @@ function setColorFromPalette(){ const rgb = hexToRgb(colorHex); color = new THREE.Color(rgb.r, rgb.g, rgb.b); lineMaterial.color.set(color); - } } @@ -46,13 +45,32 @@ function applySettings() { document.getElementById("applySettings").addEventListener("click", applySettings); +document.getElementById("saveSettings").addEventListener('click', function() { + // Save the selected theme + saveThemeSelection(selectedColorPalette); + window.location.reload(); // Reload the page +}); document.addEventListener("DOMContentLoaded", function() { // Wait for the DOM content to be fully loaded document.getElementById("applySettings").click(); // Programmatically trigger a click event on the button - console.log("Theme Activated..................") + console.log("Theme Activated..."); + const selectedTheme = loadThemeSelection(); + if (selectedTheme) { + document.getElementById('colorSelect').value = selectedTheme; + applySettings(); + } + console.log("Theme activated."); }); +function saveThemeSelection(theme) { + localStorage.setItem('selectedTheme', theme); +} + +function loadThemeSelection() { + return localStorage.getItem('selectedTheme'); +} + @@ -67,7 +85,7 @@ document.addEventListener("DOMContentLoaded", function() { let lineMaterial = new THREE.LineBasicMaterial({ - linewidth: 10, + linewidth: 30, }); const lineGeometry1 =new THREE.BufferGeometry().setFromPoints([ diff --git a/htmlcube.js b/htmlcube.js index b8a4a4f..aa9b0b9 100644 --- a/htmlcube.js +++ b/htmlcube.js @@ -29,12 +29,13 @@ const cube = new THREE.Mesh(cubeGeometry, cubeMaterial); scene.add(cube); // Ground + const ground = Matter.Bodies.rectangle(9, -8, 800, 2, { isStatic: true }); Matter.World.add(engine.world, [ground]); const matterGroundPosition = ground.position; const threeGround = new THREE.Mesh( new THREE.BoxGeometry(800, 2, 800), - new THREE.MeshBasicMaterial({ color: 0x808080, transparent: true, opacity: 0.8 }) + new THREE.MeshBasicMaterial({ color:0x808080,transparent: true, opacity: 0.8 }) ); scene.add(threeGround); threeGround.position.set(matterGroundPosition.x, matterGroundPosition.y, matterGroundPosition.z); @@ -59,3 +60,5 @@ function animate() { } animate(); + + diff --git a/sqaureobject.js b/sqaureobject.js index bb80cb7..2e3a48d 100644 --- a/sqaureobject.js +++ b/sqaureobject.js @@ -2,9 +2,9 @@ let selectedColorPalette; let color; let squares = []; -let squareMaterial = new THREE.MeshBasicMaterial({ side: THREE.DoubleSide }); +let squareMaterial = new THREE.MeshBasicMaterial({ side: THREE.DoubleSide }); - function hexToRgb(hex) { +function hexToRgb(hex) { return { r: ((hex >> 16) & 255) / 255, g: ((hex >> 8) & 255) / 255, @@ -12,16 +12,22 @@ let squareMaterial = new THREE.MeshBasicMaterial({ side: THREE.DoubleSide }); }; } - const colorMap = { - "Celestial Crimson": [0x811453, 0xdd2f59, 0xffb98a], - "Starlight Silver": [0x414e6d, 0xaebdc7, 0xe9ecef], - "Galactic Teal": [0x034752, 0x0092a6, 0x23c5e0], - "Nebula Purple": [0x490092, 0x8700e8, 0xba80e8], - "Cosmic Blue": [0x00171f, 0x0a4f62, 0x00a4c4], - "original": [0xff0000, 0x00ff00, 0x0000ff] -}; +function saveThemeSelection(theme) { + localStorage.setItem('selectedTheme', theme); +} +function loadThemeSelection() { + return localStorage.getItem('selectedTheme'); +} +const colorMap = { + "Celestial Crimson": [0x811453, 0xbcd4e6, 0xfff5ee, 0x333333], + "Starlight Silver": [0x414e6d, 0x788995, 0xf5f5f5, 0x2c3e50], + "Galactic Teal": [0x034752, 0x3a5f6e, 0xe0f2f1, 0x1abc9c], + "Nebula Purple": [0x490092, 0x835a9b, 0xe6e6fa, 0x8e44ad], + "Cosmic Blue": [0x00171f, 0x16343a, 0xc6e2ff, 0x3498db], + "original": [0xB22222, 0xd3d3d3, 0xfff5ee, 0x333333] +}; function setColorFromPalette() { const selectedPalette = document.getElementById('colorSelect'); @@ -40,7 +46,6 @@ function setColorFromPalette() { const rgb = hexToRgb(colorHex); color = new THREE.Color(rgb.r, rgb.g, rgb.b); squareMaterial.color.set(color); - } } @@ -52,22 +57,24 @@ function applySettings() { document.getElementById("applySettings").addEventListener("click", applySettings); + document.addEventListener("DOMContentLoaded", function() { - // Wait for the DOM content to be fully loaded - document.getElementById("applySettings").click(); // Programmatically trigger a click event on the button - console.log("Theme Activated..................") + document.getElementById("applySettings").click(); + console.log("Theme Activated..."); + const selectedTheme = loadThemeSelection(); + if (selectedTheme) { + document.getElementById('colorSelect').value = selectedTheme; + applySettings(); + } + console.log("Theme activated."); }); + function create_squares() { const squareSize = 0.7; const squareGeometry = new THREE.PlaneGeometry(squareSize, squareSize); - - - - - const squarePositions = [ new THREE.Vector3(-0.76, -0.76, -1.16), // square1 new THREE.Vector3(0, -0.76, -1.16), // square2 diff --git a/startUI.js b/startUI.js index bac312e..8ec327a 100644 --- a/startUI.js +++ b/startUI.js @@ -269,10 +269,6 @@ function breakMesh(mesh) { - - - - function xno(){ const xPosition = -10; const yPosition = 15; diff --git a/x.js b/x.js index b4f5455..a551726 100644 --- a/x.js +++ b/x.js @@ -17,7 +17,69 @@ let scoresData = { savedoScore: 0 }; +let selectedColorPalette; +let textColor; + +const colorMap = { + "Celestial Crimson": [0x811453, 0xbcd4e6, 0xfff5ee, 0x333333], + "Starlight Silver": [0x414e6d, 0x788995, 0xf5f5f5, 0x2c3e50], + "Galactic Teal": [0x034752, 0x3a5f6e, 0xe0f2f1, 0x1abc9c], + "Nebula Purple": [0x490092, 0x835a9b, 0xe6e6fa, 0x8e44ad], + "Cosmic Blue": [0x00171f, 0x16343a, 0xc6e2ff, 0x3498db], + "original": [0xB22222, 0xd3d3d3, 0xfff5ee, 0x333333] +}; + +function hexToRgb(hex) { + return { + r: ((hex >> 16) & 255) / 255, + g: ((hex >> 8) & 255) / 255, + b: (hex & 255) / 255 + }; +} + +function setColorFromPalette() { + const selectedPalette = document.getElementById('colorSelect'); + if (!selectedPalette) { + console.error("No color palette selected."); + return; + } + const paletteName = selectedPalette.value; + if (!(paletteName in colorMap)) { + console.error("Invalid color palette name:", paletteName); + return; + } + if (paletteName !== selectedColorPalette) { + selectedColorPalette = paletteName; + const colorHex = colorMap[paletteName][2]; + const rgb = hexToRgb(colorHex); + textColor = new THREE.Color(rgb.r, rgb.g, rgb.b); + return textColor; + } +} + +function applySettings() { + setColorFromPalette(); + console.log("Settings applied."); + saveTextColorSelection(selectedColorPalette); // Save selected text color +} +document.getElementById("applySettings").addEventListener("click", applySettings); + +function saveTextColorSelection(color) { + localStorage.setItem('selectedTextColor', color); +} + +function loadTextColorSelection() { + return localStorage.getItem('selectedTextColor'); +} + +document.addEventListener("DOMContentLoaded", function() { + const selectedTextTheme = loadTextColorSelection(); + if (selectedTextTheme) { + document.getElementById('colorSelect').value = selectedTextTheme; + applySettings(); // Apply settings automatically + } +}); /* @@ -228,9 +290,9 @@ function handleContextMenu() { function addText(position, textValue) { const loader = new THREE.FontLoader(); loader.load('./helvetiker_bold.typeface.json', function (loadedFont) { - const color = 0x006699; + const matLite = new THREE.MeshBasicMaterial({ - color: color, + color: textColor, transparent: false, opacity: 1, side: THREE.DoubleSide @@ -286,12 +348,6 @@ function addText(position, textValue) { //allclickedpos contains the number[location] of the clicked sqaure and clicked text,,, // divided aray consists of allclicked positions divided by 3!!!! - - - - - - let xTextMesh = null; let oTextMesh = null; @@ -619,11 +675,11 @@ function saveAddedTextToLocalStorage() { -function addTextToScene(position, textValue, rotation, color = 0x006699, size = 0.38) { +function addTextToScene(position, textValue, rotation, color = textColor, size = 0.38) { const loader = new THREE.FontLoader(); loader.load('./helvetiker_bold.typeface.json', function (loadedFont) { const matLite = new THREE.MeshBasicMaterial({ - color: color, + color: textColor, transparent: false, opacity: 1, side: THREE.DoubleSide @@ -701,7 +757,7 @@ window.addEventListener('load', function() { document.getElementById("saveSettings").addEventListener('click', function() { - + saveTextColorSelection(); saveAddedTextToLocalStorage(); saveScoresToLocalStorage(); @@ -724,3 +780,5 @@ document.getElementById("deleteSettings").addEventListener('click', function() { +//// +