Start a new paint module to create transactions with lucid

hydraw/bundle.js

@@ -1,5 +1,7 @@
 const protocol = window.location.protocol == "https:" ? "wss:" : "ws:";
 const client = new WebSocket(protocol + "//" + window.location.host);
+import { paintPixel } from "./paint.js";
+await paintPixel(1, 1, [255, 50, 255]);
 
 const metadataLabel = 14;
 const query = (window.location.search || "?")
@@ -34,14 +36,14 @@ const CANVAS_SIZE = 32;
 const canvas = document.querySelector('canvas');
 const ctx = canvas.getContext('2d');
 const canvasScale = {
-  x: canvas.width/CANVAS_SIZE,
-  y: canvas.height/CANVAS_SIZE,
+  x: canvas.width / CANVAS_SIZE,
+  y: canvas.height / CANVAS_SIZE,
 }
 ctx.scale(canvasScale.x, canvasScale.y);
 console.log("canvasScale", canvasScale);
 
 const drawPixel = (x, y, rgb) => {
-  const [r,g,b] = rgb;
+  const [r, g, b] = rgb;
   ctx.fillStyle = `rgb(${r}, ${g}, ${b})`;
   ctx.fillRect(x, y, 1, 1);
 }
@@ -71,7 +73,7 @@ canvas.addEventListener('click', function(e) {
 
 // Color picker
 
-let currentColor = [255,0,0];
+let currentColor = [255, 0, 0];
 const currentColorElement = document.querySelector('#current-color');
 const picker = new Picker(currentColorElement);
 

hydraw/index.html

@@ -31,6 +31,6 @@ <h1>Hydraw</h1>
     <footer>
       Powered by <img width=32 src="https://ucarecdn.com/9d697897-6aec-4664-801d-e432df594520/-/format/webp/-/resize/100/" /> + <img width=32 src="https://https://hydra.family/head-protocol/img/hydra.png" />
     </footer>
-    <script src="bundle.js"></script>
+    <script type="module" src="bundle.js"></script>
   </body>
 </html>

hydraw/paint.js

@@ -0,0 +1,8 @@
+import { Lucid } from "https://unpkg.com/lucid-cardano@0.7.8/web/mod.js"
+
+
+export const paintPixel = async (x, y, color) => {
+  console.log("should paint pixel: ", x, y, color);
+  const lucid = await Lucid.new({}, "Hydra");
+  console.log(lucid);
+}