diff --git a/index.html b/index.html index 90041f2..b039179 100644 --- a/index.html +++ b/index.html @@ -35,6 +35,11 @@

Random Fade Glyphs Generator

+ +
+

Additional regions to form a 2x2x2 cube:

+ +
diff --git a/src/logic/glyphs.ts b/src/logic/glyphs.ts index 7d5ff3d..0d61726 100644 --- a/src/logic/glyphs.ts +++ b/src/logic/glyphs.ts @@ -1,9 +1,10 @@ import { getRandomNumber } from './randomGenerator'; +function dec2HexWithPad(num: number, pad: number = 0) { + return num.toString(16).padStart(pad, '0'); +} + function getRandomRegion(x: number, y: number, z: number) { - function dec2HexWithPad(num: number, pad: number = 0) { - return num.toString(16).padStart(pad, '0'); - } const [xStr, zStr] = [x, z].map(num => dec2HexWithPad(num, 3)); const yStr = dec2HexWithPad(y, 2); @@ -17,8 +18,6 @@ function getRandomRegion(x: number, y: number, z: number) { const index = getRandomNumber(0, 3); // NoSonar need a number between 0-3 - console.log(index, yStr, zStr, xStr, coordTemplates[index]) - return coordTemplates[index]; } @@ -46,4 +45,48 @@ export function getRandomGlyphs() { const planet = getRandomPlanet(); return planet + siv + regionGlyphs; +} + +const extractCoordinate = (glyphs: string, index: number) => glyphs.slice(index, index + (index === 4 ? 2 : 3)); + +export function generateCubeGlyphs(glyphs: string): string[] { + const boundaries = { + x: ['801', '7FF'], + y: ['81', '7F'], + z: ['801', '7FF'], + } + + const x = extractCoordinate(glyphs, 9); + const y = extractCoordinate(glyphs, 4); + const z = extractCoordinate(glyphs, 6); + + const xDec = parseInt(x, 16); + const yDec = parseInt(y, 16); + const zDec = parseInt(z, 16); + + const xIsMax = boundaries.x[1] === x; + const yIsMax = boundaries.y[1] === y; + const zIsMax = boundaries.z[1] === z; + + const cubeCoords: number[][] = []; + + cubeCoords.push([yDec, zDec, xIsMax ? xDec - 1 : xDec + 1]); // x + cubeCoords.push([yIsMax ? yDec - 1 : yDec + 1, zDec, xDec]); // y + cubeCoords.push([yDec, zIsMax ? zDec - 1 : zDec + 1, xDec]); // z + cubeCoords.push([yIsMax ? yDec - 1 : yDec + 1, zDec, xIsMax ? xDec - 1 : xDec + 1]); // y + x + cubeCoords.push([yDec, zIsMax ? zDec - 1 : zDec + 1, xIsMax ? xDec - 1 : xDec + 1]); // x + z + cubeCoords.push([yIsMax ? yDec - 1 : yDec + 1, zIsMax ? zDec - 1 : zDec + 1, xDec]); // y + z + cubeCoords.push([yIsMax ? yDec - 1 : yDec + 1, zIsMax ? zDec - 1 : zDec + 1, xIsMax ? xDec - 1 : xDec + 1]); // y + x + z + + console.log(cubeCoords) + + const hexCubeCoords: string[][] = cubeCoords.map(item => convertArrayToHexGlyphs(item)); + + return hexCubeCoords.map(item => getRandomPlanet() + getRandomSIV() + item.join('')); +} + +function convertArrayToHexGlyphs(coordArray: number[]): string[] { + const hexCoords = coordArray.map(item => dec2HexWithPad(item, 3)); + hexCoords[0] = hexCoords[0].slice(1); + return hexCoords; } \ No newline at end of file diff --git a/src/logic/randomGenerator.ts b/src/logic/randomGenerator.ts index a603d71..2ea34bb 100644 --- a/src/logic/randomGenerator.ts +++ b/src/logic/randomGenerator.ts @@ -1,5 +1,5 @@ /** from https://www.w3schools.com/js/js_random.asp -* this function always returns a random number between min (included) and max (excluded): +* this function always returns a random number between min (included) and max (included): */ export function getRandomNumber(min: number, max: number) { return Math.floor(Math.random() * (max - min + 1)) + min; diff --git a/src/main.ts b/src/main.ts index 13baf34..e71ae52 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,7 +1,7 @@ import '@picocss/pico'; import './styles.css' // the order of the CSS imports is IMPORTANT, DO NOT change it!!! -import { getRandomGlyphs } from './logic/glyphs'; +import { generateCubeGlyphs, getRandomGlyphs } from './logic/glyphs'; import { switchTheme } from './logic/theme'; interface Elements { @@ -9,6 +9,7 @@ interface Elements { galaxyInput?: HTMLSelectElement; die?: HTMLButtonElement; glyphOutput?: HTMLOutputElement; + glyphOutputAdditional?: HTMLUListElement, } const ids: { [key: string]: string } = { @@ -16,6 +17,7 @@ const ids: { [key: string]: string } = { galaxyInput: 'galaxyInput', die: 'die', glyphOutput: 'glyphOutput', + glyphOutputAdditional: 'glyphOutputAdditional', } const elements: Elements = {}; @@ -37,6 +39,18 @@ function showRandomGlyphs(): void { function displayGlyphs(glyphs: string): void { const output = elements.glyphOutput; - if (!output) return; + const additionalOutput = elements.glyphOutputAdditional; + if (!output || !additionalOutput) return; output.innerText = glyphs.toUpperCase(); + + const additionalGlyphs = generateCubeGlyphs(glyphs); + const htmlCode = []; + for (const glyph of additionalGlyphs) { + const li = document.createElement('li'); + li.classList.add('glyphs'); + li.innerText = glyph.toUpperCase(); + htmlCode.push(li.outerHTML); + } + + additionalOutput.innerHTML = htmlCode.join(''); } \ No newline at end of file