Skip to content

Commit

Permalink
Implement image upload and crop
Browse files Browse the repository at this point in the history
  • Loading branch information
@nopara73
nopara73 committed Oct 27, 2024
1 parent d4f4ae5 commit 5a7517e
Showing 1 changed file with 144 additions and 62 deletions.
206 changes: 144 additions & 62 deletions LongevityWorldCup.Website/wwwroot/onboarding/convergence.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<html lang="en">
<head>
<!--HEAD-->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/cropper.min.css">
<style>
/* Hide the join-game button in the header */
.join-game {
Expand Down Expand Up @@ -134,7 +135,19 @@
border: 4px solid #333;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
border-radius: 8px;
cursor: pointer; /* Add this line if you want the cursor to change when hovering over the image */
}

/* Add a new class for the pointer cursor */
.clickable {
cursor: pointer;
}

/* Style for the cropping image */
#cropperImage {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
</style>
</head>
Expand Down Expand Up @@ -306,6 +319,9 @@ <h2>1. Character Creation</h2>
// Scroll the heading into view
document.querySelector('h2').scrollIntoView({ behavior: 'smooth' });

// Remove the 'clickable' class from the illustrationImage
document.getElementById('illustrationImage').classList.remove('clickable');

if (currentStage === 1) {
currentStage = 2;
updateSubProgress(2);
Expand Down Expand Up @@ -337,87 +353,56 @@ <h2>1. Character Creation</h2>

// Update the text content for stage 3 with formatting
document.getElementById('content').innerHTML = `
<p style="text-align: center;"><strong>Privacy is your ability to selectively reveal yourself to the world.</strong></p>
<p>
Cristiano Ronaldo is one of the greatest football players of all time. Put yourself into his boots. You must work hard, of course, but your job doesn't end with honing your skills. You also need to display them in front of millions of people. <em>There’s no sport without spectators.</em>
</p>
<p>
So, does he lack privacy? <strong>No</strong>, he made a conscious decision to selectively reveal himself to the world.
</p>
<p>
<em>It's now your turn to make that decision.</em>
</p>
`;
<p style="text-align: center;"><strong>Privacy is your ability to selectively reveal yourself to the world.</strong></p>
<p>
Cristiano Ronaldo is one of the greatest football players of all time. Put yourself into his boots. You must work hard, of course, but your job doesn't end with honing your skills. You also need to display them in front of millions of people. <em>There’s no sport without spectators.</em>
</p>
<p>
So, does he lack privacy? <strong>No</strong>, he made a conscious decision to selectively reveal himself to the world.
</p>
<p>
<em>It's now your turn to make that decision.</em>
</p>
`;

// Add your specified text to the empty block (the div that held the input fields)
document.getElementById('personalDetails').innerHTML = `
<p>Top-ranked longevity athletes will occasionally be asked to give an interview before their results are posted. Declining means no spot on the leaderboard. By proceeding, you agree to this.</p>
<p><em>Just remember, we’re not gonna beat Death by hiding in the shadows!</em></p>
`;
<p>Top-ranked longevity athletes will occasionally be asked to give an interview before their results are posted. Declining means no spot on the leaderboard. By proceeding, you agree to this.</p>
<p><em>Just remember, we’re not gonna beat Death by hiding in the shadows!</em></p>
`;
document.getElementById('personalDetails').style.display = '';
} else if (currentStage === 3) {
currentStage = 4;
updateSubProgress(4);

// Add the 'clickable' class to the illustrationImage
document.getElementById('illustrationImage').classList.add('clickable');

document.querySelector('h2').textContent = "4. Don't Trust, Verify";
document.getElementById('illustrationImage').src = "../assets/headshot.jpg";
document.getElementById('illustrationImage').alt = "Headshot";
document.getElementById('content').innerHTML = `<p>Next, provide your profile picture. Smiling is optional!</p>`;
document.getElementById('personalDetails').innerHTML = `
<p><strong>Upload a clear headshot:</strong></p>
<ol style="padding-left: 20px; line-height: 1.6;">
<li>It must be you.</li>
<li>Face the camera directly.</li>
<li>Include head and shoulders.</li>
</ol>
<div style="text-align: center; margin-top: 1rem;">
<input type="file" id="profilePicInput" accept="image/*" style="display: none;">
<button type="button" id="uploadButton" class="option-button">Upload Profile Picture</button>
</div>
`;
<p><strong>Upload a clear headshot:</strong></p>
<ol style="padding-left: 20px; line-height: 1.6;">
<li>It must be you.</li>
<li>Face the camera directly.</li>
<li>Include head and shoulders.</li>
</ol>
<div style="text-align: center; margin-top: 1rem;">
<input type="file" id="profilePicInput" accept="image/*" style="display: none;">
<button type="button" id="uploadButton" class="option-button">Upload Profile Picture</button>
</div>
`;

// Check if there is a stored profile picture and set it
const storedProfilePic = localStorage.getItem('profilePic');
if (storedProfilePic) {
document.getElementById('illustrationImage').src = storedProfilePic;
}

// Add the event listeners here, but only if they haven't been added before
// Set up event listener for the upload button
const uploadButton = document.getElementById('uploadButton');
if (!uploadButton.hasAttribute('data-listener')) {
uploadButton.addEventListener('click', function () {
document.getElementById('profilePicInput').click();
});
uploadButton.setAttribute('data-listener', 'true');
}

// Add click event to the image to trigger file selection
const illustrationImage = document.getElementById('illustrationImage');
if (!illustrationImage.hasAttribute('data-listener')) {
illustrationImage.addEventListener('click', function () {
document.getElementById('profilePicInput').click();
});
illustrationImage.setAttribute('data-listener', 'true');
}

// Handle the image upload and preview
const profilePicInput = document.getElementById('profilePicInput');
if (!profilePicInput.hasAttribute('data-listener')) {
profilePicInput.addEventListener('change', function (event) {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function (e) {
document.getElementById('illustrationImage').src = e.target.result;
// Optionally, store the image data in localStorage for later use
localStorage.setItem('profilePic', e.target.result);
};
reader.readAsDataURL(file);
}
});
profilePicInput.setAttribute('data-listener', 'true');
}
// Call the function to attach event listeners
attachUploadEventListeners();
} else if (currentStage === 4) {
currentStage = 5;
updateSubProgress(5);
Expand All @@ -429,6 +414,103 @@ <h2>1. Character Creation</h2>
this.setAttribute('type', 'submit');
}
});

function attachUploadEventListeners() {
// Set up event listener for the upload button
const uploadButton = document.getElementById('uploadButton');
if (uploadButton && !uploadButton.hasAttribute('data-listener')) {
uploadButton.addEventListener('click', function () {
document.getElementById('profilePicInput').click();
});
uploadButton.setAttribute('data-listener', 'true');
}

// Add click event to the image to trigger file selection
const illustrationImage = document.getElementById('illustrationImage');
if (illustrationImage && !illustrationImage.hasAttribute('data-listener')) {
illustrationImage.addEventListener('click', function () {
document.getElementById('profilePicInput').click();
});
illustrationImage.setAttribute('data-listener', 'true');
}

// Handle the image upload and initialize Cropper.js
const profilePicInput = document.getElementById('profilePicInput');
if (profilePicInput && !profilePicInput.hasAttribute('data-listener')) {
profilePicInput.addEventListener('change', function (event) {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function (e) {
// Create an image element for cropping
const cropperImage = document.createElement('img');
cropperImage.id = 'cropperImage';
cropperImage.src = e.target.result;

// Clear the current content and insert the image
document.getElementById('personalDetails').innerHTML = '';
document.getElementById('personalDetails').appendChild(cropperImage);

// Initialize Cropper.js on the image
const cropper = new Cropper(cropperImage, {
aspectRatio: 1024 / 768, // Set the aspect ratio
viewMode: 1,
autoCropArea: 1,
movable: true,
zoomable: true,
rotatable: false,
scalable: false,
cropBoxResizable: true,
minCropBoxWidth: 200,
minCropBoxHeight: 150,
});

// Add a "Crop and Save" button
const cropButton = document.createElement('button');
cropButton.textContent = 'Crop and Save';
cropButton.className = 'option-button';
cropButton.style.marginTop = '1rem';
document.getElementById('personalDetails').appendChild(cropButton);

// Handle the crop button click
cropButton.addEventListener('click', function () {
const croppedCanvas = cropper.getCroppedCanvas({
width: 1024,
height: 768,
});
const croppedImageDataURL = croppedCanvas.toDataURL('image/png');

// Set the cropped image as the illustration image
document.getElementById('illustrationImage').src = croppedImageDataURL;

// Store the cropped image in localStorage
localStorage.setItem('profilePic', croppedImageDataURL);

// Remove the cropper instance and restore the content
cropper.destroy();
document.getElementById('personalDetails').innerHTML = `
<p><strong>Upload a clear headshot:</strong></p>
<ol style="padding-left: 20px; line-height: 1.6;">
<li>It must be you.</li>
<li>Face the camera directly.</li>
<li>Include head and shoulders.</li>
</ol>
<div style="text-align: center; margin-top: 1rem;">
<input type="file" id="profilePicInput" accept="image/*" style="display: none;">
<button type="button" id="uploadButton" class="option-button">Upload Profile Picture</button>
</div>
`;
// Re-attach event listeners to the new elements
attachUploadEventListeners();
});
};
reader.readAsDataURL(file);
}
});
profilePicInput.setAttribute('data-listener', 'true');
}
}
</script>
<script src="https://unpkg.com/[email protected]/dist/cropper.min.js"></script>
</body>
</html>

0 comments on commit 5a7517e

Please sign in to comment.