Tons of changes

README.md

@@ -36,3 +36,7 @@ npm run build
 You can preview the production build with `npm run preview`.
 
 > To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+
+
+
+

package-lock.json

@@ -8,7 +8,9 @@
 			"name": "openbirchmockupsite",
 			"version": "0.0.1",
 			"dependencies": {
-				"svelte-parallax": "^0.6.0"
+				"linq": "^4.0.3",
+				"svelte-parallax": "^0.6.0",
+				"theme-change": "^2.5.0"
 			},
 			"devDependencies": {
 				"@fontsource/fira-mono": "^4.5.10",
@@ -1748,6 +1750,15 @@
 			"integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
 			"dev": true
 		},
+		"node_modules/linq": {
+			"version": "4.0.3",
+			"resolved": "https://registry.npmjs.org/linq/-/linq-4.0.3.tgz",
+			"integrity": "sha512-dP0w2ERJXfVUk6VmmAK+Tz/SxFHwyY7VM6Mrq4fnJmeQf9JNEYFH6qJfV6Qn0N91mfwz2GEE/4S+RDkmDNyUJw==",
+			"license": "MIT",
+			"engines": {
+				"node": "*"
+			}
+		},
 		"node_modules/locate-character": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
@@ -2831,6 +2842,12 @@
 				"node": ">=10.13.0"
 			}
 		},
+		"node_modules/theme-change": {
+			"version": "2.5.0",
+			"resolved": "https://registry.npmjs.org/theme-change/-/theme-change-2.5.0.tgz",
+			"integrity": "sha512-B/UdsgdHAGhSKHTAQnxg/etN0RaMDpehuJmZIjLMDVJ6DGIliRHGD6pODi1CXLQAN9GV0GSyB3G6yCuK05PkPQ==",
+			"license": "MIT"
+		},
 		"node_modules/thenify": {
 			"version": "3.3.1",
 			"resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",

package.json

@@ -28,6 +28,8 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"svelte-parallax": "^0.6.0"
+		"linq": "^4.0.3",
+		"svelte-parallax": "^0.6.0",
+		"theme-change": "^2.5.0"
 	}
 }

src/lib/OpenBirchService.ts

@@ -2,6 +2,7 @@ import { writable } from 'svelte/store';
 
 // Adds window.runEval into typescript env
 declare function runEval(expression: string, stopAssignments?: boolean): any;
+declare function resetOpenBirch(): any;
 
 const OpenBirchHistory: OpenBirchConsoleEntry[] = [];
 
@@ -28,7 +29,16 @@ function createOpenBirchInstance(){
             } catch (e) {
                 return '';
             }
-        }, // TODO: Replace with actual implimentation
+        }, 
+        resetState: () => {
+            resetOpenBirch();
+        },
+        getHistory: (filter: ConsoleSender | undefined = undefined): OpenBirchConsoleEntry[] => {
+            if (filter == undefined)
+                return OpenBirchHistory;
+
+            return OpenBirchHistory.filter(x=>x.sender == filter);
+        }
     }
 }
 
@@ -44,7 +54,7 @@ class OpenBirchConsoleEntry {
     }
 }
 
-enum ConsoleSender {
+export enum ConsoleSender {
     User,
     System
 }

src/routes/+page.svelte

@@ -4,6 +4,8 @@
 	import welcome_fallback from '$lib/images/svelte-welcome.png';
 	import differencialBackgroundVideo from '$lib/videos/DifferentialEquation.gif';
 	import "tailwindcss/tailwind.css";
+	import ConsoleText from './console/ConsoleText.svelte';
+	import { OpenBirch } from "$lib/OpenBirchService";
 
 	const sleep = (ms: number) => {
 		return new Promise((resolve) => setTimeout(resolve, ms));
@@ -12,17 +14,46 @@
 	let isAutoTyping = true;
 	let textField: HTMLInputElement;
 	async function startTyping(){
-		for (let charecter of "testing..."){
+		for (var example of exampleInputs) {
-			if (!isAutoTyping) break;
+			for (let charecter of example){
-			textField.value += charecter;
+				if (!isAutoTyping) break;
-			await sleep(200);
+				textField.value += charecter;
+				await sleep(200);
+			}
+			try {OpenBirch.sendCommand(textField.value);} catch (_) {}
+			resetFeild();
 		}
 	}
 
+	const exampleInputs: readonly string[] = [
+		"2+2",
+		"69*420+50",
+		"sin(2+4)",
+		"sqrt(9)",
+		"nroot(27, 3)",
+		"f(x):=2*x",
+		"f(5)",
+		"pi",
+		"e",
+		"myvar := 5",
+		"15 + myvar",
+		"myfunctionvar := f",
+		"myfunctionvar(10)",
+		"d/dx x",
+		"d/dx x^2",
+		"d/dx 69*x^2",
+		"d/dx sin(x)*x^2"
+	];
+
 	async function resetFeild() {
 		textField.value = "";
 	}
 
+	async function onInputClicked() {
+		OpenBirch.resetState();
+		window.location.href = "/console";
+	}
+
 	import { onMount } from 'svelte';
     import { Parallax, ParallaxLayer, StickyLayer } from 'svelte-parallax';
 	onMount(() => {
@@ -50,23 +81,50 @@
 							</h1>
 						</div>
 						<div></div>
-						<div class="h-80 flex items-end justify-center">
+						<div class="join join-vertical pt-10">
-							<input bind:this={textField} type="text" class="input input-bordered w-3/4 max-w-screen-xl text-neutral-content">
+							<div class="join-item bg-primary-content">
+								<div class="h-40 overflow-auto flex flex-col-reverse p-4">
+									<ConsoleText/>
+								</div>
+							</div>
+							<div class="input join-item input-bordered flex items-center grow gap-2" style="cursor: text;">
+								<div class="w-full">
+									<div class="flex">
+										<svg
+										xmlns="http://www.w3.org/2000/svg"
+										viewBox="0 0 24 24"
+										class="h-8 w-8 opacity-70 block m-auto fill-primary">
+										<path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>
+										</svg>
+										<input autofocus type="text" class="text-primary grow" placeholder="" bind:this={textField} on:click={onInputClicked}/>
+									</div>
+								</div>
+							</div>
 						</div>
 					</div>
 				</div>
 			</div>
 		</ParallaxLayer>
-		<ParallaxLayer rate={0.1} offset={0.575} span={1} class="bg-base-100">
+		<ParallaxLayer rate={0} offset={0.575} span={2} class="bg-base-100">
-			<div class="double_centered_boxes py-16">
+			<div class="flex-container">
-				<div>
+				<div class="card lg:card-side bg-base-100 sylvesterTest">
-					<h1 class="text-neutral-content">
+					<div class="card-body shadow-xl">
-						Welcome to<br/>
+						<h1 class="text-primary">What is it?</h1>
-						<b class="text-primary">OpenBirch</b>
+						<p class="text-neutral-content">I love the colour of yellow and I also love the colour of yellow and I also love the colour of yellow and I also love the colour of yellow and I also love the colour of yellow and I also love the colour of yellow and I also love the colour of yellow and I also love the colour of yellow and I also love the colour of yellow and I also love   </p>
-					</h1>
+					</div>
+					<figure>
+						<img src="https://img.daisyui.com/images/stock/photo-1494232410401-ad00d5433cfa.webp" alt="Album" />
+					</figure>				  
 				</div>
-				<div></div>
+
-				<div class="h-80 flex items-end justify-center">
+				<div class="card lg:card-side bg-base-100 sylvesterTest">
+					<figure>
+						<img src="https://img.daisyui.com/images/stock/photo-1494232410401-ad00d5433cfa.webp" alt="Album" />
+					</figure>	
+					<div class="card-body shadow-xl">
+						<h1 class="text-primary">What is our mission?</h1>
+						<p class="text-neutral-content">I love the colour of yellow and I also love the colour of yellow and I also love the colour of yellow and I also love the colour of yellow and I also love  </p>
+					</div>		  
 				</div>
 			</div>
 		</ParallaxLayer>
@@ -87,6 +145,22 @@
 		// border: red 1mm solid;
 	}
 
+	.flex-container {
+	display: flex;
+	flex-direction: column;
+	}
+
+	.sylvesterTest {
+		max-width: 64rem;
+		min-width: 32rem;
+		width: 100%;
+		padding: 50px;
+  		margin: 0 auto;
+
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+	}
+
 	.backgroundVideoContainer{
 		filter: blur(10px);
 	}

src/routes/Header.svelte

@@ -2,6 +2,21 @@
 	import { page } from '$app/stores';
 	import goku from '$lib/images/goku.webp';
 	import "tailwindcss/tailwind.css";
+
+	import { onMount } from 'svelte'
+	import { themeChange } from 'theme-change'
+
+	// NOTE: the element that is using one of the theme attributes must be in the DOM on mount
+	onMount(() => {
+		themeChange(false)
+		// 👆 false parameter is required for svelte
+	})
+
+	let isDarkMode = true;
+	function toggleTheme(){
+		isDarkMode = !isDarkMode;
+		console.log("Darkmode: " + isDarkMode);
+	}
 </script>
 
 <header class="navbar bg-base-100">
@@ -15,9 +30,49 @@
 	<div class="flex-1"/>
 	<div class="flex-none">
 	  <ul class="menu menu-horizontal px-1">
-		<li><a href="/console">Console</a></li>
 		<li>
-
+			<!-- <button class="btn btn-outline btn-accent" on:click={toggleTheme}>Change theme test</button> -->
+			<select data-choose-theme>
+				<option value="light">Default</option>
+				<option value="dark">Dark</option>
+				<option value="cupcake">Cupcake</option>
+				<option value="bumblebee">Bumblebee</option>
+				<option value="emerald">Emerald</option>
+				<option value="corporate">Corporate</option>
+				<option value="synthwave">Synthwave</option>
+				<option value="retro">Retro</option>
+				<option value="cyberpunk">Cyberpunk</option>
+				<option value="valentine">Valentine</option>
+				<option value="halloween">Halloween</option>
+				<option value="garden">Garden</option>
+				<option value="forest">Forest</option>
+				<option value="aqua">Aqua</option>
+				<option value="lofi">Lofi</option>
+				<option value="pastel">Pastel</option>
+				<option value="fantasy">Fantasy</option>
+				<option value="wireframe">Wireframe</option>
+				<option value="black">Black</option>
+				<option value="luxury">Luxury</option>
+				<option value="dracula">Dracula</option>
+				<option value="cmyk">CMYK</option>
+				<option value="autumn">Autumn</option>
+				<option value="business">Business</option>
+				<option value="acid">Acid</option>
+				<option value="lemonade">Lemonade</option>
+				<option value="night">Night</option>
+				<option value="coffee">Coffee</option>
+				<option value="winter">Winter</option>
+				<option value="dim">Dim</option>
+				<option value="nord">Nord</option>
+				<option value="sunset">Sunset</option>
+			</select>
+			
+		</li>
+		<li>
+			<a href="/console">Console</a>
+		</li>
+		<li>
+			<a href="/pricing">Pricing</a>
 		</li>
 	  </ul>
 	</div>

src/routes/console/+page.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
-    import { OpenBirch } from "$lib/OpenBirchService";
+    import { OpenBirch, ConsoleSender } from "$lib/OpenBirchService";
-
+    import ConsoleText from "./ConsoleText.svelte";
-    var test: string[] = ["> bruh", "bruh", "> Ping", "Pong"];
+    import Enumerable from 'linq'
-    test = test.concat(test);
-    test = test.concat(test);
-    test = test.concat(test);
-    test = test.concat(test);
 
     let inputField: HTMLInputElement;
     async function handleKeydown(event: KeyboardEvent) {
         if (event.key === 'Enter') {
             pushCommand();
+        } else if (event.key === 'ArrowUp') {
+            goBackInCommandHistory();
+        } else if (event.key === 'ArrowDown'){
+            goForwardInCommandHistory();
         }
 
         if (inputField.value == '' && event.key !== 'Enter') return;
@@ -23,6 +23,7 @@
     // Locally start sending command
     function pushCommand(){
         OpenBirch.sendCommand(inputField.value)
+        currentBackSelect = 0;
         inputField.value = '';
     }
 
@@ -30,20 +31,32 @@
     function updatePreviewCommand(){
         previewText.innerHTML = OpenBirch.speculateCommand(inputField.value);
     }
+
+    let currentBackSelect = 0;
+    function goBackInCommandHistory(){
+        currentBackSelect++;
+        updateInput();
+    }
+    function goForwardInCommandHistory(){
+        if (currentBackSelect > 0)
+            currentBackSelect--;
+        updateInput();
+    }
+
+    function updateInput(){
+        let history = OpenBirch.getHistory(ConsoleSender.User);
+        // let distinctHistory = Array.from(new Map(history.map(entry => [entry.message, entry])).values()); // .distinctBy(x=>x.message)
+        let distinctHistory = Enumerable.from(history).distinct(x=>x.message).toArray();
+        currentBackSelect = Math.min(distinctHistory.length, currentBackSelect); // Clamp to num of distinct history
+        inputField.value = distinctHistory[distinctHistory.length - currentBackSelect].message;
+    }
+    
 </script>
 
 <div class="consoleContainer p-4">
     <div class="p-4 flex grow flex-col bg-primary-content rounded-xl overflow-auto">
-        <div class="">
+        <div class="flex flex-col-reverse">
-            <ul class="prose">
+            <ConsoleText/>
-                {#each $OpenBirch as consoleEntry}
-                    {#if consoleEntry.sender == 0}
-                        <li class=""><b>&gt;</b> {" " + consoleEntry.message}</li>
-                    {:else}
-                        <li class="text-accent opacity-75"><b><i>{consoleEntry.message}</i></b></li>
-                    {/if}
-                {/each}
-            </ul>
         </div>
     </div>
 

src/routes/console/ConsoleText.svelte

@@ -0,0 +1,13 @@
+<script>
+    import { OpenBirch } from "$lib/OpenBirchService";
+</script>
+
+<ul class="prose">
+    {#each $OpenBirch as consoleEntry}
+        {#if consoleEntry.sender == 0}
+            <li class=""><b>&gt;</b> {" " + consoleEntry.message}</li>
+        {:else}
+            <li class="text-accent opacity-75"><b><i>{consoleEntry.message}</i></b></li>
+        {/if}
+    {/each}
+</ul>

src/routes/pricing/+page.svelte

@@ -0,0 +1,23 @@
+<script>
+    // Script
+</script>
+
+<div>
+ <!-- html -->
+</div>
+
+<style>
+   main{   
+    display: grid;
+    grid-template-areas:
+    "topbar topbar topbar"
+    "ads content sidebar"
+    "footer footer footer";
+
+    grid-template-columns: 1fr 3fr 1fr;
+    grid-template-rows: 50px auto 70px;
+
+    align-items: center;
+   }
+
+</style>

static/OpenBirchWasm/OpenBirchWrapper.js

@@ -31,4 +31,8 @@ window.runEval = function (inputText, stopAssignments = false) {
     _free(resultPointer);
 
     return resultString;
+}
+
+window.resetOpenBirch = function () {
+    Module._resetState();
 }

tailwind.config.js

@@ -6,7 +6,39 @@ export default {
   },
   plugins: [require("@tailwindcss/typography"), require('daisyui')],
   daisyui: {
-    themes: ["coffee"], // false: only light + dark | true: all themes | array: specific themes like this ["light", "dark", "cupcake"]
+    themes: [
+      "light",
+      "dark",
+      "cupcake",
+      "bumblebee",
+      "emerald",
+      "corporate",
+      "synthwave",
+      "retro",
+      "cyberpunk",
+      "valentine",
+      "halloween",
+      "garden",
+      "forest",
+      "aqua",
+      "lofi",
+      "pastel",
+      "fantasy",
+      "wireframe",
+      "black",
+      "luxury",
+      "dracula",
+      "cmyk",
+      "autumn",
+      "business",
+      "acid",
+      "lemonade",
+      "night",
+      "coffee",
+      "winter",
+      "dim",
+      "nord",
+      "sunset",],   // false: only light + dark | true: all themes | array: specific themes like this ["light", "dark", "cupcake"]
     base: true, // applies background color and foreground color for root element by default
     styled: true, // include daisyUI colors and design decisions for all components
     utils: true, // adds responsive and modifier utility classes