Skip to content

Commit

Permalink
done with theme and saving
Browse files Browse the repository at this point in the history
  • Loading branch information
@ahmmed-binas
ahmmed-binas committed Apr 8, 2024
1 parent f5a746b commit 2ebadd0
Show file tree
Hide file tree
Showing 5 changed files with 136 additions and 54 deletions.
56 changes: 37 additions & 19 deletions grids.js
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -35,7 +35,6 @@ function setColorFromPalette(){
const rgb = hexToRgb(colorHex);
color = new THREE.Color(rgb.r, rgb.g, rgb.b);
lineMaterial.color.set(color);

}
}

Expand All @@ -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');
}




Expand All @@ -67,7 +85,7 @@ document.addEventListener("DOMContentLoaded", function() {


let lineMaterial = new THREE.LineBasicMaterial({
linewidth: 10,
linewidth: 30,
});

const lineGeometry1 =new THREE.BufferGeometry().setFromPoints([
Expand Down
5 changes: 4 additions & 1 deletion htmlcube.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -59,3 +60,5 @@ function animate() {
}

animate();


45 changes: 26 additions & 19 deletions sqaureobject.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,32 @@ 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,
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]
};
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');
Expand All @@ -40,7 +46,6 @@ function setColorFromPalette() {
const rgb = hexToRgb(colorHex);
color = new THREE.Color(rgb.r, rgb.g, rgb.b);
squareMaterial.color.set(color);

}
}

Expand All @@ -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
Expand Down
4 changes: 0 additions & 4 deletions startUI.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -269,10 +269,6 @@ function breakMesh(mesh) {







function xno(){
const xPosition = -10;
const yPosition = 15;
Expand Down
80 changes: 69 additions & 11 deletions x.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
});


/*
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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;

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -701,7 +757,7 @@ window.addEventListener('load', function() {


document.getElementById("saveSettings").addEventListener('click', function() {

saveTextColorSelection();
saveAddedTextToLocalStorage();
saveScoresToLocalStorage();

Expand All @@ -724,3 +780,5 @@ document.getElementById("deleteSettings").addEventListener('click', function() {



////

0 comments on commit 2ebadd0

Please sign in to comment.