CoCalc -- CameraMap.js

GitHub Repository: wellsousaaa/Five-Nights-at-Freddys-Web
Path: blob/main/src/components/CameraMap.js
²⁷⁰ views
1
import React from "react";
2
import Media from "./Media";
3

4
function CameraMap(props) {
5
    const { handleCameraChange } = props;
6
    return (
7
        <div className="map" style={{ position: "absolute", zIndex: 10 }}>
8
            <img
9
                alt="Mapa da câmera"
10
                draggable="false"
11
                src={Media.Images.Map}
12
                style={{ zIndex: "1", width: "100%" }}
13
                useMap="#map"
14
            />
15
            <a
16
                href=""
17
                onClick={handleCameraChange}
18
                title="Stage"
19
                style={{
20
                    position: "absolute",
21
                    left: "27.25%",
22
                    top: "5%",
23
                    width: "13.25%",
24
                    height: "9.25%",
25
                    zIndex: 2,
26
                }}
27
            ></a>
28
            <a
29
                href=""
30
                onClick={handleCameraChange}
31
                title="Restrooms"
32
                style={{
33
                    position: "absolute",
34
                    left: "79.75%",
35
                    top: "24.25%",
36
                    width: "12.75%",
37
                    height: "8.25%",
38
                    zIndex: 2,
39
                }}
40
            ></a>
41
            <a
42
                href=""
43
                onClick={handleCameraChange}
44
                title="Dinning Area"
45
                style={{
46
                    position: "absolute",
47
                    left: "24%",
48
                    top: "20.5%",
49
                    width: "12.25%",
50
                    height: "8.25%",
51
                    zIndex: 2,
52
                }}
53
            ></a>
54
            <a
55
                href=""
56
                onClick={handleCameraChange}
57
                title="Backstage"
58
                style={{
59
                    position: "absolute",
60
                    left: "0%",
61
                    top: "27%",
62
                    width: "13.5%",
63
                    height: "9%",
64
                    zIndex: 2,
65
                }}
66
            ></a>
67
            <a
68
                href=""
69
                onClick={handleCameraChange}
70
                title="Pirate Cove"
71
                style={{
72
                    position: "absolute",
73
                    left: "12%",
74
                    top: "39.5%",
75
                    width: "12.75%",
76
                    height: "9%",
77
                    zIndex: 2,
78
                }}
79
            ></a>
80
            <a
81
                href=""
82
                onClick={handleCameraChange}
83
                title="Supply Closet"
84
                style={{
85
                    position: "absolute",
86
                    left: "8.25%",
87
                    top: "62.5%",
88
                    width: " 12%",
89
                    height: "8.25%",
90
                    zIndex: 2,
91
                }}
92
            ></a>
93
            <a
94
                href=""
95
                onClick={handleCameraChange}
96
                title="West Hall"
97
                style={{
98
                    position: "absolute",
99
                    left: "26.5%",
100
                    top: " 70.5%",
101
                    width: "12.5%",
102
                    height: "9.25%",
103
                    zIndex: 2,
104
                }}
105
            ></a>
106
            <a
107
                href=""
108
                onClick={handleCameraChange}
109
                title="East Hall"
110
                style={{
111
                    position: "absolute",
112
                    left: "49%",
113
                    top: "70%",
114
                    width: "14.5%",
115
                    height: "9.5%",
116
                    zIndex: 2,
117
                }}
118
            ></a>
119
            <a
120
                href=""
121
                onClick={handleCameraChange}
122
                title="W. Hall Corner"
123
                style={{
124
                    position: "absolute",
125
                    left: "26%",
126
                    top: "81.75%",
127
                    width: "14%",
128
                    height: "8.25%",
129
                    zIndex: 2,
130
                }}
131
            ></a>
132
            <a
133
                href=""
134
                onClick={handleCameraChange}
135
                title="E. Hall Corner"
136
                style={{
137
                    position: "absolute",
138
                    left: " 49.25%",
139
                    top: "81.25%",
140
                    width: "14.25%",
141
                    height: "10%",
142
                    zIndex: 2,
143
                }}
144
            ></a>
145
            <a
146
                href=""
147
                onClick={handleCameraChange}
148
                title="Kitchen"
149
                style={{
150
                    position: "absolute",
151
                    left: "79.5%",
152
                    top: "57.75%",
153
                    width: "14.25%",
154
                    height: "9.25%",
155
                    zIndex: 2,
156
                }}
157
            ></a>
158
        </div>
159
    );
160
}
161

162
export default CameraMap;
163

164
Product

Resources

Company
