Pinch-zoom / UI scaling 🔍

[chrisheninger]

Game is hard to play on a phone– could benefit from some UI scaling– along with pinch-zoom to adjust the scale.

Started some work here:

matchimals.fun/src/Table/index.js

Lines 108 to 125 in 7278126

	// Zoom
	// if (gestureState.numberActiveTouches === 2) {
	// // WIP: Requires significant updates to the way we're handling card drop
	// let dx = Math.abs(
	// e.nativeEvent.touches[0].pageX - e.nativeEvent.touches[1].pageX
	// );
	// let dy = Math.abs(
	// e.nativeEvent.touches[0].pageY - e.nativeEvent.touches[1].pageY
	// );
	// let distance = Math.sqrt(dx * dx + dy * dy);
	// let scale = (distance / this.distance) * this._previousScale;
	// // minScale to maxScale
	// if (scale > 0.5 && scale < 2) {
	// // this.setState({ scale, lastMovePinch: true });
	// this._tableStyles.style.transform = [{ scale }];
	// }
	// }

I think I want to rewrite it using translate instead of top/left for positioning the viewport– this will require changing a bit of the card drop logic.