Merge pull request #1 from Lenni009/dev

add region cube glyphs

index.html

@@ -35,6 +35,11 @@ <h1 class="title">Random Fade Glyphs Generator</h1>
 			<div>
 				<output id="glyphOutput" class="glyphs"></output>
 			</div>
+
+			<div>
+				<p>Additional regions to form a 2x2x2 cube:</p>
+				<ul id="glyphOutputAdditional"></ul>
+			</div>
 		</main>
 	</div>
 </body>

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;
 }

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;

src/main.ts

@@ -1,21 +1,23 @@
 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 {
 	themeSwitch?: HTMLButtonElement;
 	galaxyInput?: HTMLSelectElement;
 	die?: HTMLButtonElement;
 	glyphOutput?: HTMLOutputElement;
+	glyphOutputAdditional?: HTMLUListElement,
 }
 
 const ids: { [key: string]: string } = {
 	themeSwitch: 'themeSwitch',
 	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('');
 }