188 lines
6.1 KiB
JavaScript
188 lines
6.1 KiB
JavaScript
"use strict";
|
|
const common_vendor = require("../../../common/vendor.js");
|
|
const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({
|
|
__name: "joysticknew",
|
|
props: {
|
|
getblue: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
movebottom: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
moveleft: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
pao: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
notext: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
emits: ["movecard"],
|
|
setup(__props, { emit: __emit }) {
|
|
const emit = __emit;
|
|
const key = common_vendor.ref(-1);
|
|
let clickResetTimer = null;
|
|
let longPressInterval = null;
|
|
let isLongPress = false;
|
|
const type = common_vendor.ref(-1);
|
|
const shadow = common_vendor.reactive({ x: 0, y: 0 });
|
|
const showShadow = common_vendor.ref(false);
|
|
const showRippleOnce = common_vendor.ref(false);
|
|
const rippleKey = common_vendor.ref(0);
|
|
const RADIUS = common_vendor.index.upx2px(175);
|
|
const DIAMETER = common_vendor.index.upx2px(350);
|
|
common_vendor.index.upx2px(-50);
|
|
const BOTTOM = common_vendor.index.upx2px(100);
|
|
const windowHeight = common_vendor.index.getSystemInfoSync().windowHeight;
|
|
const TOP = windowHeight - BOTTOM - DIAMETER;
|
|
const props = __props;
|
|
const getblue = common_vendor.ref(false);
|
|
const pulseKey = common_vendor.ref(0);
|
|
common_vendor.ref(0);
|
|
common_vendor.watch(() => props.getblue, (val) => {
|
|
});
|
|
common_vendor.onBeforeUnmount(() => {
|
|
});
|
|
function onTap(dir, e) {
|
|
if (isLongPress)
|
|
return;
|
|
clearClickTimer();
|
|
key.value = dir;
|
|
emit("movecard", dir);
|
|
if ((e == null ? void 0 : e.touches) && e.touches.length) {
|
|
const touch = e.touches[0];
|
|
updateShadowPosition(touch.pageX, touch.pageY);
|
|
}
|
|
showRippleOnce.value = false;
|
|
rippleKey.value++;
|
|
type.value = dir;
|
|
setTimeout(() => {
|
|
type.value = -1;
|
|
}, 300);
|
|
setTimeout(() => {
|
|
showRippleOnce.value = true;
|
|
}, 16);
|
|
clickResetTimer = setTimeout(() => {
|
|
key.value = -1;
|
|
clickResetTimer = null;
|
|
}, 300);
|
|
}
|
|
function onRippleAnimationEnd() {
|
|
showRippleOnce.value = false;
|
|
}
|
|
function onLongPressStart(dir, e) {
|
|
clearLongPressInterval();
|
|
isLongPress = true;
|
|
showShadow.value = true;
|
|
type.value = dir;
|
|
const touch = ((e == null ? void 0 : e.touches) || [])[0];
|
|
if (touch)
|
|
updateShadowPosition(touch.pageX, touch.pageY);
|
|
key.value = dir;
|
|
emit("movecard", dir);
|
|
longPressInterval = setInterval(() => {
|
|
key.value = dir;
|
|
emit("movecard", dir);
|
|
}, 500);
|
|
}
|
|
function onPressEnd() {
|
|
clearClickTimer();
|
|
clearLongPressInterval();
|
|
isLongPress = false;
|
|
showShadow.value = false;
|
|
key.value = -1;
|
|
type.value = -1;
|
|
}
|
|
function clearClickTimer() {
|
|
if (clickResetTimer) {
|
|
clearTimeout(clickResetTimer);
|
|
clickResetTimer = null;
|
|
}
|
|
}
|
|
function clearLongPressInterval() {
|
|
if (longPressInterval) {
|
|
clearInterval(longPressInterval);
|
|
longPressInterval = null;
|
|
}
|
|
}
|
|
function updateShadowPosition(pageX, pageY) {
|
|
let x = pageX;
|
|
let y = pageY - TOP - 50 + props.movebottom / 2;
|
|
const dx = x - RADIUS;
|
|
const dy = y - RADIUS;
|
|
const dist = Math.sqrt(dx * dx + dy * dy);
|
|
if (dist > RADIUS) {
|
|
const angle = Math.atan2(dy, dx);
|
|
x = RADIUS + RADIUS * Math.cos(angle);
|
|
y = RADIUS + RADIUS * Math.sin(angle);
|
|
}
|
|
shadow.x = x;
|
|
shadow.y = y;
|
|
}
|
|
function onTouchMove(e) {
|
|
var _a;
|
|
if (!isLongPress)
|
|
return;
|
|
const touch = (((_a = e.detail) == null ? void 0 : _a.touches) || e.touches || [])[0];
|
|
if (!touch)
|
|
return;
|
|
updateShadowPosition(touch.pageX, touch.pageY);
|
|
}
|
|
return (_ctx, _cache) => {
|
|
return common_vendor.e({
|
|
a: showShadow.value && __props.pao
|
|
}, showShadow.value && __props.pao ? {
|
|
b: shadow.x + "px",
|
|
c: shadow.y + "px"
|
|
} : {}, {
|
|
d: showRippleOnce.value && __props.pao
|
|
}, showRippleOnce.value && __props.pao ? {
|
|
e: rippleKey.value,
|
|
f: shadow.x + "px",
|
|
g: shadow.y + "px",
|
|
h: common_vendor.o(onRippleAnimationEnd)
|
|
} : {}, {
|
|
i: !__props.notext ? `/static/index/newruler/direction_1.png` : `/static/index/newruler/suere.png`,
|
|
j: type.value == -1 || type.value == 4,
|
|
k: !__props.notext ? `/static/index/newruler/direction_3.png` : `/static/index/newruler/sure_2.png`,
|
|
l: type.value == 3,
|
|
m: !__props.notext ? `/static/index/newruler/direction_5.png` : `/static/index/newruler/sure_4.png`,
|
|
n: type.value == 2,
|
|
o: !__props.notext ? `/static/index/newruler/direction_4.png` : `/static/index/newruler/sure_3.png`,
|
|
p: type.value == 0,
|
|
q: !__props.notext ? `/static/index/newruler/direction_2.png` : `/static/index/newruler/sure_1.png`,
|
|
r: type.value == 1,
|
|
s: getblue.value
|
|
}, getblue.value ? {
|
|
t: pulseKey.value
|
|
} : {}, {
|
|
v: common_vendor.o(($event) => onTap(0, $event)),
|
|
w: common_vendor.o((e) => onLongPressStart(0, e)),
|
|
x: common_vendor.o(($event) => onTap(3, $event)),
|
|
y: common_vendor.o((e) => onLongPressStart(3, e)),
|
|
z: common_vendor.o(($event) => onTap(2, $event)),
|
|
A: common_vendor.o((e) => onLongPressStart(2, e)),
|
|
B: common_vendor.o(($event) => onTap(1, $event)),
|
|
C: common_vendor.o((e) => onLongPressStart(1, e)),
|
|
D: common_vendor.o(($event) => onTap(4, $event)),
|
|
E: common_vendor.o((e) => onLongPressStart(4, e)),
|
|
F: `${__props.movebottom}rpx`,
|
|
G: `${__props.moveleft}rpx`,
|
|
H: common_vendor.o(onTouchMove),
|
|
I: common_vendor.o(onPressEnd),
|
|
J: common_vendor.o(onPressEnd)
|
|
});
|
|
};
|
|
}
|
|
});
|
|
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__scopeId", "data-v-e20c63a2"]]);
|
|
wx.createComponent(Component);
|
|
//# sourceMappingURL=../../../../.sourcemap/mp-weixin/component/public/newgame/joysticknew.js.map
|