north-star / commit
reworked the arrow image
readme.md | 4 ++++ src/app.js | 7 +------ src/arrow.svg | 6 ------ src/image.png | Bin 0 -> 15595 bytes src/index.html | 4 +++- src/style.css | 24 ++++++++++-------------- 6 files changed, 18 insertions(+), 27 deletions(-) diff --git a/readme.md b/readme.md index 10d8f1e..84fd146 100644 --- a/readme.md +++ b/readme.md @@ -38,3 +38,7 @@ Repo: https://gitlab.com/PavelSafronov/north-star GitLab test room: https://pavelsafronov.gitlab.io/north-star/#room=7c49d0a8 Local test room: http://127.0.0.1:5500/src/index.html#room=7c49d0a8 + +## Icons + +Arrow icon from: https://www.flaticon.com/free-icon/up-arrow_64797 diff --git a/src/app.js b/src/app.js index 0392e50..f1b11f7 100644 --- a/src/app.js +++ b/src/app.js @@ -23,12 +23,7 @@ const logDebug = (message) => { } const arrow = document.getElementById('default-arrow'); -const arrowSvgResponse = await fetch('./arrow.svg'); -if (!arrowSvgResponse.ok) { - throw new Error(`arrow.svg request failed with ${arrowSvgResponse.status}`); -} -arrow.innerHTML = await arrowSvgResponse.text(); -document.head.appendChild(Object.assign(document.createElement('link'), { rel: 'icon', href: './arrow.svg' })); +document.head.appendChild(Object.assign(document.createElement('link'), { rel: 'icon', href: './image.png' })); const getShortestDelta = (fromAngle, toAngle) => ((toAngle - fromAngle + 540) % 360) - 180; const normalizeAngle = (angle) => ((angle % 360) + 360) % 360; const normalizeSignedAngle = (angle) => { diff --git a/src/arrow.svg b/src/arrow.svg deleted file mode 100644 index 6f43d9f..0000000 --- a/src/arrow.svg +++ /dev/null @@ -1,6 +0,0 @@ -<svg xmlns="http://www.w3.org/2000/svg" class="arrow-svg" viewBox="0 0 100 100" aria-hidden="true"> - <g class="arrow-shape"> - <polygon class="arrow-head" points="50,8 72,36 28,36" /> - <rect class="arrow-shaft" x="42" y="36" width="16" height="60" /> - </g> -</svg> diff --git a/src/image.png b/src/image.png new file mode 100644 index 0000000..5673c87 Binary files /dev/null and b/src/image.png differ diff --git a/src/index.html b/src/index.html index 72014ae..ced7d48 100644 --- a/src/index.html +++ b/src/index.html @@ -23,7 +23,9 @@ <input id="self-name-input" name="selfName" type="text" maxlength="32" enterkeyhint="done" /> <input id="self-color-input" name="selfColor" type="color" /> </form> - <div id="default-arrow" style="display: none;" class="arrow"></div> + <div id="default-arrow" style="display: none;" class="arrow"> + <div class="arrow-img"></div> + </div> <div id="content"> <div class="panel-actions"> <button id="calibrate-heading-link" class="participants-toggle" type="button">Calibrate North</button> diff --git a/src/style.css b/src/style.css index d8986f0..78de62c 100644 --- a/src/style.css +++ b/src/style.css @@ -256,25 +256,21 @@ a { color: #ffffff; } -.arrow-svg { - display: block; +.arrow-img { width: 100%; height: 100%; - overflow: visible; + background-color: currentColor; + -webkit-mask-image: url('./image.png'); + mask-image: url('./image.png'); + -webkit-mask-size: contain; + mask-size: contain; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-position: center; + mask-position: center; filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.35)); } -.arrow-shape { - fill: currentColor; -} - -.arrow-outline { - fill: none; - stroke: rgba(0, 0, 0, 0.95); - stroke-width: 3; - stroke-linejoin: round; -} - .arrow-label-anchor { position: absolute; top: 4%;