[1.10] improve OOBE

src/lib/OOBE/CustomizePFP.svelte

@@ -18,7 +18,8 @@
 </script>
 
 <div class="pfps">
-	<h1>Set your profile picture</h1>
+	<h1>Select a profile picture</h1>
+	<p>Select a profile picture to make yourself stand out.</p>
 	<div class="pfp-outer">
 		<div class="pfp-list">
 			{#if pfpOverflow && $user.pfp_data < 0}

src/lib/OOBE/CustomizeTheme.svelte

@@ -1,22 +1,31 @@
 <script>
 	import SwitchThemeModal from "../modals/settings/SwitchTheme.svelte";
 
-	import * as modals from "../modals.js";
-
-	modals.showModal(SwitchThemeModal);
+	import {user} from "../stores.js"
+	import * as clm from "../clmanager.js";
 </script>
 
 <div class="content">
-	<h1>Set your theme</h1>
-	<button on:click={() => modals.showModal(SwitchThemeModal)}
-		>Change Theme</button
-	>
-	<br /><br />
-	Click Next when done.
+	<h1>Personalization</h1>
+	<p>Personalize your layout and theme</p>
+	<SwitchThemeModal fromoobe={true} />
+	<p>Hit the gear icon below to select a layout</p>
+	<button
+		class="circle settings"
+		on:click={() =>
+			clm.updateProfile({
+				layout: $user.layout === "new" ? "old" : "new",
+			})}
+	/>
+	<p>You are currently using the "{$user.layout}" layout.</p>
 </div>
 
 <style>
 	.content {
 		text-align: center;
+		width: 60%;
+		left: 50%;
+        transform: translate(-50%,0);
+        position: relative;
 	}
 </style>

src/lib/OOBE/EasterEgg.svelte

@@ -0,0 +1,26 @@
+<div class="content">
+	<h1>...</h1>
+    <br />
+    <p>I already told you multipile times you arent supposed to be here.</p>
+    <p>So congrats, you found another easter egg</p>
+    <p>This oobe was created mainly by bloctans.</p>
+    <p>because why not</p>
+    <p>Funny thing is that i added scrolling</p>
+    <p>Here lemme show you</p>
+    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
+    <p>Isnt that nice?</p>
+    <p>Fun fact: the oobe uses a page like system controled by a main svelte file</p>
+    <br />
+    <p>Anyways ill end off with this unused line for the introduction page</p>
+    <p>(Theme and layout switching may cause photosensitive epilepsy, proceed at your own risk)</p>
+</div>
+
+<style>
+    .content {
+        text-align: center;
+        width: 80%;
+        left: 50%;
+        transform: translate(-50%,0);
+        position: relative;
+    }
+</style>

src/lib/OOBE/End.svelte

@@ -0,0 +1,37 @@
+<script>
+    import {OOBERunning, OOBEPage} from "../stores.js";
+    import {goto} from "@roxi/routify";
+
+    let tosettings = true
+</script>
+
+<h1>Thats it for now.</h1>
+<p>You can customize more things via the settings</p>
+<p>To access settings, click on your pfp (Profile picture) icon in the bottom left.</p>
+<p>or, you can optionally go to the settings here</p>
+<div id="exitthingy">
+    <label for="SettingsONExit">Exit the OOBE to settings</label>
+    <input
+        type="checkbox"
+        id="SettingsONExit"
+        bind:checked={tosettings}
+    /> 
+</div>
+<br />
+<button
+    on:click={() => {
+        if (tosettings) {
+            $goto("/settings")
+        } else {
+            $goto("/home")
+        }
+        OOBERunning.set(false);
+    }}>Exit the OOBE</button
+>
+
+<style>
+    #exitthingy label {
+        bottom: 0.65em;
+        position: relative;
+    }
+</style>

src/lib/OOBE/Introduction.svelte

@@ -0,0 +1,21 @@
+<div class="content">
+	<h1>Introduction</h1>
+    <br />
+    <p>Welcome to Meower!</p>
+    <p>Now lets get you setup and ready to chat!</p>
+    <p>This is the OOBE, you might of seen something simillar if you have set up a windows computer (After XP)</p>
+    <p>If you want to skip the OOBE. You can press the skip button down below.</p>
+    <p>Hit the next button to continue</p>
+    <p>And if you ever wanna go back, hit the back button.</p>
+    <!--<p>(Theme and layout switching may cause photosensitive epilepsy, proceed at your own risk)</p>-->
+</div>
+
+<style>
+    .content {
+        text-align: center;
+        width: 80%;
+        left: 50%;
+        transform: translate(-50%,0);
+        position: relative;
+    }
+</style>

src/lib/OOBE/Main.svelte

@@ -1,14 +1,18 @@
 <script>
 	import OOBECustomizePFP from "./CustomizePFP.svelte";
 	import OOBECustomizeTheme from "./CustomizeTheme.svelte";
+	import OOBEIntroduction from "./Introduction.svelte";
+	import OOBEEnd from "./End.svelte";
+	import OOBEEasterEgg from "./EasterEgg.svelte"
+	import OOBEQuote from "./Quote.svelte"
 
 	import {OOBERunning, OOBEPage} from "../stores.js";
 	import * as clm from "../clmanager.js";
 
 	import {onMount} from "svelte";
 
 	$: allowPrevious = $OOBEPage > 0;
-	$: allowNext = $OOBEPage < 2;
+	$: allowNext = $OOBEPage < 4;
 
 	onMount(() => {
 		clm.updateProfile({});
@@ -17,20 +21,21 @@
 </script>
 
 <div class="wrapper">
-	<div class="main">
-		<div class="setup">
+	<div class="pages">
+		<div class="inner">
 			<div class="fullcenter">
 				{#if $OOBEPage == 0}
-					<OOBECustomizePFP />
+					<OOBEIntroduction />
 				{:else if $OOBEPage == 1}
-					<OOBECustomizeTheme />
+					<OOBECustomizePFP />
 				{:else if $OOBEPage == 2}
-					<h1>That's it!</h1>
-					<button
-						on:click={() => {
-							OOBERunning.set(false);
-						}}>Let's go!</button
-					>
+					<OOBEQuote />
+				{:else if $OOBEPage == 3}
+					<OOBECustomizeTheme />
+				{:else if $OOBEPage == 4}
+					<OOBEEnd />
+				{:else if $OOBEPage == 8}
+					<OOBEEasterEgg />
 				{:else}
 					<p>You aren't supposed to be here.</p>
 					<p>Current Page: {$OOBEPage}</p>
@@ -40,7 +45,6 @@
 	</div>
 	<div class="footer">
 		<button
-			class="full"
 			disabled={!allowPrevious}
 			on:click={() => {
 				OOBEPage.set($OOBEPage - 1);
@@ -49,13 +53,11 @@
 			&lt;- Back
 		</button>
 		<button
-			class="center full"
 			on:click={() => {
 				OOBERunning.set(false);
 			}}>Skip</button
 		>
 		<button
-			class="right full"
 			disabled={!allowNext}
 			on:click={() => {
 				OOBEPage.set($OOBEPage + 1);
@@ -68,24 +70,41 @@
 
 <style>
 	.wrapper {
+		margin: 0;
 		width: 100%;
 		height: 100%;
+		display: flex;
+		flex-direction: column;
 	}
 
-	.main {
-		height: calc(100% - 3em);
-	}
-
-	.setup {
+	.pages {
 		text-align: center;
-		display: table;
+		flex-grow: 1;
+		flex-shrink: 1;
+		overflow: hidden;
 	}
 
 	.footer {
+		flex-grow: 0;
+		flex-shrink: 0;
+		padding-left: 1em;
+		padding-right: 1em;
 		height: 3em;
 		display: flex;
 		align-items: stretch;
 		justify-content: space-between;
+		background-color: var(--orange-dark);
+	}
+
+	.footer button {
+		height: 80%;
+		align-self: center;
+		border: 0;
+	}
+
+	.inner {
+		height: calc(100vh - 3em);
+		overflow: auto;
 	}
 
 	.fullcenter {
@@ -94,7 +113,7 @@
 		box-sizing: border-box;
 
 		margin: auto;
-		overflow: auto;
+		overflow: none;
 
 		display: table-cell;
 		vertical-align: middle;

src/lib/OOBE/Quote.svelte

@@ -0,0 +1,32 @@
+<script>
+	import {user} from "../stores.js"
+	import * as clm from "../clmanager.js";
+	import {userRestrictions,isRestricted } from "../bitField.js";
+</script>
+
+<div class="content">
+	<h1>Quote</h1>
+	Give yourself a quote, these can be used as a "Bio"
+	<br />
+	<br />
+	<input
+		type="text"
+		id="quotething"
+		class="modal-input white"
+		placeholder="Write something..."
+		maxlength="360"
+		disabled={isRestricted(userRestrictions.EDITING_QUOTE)}
+		bind:value={$user.quote}
+		on:change={() => clm.updateProfile({quote: $user.quote})}
+	/>
+</div>
+
+<style>
+	.content {
+		text-align: center;
+		width: 60%;
+		left: 50%;
+        transform: translate(-50%,0);
+        position: relative;
+	}
+</style>

src/lib/Sidebar.svelte

@@ -242,10 +242,14 @@
 		width: 100%;
 		z-index: 10;
 		position: absolute;
-		background-color: var(--background);
+		background-color: #000000;
 		opacity: 0.33;
 	}
 
+	:global(main.layout-old) .locked {
+		width: 110%;
+	}
+
 	.logo {
 		display: none;
 		flex-grow: 1;