added a help guide

src/App.tsx

@@ -13,6 +13,7 @@ const SettingsView = lazy(() => import('./views/SettingsView').then(m => ({ defa
 const SnowballView = lazy(() => import('./views/SnowballView').then(m => ({ default: m.SnowballView })));
 const DigInView = lazy(() => import('./views/DigInView').then(m => ({ default: m.DigInView })));
 const ProgressView = lazy(() => import('./views/ProgressView').then(m => ({ default: m.ProgressView })));
+const HelpView = lazy(() => import('./views/HelpView').then(m => ({ default: m.HelpView })));
 
 const App: Component = () => {
   // Basic routing state
@@ -40,6 +41,7 @@ const App: Component = () => {
       import('./views/SnowballView');
       import('./views/DigInView');
       import('./views/ProgressView');
+      import('./views/HelpView');
 
       // Remove splash screen after high priority work is done
       const splash = document.getElementById('splash');
@@ -61,7 +63,8 @@ const App: Component = () => {
           <Show when={currentView() === "snowball"}><SnowballView /></Show>
           <Show when={currentView() === "dig_in"}><DigInView /></Show>
           <Show when={currentView() === "progress"}><ProgressView /></Show>
-          <Show when={currentView() === "settings"}><SettingsView /></Show>
+          <Show when={currentView() === "settings"}><SettingsView setView={setCurrentView} /></Show>
+          <Show when={currentView() === "help"}><HelpView onBack={() => setCurrentView("settings")} /></Show>
         </Suspense>
       </Layout>
     </Show>