WIP

adding tailwind added fills
hackclub · Oct 17, 2023 · aa65d45 · aa65d45
1 parent a8ab5e3
commit aa65d45
Show file tree

Hide file tree

Showing 6 changed files with 107 additions and 86 deletions.
diff --git a/astro/src/components/DropBox.tsx b/astro/src/components/DropBox.tsx
@@ -9,29 +9,27 @@ export default function DropBox() {
   }, []) // Empty dependency array means this effect runs once after initial render
 
   return (
-    <>
-      <style>{`
-            .drop {
-                position: absolute;
-                width: 100%;
-                height: 100%;
-                background: lightblue;
-                opacity: .8;
-                align-items: center;
-                justify-content: center;
-                border: 3px dashed grey;
-                left: 0px;
-                top: 0px;
-                display: flex;
-                z-index: 999;
-            }
-
-            .hidden {
-                display: none;
-            }
-        `}</style>
-      <div class="drop hidden droparea">Drop an SVG or JS file.</div>
-    </>
+    <div class="
+      drop 
+      droparea 
+      hidden
+
+      w-100 
+      h-full 
+      absolute 
+      bg-blue-200
+      bg-opacity-80 
+      flex 
+      items-center 
+      justify-center 
+      border-4
+      border-dashed
+      border-gray-800
+      left-0 
+      top-0 
+      z-50">
+      Drop an SVG or JS file.
+    </div>
   )
 }
 
@@ -81,8 +79,9 @@ function addDragDrop() {
   window.addEventListener('dragover', function (evt) {
     droparea.classList.remove('hidden')
     pauseEvent(evt)
-  })
-  ;['mouseout'].forEach(trigger =>
+  });
+
+  ['mouseout'].forEach(trigger =>
     window.addEventListener(trigger, function (evt) {
       droparea.classList.add('hidden')
     })

diff --git a/astro/src/components/Preview.tsx b/astro/src/components/Preview.tsx
@@ -205,31 +205,37 @@ const _redraw = (canvas: HTMLCanvasElement) => {
 
   // draw turtles
 
-  ctx.strokeStyle = 'black'
 
   // turtle path
   // if(turtles.length === 0) return;
   const { panX, panY, scale } = panZoomParams
 
-  ctx.beginPath()
 
   for (const turtle of turtles) {
+    ctx.beginPath()
+
     for (const polyline of turtle.path) {
-      const p = polyline.map(([x, y]) => [
-        dpr * (panX + x * scale),
-        -(dpr * (-panY + y * scale))
-      ])
-      const paths = lineclip(p as Point[], [0, 0, width, height])
-
-      paths.forEach(p => {
-        for (let i = 0; i < p.length; i++) {
-          let [x, y] = p[i]
-          if (i === 0) ctx.moveTo(x, y)
-          else ctx.lineTo(x, y)
-        }
+
+      // let paths = polyline.map(([x, y]) => [
+      //   dpr * (panX + x * scale),
+      //   -(dpr * (-panY + y * scale))
+      // ])
+
+      // paths = lineclip(paths, [0, 0, width, height])
+
+      polyline.forEach((p, i) => {
+        let [x, y] = p;
+        x = dpr * (panX + x * scale);
+        y = -(dpr * (-panY + y * scale));
+        if (i === 0) ctx.moveTo(x, y)
+        else ctx.lineTo(x, y)
       })
+
     }
-  }
+    ctx.strokeStyle = turtle.style.stroke;
+    ctx.stroke();
 
-  ctx.stroke()
+    ctx.fillStyle = turtle.style.fill;
+    if (turtle.style.fill !== "none") ctx.fill();
+  }
 }
diff --git a/astro/src/components/Toolbar.tsx b/astro/src/components/Toolbar.tsx
@@ -27,11 +27,7 @@ export default function Toolbar() {
 
   return (
     <div class={styles.root}>
-      <div
-        style={{
-          'display': 'flex',
-          'align-items': 'center'
-        }}>
+      <div class="flex items-center h-full">
         <h1 class={styles.heading}>
           <a href="/">
             <img src="/blot.svg" style="width: 30px"/>
@@ -42,39 +38,33 @@ export default function Toolbar() {
         <NewButton />
         <OpenButton />
         <div
-          style={{
-            position: 'relative',
-            cursor: 'default',
-            width: 'min-width'
-          }}
+          class="relative cursor-default w-min h-full flex items-center p-1"
           onMouseEnter={() => setHidden(false)}
           onMouseLeave={() => setHidden(true)}>
+          <div>download</div>
           <div
-            style={{
-              padding: '5px'
-            }}>
-            download
-          </div>
-          <div
-            style={{
-              'display': hidden ? 'none' : '',
-              'position': 'absolute',
-              'background': 'var(--primary)',
-              'border': '1px solid rgba(255, 255, 255, 0.1)',
-              'z-index': 9999,
-              'width': '100%',
-              'top': '100%',
-              'padding': '5px',
-              'border-radius': '5px'
-            }}>
+            class={[
+              hidden ? 'hidden' : '',
+              "border border-white border-opacity-10",
+              "bg-[--primary] absolute z-50 top-full p-1 rounded-md"
+            ].join(" ")}
+            >
             <DownloadButton />
             <DownloadSVG />
             <DownloadPNG />
+            <div 
+              class="w-max p-1 rounded hover:bg-white hover:bg-opacity-10"
+              onClick={e => {
+                const { turtles } = getStore();
+                console.log(turtles);
+              }}>
+              cull hidden lines
+            </div>
           </div>
         </div>
       </div>
 
-      <div style={{ 'display': 'flex', 'align-items': 'center' }}>
+      <div class="flex items-center">
         <Button variant="ghost" class="connect-trigger">
           {connected ? 'disconnect from' : 'connect to'} machine
         </Button>
@@ -99,9 +89,7 @@ function GitHubLink() {
         href="https://github.com/hackclub/blot/tree/main"
         rel="noreferrer"
         target="_blank">
-        <div style={{ transform: 'translate(0, 3.5px)' }}>
-          <GitHubIcon className={styles.icon} />
-        </div>
+        <GitHubIcon className={styles.icon} />
       </a>
     </Button>
   )
@@ -187,8 +175,8 @@ function DownloadSVG() {
           return `<path 
                     d="${d}" 
                     stroke-width="0.25" 
-                    stroke="black" 
-                    fill="none" 
+                    stroke="${t.style.stroke}" 
+                    fill="${t.style.fill}" 
                     stroke-linecap="round"
                     stroke-linejoin="round"
                     style="transform: scale(1, 1);"
@@ -240,8 +228,8 @@ function DownloadPNG() {
           return `<path 
                     d="${d}" 
                     stroke-width="0.25" 
-                    stroke="black" 
-                    fill="none" 
+                    stroke="${t.style.stroke}" 
+                    fill="${t.style.fill}" 
                     stroke-linecap="round"
                     stroke-linejoin="round"
                     style="transform: scale(1, 1);"
@@ -371,9 +359,7 @@ function SettingsButton() {
       onMouseLeave={() => setHidden(true)}>
       <Button variant="ghost">
         <a style={{ all: 'unset' }}>
-          <div style={{ transform: 'translate(0, 3.5px)' }}>
-            <SettingsIcon className={styles.icon} />
-          </div>
+          <SettingsIcon className={styles.icon} />
         </a>
       </Button>
       <div

diff --git a/astro/src/lib/drawingToolkit/turtle.ts b/astro/src/lib/drawingToolkit/turtle.ts
@@ -14,12 +14,20 @@ export class Turtle {
   position: Point
   angle: number
   path: Polyline[]
+  style: {
+    fill: string,
+    stroke: string,
+  }
 
   constructor(start: Point = [0, 0]) {
     this.drawing = true
     this.position = [...start]
     this.angle = 0
     this.path = [[[...start]]]
+    this.style = {
+      fill: "none",
+      stroke: "black"
+    }
   }
 
   up() {
@@ -174,10 +182,18 @@ export class Turtle {
   }
 
   copy() {
-    const newPath = JSON.parse(JSON.stringify(this.path))
-    const t = new Turtle()
-    t.path = newPath
-    return t
+    const copy = obj => JSON.parse(JSON.stringify(obj));
+
+    const t = new Turtle();
+
+    t.path = copy(this.path);
+    t.drawing = copy(t.drawing);
+    t.position = copy(t.position);
+    t.angle = copy(t.angle);
+    t.path = copy(t.path);
+    t.style = copy(t.style);
+
+    return t;
   }
 
   resample(resolution: number) {

diff --git a/astro/src/lib/run.ts b/astro/src/lib/run.ts
@@ -257,8 +257,14 @@ export default async function runCode(cached: boolean = false) {
     lerp(start: number, end: number, t: number) {
       return (1 - t) * start + t * end
     },
-    drawTurtles: (...turtlesToDraw: Turtle[]) => {
-      turtlesToDraw.forEach(t => turtles.push(t))
+    drawTurtles: (turtlesToDraw: Turtle[], style = {}) => {
+      turtlesToDraw.forEach(t => {
+        const temp = t.copy();
+        if (style.fill === undefined) style.fill = "none";
+        if (style.stroke === undefined) style.stroke = "black";
+        temp.style = style;
+        turtles.push(temp);
+      });
     },
     setDocDimensions(w: number, h: number) {
       patchStore(

diff --git a/astro/src/pages/test.astro b/astro/src/pages/test.astro
@@ -1 +1,9 @@
-nothing here
+nothing here
+
+<div class="m-4 jc-center flex bg-red-200 rounded-full  p-4  box-border justify-evenly font-medium">
+  hello
+  <div>hello 1</div>
+  <div>hello 2</div>
+  <div>hello 3</div>
+  <div>hello 4</div>
+</div>