diff --git a/frontend/app/player/MessageDistributor/MessageDistributor.ts b/frontend/app/player/MessageDistributor/MessageDistributor.ts index ed3c49cce..68ae14c72 100644 --- a/frontend/app/player/MessageDistributor/MessageDistributor.ts +++ b/frontend/app/player/MessageDistributor/MessageDistributor.ts @@ -79,6 +79,7 @@ import type { ConnectionInformation, SetViewportSize, SetViewportScroll, + MouseClick, } from './messages'; import type { Timed } from './messages/timed'; @@ -91,7 +92,7 @@ export default class MessageDistributor extends StatedScreen { private readonly connectionInfoManger: ListWalker = new ListWalker(); private readonly performanceTrackManager: PerformanceTrackManager = new PerformanceTrackManager(); private readonly windowNodeCounter: WindowNodeCounter = new WindowNodeCounter(); - private readonly clickManager: ListWalker = new ListWalker(); + private readonly clickManager: ListWalker = new ListWalker(); private readonly resizeManager: ListWalker = new ListWalker([]); private readonly pagesManager: PagesManager; @@ -136,9 +137,6 @@ export default class MessageDistributor extends StatedScreen { if (e.type === EVENT_TYPES.LOCATION) { //TODO type system this.locationEventManager.add(e); } - if (e.type === EVENT_TYPES.CLICK) { - this.clickManager.add(e); - } }); this.session.errors.forEach(e => { this.lists.exceptions.add(e); @@ -302,9 +300,9 @@ export default class MessageDistributor extends StatedScreen { // Moving mouse and setting :hover classes on ready view this.mouseManager.move(t); const lastClick = this.clickManager.moveToLast(t); - // if (!!lastClick) { - // this.cursor.click(); - // } + if (!!lastClick && t - lastClick.time < 600) { // happend during last 600ms + this.cursor.click(); + } // After all changes - redraw the marker //this.marker.redraw(); }) @@ -378,6 +376,9 @@ export default class MessageDistributor extends StatedScreen { case "mouse_move": this.mouseManager.add(msg); break; + case "mouse_click": + this.clickManager.add(msg); + break; case "set_viewport_scroll": this.scrollManager.add(msg); break; diff --git a/frontend/app/player/MessageDistributor/StatedScreen/Screen/Cursor.ts b/frontend/app/player/MessageDistributor/StatedScreen/Screen/Cursor.ts index d4cfca087..1b74ab027 100644 --- a/frontend/app/player/MessageDistributor/StatedScreen/Screen/Cursor.ts +++ b/frontend/app/player/MessageDistributor/StatedScreen/Screen/Cursor.ts @@ -3,41 +3,36 @@ import styles from './cursor.css'; export default class Cursor { - private readonly _cursor: HTMLDivElement; - private position: Point = { x: 0, y: 0 } + private readonly cursor: HTMLDivElement; + private readonly position: Point = { x: -1, y: -1 } constructor(overlay: HTMLDivElement) { - this._cursor = document.createElement('div'); - this._cursor.className = styles.cursor; - overlay.appendChild(this._cursor); - - //this._click = document.createElement('div'); - //this._click.className = styles.click; - //overlay.appendChild(this._click); + this.cursor = document.createElement('div'); + this.cursor.className = styles.cursor; + overlay.appendChild(this.cursor); } toggle(flag: boolean) { if (flag) { - this._cursor.style.display = 'block'; + this.cursor.style.display = 'block'; } else { - this._cursor.style.display = 'none'; + this.cursor.style.display = 'none'; } } move({ x, y }: Point) { this.position.x = x; this.position.y = y; - this._cursor.style.left = x + 'px'; - this._cursor.style.top = y + 'px'; + this.cursor.style.left = x + 'px'; + this.cursor.style.top = y + 'px'; } - // click() { - // this._cursor.style.left = this._x + 'px'; - // this._cursor.style.top = this._y + 'px'; - // this._click.style.display = 'block'; - // setTimeout(() => { - // this._click.style.display = "none"; - // }, 2000); - // } + click() { + console.log("clickong ", styles.clicked) + this.cursor.classList.add(styles.clicked) + setTimeout(() => { + this.cursor.classList.remove(styles.clicked) + }, 600) + } getPosition(): Point { return { x: this.position.x, y: this.position.y }; diff --git a/frontend/app/player/MessageDistributor/StatedScreen/Screen/Screen.ts b/frontend/app/player/MessageDistributor/StatedScreen/Screen/Screen.ts index 321dc21b0..034e65b3a 100644 --- a/frontend/app/player/MessageDistributor/StatedScreen/Screen/Screen.ts +++ b/frontend/app/player/MessageDistributor/StatedScreen/Screen/Screen.ts @@ -8,7 +8,7 @@ import BaseScreen from './BaseScreen'; export { INITIAL_STATE, State } from './BaseScreen'; export default class Screen extends BaseScreen { - private cursor: Cursor; + public readonly cursor: Cursor; private substitutor: BaseScreen | null = null; private inspector: Inspector | null = null; private marker: Marker | null = null; diff --git a/frontend/app/player/MessageDistributor/StatedScreen/Screen/cursor.css b/frontend/app/player/MessageDistributor/StatedScreen/Screen/cursor.css index 8853a7a4a..b56d92d0a 100644 --- a/frontend/app/player/MessageDistributor/StatedScreen/Screen/cursor.css +++ b/frontend/app/player/MessageDistributor/StatedScreen/Screen/cursor.css @@ -3,26 +3,66 @@ position: absolute; width: 20px; height: 20px; - /*border-radius: 20px;*/ background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; - /*border: 4px solid rgba(255, 255, 255, .8); - margin-left: -10px; - margin-top: -10px;*/ + + pointer-events: none; + user-select: none; } -/*@keyframes click { - -}*/ - -/*.click { - display: block; +/* ====== * + Source: https://github.com/codrops/ClickEffects/blob/master/css/component.css +* ======= */ +.cursor::after { position: absolute; - width: 20px; - height: 20px; - background: yellow; - border-radius: 20px; - border: 4px solid rgba(255, 255, 255, .8); - margin-left: -10px; - margin-top: -10px; -}*/ \ No newline at end of file + margin: -35px 0 0 -35px; + width: 70px; + height: 70px; + border-radius: 50%; + content: ''; + opacity: 0; + pointer-events: none; + user-select: none; + box-shadow: inset 0 0 0 35px rgba(111,148,182,0); +} + +.cursor.clicked::after { + -webkit-animation: click-animation 0.5s ease-out forwards; + animation: click-animation 0.5s ease-out forwards; +} + +@-webkit-keyframes click-animation { + 0% { + opacity: 1; + -webkit-transform: scale3d(0.4, 0.4, 1); + transform: scale3d(0.4, 0.4, 1); + } + 80% { + box-shadow: inset 0 0 0 2px rgba(111,148,182,0.8); + opacity: 0.1; + } + 100% { + box-shadow: inset 0 0 0 2px rgba(111,148,182,0.8); + opacity: 0; + -webkit-transform: scale3d(1.2, 1.2, 1); + transform: scale3d(1.2, 1.2, 1); + } +} + +@keyframes click-animation { + 0% { + opacity: 1; + -webkit-transform: scale3d(0.4, 0.4, 1); + transform: scale3d(0.4, 0.4, 1); + } + 80% { + box-shadow: inset 0 0 0 2px rgba(111,148,182,0.8); + opacity: 0.1; + } + 100% { + box-shadow: inset 0 0 0 2px rgba(111,148,182,0.8); + opacity: 0; + -webkit-transform: scale3d(1.2, 1.2, 1); + transform: scale3d(1.2, 1.2, 1); + } +} diff --git a/frontend/app/player/MessageDistributor/managers/MouseManager.ts b/frontend/app/player/MessageDistributor/managers/MouseManager.ts index ba174ae89..859afea59 100644 --- a/frontend/app/player/MessageDistributor/managers/MouseManager.ts +++ b/frontend/app/player/MessageDistributor/managers/MouseManager.ts @@ -34,7 +34,6 @@ export default class MouseManager extends ListWalker { move(t: number) { const lastMouseMove = this.moveToLast(t); if (!!lastMouseMove){ - // @ts-ignore TODO this.screen.cursor.move(lastMouseMove); //window.getComputedStyle(this.screen.getCursorTarget()).cursor === 'pointer' // might nfluence performance though this.updateHover();