Titanium Business Cards

@@ -1,8 +1,9 @@
+import { licon } from 'lib/licon';
 import { hl, type VNode, onInsert } from 'lib/view';
 
 export class VideoPlayer {
  private readonly iframe: HTMLIFrameElement;
- private readonly close: HTMLImageElement;
+ private readonly close: HTMLElement;
  private animationFrameId?: number;
 
  constructor(
@@ -18,8 +19,8 @@ export class VideoPlayer {
  this.iframe.src = o.embed;
  this.iframe.allow = 'autoplay';
 
- this.close = document.createElement('img');
- this.close.src = site.asset.flairSrc('symbols.cancel');
+ this.close = document.createElement('icon');
+ this.close.dataset.icon = licon.NotAllowed;
  this.close.className = 'video-player-close';
  this.close.addEventListener('click', () => this.onEmbed('no'), true);
 
@@ -83,8 +84,8 @@ export class VideoPlayer {
  el.addEventListener('contextmenu', () => window.open(this.o.redirect, '_blank'));
  }),
  }),
- hl('img.video-player-close', {
- attrs: { src: site.asset.flairSrc('symbols.cancel') },
+ hl('icon.video-player-close', {
+ attrs: { 'data-icon': licon.NotAllowed },
  hook: onInsert((el: HTMLElement) => el.addEventListener('click', () => this.onEmbed('no'))),
  }),
  this.o.text && hl('div.text-box', hl('div', this.o.text)),

Insta Story Repost Tap To Make It From Someone

@@ -44,7 +44,7 @@ class SetupDialog {
  <div class="with-cards snap-pane">
  <div class="vs">
  <div class="player" data-color="black">
- <img class="z-remove" src="${site.asset.flairSrc('symbols.cancel')}">
+ <icon class="z-remove" data-icon="${licon.NotAllowed}"></icon>
  <div class="placard none" data-color="black">Human Player</div>
  </div>
  </div>
@@ -90,7 +90,7 @@ class SetupDialog {
  { selector: '.black', listener: () => this.fight('black') },
  { selector: '.random', listener: () => this.fight() },
  { selector: '[data-type]', event: 'input', listener: this.updateClock },
- { selector: 'img.z-remove', listener: () => this.select() },
+ { selector: 'icon.z-remove', listener: () => this.select() },
  ],
  onClose: () => {
  localStorage.setItem('botdev.setup', JSON.stringify(this.setup));
@@ -168,7 +168,7 @@ class SetupDialog {
  const placard = this.view.querySelector('.placard') as HTMLElement;
  placard.textContent = bot?.description ?? '';
  placard.classList.toggle('none', !bot?.description);
- this.dialog.view.querySelector(`img.z-remove`)?.classList.toggle('show', !!bot);
+ this.dialog.view.querySelector(`icon.z-remove`)?.classList.toggle('show', !!bot);
  this.setup[this.botColor] = this.uid = bot?.uid;
  if (!bot) this.hand.redraw();
  }

What Is Networking Advanteges

@@ -4,67 +4,4 @@
 
  align-items: center;
  }
-
- .local {
- position: relative;
-
- .mini-board-wrapper {
- padding: 12px;
- }
-
- img {
- pointer-events: none;
- position: absolute;
- top: 6px;
- left: 6px;
- width: 72px;
- height: 72px;
- z-index: $z-above-pieces-9;
- border-radius: 6px;
- border: 1px solid #7779;
-
- &.white {
- background-color: $c-paper;
- }
-
- &.black {
- background-color: $c-dark;
- }
-
- @include if-transp {
- backdrop-filter: blur(6px);
-
- &.white {
- background-color: $m-paper--fade-40;
- }
-
- &.black {
- background-color: $m-dark--fade-40;
- }
- }
- }
-
- button {
- position: absolute;
- background: center / contain url('../flair/img/symbols.cancel.webp') $c-bg-page;
- border-radius: 100%;
- border: 2px solid $c-bg-page;
- top: 4px;
- right: 4px;
- z-index: $z-above-pieces-9;
- width: 24px;
- height: 24px;
-
- @include mq-is-col1 {
- top: 2px;
- right: 2px;
- width: 32px; // fat fingers
- height: 32px;
- }
-
- &:hover {
- filter: brightness(140%);
- }
- }
- }
 }