Removed old PHP code, migrated to Python and Flask
Update .dockerignore, .env, and 503 more files...
This commit is contained in:
15
static/resources/NibblePoker/tools/svg-to-png/svg-to-png.css
Normal file
15
static/resources/NibblePoker/tools/svg-to-png/svg-to-png.css
Normal file
@@ -0,0 +1,15 @@
|
||||
.svgtopng-file-drop-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.svgtopng-file-drop-text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
input[type=file] {
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
222
static/resources/NibblePoker/tools/svg-to-png/svg-to-png.mjs
Normal file
222
static/resources/NibblePoker/tools/svg-to-png/svg-to-png.mjs
Normal file
@@ -0,0 +1,222 @@
|
||||
import {animationStepCount, getBezierBlend, fadeIn, fadeOut} from "../../js/nibblepoker-ui.js";
|
||||
|
||||
{
|
||||
const animationSpeedMs = 175;
|
||||
|
||||
/** @type {HTMLSelectElement} */
|
||||
const eFitOptionSelect = document.querySelector("select#svgtopng-fit-mode");
|
||||
|
||||
const eFileSelectButton = document.querySelector("#svgtopng-add");
|
||||
const eFileResetButton = document.querySelector("#svgtopng-reset");
|
||||
|
||||
/** @type {HTMLInputElement} */
|
||||
const eFileDropInput = document.querySelector("input[type=file]#pngtoico-drop");
|
||||
|
||||
/** @type {HTMLParagraphElement} */
|
||||
const eFileDropTextDrop = document.querySelector("p#pngtoico-drop-text-drop");
|
||||
/** @type {HTMLParagraphElement} */
|
||||
const eFileDropTextSingle = document.querySelector("p#pngtoico-drop-text-file-single");
|
||||
/** @type {HTMLParagraphElement} */
|
||||
const eFileDropTextMultiple = document.querySelector("p#pngtoico-drop-text-file-multiple");
|
||||
|
||||
const eExportIndividualButton = document.querySelector("#svgtopng-export-individual");
|
||||
|
||||
/** @type {HTMLElement} */
|
||||
const ePreviewContainer = document.querySelector("div#svgtopng-preview-container");
|
||||
|
||||
const ePreviewGenerateButton = document.querySelector("#svgtopng-preview-generate");
|
||||
const ePreviewResetButton = document.querySelector("#svgtopng-preview-reset");
|
||||
|
||||
///** @type {HTMLCanvasElement} */
|
||||
//const eConversionCanvas = document.querySelector("canvas#svgtopng-conversion-canvas");
|
||||
|
||||
/**
|
||||
* @type {[{
|
||||
* eContainer: Element,
|
||||
* scaleResolution: (function(number, number): [number, number]),
|
||||
* value: string
|
||||
* }]}
|
||||
*/
|
||||
const eFitSubOptions = [
|
||||
{
|
||||
value: "fit-svg",
|
||||
eContainer: document.querySelector("div#svgtopng-options-fit-svg"),
|
||||
scaleResolution: (originalWidth, originalHeight) => {
|
||||
return [originalWidth, originalHeight];
|
||||
}
|
||||
},
|
||||
{
|
||||
value: "fit-fixed",
|
||||
eContainer: document.querySelector("div#svgtopng-options-fit-fixed"),
|
||||
scaleResolution: (originalWidth, originalHeight) => {
|
||||
return [
|
||||
parseInt(document.getElementById("fixed-size-width").value),
|
||||
parseInt(document.getElementById("fixed-size-height").value),
|
||||
];
|
||||
}
|
||||
},
|
||||
{
|
||||
value: "fit-bigger-than",
|
||||
eContainer: document.querySelector("div#svgtopng-options-fit-bigger-than"),
|
||||
scaleResolution: (originalWidth, originalHeight) => {
|
||||
return [0, 0];
|
||||
}
|
||||
},
|
||||
{
|
||||
value: "fit-smaller-than",
|
||||
eContainer: document.querySelector("div#svgtopng-options-fit-smaller-than"),
|
||||
scaleResolution: (originalWidth, originalHeight) => {
|
||||
return [0, 0];
|
||||
}
|
||||
},
|
||||
]
|
||||
|
||||
let currentFitOption = eFitSubOptions.find(fitSubOption => fitSubOption.value === eFitOptionSelect.value);
|
||||
|
||||
const rawUserImageData = [];
|
||||
|
||||
function updateFileDropText() {
|
||||
eFileDropTextDrop.hidden = true;
|
||||
eFileDropTextSingle.hidden = true;
|
||||
eFileDropTextMultiple.hidden = true;
|
||||
|
||||
if(rawUserImageData.length === 0) {
|
||||
eFileDropTextDrop.hidden = false;
|
||||
} else if(rawUserImageData.length === 1) {
|
||||
eFileDropTextSingle.hidden = false;
|
||||
} else {
|
||||
eFileDropTextMultiple.hidden = false;
|
||||
eFileDropTextMultiple.querySelector("span").innerText = rawUserImageData.length;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Loads a given image in memory for it to be displayed and processed later on.
|
||||
* @param {File} imageFile
|
||||
*/
|
||||
function loadImage(imageFile) {
|
||||
//console.log("Loading: " + imageFile.name);
|
||||
|
||||
let fileReader = new FileReader();
|
||||
|
||||
fileReader.onload = function(e) {
|
||||
let eImage = document.createElement("img");
|
||||
eImage.src = e.target.result;
|
||||
processNewImage(eImage)
|
||||
};
|
||||
|
||||
fileReader.readAsDataURL(imageFile);
|
||||
}
|
||||
|
||||
/**
|
||||
* Adds a given image to the internal list and the DOM.
|
||||
* @param {HTMLImageElement} eRawImage
|
||||
*/
|
||||
function processNewImage(eRawImage) {
|
||||
rawUserImageData.push(eRawImage);
|
||||
//addImagePreview(eRawImage);
|
||||
//console.log(rawUserImageData);
|
||||
updateFileDropText();
|
||||
}
|
||||
|
||||
/**
|
||||
* Adds a given image to the DOM as a resized preview.
|
||||
* @param {HTMLImageElement} eRawImage
|
||||
*/
|
||||
function addImagePreview(eRawImage) {
|
||||
let ePreviewImage = document.createElement("img");
|
||||
ePreviewImage.src = eRawImage.src;
|
||||
//ePreviewImage.style.maxWidth = "256px";
|
||||
//ePreviewImage.style.maxHeight = "256px";
|
||||
ePreviewImage.classList.add("mb-s");
|
||||
ePreviewImage.classList.add("d-inline-block");
|
||||
ePreviewImage.classList.add("border");
|
||||
ePreviewContainer.appendChild(ePreviewImage);
|
||||
}
|
||||
|
||||
function convertAndDownload() {
|
||||
if(rawUserImageData.length === 0) {
|
||||
console.error("No files selected !");
|
||||
return
|
||||
}
|
||||
|
||||
rawUserImageData.forEach((eRawImage, iRawImage) => {
|
||||
console.log("Handling: " + eRawImage);
|
||||
|
||||
const canvas = document.createElement('canvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
const finalResolution = currentFitOption.scaleResolution(eRawImage.width, eRawImage.height);
|
||||
canvas.width = finalResolution[0];
|
||||
canvas.height = finalResolution[1];
|
||||
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.drawImage(eRawImage, 0, 0, canvas.width, canvas.height);
|
||||
|
||||
// Convert each image to PNG and trigger download
|
||||
canvas.toBlob(function(blob) {
|
||||
const link = document.createElement('a');
|
||||
link.href = URL.createObjectURL(blob);
|
||||
link.download = eRawImage.name.replace(".svg", ".png");
|
||||
link.click();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
window.onload = function () {
|
||||
// Checking if all fit sub-options are valid
|
||||
const fitSubOptionsValues = Array.from(eFitOptionSelect.options).map(option => option.value);
|
||||
eFitSubOptions.forEach(fitSubOption => {
|
||||
if (!fitSubOptionsValues.includes(fitSubOption.value)) {
|
||||
alert("ERROR: Cannot find option for '" + fitSubOption.value + "' fit !");
|
||||
throw new Error("Cannot find option for '" + fitSubOption.value + "' fit !");
|
||||
}
|
||||
if (fitSubOption.eContainer === null) {
|
||||
alert("ERROR: Cannot find fit sub-options element for '" + fitSubOption.value + "' !");
|
||||
throw new Error("Cannot find fit sub-options element for '" + fitSubOption.value + "' !");
|
||||
}
|
||||
})
|
||||
|
||||
eFitOptionSelect.addEventListener('change', function () {
|
||||
// FIXME: Disable export buttons
|
||||
fadeOut(currentFitOption.eContainer, animationSpeedMs).then(r => {
|
||||
currentFitOption = eFitSubOptions.find(fitSubOption => fitSubOption.value === eFitOptionSelect.value);
|
||||
fadeIn(currentFitOption.eContainer, animationSpeedMs).then(r => {});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
eFileSelectButton.addEventListener("click", function() {
|
||||
eFileDropInput.click();
|
||||
});
|
||||
eFileResetButton.addEventListener("click", function() {
|
||||
while(rawUserImageData.length > 0){
|
||||
rawUserImageData.pop();
|
||||
}
|
||||
ePreviewResetButton.click();
|
||||
updateFileDropText();
|
||||
});
|
||||
eFileDropInput.onchange = function(event) {
|
||||
let files = event.target.files;
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
//console.log(files[i]);
|
||||
loadImage(files[i]);
|
||||
}
|
||||
};
|
||||
|
||||
eExportIndividualButton.addEventListener("click", function() {
|
||||
convertAndDownload();
|
||||
});
|
||||
|
||||
ePreviewGenerateButton.addEventListener("click", function() {
|
||||
rawUserImageData.forEach(eRawImage => {
|
||||
addImagePreview(eRawImage);
|
||||
})
|
||||
});
|
||||
ePreviewResetButton.addEventListener("click", function() {
|
||||
while(ePreviewContainer.firstChild) {
|
||||
ePreviewContainer.removeChild(ePreviewContainer.lastChild);
|
||||
}
|
||||
});
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
/**
|
||||
* Generates a random UUID4 and returns its string representation
|
||||
* @returns {`${string}-${string}-${string}-${string}-${string}`}
|
||||
*/
|
||||
export function generateUUID4() {
|
||||
return crypto.randomUUID();
|
||||
}
|
||||
|
||||
// Tool-centric stuff
|
||||
{
|
||||
/** @type {HTMLSelectElement} */
|
||||
const eOptionTypeSelect = document.querySelector("select#uuid-generator-option-type");
|
||||
/** @type {HTMLInputElement} */
|
||||
const eOptionCountInput = document.querySelector("input#uuid-generator-option-count");
|
||||
/** @type {HTMLInputElement} */
|
||||
const eOptionHyphenInput = document.querySelector("input#uuid-generator-option-hyphens");
|
||||
|
||||
/** @type {HTMLElement} */
|
||||
const eGenerateButton = document.querySelector("#uuid-generator-generate");
|
||||
/** @type {HTMLElement} */
|
||||
const eDownloadButton = document.querySelector("#uuid-generator-download");
|
||||
|
||||
/** @type {HTMLTextAreaElement} */
|
||||
const ePreviewTextArea = document.querySelector("textarea#uuid-generator-preview");
|
||||
|
||||
/** @returns {number} */
|
||||
function getDesiredCount() {
|
||||
let desiredCount = null;
|
||||
try {
|
||||
desiredCount = parseInt(eOptionCountInput.value);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
if(desiredCount === null) {
|
||||
desiredCount = 1;
|
||||
}
|
||||
if(desiredCount < 1) {
|
||||
desiredCount = 1;
|
||||
}
|
||||
if(desiredCount > 1000) {
|
||||
desiredCount = 1000;
|
||||
}
|
||||
return desiredCount;
|
||||
}
|
||||
|
||||
window.onload = function () {
|
||||
eGenerateButton.addEventListener("click", function() {
|
||||
ePreviewTextArea.value = "";
|
||||
|
||||
let desiredCount = getDesiredCount();
|
||||
let uuidGenerator = generateUUID4;
|
||||
|
||||
for(let i= 0; i < desiredCount; i++) {
|
||||
ePreviewTextArea.value += uuidGenerator() + "\n";
|
||||
}
|
||||
});
|
||||
eDownloadButton.addEventListener("click", function() {
|
||||
//eFileDropInput.click();
|
||||
});
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user