Merge pull request #49 from MathisBurger/feature/translations

Implemented some more stochastical and default features.

src/lib/custom-math.ts

@@ -1,10 +1,9 @@
 /**
+ * This method rounds thhe given number to the fixed number of decimals
  *
  * @param val the initial number
  * @param decimals the number of decimals after the komma
  * @returns the rounded value
- *
- * This method rounds thhe given number to the fixed number of decimals
  */
 function roundTo(val: number, decimals: number): number {
 	const multiplicator = Math.pow(10, decimals);
@@ -13,4 +12,21 @@ function roundTo(val: number, decimals: number): number {
 	return +pre.toFixed(decimals);
 }
 
-export { roundTo };
+/**
+ * Calculates the faculty of the given number and
+ * returns it.
+ *
+ * @param num The´number that faculty should be calculated
+ * @returns The faculty value of the given number
+ */
+function faculty(num: number): number {
+	let cache = 1;
+	let run = 1;
+	while (run <= num) {
+		cache = cache * run;
+		run++;
+	}
+	return cache;
+}
+
+export { roundTo, faculty };

src/lib/defaults-provider.ts

@@ -1,4 +1,5 @@
 import type { GeoLayerParameter, GeoLayerCoordinate } from '$src/typings/geo-layer';
+import type { NCR } from '$src/typings/ncr';
 import type { Triangle } from '$src/typings/triangle';
 import type { Vector } from '$src/typings/vector';
 
@@ -7,6 +8,7 @@ interface DefaultsProviderInterface {
 	getGeoLayerParameterDefault(): GeoLayerParameter;
 	getGeoLayerCoordinateDefault(): GeoLayerCoordinate;
 	getDefaultTriangle(): Triangle;
+	getDefaultNCR(): NCR;
 }
 
 // Provides some functions to generate default values.
@@ -54,4 +56,12 @@ export class DefaultsProvider implements DefaultsProviderInterface {
 	getVectorDefault(): Vector {
 		return { x: 0, y: 0, z: 0 };
 	}
+
+	/**
+	 * Returns a default NCR.
+	 * @returns The generated NCR
+	 */
+	getDefaultNCR(): NCR {
+		return { n: 0, k: 0 };
+	}
 }

src/lib/footer.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+</script>
+
+<div class="footer">
+	<div class="footer-copyright">©{new Date().getFullYear()} Mathis Burger</div>
+</div>
+
+<style lang="scss">
+	@import '../styles/footer.scss';
+</style>

src/lib/stochastics/ncr-calculator.ts

@@ -0,0 +1,14 @@
+import { faculty } from '$lib/custom-math';
+import type { NCR } from '$src/typings/ncr';
+
+/**
+ * Calculates an nCr of a input.
+ *
+ * @param ncr Instance of the ncr value
+ * @returns number The nCr value of the calculation
+ */
+export function calculateNCr(ncr: NCR): number {
+	const top = faculty(ncr.n);
+	const bottom = faculty(ncr.k) * faculty(ncr.n - ncr.k);
+	return top / bottom;
+}

src/lib/stochastics/ncr-input.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { NCR } from '$src/typings/ncr';
+	export let bindValue: NCR;
+</script>
+
+<div class="ncr-outer-wrapper">
+	<div class="ncr-input-symbols">(</div>
+	<div class="ncr-input">
+		<input type="number" class="ncr-input-field" bind:value={bindValue.n} />
+		<input type="number" class="ncr-input-field" bind:value={bindValue.k} />
+	</div>
+	<div class="ncr-input-symbols">)</div>
+</div>
+
+<style lang="scss">
+	@import '../../styles/ncr.scss';
+</style>

src/routes/__error.svelte

@@ -0,0 +1,17 @@
+<script>
+	import { _ } from 'svelte-i18n';
+</script>
+
+<div class="centered">
+	<div class="container">
+		<div class="error-heading">404 Not Found</div>
+		<div class="error-container">
+			{$_('notFound')}
+		</div>
+	</div>
+</div>
+
+<style lang="scss">
+	@import '../styles/general.scss';
+	@import '../styles/error.scss';
+</style>

src/routes/__layout.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import Navbar from '$lib/navbar.svelte';
+	import Footer from '$lib/footer.svelte';
 	import { theme } from '../lib/theme';
 	import '../i18n.ts';
 	import { waitLocale } from 'svelte-i18n';
@@ -21,4 +22,5 @@
 {#await preload() then _}
 	<Navbar />
 	<slot />
+	<Footer />
 {/await}

src/routes/basic/faculty.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { faculty } from '$lib/custom-math';
+
+	let input = 0;
+</script>
+
+<div class="centered">
+	<div class="container">
+		<input class="larger-input" type="number" bind:value={input} />
+		<div class="result-form">
+			{faculty(input)}
+		</div>
+	</div>
+</div>
+
+<style lang="scss">
+	@import '../../styles/general.scss';
+</style>

src/routes/basic/index.svelte

@@ -2,6 +2,7 @@
 	import ListSelector from '../../lib/listSelector.svelte';
 	import type { ListSelectorElement } from '../../typings/ListSelectorElement';
 	import { _ } from 'svelte-i18n';
+	import { roundTo } from '$lib/custom-math';
 
 	let apps: ListSelectorElement[] = [
 		{
@@ -18,6 +19,16 @@
 			name: $_('basic.function-solver.title'),
 			description: $_('basic.function-solver.description'),
 			route: '/basic/function-solver'
+		},
+		{
+			name: $_('basic.faculty.title'),
+			description: $_('basic.faculty.description'),
+			route: '/basic/faculty'
+		},
+		{
+			name: $_('basic.logarithm.title'),
+			description: $_('basic.logarithm.description'),
+			route: '/basic/logarithm'
 		}
 	];
 </script>

src/routes/basic/logarithm.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	let input = 0;
+</script>
+
+<div class="centered">
+	<div class="container">
+		<input class="larger-input" type="number" bind:value={input} />
+		<div class="result-form">
+			{Math.log(input)}
+		</div>
+	</div>
+</div>
+
+<style lang="scss">
+	@import '../../styles/general.scss';
+</style>

src/routes/privacy.svelte

@@ -0,0 +1,11 @@
+<div class="centered">
+	<div class="container">
+		<h1 class="privacy-heading">Privacy</h1>
+		<div class="privacy-text">Some privacy placeholder text</div>
+	</div>
+</div>
+
+<style lang="scss">
+	@import '../styles/general.scss';
+	@import '../styles/privacy.scss';
+</style>

src/routes/stochastics/index.svelte

@@ -8,6 +8,11 @@
 			name: $_('stochastics.4-field-table.title'),
 			description: $_('stochastics.4-field-table.description'),
 			route: '/stochastics/4-field-table-completer'
+		},
+		{
+			name: $_('stochastics.ncr-calculator.title'),
+			description: $_('stochastics.ncr-calculator.description'),
+			route: '/stochastics/ncr-calculator'
 		}
 	];
 </script>

src/routes/stochastics/ncr-calculator.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { NCR } from './../../typings/ncr.d';
+	import { DefaultsProvider } from '$lib/defaults-provider';
+	import NcrInput from '$lib/stochastics/ncr-input.svelte';
+	import { calculateNCr } from '$lib/stochastics/ncr-calculator';
+
+	let input: NCR = new DefaultsProvider().getDefaultNCR();
+</script>
+
+<div class="centered">
+	<div class="container">
+		<NcrInput bind:bindValue={input} />
+
+		<div class="result-form">
+			{calculateNCr(input)}
+		</div>
+	</div>
+</div>
+
+<style lang="scss">
+	@import '../../styles/general.scss';
+</style>

src/styles/error.scss

@@ -0,0 +1,16 @@
+.error-heading {
+	font-family: Arial, Helvetica, sans-serif;
+	font-size: 3em;
+	color: var(--text-color);
+	width: 500px;
+	text-align: center;
+	font-weight: bold;
+}
+.error-container {
+	width: 500px;
+	height: 300px;
+	text-align: center;
+	font-family: Arial, Helvetica, sans-serif;
+	font-size: 1.3em;
+	color: var(--text-color);
+}

src/styles/footer.scss

@@ -0,0 +1,17 @@
+.footer {
+	width: 100vw;
+	height: 75px;
+	background: var(--footer-background);
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	display: grid;
+	place-items: center;
+	grid-template-columns: 20% 80%;
+}
+
+.footer-copyright {
+	font-size: 1.3em;
+	color: var(--footer-text-color);
+	font-weight: bold;
+}

src/styles/general.scss

@@ -35,7 +35,12 @@
 	font-size: 2em;
 	text-overflow: clip;
 }
-.theme-selector {
+.larger-input {
+	width: 75px;
+	height: 75px;
+	font-size: 1.3em;
+	border: none;
+	outline: none;
 }
 
 @media only screen and (max-width: 680px) {

src/styles/ncr.scss

@@ -0,0 +1,30 @@
+.ncr-input {
+	display: flex;
+	flex-direction: column;
+	gap: 5px;
+	width: fit-content;
+	height: fit-content;
+}
+
+.ncr-input-field {
+	width: 50px;
+	height: 50px;
+	outline: none;
+	border: none;
+}
+
+.ncr-input-symbols {
+	color: var(--text-color);
+	font-size: 135px;
+	height: 100%;
+	text-align: center;
+	margin-top: -30px;
+}
+
+.ncr-outer-wrapper {
+	display: flex;
+	flex-direction: row;
+	gap: 3px;
+	width: fit-content;
+	height: fit-content;
+}

src/styles/privacy.scss

@@ -0,0 +1,10 @@
+.privacy-heading {
+	font-family: Arial, Helvetica, sans-serif;
+	font-weight: bold;
+	font-size: 2.5em;
+}
+.privacy-text {
+	width: 80vw;
+	font-family: Arial, Helvetica, sans-serif;
+	font-size: 1.2em;
+}

src/translations/de.json

@@ -1,5 +1,6 @@
 {
 	"indexText": "MathOnWeb ist eine open source Webanwendung, welche gebaut wurde, um effizient komplexe mathematische Operationen auszuführen. Deshalb muss diese Andwendung sehr schnell sein, um eine angenehme Nutzererfahrung zu bieten. Svelte benutzt keinen virtualDOM, sondern das native DOM des Browsers, was es sehr sehr schnell macht. Die Anwendung nutzt ES6, was von dem Großteil aller moderen Browser bereits unterstützt wird. Es wird in keinster Weise Virtualisierung genutzt, sondern nur die native Javascript-engine des Browsers. Des weiteren nutzt das Project Typescript, was eine große Type-safety und ein einige Performance Vorteile bietet. Ich würde mich freuen, würden sie einen Blick auf mein Projekt werfen.",
+	"notFound": "Die angefragte Seite konnte nicht gefunden werden. Falls unter dieser URL ein Feature vorhanden sein sollte, kontaktieren sie den Betreiber dieser Instanz, damit dieser die neuste Version von MathOnWeb installiert.",
 	"navbar": {
 		"home": "Home",
 		"basic": "Standard",
@@ -26,6 +27,14 @@
 		"function-solver": {
 			"title": "Funktionen lösen",
 			"description": "Löst einfache mathematische Funktionen"
+		},
+		"faculty": {
+			"title": "Fakultät berechnen",
+			"description": "Berechnet die Fakultät einer Zahl"
+		},
+		"logarithm": {
+			"title": "Logarithmus berechnen",
+			"description": "Berenchet den Logarithmus einer Zahl"
 		}
 	},
 	"vector": {
@@ -63,6 +72,10 @@
 			"title": "4-Felder-Tafel",
 			"description": "Vervollständigt eine 4 Felder Tafel",
 			"button-text": "Tafel vervollständigen"
+		},
+		"ncr-calculator": {
+			"title": "nCr berechnen",
+			"description": "Berechnet den nCr Wert einer stochastischen Berechnung"
 		}
 	}
 }