From ceebf7c099329382f50d9c027948229dff6ea62f Mon Sep 17 00:00:00 2001 From: Trond A Ekseth Date: Sat, 19 Nov 2022 02:28:11 +0100 Subject: [PATCH 1/3] Some style changes --- .gitignore | 4 ++ css/style.css | 138 +++++++++++++++++++++++++++++++++++-------- js/script.js | 31 +++++----- package.json | 10 ++++ routes.go | 2 +- tmpl/index.tmpl | 96 +++++++++++++++++------------- yarn.lock | 151 ++++++++++++++++++++++++++++++++++++++++++++++++ 7 files changed, 354 insertions(+), 78 deletions(-) create mode 100644 package.json create mode 100644 yarn.lock diff --git a/.gitignore b/.gitignore index 6a63795..f4dac66 100644 --- a/.gitignore +++ b/.gitignore @@ -11,3 +11,7 @@ cache bin ambiance/*.mp3 + +*.yml +public/ +node_modules/ diff --git a/css/style.css b/css/style.css index f657232..158c1cb 100644 --- a/css/style.css +++ b/css/style.css @@ -1,41 +1,69 @@ .container { - display: grid; - grid-template-columns: 1fr 1fr 1fr; - grid-template-rows: auto; - padding: 10px; - border-radius: 10px; + --grid-layout-gap: 8px; + --grid-column-count: 3; + --grid-item--min-width: 150px; + + --gap-count: calc(var(--grid-column-count) - 1); + --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap)); + --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count)); + + display: grid; + grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr)); + grid-auto-rows: 1fr; + grid-gap: var(--grid-layout-gap); } .playing { - background-color: burlywood; + background-color: burlywood; } h2.bot { - margin-top: 10px; - margin-bottom: 0px; - text-align: center; + margin-top: 0; + margin-bottom: .5rem; + text-align: center; } .item { - background-color: #80cbc4; - border: 1px solid black; - padding: 20px; - font-size: clamp(1rem, -0.8750rem + 8.3333vw, 2rem); - text-align: center; - cursor: pointer; - color: #073642 + display: flex; + justify-content: center; + align-items: center; + padding: 1rem; + background-color: #80cbc4; + border: 1px solid black; + font-size: clamp(1rem, -0.8750rem + 8.3333vw, 2rem); + text-align: center; + cursor: pointer; + color: #073642 } -.container2 { - display: block; - border-radius: 10px; - padding: 10px; +.item.stop { + background-color: #cb4b16; +} + +#info { + display: flex; + flex-direction: column; + align-items: center; + gap: 6px; +} + +.controls { + display: flex; + align-items: center; + justify-content: space-around; + width: 100%; + margin: 0 auto; + max-width: 512px; +} + +.input-container { + max-width: 512px; } .box { -/* background-color: #fefefe;*/ + /* background-color: #fefefe;*/ margin: 15% auto; /* 15% from the top and centered */ - padding: 20px; + padding: 2rem; /*border: 1px solid #888;*/ width: 80%; /* Could be more or less, depending on screen size */ align-content: center; @@ -58,12 +86,72 @@ h2.bot { /* Modal Content/Box */ .modal-content { margin: 15% auto; /* 15% from the top and centered */ - padding: 20px; + padding: 2rem; width: 80%; /* Could be more or less, depending on screen size */ text-align: center; font-size: 32px; } -body > div.container2 > input[type=text]:nth-child(2) { - width: 512px; +body, html { + margin: 0; + padding: .5rem; +} + +input[type="button"], +input[type="submit"] { + display: inline-block; + height: 38px; + padding: 0 30px; + color: #555; + text-align: center; + font-size: 11px; + font-weight: 600; + line-height: 38px; + letter-spacing: .1rem; + text-transform: uppercase; + text-decoration: none; + white-space: nowrap; + border-radius: 4px; + border: 1px solid #bbb; + cursor: pointer; + box-sizing: border-box; +} + +input[type="button"]:focus, +input[type="submit"]:hover { + color: #333; + border-color: #888; + outline: 0; +} + +input[type="text"] { + height: 38px; + padding: 6px 10px; + background-color: #fff; + border: 1px solid #D1D1D1; + border-radius: 4px; + box-shadow: none; + box-sizing: border-box; + + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} + +input[type="text"]:focus { + border: 1px solid #33C3F0; + outline: 0; +} + +section { + margin-bottom: .5rem; +} + +.u-full-width { + width: 100%; + box-sizing: border-box; +} + +.u-hidden { + display: none; } diff --git a/js/script.js b/js/script.js index bc39407..2354ee3 100644 --- a/js/script.js +++ b/js/script.js @@ -1,4 +1,7 @@ -window.onload = function() { +import ReconnectingWebSocket from 'reconnecting-websocket'; +import Sortable from 'sortablejs'; + +window.onload = function () { const ws = new ReconnectingWebSocket(((window.location.protocol === "https:") ? "wss://" : "ws://") + window.location.host + "/ws"); const items = document.querySelector("#items"); @@ -6,6 +9,8 @@ window.onload = function() { const submit = document.querySelector("#addplaylist") const output = document.querySelector(".container2 p#output") const info = document.querySelector("#info") + const link = document.querySelector("#link") + const time = document.querySelector("#time") const waiting = document.querySelector("#waiting") document.querySelector("input#next").addEventListener("click", (e) => { @@ -63,11 +68,11 @@ window.onload = function() { }) ws.onopen = (e) => { - waiting.style.display = "none"; + waiting.classList.add("u-hidden") } ws.onclose = (e) => { - waiting.style.display = "block"; + waiting.classList.remove("u-hidden") } ws.onmessage = (e) => { @@ -88,14 +93,14 @@ window.onload = function() { el.style.removeProperty("background-color") }) if (data.payload.pause) { - info.style.display = "none" + info.classList.add("u-hidden") } else { - info.style.display = "block" - info.children.link.children.channel.innerText = data.payload.channel - info.children.link.children.title.innerText = data.payload.current - info.children.link.href = "https://youtu.be/" + data.payload.song - info.children.link.target = "_blank" - info.children.time.innerText = `( ${msToTime(data.payload.position)} / ${msToTime(data.payload.len)} )` + info.classList.remove("u-hidden") + link.children.channel.innerText = data.payload.channel + link.children.title.innerText = data.payload.current + link.href = "https://youtu.be/" + data.payload.song + link.target = "_blank" + time.innerText = `${msToTime(data.payload.position)} / ${msToTime(data.payload.len)}` document.querySelector(`#items > div[data-id='${data.payload.playlist}']`).style.backgroundColor = "burlywood" } setTimeout(() => { @@ -103,15 +108,15 @@ window.onload = function() { }, 1000); break case "song_position": - info.children.time.innerText = `( ${msToTime(data.payload.position)} / ${msToTime(data.payload.len)} )` - info.style.display = "block" + time.innerText = `${msToTime(data.payload.position)} / ${msToTime(data.payload.len)}` + info.classList.remove("u-hidden") break case "stop": setTimeout(() => { items.style.pointerEvents = 'auto' }, 2000); - info.style.display = "none" + info.classList.add("u-hidden") break case "new_playlist": addPlaylist(data.payload); diff --git a/package.json b/package.json new file mode 100644 index 0000000..b509036 --- /dev/null +++ b/package.json @@ -0,0 +1,10 @@ +{ + "scripts": { + "build": "esbuild js/script.js --bundle --outdir=public/" + }, + "dependencies": { + "esbuild": "^0.15.14", + "reconnecting-websocket": "^4.4.0", + "sortablejs": "^1.15.0" + } +} diff --git a/routes.go b/routes.go index 05539b1..4417393 100644 --- a/routes.go +++ b/routes.go @@ -22,7 +22,7 @@ func init() { app.router.GET("/play/:playlist", app.Play) app.router.GET("/reset", app.Reset) - app.router.ServeFiles("/js/*filepath", http.Dir("js")) + app.router.ServeFiles("/js/*filepath", http.Dir("public")) app.router.ServeFiles("/css/*filepath", http.Dir("css")) app.router.HandlerFunc("GET", "/ws", http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) { diff --git a/tmpl/index.tmpl b/tmpl/index.tmpl index 3312da4..f824cd5 100644 --- a/tmpl/index.tmpl +++ b/tmpl/index.tmpl @@ -5,47 +5,67 @@ D&D Music Bot! - + -

Playlists

-
- {{ range .Playlists }} -
{{ .Title }}
- {{ end}} -
Stop
-
-
- - - -
-
+

Playlists

+ +
+
+ {{ range .Playlists }} +
{{ .Title }}
+ {{ end}} +
Stop
+
+
+ +
+
+ + + +
+
+ +

-
-
- - - - - - - - - -
-

Ambiance

-
- {{ range .Ambiance }} -
{{ . }}
- {{ end}} -
Stop
-
-
- - - -
+ +
+ + + - + + + +
+ + + +
+
+ + + +

Ambiance

+ +
+
+ {{ range .Ambiance }} +
{{ . }}
+ {{ end}} +
Stop
+
+
+ +
+
+ + + +
+
+ - - diff --git a/yarn.lock b/yarn.lock new file mode 100644 index 0000000..edb50a8 --- /dev/null +++ b/yarn.lock @@ -0,0 +1,151 @@ +# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. +# yarn lockfile v1 + + +"@esbuild/android-arm@0.15.14": + version "0.15.14" + resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.15.14.tgz#5d0027f920eeeac313c01fd6ecb8af50c306a466" + integrity sha512-+Rb20XXxRGisNu2WmNKk+scpanb7nL5yhuI1KR9wQFiC43ddPj/V1fmNyzlFC9bKiG4mYzxW7egtoHVcynr+OA== + +"@esbuild/linux-loong64@0.15.14": + version "0.15.14" + resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.15.14.tgz#1221684955c44385f8af34f7240088b7dc08d19d" + integrity sha512-eQi9rosGNVQFJyJWV0HCA5WZae/qWIQME7s8/j8DMvnylfBv62Pbu+zJ2eUDqNf2O4u3WB+OEXyfkpBoe194sg== + +esbuild-android-64@0.15.14: + version "0.15.14" + resolved "https://registry.yarnpkg.com/esbuild-android-64/-/esbuild-android-64-0.15.14.tgz#114e55b0d58fb7b45d7fa3d93516bd13fc8869cc" + integrity sha512-HuilVIb4rk9abT4U6bcFdU35UHOzcWVGLSjEmC58OVr96q5UiRqzDtWjPlCMugjhgUGKEs8Zf4ueIvYbOStbIg== + +esbuild-android-arm64@0.15.14: + version "0.15.14" + resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.15.14.tgz#8541f38a9aacf88e574fb13f5ad4ca51a04c12bb" + integrity sha512-/QnxRVxsR2Vtf3XottAHj7hENAMW2wCs6S+OZcAbc/8nlhbAL/bCQRCVD78VtI5mdwqWkVi3wMqM94kScQCgqg== + +esbuild-darwin-64@0.15.14: + version "0.15.14" + resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.15.14.tgz#b40b334db81ff1e3677a6712b23761748a157c57" + integrity sha512-ToNuf1uifu8hhwWvoZJGCdLIX/1zpo8cOGnT0XAhDQXiKOKYaotVNx7pOVB1f+wHoWwTLInrOmh3EmA7Fd+8Vg== + +esbuild-darwin-arm64@0.15.14: + version "0.15.14" + resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.15.14.tgz#44b5c1477bb7bdb852dd905e906f68765e2828bc" + integrity sha512-KgGP+y77GszfYJgceO0Wi/PiRtYo5y2Xo9rhBUpxTPaBgWDJ14gqYN0+NMbu+qC2fykxXaipHxN4Scaj9tUS1A== + +esbuild-freebsd-64@0.15.14: + version "0.15.14" + resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.15.14.tgz#8c57315d238690f34b6ed0c94e5cfc04c858247a" + integrity sha512-xr0E2n5lyWw3uFSwwUXHc0EcaBDtsal/iIfLioflHdhAe10KSctV978Te7YsfnsMKzcoGeS366+tqbCXdqDHQA== + +esbuild-freebsd-arm64@0.15.14: + version "0.15.14" + resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.15.14.tgz#2e92acca09258daa849e635565f52469266f0b7b" + integrity sha512-8XH96sOQ4b1LhMlO10eEWOjEngmZ2oyw3pW4o8kvBcpF6pULr56eeYVP5radtgw54g3T8nKHDHYEI5AItvskZg== + +esbuild-linux-32@0.15.14: + version "0.15.14" + resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.15.14.tgz#ca5ed3e9dff82df486ddde362d7e00775a597dfd" + integrity sha512-6ssnvwaTAi8AzKN8By2V0nS+WF5jTP7SfuK6sStGnDP7MCJo/4zHgM9oE1eQTS2jPmo3D673rckuCzRlig+HMA== + +esbuild-linux-64@0.15.14: + version "0.15.14" + resolved "https://registry.yarnpkg.com/esbuild-linux-64/-/esbuild-linux-64-0.15.14.tgz#42952e1d08a299d5f573c567639fb37b033befbf" + integrity sha512-ONySx3U0wAJOJuxGUlXBWxVKFVpWv88JEv0NZ6NlHknmDd1yCbf4AEdClSgLrqKQDXYywmw4gYDvdLsS6z0hcw== + +esbuild-linux-arm64@0.15.14: + version "0.15.14" + resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.15.14.tgz#0c0d788099703327ec0ae70758cb2639ef6c5d88" + integrity sha512-kle2Ov6a1e5AjlHlMQl1e+c4myGTeggrRzArQFmWp6O6JoqqB9hT+B28EW4tjFWgV/NxUq46pWYpgaWXsXRPAg== + +esbuild-linux-arm@0.15.14: + version "0.15.14" + resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.15.14.tgz#751a5ca5042cd60f669b07c3bcec3dd6c4f8151c" + integrity sha512-D2LImAIV3QzL7lHURyCHBkycVFbKwkDb1XEUWan+2fb4qfW7qAeUtul7ZIcIwFKZgPcl+6gKZmvLgPSj26RQ2Q== + +esbuild-linux-mips64le@0.15.14: + version "0.15.14" + resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.15.14.tgz#da8ac35f2704de0b52bf53a99c12f604fbe9b916" + integrity sha512-FVdMYIzOLXUq+OE7XYKesuEAqZhmAIV6qOoYahvUp93oXy0MOVTP370ECbPfGXXUdlvc0TNgkJa3YhEwyZ6MRA== + +esbuild-linux-ppc64le@0.15.14: + version "0.15.14" + resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.15.14.tgz#a315b5016917429080c3d32e03319f1ff876ac55" + integrity sha512-2NzH+iuzMDA+jjtPjuIz/OhRDf8tzbQ1tRZJI//aT25o1HKc0reMMXxKIYq/8nSHXiJSnYV4ODzTiv45s+h73w== + +esbuild-linux-riscv64@0.15.14: + version "0.15.14" + resolved "https://registry.yarnpkg.com/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.15.14.tgz#9f2e0a935e5086d398fc19c7ff5d217bfefe3e12" + integrity sha512-VqxvutZNlQxmUNS7Ac+aczttLEoHBJ9e3OYGqnULrfipRvG97qLrAv9EUY9iSrRKBqeEbSvS9bSfstZqwz0T4Q== + +esbuild-linux-s390x@0.15.14: + version "0.15.14" + resolved "https://registry.yarnpkg.com/esbuild-linux-s390x/-/esbuild-linux-s390x-0.15.14.tgz#53108112faff5a4e1bad17f7b0b0ffa1df4b7efb" + integrity sha512-+KVHEUshX5n6VP6Vp/AKv9fZIl5kr2ph8EUFmQUJnDpHwcfTSn2AQgYYm0HTBR2Mr4d0Wlr0FxF/Cs5pbFgiOw== + +esbuild-netbsd-64@0.15.14: + version "0.15.14" + resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.15.14.tgz#5330efc41fe4f1c2bab5462bcfe7a4ffce7ba00a" + integrity sha512-6D/dr17piEgevIm1xJfZP2SjB9Z+g8ERhNnBdlZPBWZl+KSPUKLGF13AbvC+nzGh8IxOH2TyTIdRMvKMP0nEzQ== + +esbuild-openbsd-64@0.15.14: + version "0.15.14" + resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.15.14.tgz#ee64944d863e937611fc31adf349e9bb4f5f7eac" + integrity sha512-rREQBIlMibBetgr2E9Lywt2Qxv2ZdpmYahR4IUlAQ1Efv/A5gYdO0/VIN3iowDbCNTLxp0bb57Vf0LFcffD6kA== + +esbuild-sunos-64@0.15.14: + version "0.15.14" + resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.15.14.tgz#29b0b20de6fe6ef50f9fbe533ec20dc4b595f9aa" + integrity sha512-DNVjSp/BY4IfwtdUAvWGIDaIjJXY5KI4uD82+15v6k/w7px9dnaDaJJ2R6Mu+KCgr5oklmFc0KjBjh311Gxl9Q== + +esbuild-windows-32@0.15.14: + version "0.15.14" + resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.15.14.tgz#05e9b159d664809f7a4a8a68ed048d193457b27d" + integrity sha512-pHBWrcA+/oLgvViuG9FO3kNPO635gkoVrRQwe6ZY1S0jdET07xe2toUvQoJQ8KT3/OkxqUasIty5hpuKFLD+eg== + +esbuild-windows-64@0.15.14: + version "0.15.14" + resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.15.14.tgz#d5ae086728ab30b72969e40ed0a7a0d9082f2cdd" + integrity sha512-CszIGQVk/P8FOS5UgAH4hKc9zOaFo69fe+k1rqgBHx3CSK3Opyk5lwYriIamaWOVjBt7IwEP6NALz+tkVWdFog== + +esbuild-windows-arm64@0.15.14: + version "0.15.14" + resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.15.14.tgz#8eb50ab9a0ecaf058593fbad17502749306f801d" + integrity sha512-KW9W4psdZceaS9A7Jsgl4WialOznSURvqX/oHZk3gOP7KbjtHLSsnmSvNdzagGJfxbAe30UVGXRe8q8nDsOSQw== + +esbuild@^0.15.14: + version "0.15.14" + resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.15.14.tgz#09202b811f1710363d5088a3401a351351c79875" + integrity sha512-pJN8j42fvWLFWwSMG4luuupl2Me7mxciUOsMegKvwCmhEbJ2covUdFnihxm0FMIBV+cbwbtMoHgMCCI+pj1btQ== + optionalDependencies: + "@esbuild/android-arm" "0.15.14" + "@esbuild/linux-loong64" "0.15.14" + esbuild-android-64 "0.15.14" + esbuild-android-arm64 "0.15.14" + esbuild-darwin-64 "0.15.14" + esbuild-darwin-arm64 "0.15.14" + esbuild-freebsd-64 "0.15.14" + esbuild-freebsd-arm64 "0.15.14" + esbuild-linux-32 "0.15.14" + esbuild-linux-64 "0.15.14" + esbuild-linux-arm "0.15.14" + esbuild-linux-arm64 "0.15.14" + esbuild-linux-mips64le "0.15.14" + esbuild-linux-ppc64le "0.15.14" + esbuild-linux-riscv64 "0.15.14" + esbuild-linux-s390x "0.15.14" + esbuild-netbsd-64 "0.15.14" + esbuild-openbsd-64 "0.15.14" + esbuild-sunos-64 "0.15.14" + esbuild-windows-32 "0.15.14" + esbuild-windows-64 "0.15.14" + esbuild-windows-arm64 "0.15.14" + +reconnecting-websocket@^4.4.0: + version "4.4.0" + resolved "https://registry.yarnpkg.com/reconnecting-websocket/-/reconnecting-websocket-4.4.0.tgz#3b0e5b96ef119e78a03135865b8bb0af1b948783" + integrity sha512-D2E33ceRPga0NvTDhJmphEgJ7FUYF0v4lr1ki0csq06OdlxKfugGzN0dSkxM/NfqCxYELK4KcaTOUOjTV6Dcng== + +sortablejs@^1.15.0: + version "1.15.0" + resolved "https://registry.yarnpkg.com/sortablejs/-/sortablejs-1.15.0.tgz#53230b8aa3502bb77a29e2005808ffdb4a5f7e2a" + integrity sha512-bv9qgVMjUMf89wAvM6AxVvS/4MX3sPeN0+agqShejLU5z5GX4C75ow1O2e5k4L6XItUyAK3gH6AxSbXrOM5e8w== From a091df36e4488d91361421743cc72cfd3b50fb48 Mon Sep 17 00:00:00 2001 From: Trond A Ekseth Date: Sat, 19 Nov 2022 17:17:21 +0100 Subject: [PATCH 2/3] Don't put the full item container as clickable --- js/script.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/script.js b/js/script.js index 2354ee3..88afb97 100644 --- a/js/script.js +++ b/js/script.js @@ -168,7 +168,7 @@ window.onload = function () { url.innerText = "" }) - document.querySelectorAll("#items").forEach(item => item.addEventListener("click", (e) => { + document.querySelectorAll("#items .item").forEach(item => item.addEventListener("click", (e) => { e.preventDefault() e.target.parentElement.style.pointerEvents = 'none' const disableui = setTimeout((t) => { @@ -182,7 +182,7 @@ window.onload = function () { })) })); - document.querySelectorAll("#ambiance").forEach(item => item.addEventListener("click", (e) => { + document.querySelectorAll("#ambiance .item").forEach(item => item.addEventListener("click", (e) => { e.preventDefault() e.target.parentElement.style.pointerEvents = 'none' const disableui = setTimeout((t) => { From ec7900ff637715f02df4ae61c9e6e34a209f6da7 Mon Sep 17 00:00:00 2001 From: Trond A Ekseth Date: Sat, 19 Nov 2022 17:17:52 +0100 Subject: [PATCH 3/3] Add Dockerfile for building JS output --- Dockerfile | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 Dockerfile diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..28d6007 --- /dev/null +++ b/Dockerfile @@ -0,0 +1,11 @@ +# docker build -t dndmusicbot-js-build . +# docker run -it -v $(pwd)/public:/app/public dndmusicbot-js-build +FROM node:19-alpine3.16 + +WORKDIR /app + +COPY . /app + +RUN yarn + +ENTRYPOINT ["yarn", "build"]