STS2-Save-Editor/index.html at main · Houssemamor/STS2-Save-Editor · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>STS2 Save Editor</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="icon" type="image/png" href="static/images/characters/character_icon_necrobinder.png">
</head>

<body>
    <header id="app-header">
        <div style="display: flex; justify-content: space-between; align-items: center;">
            <div>
                <h1>Slay the Spire 2 v0.100.0 - Save Editor </h1>
            </div>
        </div>
        <div id="file-controls">
            <button class="btn btn-primary" id="btn-upload">Upload .save</button>
            <input type="file" id="file-input" accept=".save,.json" hidden>
            <button class="btn" id="btn-download" disabled>Download .save</button>
            <span id="file-status">No file loaded</span>
        </div>
    </header>

    <div id="upload-area">
        <div id="drop-zone">
            <div class="upload-icon">&#x1F5C1;</div>
            <h2>Drop your .save file here</h2>
            <p class="drop-hint">or click "Upload .save" above</p>
            <p class="drop-hint">Supports single-player &amp; multiplayer saves</p>
        </div>
        <div id="save-path-hint">
            <p>Save files are typically located at:</p>
            <code id="save-path-text">%APPDATA%\SlayTheSpire2\steam\&lt;SteamID&gt;\profile1\saves\</code>
            <button class="btn" id="btn-copy-path" title="Copy path to clipboard">Copy Path</button>
        </div>
    </div>

    <main id="editor-main" class="hidden">
        <div id="schema-warning" class="hidden"></div>
        <section id="save-info"></section>
        <nav id="player-tabs"></nav>
        <div id="player-panels"></div>
    </main>

    <div id="item-browser-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2 id="browser-title">Add Item</h2>
                <button class="modal-close" id="browser-close">&times;</button>
            </div>
            <div class="browser-filters">
                <input type="text" id="browser-search" placeholder="Search by name...">
                <select id="browser-filter-color">
                    <option value="">All Colors</option>
                </select>
                <select id="browser-filter-rarity">
                    <option value="">All Rarities</option>
                </select>
                <select id="browser-filter-type" class="hidden">
                    <option value="">All Types</option>
                </select>
                <select id="browser-filter-cost" class="hidden">
                    <option value="">All Costs</option>
                </select>
            </div>
            <div id="browser-grid"></div>
        </div>
    </div>

    <div id="browser-tooltip"></div>

    <div id="enchantment-editor-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <span id="enchantment-editor-title">Edit Enchantments</span>
                <button class="modal-close" id="enchantment-editor-close">&times;</button>
            </div>
            <div id="enchantment-editor-content">
                <div class="enchantment-editor-section">
                    <h4>Current Enchantment</h4>
                    <div id="enchantment-editor-current"></div>
                    <div id="enchantment-editor-amount" class="enchantment-amount-control hidden">
                        <label for="enchantment-editor-amount-slider">Amount:</label>
                        <input type="range" id="enchantment-editor-amount-slider" min="1" max="20" value="1">
                        <span id="enchantment-editor-amount-value">1</span>
                    </div>
                </div>

                <div class="enchantment-editor-section">
                    <h4>Available Enchantments</h4>
                    <input type="search" id="enchantment-editor-search" placeholder="Search enchantments...">
                    <div id="enchantment-editor-grid" class="enchantment-grid"></div>
                </div>
            </div>
        </div>
    </div>

    <div id="toast-container"></div>

    <script type="module" src="js/app.js"></script>
</body>
<footer>
    <a href="https://github.com/Houssemamor/STS2-Save-Editor" target="_blank" rel="noopener"
        style="display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--border-color); border-radius: var(--radius-md); text-decoration: none; color: inherit; transition: background 0.2s;"
        onmouseover="this.style.background='var(--bg-card)'" onmouseout="this.style.background='var(--border-color)'">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path
                d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v 3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
        </svg>
        View on GitHub
    </a>
</footer>

</html>