OFRAK Projects

frontend/src/App.svelte

@@ -51,10 +51,12 @@
   import { keyEventToString, shortcuts } from "./keyboard.js";
 
   import { writable } from "svelte/store";
+  import ProjectManagerView from "./ProjectManager/ProjectManagerView.svelte";
 
   printConsoleArt();
 
   let showRootResource = false,
+    showProjectManager = false,
     dataLenPromise = Promise.resolve([]),
     hexScrollY = writable({}),
     useAssemblyView = false,
@@ -188,6 +190,8 @@ Answer by running riddle.answer('your answer here') from the console.`);
               bind:bottomLeftPane="{bottomLeftPane}"
               bind:resourceNodeDataMap="{resourceNodeDataMap}"
               bind:modifierView="{modifierView}"
+              bind:showProjectManager="{showProjectManager}"
+              bind:showRootResource="{showRootResource}"
             />
           {/if}
         </Pane>
@@ -251,10 +255,19 @@ Answer by running riddle.answer('your answer here') from the console.`);
       <AudioPlayer />
     </div>
   {/if}
+{:else if showProjectManager}
+  <ProjectManagerView
+    bind:rootResourceLoadPromise="{rootResourceLoadPromise}"
+    bind:rootResource="{rootResource}"
+    bind:resources="{resources}"
+    bind:showRootResource="{showRootResource}"
+    bind:showProjectManager="{showProjectManager}"
+  />
 {:else}
   <StartView
     bind:rootResourceLoadPromise="{rootResourceLoadPromise}"
     bind:showRootResource="{showRootResource}"
+    bind:showProjectManager="{showProjectManager}"
     bind:resources="{resources}"
     bind:rootResource="{rootResource}"
     bind:resourceNodeDataMap="{resourceNodeDataMap}"

frontend/src/ExclusiveCheckbox.svelte

@@ -0,0 +1,23 @@
+<script>
+  import Checkbox from "./Checkbox.svelte";
+
+  export let selectedValue,
+    ownValue,
+    leftbox = false,
+    nomargin = false;
+
+  let thisSelected;
+
+  $: if (thisSelected) {
+    selectedValue = ownValue;
+  }
+</script>
+
+<Checkbox
+  leftbox="{leftbox}"
+  nomargin="{nomargin}"
+  checked="{selectedValue === ownValue}"
+  bind:value="{thisSelected}"
+>
+  <slot />
+</Checkbox>

frontend/src/FileBrowser.svelte

@@ -31,7 +31,6 @@
 
   .filelabel span {
     width: 100%;
-    margin-left: 2ch;
     background: inherit;
     color: inherit;
     /* border-bottom: 1px solid var(--main-fg-color); */

frontend/src/ProjectManager/ProjectManagerAddBinaryToProject.svelte

@@ -0,0 +1,79 @@
+<style>
+  .add-file {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+  }
+
+  button {
+    margin: 1em, 0;
+    padding-top: 0.5em;
+    padding-bottom: 0.5em;
+    padding-left: 1em;
+    padding-right: 1em;
+    background-color: var(--main-bg-color);
+    color: var(--main-fg-color);
+    border: 1px solid var(--main-fg-color);
+    border-radius: 0;
+    font-size: smaller;
+    overflow: hidden;
+    box-shadow: none;
+  }
+  button:hover,
+  button:focus {
+    outline: none;
+    box-shadow: inset 1px 1px 0 var(--main-fg-color),
+      inset -1px -1px 0 var(--main-fg-color);
+  }
+
+  button:active {
+    box-shadow: inset 2px 2px 0 var(--main-fg-color),
+      inset -2px -2px 0 var(--main-fg-color);
+  }
+</style>
+
+<script>
+  import FileBrowser from "../FileBrowser.svelte";
+  import Icon from "../Icon.svelte";
+  import { selectedProject, settings } from "../stores";
+  let files, f;
+
+  $: if (files) {
+    f = files[0];
+    files = null;
+  }
+  async function addBinaryToProject() {
+    await fetch(
+      `${$settings.backendUrl}/add_binary_to_project?id=${$selectedProject.session_id}&name=${f.name}`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: await f.arrayBuffer(),
+      }
+    ).then(async (r) => {
+      if (!r.ok) {
+        throw Error(JSON.stringify(await r.json(), undefined, 2));
+      }
+      $selectedProject = await fetch(
+        `${$settings.backendUrl}/get_project_by_id?id=${$selectedProject.session_id}`
+      ).then((r) => {
+        if (!r.ok) {
+          throw Error(r.statusText);
+        }
+        return r.json();
+      });
+      return await r.json();
+    });
+  }
+</script>
+
+<div class="add-file">
+  <FileBrowser bind:files="{files}" />
+  {#if f}
+    <button on:click="{addBinaryToProject}"
+      ><Icon url="/icons/binary.svg" /> Add Binary to Project</button
+    >
+  {/if}
+</div>

frontend/src/ProjectManager/ProjectManagerAddScriptToProject.svelte

@@ -0,0 +1,69 @@
+<style>
+  .add-file {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+  }
+
+  button {
+    margin: 1em, 0;
+    padding-top: 0.5em;
+    padding-bottom: 0.5em;
+    padding-left: 1em;
+    padding-right: 1em;
+    background-color: var(--main-bg-color);
+    color: var(--main-fg-color);
+    border: 1px solid var(--main-fg-color);
+    border-radius: 0;
+    font-size: smaller;
+    overflow: hidden;
+    box-shadow: none;
+  }
+</style>
+
+<script>
+  import FileBrowser from "../FileBrowser.svelte";
+  import Icon from "../Icon.svelte";
+  import { selectedProject, settings } from "../stores";
+  let files, f;
+
+  $: if (files) {
+    f = files[0];
+    files = null;
+  }
+
+  async function addScriptToProject() {
+    return await fetch(
+      `${$settings.backendUrl}/add_script_to_project?id=${$selectedProject.session_id}&name=${f.name}`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: await f.arrayBuffer(),
+      }
+    ).then(async (r) => {
+      if (!r.ok) {
+        throw Error(JSON.stringify(await r.json(), undefined, 2));
+      }
+      $selectedProject = await fetch(
+        `${$settings.backendUrl}/get_project_by_id?id=${$selectedProject.session_id}`
+      ).then((r) => {
+        if (!r.ok) {
+          throw Error(r.statusText);
+        }
+        return r.json();
+      });
+      return await r.json();
+    });
+  }
+</script>
+
+<div class="add-file">
+  <FileBrowser bind:files="{files}" />
+  {#if f}
+    <button on:click="{addScriptToProject}"
+      ><Icon url="/icons/document.svg" /> Add Script to Project</button
+    >
+  {/if}
+</div>

frontend/src/ProjectManager/ProjectManagerBinaryOptions.svelte

@@ -0,0 +1,68 @@
+<style>
+  button {
+    margin-bottom: 1em;
+    margin-left: 1em;
+    padding-top: 0.5em;
+    padding-bottom: 0.5em;
+    padding-left: 1em;
+    padding-right: 1em;
+    background-color: var(--main-bg-color);
+    color: var(--main-fg-color);
+    border: 1px solid var(--main-fg-color);
+    border-radius: 0;
+    font-size: smaller;
+    overflow: hidden;
+    box-shadow: none;
+  }
+
+  button:hover,
+  button:focus {
+    outline: none;
+    box-shadow: inset 1px 1px 0 var(--main-fg-color),
+      inset -1px -1px 0 var(--main-fg-color);
+  }
+
+  button:active {
+    box-shadow: inset 2px 2px 0 var(--main-fg-color),
+      inset -2px -2px 0 var(--main-fg-color);
+  }
+</style>
+
+<script>
+  import { selectedProject, settings, selected } from "../stores";
+  import Icon from "../Icon.svelte";
+
+  export let name;
+
+  async function deleteBinary() {
+    await fetch(`${$settings.backendUrl}/delete_binary_from_project`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        id: $selectedProject.session_id,
+        binary: name,
+      }),
+    }).then(async (r) => {
+      if (!r.ok) {
+        throw Error(JSON.stringify(await r.json(), undefined, 2));
+      }
+      $selectedProject = await fetch(
+        `${$settings.backendUrl}/get_project_by_id?id=${$selectedProject.session_id}`
+      ).then((r) => {
+        if (!r.ok) {
+          throw Error(r.statusText);
+        }
+        return r.json();
+      });
+      return await r.json();
+    });
+  }
+</script>
+
+<div>
+  <button on:click|stopPropagation="{deleteBinary}"
+    ><Icon url="/icons/trash.svg" />Delete {name} from project.</button
+  >
+</div>