From 7e18ba2726c3c8e7c2f648f33a336bd9b2afa06e Mon Sep 17 00:00:00 2001 From: Francesco Luzzana Date: Mon, 30 May 2022 01:42:14 +0200 Subject: [PATCH] homepage --- assets/css/global.css | 17 ++ assets/css/home.css | 35 ++++ assets/css/workbook.css | 185 +++++++++------------- assets/js/cables.js | 140 ++++++++++++++++ index.html | 59 +++++-- kastle-v.1.5-patches.html => patches.html | 0 test.html | 19 +++ workbook.html | 2 +- 8 files changed, 331 insertions(+), 126 deletions(-) create mode 100644 assets/css/home.css create mode 100644 assets/js/cables.js rename kastle-v.1.5-patches.html => patches.html (100%) create mode 100644 test.html diff --git a/assets/css/global.css b/assets/css/global.css index e69de29..150a1a6 100644 --- a/assets/css/global.css +++ b/assets/css/global.css @@ -0,0 +1,17 @@ +* { + box-sizing: border-box; +} + +html, +body { + font-family: sans-serif; +} + +a { + color: currentColor; + text-decoration: none; +} + +a:hover { + opacity: 0.5; +} diff --git a/assets/css/home.css b/assets/css/home.css new file mode 100644 index 0000000..9e907d7 --- /dev/null +++ b/assets/css/home.css @@ -0,0 +1,35 @@ +.homepanel .socket { + position: absolute; +} + +.socket .plug { + display: inline-block; + width: 24px; + height: 24px; + border: 1px solid currentColor; + cursor: alias; + position: relative; + z-index: 50; + background: none; + + user-select: none; + vertical-align: middle; +} + +.plug.out { + border-radius: 50%; +} + +.socket label { + text-transform: uppercase; + line-height: 1; +} + +svg { + position: absolute; + top: 0; + left: 0; + border: 1px solid currentColor; + width: 100%; + height: 100%; +} diff --git a/assets/css/workbook.css b/assets/css/workbook.css index 98b0274..e22de54 100644 --- a/assets/css/workbook.css +++ b/assets/css/workbook.css @@ -1,168 +1,129 @@ -* { - box-sizing: border-box; -} - -html, body { - font-family: sans-serif; - -} - - -a { - color: currentColor; - text-decoration: none; -} - -a:hover { - opacity: 0.5; -} - header { - width: 100%; - display: flex; - justify-content: space-between; - padding: 8px; - font-size: 32px; - + width: 100%; + display: flex; + justify-content: space-between; + padding: 8px; + font-size: 32px; } header > * { - flex-shrink: 0; + flex-shrink: 0; } - - header .title { - margin: 0; - margin-right: 32px; - font-size: 32px; - font-weight: normal; - + margin: 0; + margin-right: 32px; + font-size: 32px; + font-weight: normal; } .path-slash { - margin: 0 4px; + margin: 0 4px; } .parent { - /* color: rgb(147, 149, 161); */ + /* color: rgb(147, 149, 161); */ } - .search { - position: relative; + position: relative; - display: inline-block; - height: 32px; - margin-left: auto; - overflow: hidden; - flex: 0 0 32px; - transition: flex 0.3s ease-in; + display: inline-block; + height: 32px; + margin-left: auto; + overflow: hidden; + flex: 0 0 32px; + transition: flex 0.3s ease-in; } -.search:hover{ - transition: flex 0.6s ease-out; - flex: 1 0 auto; +.search:hover { + transition: flex 0.6s ease-out; + flex: 1 0 auto; } .search svg { - width: 32px; - height: 32px; - padding: 4px; - margin: 0; + width: 32px; + height: 32px; + padding: 4px; + margin: 0; } .search input { - border: none; - width: 100%; - height: 100%; - position: absolute; - top: 0; - left: 32px; - outline: none; - border-bottom: 1px solid currentColor; + border: none; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 32px; + outline: none; + border-bottom: 1px solid currentColor; - font-size: 32px; + font-size: 32px; - padding: 0; - padding-left: 4px; + padding: 0; + padding-left: 4px; - background: none; + background: none; } - - main { - padding: 0 8px; + padding: 0 8px; } - .list { - padding: 0; - display: grid; + padding: 0; + display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - gap: 16px; + gap: 16px; } .card { - /* transform: skew(14deg); */ - aspect-ratio: 1; - border: 1px solid currentColor; - padding: 32px; - font-stretch: 50%; - - + /* transform: skew(14deg); */ + aspect-ratio: 1; + border: 1px solid currentColor; + padding: 32px; + font-stretch: 50%; - display: flex; - justify-content: center; - align-items: center; + display: flex; + justify-content: center; + align-items: center; - - - font-size: 32px; - text-align: center; + font-size: 32px; + text-align: center; } .card:hover { - background-color: grey; + background-color: grey; } - .card > * { - /* transform: skew(-28deg); */ + /* transform: skew(-28deg); */ } .card svg { - width: 32px; - height: 32px; + width: 32px; + height: 32px; } +@media (max-width: 767px) { + header { + display: block; + font-size: 28px; + } + header .title { + display: inline; + font-size: 28px; + } + .search { + margin-top: 16px; + display: block; + } -@media (max-width: 767px){ - - - -header { - display: block; - font-size: 28px; + .search input { + font-size: 28px; + } } - -header .title { - display: inline; - font-size: 28px; -} - - .search { - margin-top: 16px; - display: block; - } - - .search input { - font-size: 28px; - } -} \ No newline at end of file diff --git a/assets/js/cables.js b/assets/js/cables.js new file mode 100644 index 0000000..feeabb8 --- /dev/null +++ b/assets/js/cables.js @@ -0,0 +1,140 @@ +// Great resource from https://stackoverflow.com/a/40700068 +// Thank you ConnorFan + +var strokeWidth = 10; +var bufferSize = 10; + +var svgElement = document.getElementById("svgElement"); +svgElement.setAttribute("viewBox", `0 0 ${svgElement.clientWidth} ${svgElement.clientHeight}`); + +var rect = svgElement.getBoundingClientRect(); +var path = null; +var strPath; +var buffer = []; // Contains the last positions of the mouse cursor +var cable; + +class Cable { + start = ""; + end = ""; + path = ""; + color = ""; + + constructor(start) { + this.start = start; + } +} + +window.addEventListener("mousedown", function (e) { + let socket = e.target; + + if (socket.matches(".plug.out")) { + path = document.createElementNS("http://www.w3.org/2000/svg", "path"); + path.setAttribute("fill", "none"); + + let color = randomColor(); + path.setAttribute("stroke", color); + path.setAttribute("stroke-width", strokeWidth); + path.setAttribute("stroke-linecap", "round"); + buffer = []; + var pt = getMousePosition(e); + appendToBuffer(pt); + strPath = "M" + pt.x + " " + pt.y; + path.setAttribute("d", strPath); + svgElement.appendChild(path); + + cable = new Cable(socket.nextElementSibling.innerHTML); + cable.color = color; + } +}); + +window.addEventListener("mousemove", function (e) { + if (path) { + appendToBuffer(getMousePosition(e)); + updateSvgPath(); + } +}); + +window.addEventListener("mouseup", (e) => appendCable(e)); +window.addEventListener("mouseleave", (e) => appendCable(e)); + +var appendCable = function (e) { + if (path) { + let socket = e.target; + if (socket.matches(".plug.in")) { + cable.end = socket.nextElementSibling.innerHTML; + cable.path = path.getAttribute("d"); + } + path = null; + } +}; + +var getMousePosition = function (e) { + return { + x: e.pageX - rect.left, + y: e.pageY - rect.top, + }; +}; + +var appendToBuffer = function (pt) { + buffer.push(pt); + while (buffer.length > bufferSize) { + buffer.shift(); + } +}; + +// Calculate the average point, starting at offset in the buffer +var getAveragePoint = function (offset) { + var len = buffer.length; + if (len % 2 === 1 || len >= bufferSize) { + var totalX = 0; + var totalY = 0; + var pt, i; + var count = 0; + for (i = offset; i < len; i++) { + count++; + pt = buffer[i]; + totalX += pt.x; + totalY += pt.y; + } + return { + x: totalX / count, + y: totalY / count, + }; + } + return null; +}; + +// ok +var updateSvgPath = function () { + var pt = getAveragePoint(0); + + if (pt) { + // Get the smoothed part of the path that will not change + strPath += " L" + pt.x + " " + pt.y; + + // Get the last part of the path (close to the current mouse position) + // This part will change if the mouse moves again + var tmpPath = ""; + for (var offset = 2; offset < buffer.length; offset += 2) { + pt = getAveragePoint(offset); + tmpPath += " L" + pt.x + " " + pt.y; + } + + // Set the complete current path coordinates + path.setAttribute("d", strPath + tmpPath); + } +}; + +// ok +var randomColor = function () { + const hue = Math.floor(Math.random() * 360); + const saturation = Math.floor(50 + Math.random() * (50 + 1)) + "%"; + const lightness = "75%"; + return "hsl(" + hue + ", " + saturation + ", " + lightness + ")"; +}; + +const enter = document.getElementById("enter"); +enter.addEventListener("mouseup", (e) => { + console.log(cable); + window.location = cable.start.toLowerCase() + ".html"; +}); diff --git a/index.html b/index.html index c250321..1c96dbd 100644 --- a/index.html +++ b/index.html @@ -1,17 +1,50 @@ - - - workbook - - - -
- Workbook - About -
+ + + + + + modbook + + +
+ + - - - + +
+ + +
+ +
+ + +
+ +
+ + +
+ + +
+ + +
+
+ diff --git a/kastle-v.1.5-patches.html b/patches.html similarity index 100% rename from kastle-v.1.5-patches.html rename to patches.html diff --git a/test.html b/test.html new file mode 100644 index 0000000..273aeaf --- /dev/null +++ b/test.html @@ -0,0 +1,19 @@ + + + + + + + Test + + +

Test test test

+ +

+ Sit ex laboris aliqua aliqua deserunt ex laboris pariatur labore laboris exercitation + proident qui. Anim culpa esse anim in ipsum magna qui ipsum sit sint culpa commodo + Lorem. Consectetur excepteur Lorem occaecat duis ut aliquip do qui esse id cillum qui in + sunt. Anim pariatur laboris culpa ex commodo enim id amet reprehenderit velit. +

+ + diff --git a/workbook.html b/workbook.html index e7f520e..e234ca7 100644 --- a/workbook.html +++ b/workbook.html @@ -34,7 +34,7 @@
  • All
    • -
  • Bastl Kastle Drum
    • +
  • Bastl Kastle Drum
  • Bastl Kastle v1.5
  • Bastl Microgranny 2