-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
143 lines (119 loc) · 5.03 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0, user-scalable=no">
<title>Urban octo</title>
<style>
.page-holder {
max-width: 1200px;
margin: 0 auto;
}
.hands {
display: flex;
flex-wrap: wrap;
margin-bottom: 32px;
}
.hand {
max-width: 500px;
width: 300px;
}
.notice {
font-size: x-small;
}
button {
font-size: 20px;
}
body {
touch-action: manipulation;
}
</style>
</head>
<body>
<div class="page-holder">
<h1>Urban octo</h1>
<h2>Short description</h2>
<div class="hands">
<svg id="left-hand" class="hand" viewBox="0 0 250 250" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polyline
points="10 200, 10 110, 40 110, 40 200, 50 200, 50 50, 80 50, 80 200, 90 200, 90 30, 120 30, 120 200, 130 200, 130 50, 160 50, 160 200, 160 220, 200 190, 210 200, 160 240"
fill="transparent" stroke="black" stroke-width="5" />
<text x="90" y="240" font-size="30" text-anchor="middle" fill="black">LEFT</text>
</svg>
<svg id="right-hand" class="hand" viewBox="-10 0 250 250" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polyline
points="50 240, 0 200, 10 190, 50 220, 50 200, 50 50, 80 50, 80 200, 90 200, 90 30, 120 30, 120 200, 130 200, 130 50, 160 50, 160 200, 170 200, 170 110, 200 110, 200 200"
fill="transparent" stroke="black" stroke-width="5" />
<text x="120" y="240" font-size="30" text-anchor="middle" fill="black">RIGHT</text>
</svg>
</div>
<button type="button" onclick="next()">Next</button>
<button type="button" onclick="previous()">Previous</button>
<button type="reset" onclick="reset()">Reset</button>
<p class="notice">The position is saved in the browser local storage. Click on the <i>reset</i> button to reset.</p>
</div>
<script>
document.body.onload = () => setMarker(load_current_position(), 0);
const position_key = "position"
function load_current_position() {
const local_i = localStorage.getItem(position_key);
return (local_i && !isNaN(Number(local_i))) ? Number(local_i) : 0;
}
function next() {
setMarker(load_current_position(), 1);
}
function previous() {
setMarker(load_current_position(), -1);
}
function reset() {
localStorage.removeItem(position_key);
setMarker(0, 0);
}
function setMarker(current_position, delta) {
function getCurrentPosition(position_idx, delta = 0) {
const positions = [
["10", "110", "left-hand"],
["50", "50", "left-hand"],
["90", "30", "left-hand"],
["130", "50", "left-hand"],
["200", "190", "left-hand"],
["0", "200", "right-hand"],
["50", "50", "right-hand"],
["90", "30", "right-hand"],
["130", "50", "right-hand"],
["170", "110", "right-hand"],
["40", "110", "left-hand"],
["80", "50", "left-hand"],
["120", "30", "left-hand"],
["160", "50", "left-hand"],
["210", "200", "left-hand"],
["10", "190", "right-hand"],
["80", "50", "right-hand"],
["120", "30", "right-hand"],
["160", "50", "right-hand"],
["200", "110", "right-hand"],
]
const next_position_idx = Math.max((position_idx + delta) % positions.length, 0);
const position = positions[next_position_idx];
localStorage.setItem(position_key, ""+next_position_idx);
return position;
}
const position = getCurrentPosition(current_position, delta);
const ref = document.getElementById(position[2]);
const old_market = document.getElementsByTagName("circle");
if (old_market && old_market.length > 0) {
old_market[0].remove();
}
const marker = document.createElementNS("http://www.w3.org/2000/svg", "circle");
marker.setAttribute("cx", position[0])
marker.setAttribute("cy", position[1])
marker.setAttribute("r", "10")
marker.setAttribute("stroke", "red")
marker.setAttribute("fill", "transparent")
marker.setAttribute("stroke-width", "2")
ref.appendChild(marker);
}
</script>
</body>
</html>