feat(frontend-player): animate clicks
This commit is contained in:
ShiKhu
parent
263dd79d7f
commit
f169adc24a
5 changed files with 83 additions and 48 deletions
|
|
@ -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<ConnectionInformation> = new ListWalker();
|
||||
private readonly performanceTrackManager: PerformanceTrackManager = new PerformanceTrackManager();
|
||||
private readonly windowNodeCounter: WindowNodeCounter = new WindowNodeCounter();
|
||||
private readonly clickManager: ListWalker<Timed> = new ListWalker();
|
||||
private readonly clickManager: ListWalker<MouseClick> = new ListWalker();
|
||||
|
||||
private readonly resizeManager: ListWalker<SetViewportSize> = 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;
|
||||
|
|
|
|||
|
|
@ -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 };
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -3,26 +3,66 @@
|
|||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
/*border-radius: 20px;*/
|
||||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M302.189 329.126H196.105l55.831 135.993c3.889 9.428-.555 19.999-9.444 23.999l-49.165 21.427c-9.165 4-19.443-.571-23.332-9.714l-53.053-129.136-86.664 89.138C18.729 472.71 0 463.554 0 447.977V18.299C0 1.899 19.921-6.096 30.277 5.443l284.412 292.542c11.472 11.179 3.007 31.141-12.5 31.141z"/></svg>');
|
||||
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;
|
||||
}*/
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,7 +34,6 @@ export default class MouseManager extends ListWalker<MouseMove> {
|
|||
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();
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue