finish integrating demo

Entkenntnis · May 17, 2022 · 954c368 · 954c368
1 parent f856548
commit 954c368
Show file tree

Hide file tree

Showing 15 changed files with 123 additions and 11 deletions.
diff --git a/components/App.tsx b/components/App.tsx
@@ -35,16 +35,17 @@ export function App() {
         ;(async () => {
           const res = await fetch(file)
           const text = await res.text()
-          const wsClone: WorkspaceState = JSON.parse(JSON.stringify(core.ws))
           const title = file.match(/\/([^\/]+\.json)/)
           if (title) {
-            wsClone.title = title[1]
+            //wsClone.title = title[1]
+            core.mutateCore((core) => {
+              core.projectTitle = title[1]
+            })
           }
-          core.mutateCore((state) => {
-            state.workspaces.splice(1, 0, wsClone)
-            state.currentWorkspace = 1
-          })
           deserialize(core, text)
+          core.mutateWs((ws) => {
+            if (ws.type == 'free') ws.ui.showPreview = false
+          })
         })()
       } catch (e) {}
     }
@@ -53,7 +54,11 @@ export function App() {
   return (
     <>
       <Head>
-        <title>Robot Karol Web</title>
+        {core.state.projectTitle ? (
+          <title>{core.state.projectTitle} - Robot Karol Web</title>
+        ) : (
+          <title>Robot Karol Web</title>
+        )}
       </Head>
       <style jsx global>
         {`

diff --git a/components/Research.tsx b/components/Research.tsx
@@ -2,7 +2,6 @@ import clsx from 'clsx'
 import { switchToWorkspace } from '../lib/commands/researchCenter'
 import { levels } from '../lib/data/levels'
 import { useCore } from '../lib/state/core'
-import { WorkspaceState, WorkspaceStateLevelMode } from '../lib/state/types'
 import { submit_event } from '../lib/stats/submit'
 
 export function Research() {
@@ -26,7 +25,15 @@ export function Research() {
           .
         </div>
       </div>
-      <div className=" ml-4 mt-4 border-b pb-4 text-center">
+      <div className=" ml-4 mt-4 border-b pb-4">
+        <a
+          className="bg-gray-200 cursor-pointer px-2 py-1.5 rounded mr-4"
+          target="_blank"
+          href={`//${window.window.location.host}`}
+          rel="noreferrer"
+        >
+          Neues Fenster
+        </a>
         <button
           className="bg-green-400 px-2 py-1.5 rounded"
           onClick={() => switchToWorkspace(core, freeWorkspace)}
@@ -73,7 +80,7 @@ export function Research() {
                   <button className="rounded px-2 py-0.5 bg-blue-400">
                     {ws.progress >= levels[ws.levelId].target
                       ? 'Öffnen'
-                      : 'Erforschen'}
+                      : 'Bearbeiten'}
                   </button>
                 </div>
               </div>
@@ -117,6 +124,34 @@ export function Research() {
           </li>
         </ul>
       </div>
+
+      <h2 className="mt-5 mb-4 mx-4 text-xl">Beispiele</h2>
+      <div className="w-full flex flex-wrap border-b pb-3">
+        {demoData.map((data) => (
+          <a
+            className={clsx(
+              'w-48 h-56 border-2 rounded m-4 cursor-pointer block'
+            )}
+            key={data.title}
+            href={`//${window.location.host}?project=${data.projectUrl}`}
+            target="_blank"
+            rel="noreferrer"
+          >
+            <p className="text-center mt-3 font-bold">{data.title}</p>
+            <div
+              className="mx-3 mt-2 h-[110px] bg-contain bg-no-repeat bg-center"
+              style={{
+                backgroundImage: `url(${data.imageSrc})`,
+              }}
+            ></div>
+            <div className="flex justify-around mt-3">
+              <button className="rounded px-2 py-0.5 bg-blue-400">
+                Öffnen
+              </button>
+            </div>
+          </a>
+        ))}
+      </div>
       <p className="my-4 ml-4 border-b pb-3">
         <input
           type="checkbox"
@@ -129,9 +164,77 @@ export function Research() {
         />{' '}
         Zur Entwicklung neuer Funktionen sammelt Robot Karol Web Statistiken zur
         Nutzung (Anzahl Aufrufe, bearbeitete Aufgaben, ausgeführte Programme).
-        Dein Code und der Inhalt der Welt werden nicht übertragen.
       </p>
       <p className="mt-4 mx-4 mb-3">Version: Juni 2022</p>
     </div>
   )
 }
+
+const demoData: { projectUrl: string; title: string; imageSrc: string }[] = [
+  {
+    projectUrl:
+      'https://entkenntnis.github.io/robot-karol-web/examples/schwimmbad.json',
+    title: 'Schwimmbad',
+    imageSrc: '/demo/schwimmbad.png',
+  },
+  {
+    projectUrl:
+      'https://entkenntnis.github.io/robot-karol-web/examples/schachbrett.json',
+    title: 'Schachbrett',
+    imageSrc: '/demo/schachbrett.png',
+  },
+  {
+    projectUrl:
+      'https://entkenntnis.github.io/robot-karol-web/examples/allesinvertieren.json',
+    title: 'Alles invertieren',
+    imageSrc: '/demo/allesinvertieren.png',
+  },
+  {
+    projectUrl:
+      'https://entkenntnis.github.io/robot-karol-web/examples/stapeln.json',
+    title: 'Stapeln',
+    imageSrc: '/demo/stapeln.png',
+  },
+  {
+    projectUrl:
+      'https://entkenntnis.github.io/robot-karol-web/examples/raum_verlassen.json',
+    title: 'Raum verlassen',
+    imageSrc: '/demo/raum_verlassen.png',
+  },
+  {
+    projectUrl:
+      'https://entkenntnis.github.io/robot-karol-web/examples/füllen.json',
+    title: 'Füllen',
+    imageSrc: '/demo/füllen.png',
+  },
+  {
+    projectUrl:
+      'https://entkenntnis.github.io/robot-karol-web/examples/labyrinth.json',
+    title: 'Labyrinth',
+    imageSrc: '/demo/labyrinth.png',
+  },
+  {
+    projectUrl:
+      'https://entkenntnis.github.io/robot-karol-web/examples/binär_konverter.json',
+    title: 'Binär-Konverter',
+    imageSrc: '/demo/konverter.png',
+  },
+  {
+    projectUrl:
+      'https://entkenntnis.github.io/robot-karol-web/examples/sortieren.json',
+    title: 'Sortieren',
+    imageSrc: '/demo/sortieren.png',
+  },
+  {
+    projectUrl:
+      'https://entkenntnis.github.io/robot-karol-web/examples/game_of_life.json',
+    title: 'Game of Life',
+    imageSrc: '/demo/gol.png',
+  },
+  {
+    projectUrl:
+      'https://entkenntnis.github.io/robot-karol-web/examples/bf.json',
+    title: 'BF Interpreter',
+    imageSrc: '/demo/bf.png',
+  },
+]
diff --git a/lib/commands/world.ts b/lib/commands/world.ts
@@ -238,6 +238,9 @@ export function createWorldCmd(core: Core, x: number, y: number, z: number) {
     state.world = createWorld(x, y, z)
     state.ui.preview = undefined
   })
+  core.mutateCore((core) => {
+    core.projectTitle = undefined
+  })
 }
 
 export function initWorld(core: Core) {

diff --git a/lib/state/types.ts b/lib/state/types.ts
@@ -128,6 +128,7 @@ export interface CoreState {
   currentWorkspace: number
   showResearchCenter: boolean
   enableStats: boolean
+  projectTitle?: string
 }
 
 export interface CoreRefs {

diff --git a/public/demo/allesinvertieren.png b/public/demo/allesinvertieren.png
diff --git a/public/demo/bf.png b/public/demo/bf.png
diff --git a/public/demo/füllen.png b/public/demo/füllen.png
diff --git a/public/demo/gol.png b/public/demo/gol.png
diff --git a/public/demo/konverter.png b/public/demo/konverter.png
diff --git a/public/demo/labyrinth.png b/public/demo/labyrinth.png
diff --git a/public/demo/raum_verlassen.png b/public/demo/raum_verlassen.png
diff --git a/public/demo/schachbrett.png b/public/demo/schachbrett.png
diff --git a/public/demo/schwimmbad.png b/public/demo/schwimmbad.png
diff --git a/public/demo/sortieren.png b/public/demo/sortieren.png
diff --git a/public/demo/stapeln.png b/public/demo/stapeln.png