ws workshop

projects/ws-js-ws/ws-js-ws.md

@@ -3,15 +3,13 @@ categories:
     - Web
     - JS
     - WS
-cover: wsjsws.jpg
-cover_alt: idk yet what will the cover be
 date: 17/02/2023
 description: Websocket workshop for multiplayer drawing
 git: https://git.xpub.nl/kamo/drw
 slug: ws-js-ws
 title: ws js ws
 css: drw.css
-js: drw.js
+script: drw.js
 ---
 
 
@@ -19,6 +17,24 @@ js: drw.js
   <source src="flyer.mp4" type="video/mp4">
 </video>
 
+<div id="svg-container" class="destination">
+    <svg
+        class="hidden drawing"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        version="1.1"
+        id="svgElement"
+        x="0px"
+        y="0px"
+        width="200px"
+        height="200px"
+        viewBox="0 0 500 500"
+        enable-background="new 0 0 100 100"
+        preserveAspectRatio="none"
+        xml:space="preserve"></svg>
+</div>
+
+
 
 ### Contents
 
@@ -54,14 +70,14 @@ XPUB Studio, 4th floor etc
 <!-- Put some controls to regulate size and movement maybe ? to play in real time -->
 
 DRW is a small app for multiplayer drawing in real time.  
-To draw connect to --> [https://hub.xpub.nl/soupboat/drw](https://hub.xpub.nl/soupboat/drw)
+To draw connect to →  [hub.xpub.nl/soupboat/drw/](https://hub.xpub.nl/soupboat/drw/)
 
 It works with multiple sources, but also multiple destinations.
 
 The same drawings can be displayed on different places! _(such as this page)_
 
-Open [https://hub.xpub.nl/soupboat/drw/destination](https://hub.xpub.nl/soupboat/drw/destination) and send some drawings.
-Try to navigate to [https://hub.xpub.nl/soupboat/drw/wander](https://hub.xpub.nl/soupboat/drw/wander) to see a different mode.
+Open [hub.xpub.nl/soupboat/drw/destination/](https://hub.xpub.nl/soupboat/drw/destination/) and send some drawings.  
+Try to navigate to [hub.xpub.nl/soupboat/drw/wander/](https://hub.xpub.nl/soupboat/drw/wander/) to see a different mode.
 
 ## How does it work
 
@@ -96,7 +112,7 @@ The server manages the flow of websocket messages, taking care to deliver the ri
 In this app, a message is a simple text string.  
 It looks like
 
-```
+```json
 {"type": "test", "data": "this is my test message"}
 ```
 
@@ -105,7 +121,7 @@ Here the message has two properties: `type` with value _test_, and `data` with v
 Using the [JSON](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON) format, the message contents can be accessed easily. 
 
 
-```
+```js
 // Transform the string message into a Javascript object
 let message = JSON.parse({"type": "test", "data": "this is my test message"})
 

static/css/drw.css

@@ -0,0 +1,93 @@
+body {
+    font-size: 1.75rem;
+    font-family: serif;
+}
+
+nav, nav * {
+    font-size: 1rem !important;
+    background-color: #ff8d00;
+    color: white!important;
+}
+
+
+header.project--header {
+background-color: #ff8d00;
+
+}
+
+a {
+ color: #ff8d00;
+ font-family: sans-serif;
+}
+
+a:hover {
+text-decoration: underline;
+}
+
+a:after {
+content: '';
+}
+
+
+h2, h3 {
+    font-size: 2.5rem;
+}
+
+
+main.project--content {
+display: block;
+}
+
+main.project--content > * {
+display: block;
+margin-inline: auto;
+max-width: 80ch;
+}
+
+video, img {
+max-height: 80vh;
+max-width: 100%;
+object-fit: contain;
+}
+
+#svg-container {
+
+    position: fixed;
+    z-index: 200;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+
+    pointer-events: none;
+
+}
+
+.drawing {
+position: absolute;
+top: 0;
+left: 0;
+pointer-events: all;
+}
+
+.drawing:hover {
+rotate: 1turn;
+transition: rotate 0.5s ease-out;
+}
+
+@keyframes grow {
+  0% {
+    scale: 0.1;
+  }
+  100% {
+    scale: 1;
+  }
+}
+
+.destination svg path {
+  /* This section calls the slideInFromLeft animation we defined above */
+  animation: 1s cubic-bezier(0.68, -0.6, 0.32, 1.6) 0s 1 grow;
+}
+

static/js/drw.js

@@ -0,0 +1,29 @@
+const socket = new WebSocket('wss://hub.xpub.nl/soupboat/drw/')
+const svgModel = document.querySelector('#svgElement')
+const container = document.querySelector('#svg-container')
+
+socket.onopen = (event) => {
+    socket.send(JSON.stringify({type: 'hello'}))
+    console.log("Connected as destination!")
+}
+
+socket.onmessage = (event) => {
+    let message;
+    try {
+        message = JSON.parse(event.data);
+    } catch (e) {}
+
+    if (message?.type == "drawings") {
+        let svg = svgModel.cloneNode();
+        svg.classList.remove("hidden");
+        let path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        path.setAttribute("d", message.paths);
+        path.setAttribute("fill", "white");
+        path.setAttribute("stroke", "currentColor");
+        path.setAttribute("stroke-width", 16);
+        svg.appendChild(path);
+        svg.style.translate = `${Math.random()*100}vw ${Math.random()*100}vh`
+        svg.addEventListener('click', ()=>{svg.remove()})
+        container.appendChild(svg);
+    }
+};

templates/project.html

@@ -30,7 +30,6 @@
 		<!-- script -->
     
          
-    <script src="{{url_for('static', filename='js/mover.js')}}" defer ></script>   
         
         
     {% if script %}