32bitkid · 32bitkid · May 20, 2024 · May 20, 2024 · May 20, 2024 · May 21, 2024
diff --git a/apps/scishop/.gitignore b/apps/scishop/.gitignore
@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+src/data/tmp*.json
diff --git a/apps/scishop/README.md b/apps/scishop/README.md
@@ -0,0 +1,3 @@
+# scishop
+
+Create, edit and export `Sci0` & `Sci01` PIC resources.
diff --git a/apps/scishop/index.html b/apps/scishop/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>scishop</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./src/main.ts"></script>
+  </body>
+</html>
diff --git a/apps/scishop/package.json b/apps/scishop/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "scishop",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@4bitlabs/sci0": "^4.0.1",
+    "@4bitlabs/color": "^2.1.5",
+    "@4bitlabs/color-space": "^1.2.3",
+    "@4bitlabs/image": "^3.3.11",
+    "@4bitlabs/vec2": "^1.2.0",
+    "fast-deep-equal": "^3.1.3",
+    "vue": "^3.4.21",
+    "transformation-matrix": "^2.16.1"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.4",
+    "typescript": "^5.2.2",
+    "vite": "^5.2.0",
+    "vue-tsc": "^2.0.6"
+  }
+}
diff --git a/apps/scishop/src/App.vue b/apps/scishop/src/App.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import Header from './components/Header.vue';
+import Toolbar from './components/Toolbar.vue';
+import SideBar from './components/Sidebar.vue';
+import Stage from './components/Stage.vue';
+import StatusBar from './components/StatusBar.vue';
+import { useAppStoreProvider } from './data/useAppStoreProvider.ts';
+
+useAppStoreProvider();
+</script>
+
+<template>
+  <Stage />
+  <Toolbar />
+  <SideBar />
+  <StatusBar />
+  <Header />
+</template>
diff --git a/apps/scishop/src/assets/cursor-pen-minus.svg b/apps/scishop/src/assets/cursor-pen-minus.svg
diff --git a/apps/scishop/src/assets/cursor-pen-plus.svg b/apps/scishop/src/assets/cursor-pen-plus.svg
diff --git a/apps/scishop/src/assets/cursor-pen-star.svg b/apps/scishop/src/assets/cursor-pen-star.svg
diff --git a/apps/scishop/src/assets/cursor-pen.svg b/apps/scishop/src/assets/cursor-pen.svg
diff --git a/apps/scishop/src/components/Header.vue b/apps/scishop/src/components/Header.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div :class="$style.header">
+    <hr :class="$style.spacer" />
+    <div :class="$style.pal">
+      Pal
+      <button type="button">1</button>
+      <button type="button">2</button>
+      <button type="button">3</button>
+      <button type="button">4</button>
+    </div>
+  </div>
+
+  <Teleport to="body"> </Teleport>
+</template>
+
+<style module>
+.header {
+  background-color: var(--clr-surface--default);
+  color: var(--clr-ink);
+  grid-area: header;
+  display: flex;
+  align-items: center;
+  gap: 1ch;
+  padding-inline: 1ch;
+}
+
+.spacer {
+  flex-grow: 1;
+  width: auto;
+  border: 0;
+}
+
+.pal {
+  align-self: center;
+  height: 75%;
+}
+
+.pal button {
+  aspect-ratio: 9 / 11;
+  height: 90%;
+  text-align: center;
+
+  border-top: 1px solid var(--clr-surface-200);
+  border-bottom: 1px solid var(--clr-surface-200);
+  border-right: 1px solid var(--clr-surface-200);
+  &:first-of-type {
+    border-left: 1px solid var(--clr-surface-200);
+    border-top-left-radius: 0.25lh;
+    border-bottom-left-radius: 0.25lh;
+  }
+
+  &:last-of-type {
+    border-top-right-radius: 0.25lh;
+    border-bottom-right-radius: 0.25lh;
+  }
+}
+</style>
diff --git a/apps/scishop/src/components/LayerNavigator.vue b/apps/scishop/src/components/LayerNavigator.vue
@@ -0,0 +1,173 @@
+<script setup lang="ts">
+import { computed, unref } from 'vue';
+import type { Component } from 'vue';
+import GenericCommandItem from './command-items/GenericCommandItem.vue';
+import PolyLineCommandItem from './command-items/PolyLineCommandItem.vue';
+import FillCommandItem from './command-items/FillCommandItem.vue';
+import BrushCommandItem from './command-items/BrushCommandItem.vue';
+import SetPaletteCommand from './command-items/SetPaletteCommand.vue';
+import {
+  DrawCommand,
+  FillCommand,
+  PolylineCommand,
+  BrushCommand,
+} from '@4bitlabs/sci0';
+import { mustInject } from '../data/mustInject.ts';
+import {
+  drawStateKey,
+  layersKey,
+  paletteKey,
+  pointersKey,
+} from '../data/keys.ts';
+
+const { raw: rawDrawState } = mustInject(drawStateKey);
+const layersRef = mustInject(layersKey);
+const { topIdx: topIdxRef, selectedIdx: selectedIdxRef } =
+  mustInject(pointersKey);
+const { resolvePaletteAtIdx } = mustInject(paletteKey);
+
+const stack = computed(() => Array.from(unref(layersRef).entries()).reverse());
+
+const component = new Map<string, Component>([
+  ['SET_PALETTE', SetPaletteCommand],
+  ['UPDATE_PALETTE', GenericCommandItem],
+  ['BRUSH', BrushCommandItem],
+  ['FILL', FillCommandItem],
+  ['PLINE', PolyLineCommandItem],
+  ['CEL', GenericCommandItem],
+  ['group', GenericCommandItem],
+]);
+
+function isHasDrawModes(
+  it: DrawCommand,
+): it is FillCommand | PolylineCommand | BrushCommand {
+  return it[0] === 'FILL' || it[0] === 'PLINE' || it[0] === 'BRUSH';
+}
+
+const handleClick = (e: MouseEvent, idx: number) => {
+  if (e.shiftKey) {
+    topIdxRef.value = idx + 1;
+  }
+
+  selectedIdxRef.value = unref(selectedIdxRef) !== idx ? idx : null;
+  const ecmd = unref(layersRef)[idx];
+  const lastCmd = ecmd.commands.findLast(isHasDrawModes);
+  if (lastCmd) {
+    const [, options] = lastCmd;
+    const [drawMode, drawCodes] = options;
+    rawDrawState.value = [drawMode, ...drawCodes];
+  }
+};
+</script>
+
+<template>
+  <menu :class="$style.list">
+    <li :class="$style.head">
+      <div>Layer</div>
+      <div>Tool</div>
+      <div>V</div>
+      <div>P</div>
+      <div>C</div>
+    </li>
+    <component
+      v-for="[idx, { id, type, commands }] in stack"
+      :key="id"
+      :is="component.get(type) ?? GenericCommandItem"
+      :command="commands[0]"
+      :pals="resolvePaletteAtIdx(idx)"
+      :class="[
+        $style.item,
+        idx === selectedIdxRef && $style.current,
+        idx >= topIdxRef && $style.hidden,
+        idx === topIdxRef - 1 && $style.top,
+      ]"
+      @click="handleClick($event, idx)"
+    />
+  </menu>
+</template>
+
+<style module>
+.list {
+  --lnc-item-height: 32px;
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: 1fr 1.4rem 1rem 1rem 1px;
+  grid-template-rows: auto;
+  grid-auto-rows: var(--lnc-item-height);
+  column-gap: 0.5ch;
+  overflow-x: clip;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  align-items: center;
+  align-content: start;
+  padding-bottom: 0.5lh;
+  background-image: var(--transparent-img);
+  background-color: var(--clr-surface--default);
+  min-height: 15rem;
+}
+
+.head {
+  display: grid;
+  grid-template-columns: subgrid;
+  position: sticky;
+  top: 0;
+  background-color: var(--clr-surface--default);
+  grid-column: 1 / -1;
+  box-shadow: 0 0.125em 0.5em rgba(0 0 0 / 10%);
+  z-index: 1;
+}
+
+.head :nth-child(1) {
+  font-size: 0.85rem;
+  font-weight: bold;
+  padding-inline-start: 0.5ch;
+  padding-block: 0.5lh 0.5ch;
+  grid-column: 1 / -1;
+  border-bottom: 1px solid var(--clr-surface-200);
+}
+
+.head :nth-child(n + 2) {
+  padding-block: 0.5lh;
+  padding-inline-start: 0.5ch;
+  font: normal normal 0.75em monospace;
+  font-weight: bold;
+}
+
+.head :nth-child(n + 3) {
+  text-align: center;
+}
+
+.item {
+  font: normal normal 0.75em monospace;
+  display: grid;
+  grid-column: 1 / -1;
+  grid-template-columns: subgrid;
+  padding-block: calc(0.5lh + 1px) 0.5lh;
+  padding-inline-start: 0.5ch;
+  border-top: 1px solid #ddd;
+  cursor: pointer;
+  user-select: none;
+  align-content: center;
+  background-color: var(--clr-surface--default);
+  background-clip: padding-box;
+  height: var(--lnc-item-height);
+  box-sizing: border-box;
+}
+
+.item:last-of-type {
+  box-shadow: 0 0.125em 0.5em rgba(0 0 0 / 10%);
+}
+
+.top {
+  padding-block: 0.5lh;
+  border-top: 2px dashed var(--clr-primary-700);
+}
+
+.current {
+  background-color: var(--clr-primary-800);
+}
+
+.hidden > * {
+  opacity: 0.25;
+}
+</style>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# scishop

		Create, edit and export `Sci0` & `Sci01` PIC resources.