From e2fbb6b1df98fdd51277abf5afbbb17fe5160b78 Mon Sep 17 00:00:00 2001
From: PaddiM8 <paddim8@pm.me>
Date: Sat, 2 Jan 2021 18:39:48 +0100
Subject: [PATCH] Added 'help' text to kalk_web

---
 kalk_web/package-lock.json     | 52 ++++++++++++++++++++++++++++++++++
 kalk_web/package.json          |  1 +
 kalk_web/src/Calculator.svelte | 23 +++++++++++++--
 kalk_web/src/global.d.ts       |  4 +++
 kalk_web/src/styles/index.scss |  8 ++++++
 kalk_web/webpack.config.ts     | 32 ++++++++++++---------
 6 files changed, 103 insertions(+), 17 deletions(-)
 create mode 100644 kalk_web/src/global.d.ts

diff --git a/kalk_web/package-lock.json b/kalk_web/package-lock.json
index 9bfb9b5..9a4155a 100644
--- a/kalk_web/package-lock.json
+++ b/kalk_web/package-lock.json
@@ -6866,6 +6866,58 @@
 				}
 			}
 		},
+		"raw-loader": {
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-4.0.2.tgz",
+			"integrity": "sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==",
+			"dev": true,
+			"requires": {
+				"loader-utils": "^2.0.0",
+				"schema-utils": "^3.0.0"
+			},
+			"dependencies": {
+				"ajv": {
+					"version": "6.12.6",
+					"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+					"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+					"dev": true,
+					"requires": {
+						"fast-deep-equal": "^3.1.1",
+						"fast-json-stable-stringify": "^2.0.0",
+						"json-schema-traverse": "^0.4.1",
+						"uri-js": "^4.2.2"
+					}
+				},
+				"fast-deep-equal": {
+					"version": "3.1.3",
+					"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+					"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+					"dev": true
+				},
+				"loader-utils": {
+					"version": "2.0.0",
+					"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+					"integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+					"dev": true,
+					"requires": {
+						"big.js": "^5.2.2",
+						"emojis-list": "^3.0.0",
+						"json5": "^2.1.2"
+					}
+				},
+				"schema-utils": {
+					"version": "3.0.0",
+					"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz",
+					"integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==",
+					"dev": true,
+					"requires": {
+						"@types/json-schema": "^7.0.6",
+						"ajv": "^6.12.5",
+						"ajv-keywords": "^3.5.2"
+					}
+				}
+			}
+		},
 		"rc": {
 			"version": "1.2.8",
 			"resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
diff --git a/kalk_web/package.json b/kalk_web/package.json
index 50c2550..57a6d75 100644
--- a/kalk_web/package.json
+++ b/kalk_web/package.json
@@ -25,6 +25,7 @@
 		"mini-css-extract-plugin": "^0.9.0",
 		"optimize-css-assets-webpack-plugin": "^5.0.3",
 		"postcss-loader": "^3.0.0",
+		"raw-loader": "^4.0.2",
 		"sass": "^1.26.10",
 		"sass-loader": "^10.0.1",
 		"svelte": "^3.29.7",
diff --git a/kalk_web/src/Calculator.svelte b/kalk_web/src/Calculator.svelte
index 974ae52..fd13ace 100644
--- a/kalk_web/src/Calculator.svelte
+++ b/kalk_web/src/Calculator.svelte
@@ -1,16 +1,30 @@
 <script lang="ts">
+    import helpText from "../../kalk_cli/help.txt";
     let outputLines: string[] = [];
     let kalkContext;
     function handleKeyDown(event: KeyboardEvent, kalk) {
         if (event.key == "Enter") {
             const target = event.target as HTMLInputElement;
             const input = target.textContent;
+            let output: string;
 
+            if (input.trim() == "help") {
+                output = helpText;
+            } else {
             // Calculate
             if (!kalkContext) kalkContext = new kalk.Context();
-            const output = kalkContext.evaluate(input).toString();
+                try {
+                    const result = kalkContext.evaluate(input);
+                    if (result) output = result.toString();
+                } catch (err) {
+                    output = `<span class="error">${err}</span>`;
+                }
+            }
 
-            outputLines = [...outputLines, input, output];
+            const inputHTML = `<span class="prompt">&gt;&gt;&nbsp;</span>${target.innerHTML}`;
+            outputLines = output
+                ? [...outputLines, inputHTML, output]
+                : [...outputLines, inputHTML];
             target.innerHTML = "";
         }
     }
@@ -181,7 +195,10 @@
 </style>
 
 <div class="calculator">
-    <div class="output">
+        <p class="consoleLine">kalk</p>
+        <p class="consoleLine">
+            <span class="hint">Type 'help' for instructions.</span>
+        </p>
         {#each outputLines as line}
             <p class="consoleLine">
                 <span class="prompt">&gt;&gt;</span>
diff --git a/kalk_web/src/global.d.ts b/kalk_web/src/global.d.ts
new file mode 100644
index 0000000..0af8fbc
--- /dev/null
+++ b/kalk_web/src/global.d.ts
@@ -0,0 +1,4 @@
+declare module "*.txt" {
+  const content: any;
+  export default content;
+}
diff --git a/kalk_web/src/styles/index.scss b/kalk_web/src/styles/index.scss
index 2a811fe..8a8352f 100644
--- a/kalk_web/src/styles/index.scss
+++ b/kalk_web/src/styles/index.scss
@@ -14,4 +14,12 @@ span.operator {
 
 span.prompt {
 	color: mediumseagreen;
+}
+
+span.error {
+	color: tomato;
+}
+
+span.hint {
+	color: #9c9c9c;
 }
\ No newline at end of file
diff --git a/kalk_web/webpack.config.ts b/kalk_web/webpack.config.ts
index c056445..f5601cf 100644
--- a/kalk_web/webpack.config.ts
+++ b/kalk_web/webpack.config.ts
@@ -121,6 +121,10 @@ const config: webpack.Configuration & WebpackDevServer.Configuration = {
 				use: 'ts-loader',
 				exclude: /node_modules/,
 			},
+			{
+				test: /\.txt$/i,
+				loader: 'raw-loader',
+			},
 		],
 	},
 	devServer: {
@@ -169,19 +173,19 @@ const tsconfigPath = path.resolve(__dirname, 'tsconfig.json');
 const tsconfig = require('fs').existsSync(tsconfigPath) ? require(tsconfigPath) : {};
 
 if ('compilerOptions' in tsconfig && 'paths' in tsconfig.compilerOptions) {
-    const aliases = tsconfig.compilerOptions.paths;
-    for (const alias in aliases) {
-        const paths = aliases[alias].map((p: string) => path.resolve(__dirname, p));
+	const aliases = tsconfig.compilerOptions.paths;
+	for (const alias in aliases) {
+		const paths = aliases[alias].map((p: string) => path.resolve(__dirname, p));
 
-        // Our tsconfig uses glob path formats, whereas webpack just wants directories
-        // We'll need to transform the glob format into a format acceptable to webpack
-        const wpAlias = alias.replace(/(\\|\/)\*$/, '');
-        const wpPaths = paths.map((p: string) => p.replace(/(\\|\/)\*$/, ''));
+		// Our tsconfig uses glob path formats, whereas webpack just wants directories
+		// We'll need to transform the glob format into a format acceptable to webpack
+		const wpAlias = alias.replace(/(\\|\/)\*$/, '');
+		const wpPaths = paths.map((p: string) => p.replace(/(\\|\/)\*$/, ''));
 
-        if (!(wpAlias in config.resolve.alias) && wpPaths.length) {
-            config.resolve.alias[wpAlias] = wpPaths.length > 1 ? wpPaths : wpPaths[0];
-        }
-    }
+		if (!(wpAlias in config.resolve.alias) && wpPaths.length) {
+			config.resolve.alias[wpAlias] = wpPaths.length > 1 ? wpPaths : wpPaths[0];
+		}
+	}
 }
 
 // These options should only apply to production builds
@@ -195,9 +199,9 @@ if (prod) {
 			cssProcessorOptions: {
 				map: sourceMapsInProduction
 					? {
-							inline: false,
-							annotation: true,
-						}
+						inline: false,
+						annotation: true,
+					}
 					: false,
 			},
 			cssProcessorPluginOptions: {