ti14-vision/index.html at main · dota2-bkb/ti14-vision · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dota 2 Events Visualizer</title>
    <link rel="icon" type="image/png" href="assets/dota2_icon.png">
    <link rel="shortcut icon" type="image/png" href="assets/dota2_icon.png">
    <link rel="stylesheet" href="webpage/css/styles.css">
</head>
<body>
    <div class="container">
        <div class="header-section">
            <div class="title-section">
                <h1><img src="assets/dota2_icon.png" alt="Dota 2" style="width: 50px; height: 50px; vertical-align: middle; margin-right: 10px; margin-top: -10px;">Dota 2 Game Vision Visualizer - SPACE</h1>
                <p class="github-subtitle">
                    <a href="https://github.com/dota2-bkb/ti14-vision" target="_blank" rel="noopener noreferrer">
                        🔗 https://github.com/dota2-bkb/ti14-vision
                    </a>
                </p>
            </div>

            <div class="upload-section">
                <h3>Load Events Data</h3>
                <p>Select events_summary.csv file</p>
                <label class="file-input-wrapper">
                    📁 Choose CSV File
                    <input type="file" id="csvFile" accept=".csv" />
                </label>
            </div>
        </div>

        <div id="dataSection" style="display: none;">
            <div class="controls-section">
                <div class="game-selector">

                    <div id="playerNamesSection" class="player-names-section" style="display: none;">
                        <h3>👥 Team Players</h3>
                        <div id="playerNamesList" class="player-names-list"></div>
                    </div>

                    <h3>🎯 Game Selection</h3>
                    <div id="gamesList"></div>
                </div>

                <div class="visualization-section">
                    <h3>📍 Events Visualization</h3>
                    <div class="visualization-controls">
                        <div class="slider-control">
                            <label for="wardLimitSlider">Max Observer Wards per Game: <span id="wardLimitValue">2</span></label>
                            <input type="range" id="wardLimitSlider" min="1" max="20" value="2" class="slider">
                        </div>
                        <div class="toggle-controls">
                            <button id="sentryToggle" class="btn toggle-btn" onclick="toggleSentryWards()">
                                🔵 Show Sentry Wards
                            </button>
                            <button id="smokeToggle" class="btn toggle-btn active" onclick="toggleSmoke()">
                                🟣 Hide Smoke
                            </button>
                            <button id="observerOnlyToggle" class="btn toggle-btn" onclick="toggleObserverOnly()">
                                🟡 Show This Ward Only
                            </button>
                            <button id="arrowToggle" class="btn toggle-btn active" onclick="toggleArrows()">
                                🏹 Hide Path
                            </button>
                            <button id="timeToggle" class="btn toggle-btn active" onclick="toggleTime()">
                                🕐 Hide Time
                            </button>
                            <button id="playerNameToggle" class="btn toggle-btn" onclick="togglePlayerNames()">
                                👤 Show Player Names
                            </button>
                        </div>
                    </div>
                    <div class="map-container">
                        <div class="map-background" id="mapContainer">
                            <div class="legend">
                                <div class="legend-item">
                                    <div class="legend-marker observer"></div>
                                    <span>Observer Ward (Yellow Circle)</span>
                                </div>
                                <div class="legend-item">
                                    <div class="legend-marker sentry"></div>
                                    <span>Sentry Ward (Blue Square)</span>
                                </div>
                                <div class="legend-item">
                                    <div class="legend-marker smoke"></div>
                                    <span>Smoke (Purple Diamond)</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="stats-section" id="statsSection">
                <!-- Stats will be populated by JavaScript -->
            </div>
        </div>

        <div id="loadingSection" class="loading" style="display: none;">
            Loading data...
        </div>

        <div id="errorSection" class="error" style="display: none;">
            <!-- Error messages will appear here -->
        </div>
    </div>

    <div class="container partnership-footer">
        <div class="partnership-section">
            <h3>🤝 Partnership</h3>
            <p class="partnership-placeholder">
                Interested in partnerships or collaborations? Contact us to explore opportunities in Dota 2 analytics and esports data visualization.
            </p>
            <!-- <div class="partnership-links">
                <span class="partnership-item">📧 Contact</span>
                <span class="partnership-item">🤝 Collaborate</span>
                <span class="partnership-item">📊 Analytics</span>
            </div> -->
        </div>
    </div>

    <div class="tooltip" id="tooltip" style="display: none;"></div>

    <!-- Partnership Footer Section -->
    <footer class="partnership-footer">


        </div>
    </footer>

    <script src="webpage/js/visualizer.js"></script>
</body>
</html>