chore: stage 8a

Author: ufocoder

.oxlintrc.json

@@ -4,5 +4,8 @@
     "browser": true,
     "es2023": true
   },
+  "plugins": [
+    "import"
+  ],
   "ignorePatterns": ["dist"]
 }

package.json

@@ -8,6 +8,7 @@
     "build": "tsc && vite build",
     "preview": "vite preview",
     "lint": "oxlint --deny-warnings .",
+    "lint:fix": "oxlint --fix",
     "prepare": "lefthook install"
   },
   "devDependencies": {

src/App.tsx

@@ -1,19 +1,53 @@
 import { Route, HashRouter, useLocation } from '@solidjs/router';
 import type { Component, ParentComponent } from 'solid-js';
-import { createSignal, createEffect } from 'solid-js';
+import { createSignal, createEffect, createMemo } from 'solid-js';
 import { routes } from './routes';
 import { Drawer } from './components/Drawer';
 import { StageNavigation } from './components/StageNavigation';
+import { menuGroups, isMenuGroup } from './config/menu';
+import Welcome from './stages/Welcome';
+
 
 const Layout: ParentComponent = (props) => {
   const location = useLocation();
   const [drawerOpen, setDrawerOpen] = createSignal(false);
 
   createEffect(() => {
-    location.pathname;
     setDrawerOpen(false);
   });
 
+  const getCurrentLevel = createMemo(() => {
+    const currentPath = location.pathname;
+
+    for (const group of menuGroups) {
+      console.log
+      if (isMenuGroup(group)) {
+        const foundLink = group.links.find(link => link.href === currentPath);
+        if (foundLink) {
+          return {
+            title: group.title,
+            label: foundLink.label,
+            isLink: true
+          };
+        }
+      } else {
+        if (group.href === currentPath) {
+          return {
+            title: group.label,
+            label: null,
+            isLink: false
+          };
+        }
+      }
+    }
+    
+    return null;
+  });
+
+  const currentLevel = getCurrentLevel();
+
+  console.log('currentLevel', currentLevel)
+
   return (
     <>
       <button
@@ -28,23 +62,33 @@ const Layout: ParentComponent = (props) => {
         </svg>
       </button>
 
-      {/* Основной контент с минимальной высотой 100vh */}
       <div class="min-h-screen bg-[#f8faff]">
         <div class="mx-auto w-full max-w-[1024px] px-4 py-6">
-          {/* Отступ для кнопки меню на мобильных */}
           <div class="lg:hidden h-14" />
-          
-          {/* Контент будет растягиваться */}
           <div class="min-h-[calc(100vh-3rem)] flex flex-col">
             <div class="flex-1">
+              <h1 class="text-xl2 font-semibold text-[#1f2a44]">2.5D Render</h1>
+
+              {currentLevel && (
+                <div class="mb-6 pb-3 border-b border-[#d8deea]">
+                  {currentLevel.isLink ? (
+                    <>
+                      <p class="text-sm text-[#6b7a8f] mb-1">{currentLevel.title}</p>
+                      <h2 class="text-xl font-semibold text-[#1f2a44]">{currentLevel.label}</h2>
+                    </>
+                  ) : (
+                    <h2 class="text-xl font-semibold text-[#1f2a44]">{currentLevel.title}</h2>
+                  )}
+                </div>
+              )}
+
               {props.children}
             </div>
             <StageNavigation />
           </div>
         </div>
       </div>
 
-      {/* Drawer компонент */}
       <Drawer isOpen={drawerOpen()} onClose={() => setDrawerOpen(false)} />
     </>
   );
@@ -53,6 +97,7 @@ const Layout: ParentComponent = (props) => {
 const App: Component = () => {
   return (
     <HashRouter root={Layout}>
+      <Route path="/" component={() => <Welcome />} />
       {routes}
       <Route path="*" component={() => 'Not found'} />
     </HashRouter>

src/components/Canvas.tsx

@@ -5,8 +5,7 @@ import {
   createEffect,
 } from "solid-js";
 
-
-interface RendererProps {
+export interface RendererProps {
   render: (ctx: CanvasRenderingContext2D, settings: Settings) => void;
   settings: Accessor<Settings>;
   width?: number;

src/components/Code.tsx

@@ -9,7 +9,7 @@ interface CodeBlockProps {
 }
 
 const CodeHighlight = (props: CodeBlockProps) => {
-  let ref!: HTMLDivElement;
+  let container: HTMLDivElement | null = null;
 
   const [html] = createResource(async () => {
     return await codeToHtml(props.code, {
@@ -19,16 +19,16 @@ const CodeHighlight = (props: CodeBlockProps) => {
   });
 
   onCleanup(() => {
-    if (ref) ref.innerHTML = '';
+    if (container) container.innerHTML = '';
   });
 
   createEffect(() => {
-    if (html() && ref) {
-      ref.innerHTML = html()!;
+    if (html() && container) {
+      container.innerHTML = html()!;
     }
   });
 
-  return <div ref={ref} class={props.class} />;
+  return <div ref={ref => { container = ref; }} class={props.class} />;
 };
 
 export default function CodeBlock(props: CodeBlockProps) {

src/components/Drawer.tsx

@@ -45,8 +45,6 @@ export const DrawerContent: Component<{ onLinkClick?: () => void }> = (props) =>
 };
 
 export const Drawer: Component<{ isOpen: boolean; onClose: () => void }> = (props) => {
-  let drawerRef: HTMLDivElement | undefined;
-
   createEffect(() => {
     if (props.isOpen) {
       document.body.style.overflow = 'hidden';
@@ -84,15 +82,13 @@ export const Drawer: Component<{ isOpen: boolean; onClose: () => void }> = (prop
         onClick={props.onClose}
       />
 
-      {/* Drawer панель */}
       <aside
-        ref={drawerRef}
         class={`absolute left-0 top-0 bottom-0 w-80 max-w-[85vw] transform bg-[#eef2fb] shadow-2xl transition-transform duration-300 ease-out ${
           props.isOpen ? 'translate-x-0' : '-translate-x-full'
         }`}
       >
         <div class="flex items-center justify-between border-b border-[#d8deea] px-4 py-4">
-          <span class="text-lg font-bold text-[#1f2a44]">Naive 2.5 Render</span>
+          <span class="text-lg font-bold text-[#1f2a44]">2.5D Renderer</span>
           <button
             aria-label="Закрыть меню"
             class="rounded p-1.5 text-[#1f2a44] transition-colors hover:bg-[#d8deea]"

src/components/Formula.tsx

@@ -1,6 +1,6 @@
 import { createEffect, onCleanup } from 'solid-js';
 import katex from 'katex';
-import 'katex/dist/katex.min.css'; // Не забудьте импортировать стили!
+import 'katex/dist/katex.min.css';
 
 interface FormulaProps {
   latex: string;
@@ -10,7 +10,7 @@ interface FormulaProps {
 }
 
 export const Formula = (props: FormulaProps) => {
-  let containerRef!: HTMLDivElement;
+  let containerRef: HTMLDivElement | null = null;
 
   const renderFormula = () => {
     if (!containerRef) return;
@@ -39,5 +39,5 @@ export const Formula = (props: FormulaProps) => {
     }
   });
 
-  return <div ref={containerRef} class={props.class} />;
+  return <div ref={ref => { containerRef = ref; }} class={props.class} />;
 };

src/components/Map2d/Canvas.tsx

@@ -0,0 +1,88 @@
+import {
+  type Component,
+  type Accessor,
+  onMount,
+  createEffect,
+} from "solid-js";
+
+
+type Render = (
+  ctx: CanvasRenderingContext2D,
+  settings: Settings,
+  scale: number,
+  offsetX: number,
+  offsetY: number
+) => void;
+
+export interface RendererProps {
+  render: Render;
+  settings: Accessor<Settings>;
+  scale: Accessor<number>;
+  offsetX: Accessor<number>;
+  offsetY: Accessor<number>;
+  width?: number;
+  height?: number;
+  class?: string;
+  zoomFromCenter?: boolean;
+}
+
+const Renderer: Component<RendererProps> = ({ 
+  scale, 
+  width = 400, 
+  height = 320, 
+  render, 
+  settings,
+  offsetX,
+  offsetY,
+}) => {
+  let refContainer: HTMLCanvasElement | undefined;
+
+  const tick = () => {
+    const el = refContainer;
+    if (!el) {
+      return;
+    }
+
+    const ctx = el.getContext("2d");
+    if (!ctx) {
+      return;
+    }
+
+    ctx.save();
+    ctx.clearRect(0, 0, el.width, el.height);
+    ctx.translate(el.width / 2, el.height / 2);
+    ctx.scale(scale(), scale());
+    ctx.translate(-el.width / 2 + offsetX(), -el.height / 2 + offsetY());
+
+    render(
+      ctx,
+      settings(),
+      scale(),
+      offsetX(),
+      offsetY(),
+    );
+
+    ctx.restore();
+  };
+
+  onMount(() => {
+    tick();
+  });
+
+  createEffect(() => {
+    tick();
+  });
+
+  return (
+    <canvas
+      ref={(canvas) => {
+        refContainer = canvas;
+      }}
+      width={width}
+      height={height}
+      class="border border-gray-300"
+    />
+  );
+};
+
+export default Renderer;

src/components/Controls.tsx src/components/Map2d/Controls.tsxsrc/components/Controls.tsx renamed to src/components/Map2d/Controls.tsx

@@ -1,4 +1,4 @@
-interface KeyboardControlsProps {
+export interface KeyboardControlsProps {
   withVertical?: boolean;
 }
 
@@ -27,7 +27,7 @@ export default function KeyboardControls({ withVertical }: KeyboardControlsProps
 
   return (
     <p class="font-normal text-gray-500 my-2 select-none">
-      <span>Camera horizontal controls </span>
+      <span>Перемещение камеры </span>
       <kbd 
         class="p-1.5 py-1 text-sm font-semibold text-gray-800 bg-gray-100 border border-gray-400 rounded cursor-pointer hover:bg-gray-200 transition-colors select-none"
         onMouseDown={() => handleMouseDown('w')}
@@ -62,7 +62,7 @@ export default function KeyboardControls({ withVertical }: KeyboardControlsProps
       </kbd>{" "}
       {withVertical && (
         <>
-          <span> and vertical </span>
+          <span> и </span>
           <kbd 
             class="p-1.5 py-1 text-sm font-semibold text-gray-800 bg-gray-100 border border-gray-400 rounded cursor-pointer hover:bg-gray-200 transition-colors select-none"
             onMouseDown={() => handleMouseDown('z')}
@@ -78,7 +78,7 @@ export default function KeyboardControls({ withVertical }: KeyboardControlsProps
             onContextMenu={(e) => e.preventDefault()}
           >
             X
-          </kbd>{" "}
+          </kbd>
         </>
       )}
     </p>