diff --git a/index.html b/index.html index c292dc1..eb64d79 100644 --- a/index.html +++ b/index.html @@ -99,22 +99,38 @@ - + + +
+ + +
+ +
+ +
-
- - -
diff --git a/js/ui/chart.js b/js/ui/chart.js index 41258ad..c3f89e4 100644 --- a/js/ui/chart.js +++ b/js/ui/chart.js @@ -342,27 +342,80 @@ constructor() { }, }); // Setup price format selector change handler - const priceSelect = document.getElementById("priceFormatSelect"); - if (priceSelect) { - priceSelect.addEventListener("change", (e) => { - const precision = parseInt(e.target.value); - this.chart.priceScale().applyOptions({ - priceFormat: { type: "price", precision: precision, minMove: precision===0 ? 1 : 0.0001 } + const priceInput = document.getElementById("priceFormatInput"); + + // Load saved precision + let savedPrecision = parseInt(localStorage.getItem('winterfail_price_precision')); + if (isNaN(savedPrecision)) savedPrecision = 2; + + if (priceInput) priceInput.value = savedPrecision; + + if (priceInput) { + priceInput.addEventListener("input", (e) => { + let precision = parseInt(e.target.value); + if (isNaN(precision)) precision = 2; + if (precision < 0) precision = 0; + if (precision > 8) precision = 8; + + localStorage.setItem('winterfail_price_precision', precision); + + const minMove = precision === 0 ? 1 : Number((1 / Math.pow(10, precision)).toFixed(precision)); + + this.candleSeries.applyOptions({ + priceFormat: { type: "price", precision: precision, minMove: minMove } }); }); } + // Load candle colors from storage or default + const savedUpColor = localStorage.getItem('winterfail_candle_up') || '#ff9800'; + const savedDownColor = localStorage.getItem('winterfail_candle_down') || '#ff9800'; + + const candleUpInput = document.getElementById('candleUpColor'); + const candleDownInput = document.getElementById('candleDownColor'); + + if (candleUpInput) candleUpInput.value = savedUpColor; + if (candleDownInput) candleDownInput.value = savedDownColor; + + // Calculate initial minMove based on saved precision + const initialMinMove = savedPrecision === 0 ? 1 : Number((1 / Math.pow(10, savedPrecision)).toFixed(savedPrecision)); + this.candleSeries = this.chart.addSeries(LightweightCharts.CandlestickSeries, { - upColor: '#f0b90b', - downColor: '#f0b90b', - borderUpColor: '#f0b90b', - borderDownColor: '#f0b90b', - wickUpColor: '#f0b90b', - wickDownColor: '#f0b90b', + upColor: savedUpColor, + downColor: savedDownColor, + borderUpColor: savedUpColor, + borderDownColor: savedDownColor, + wickUpColor: savedUpColor, + wickDownColor: savedDownColor, lastValueVisible: false, priceLineVisible: false, - priceFormat: { type: 'price', precision: 0, minMove: 1 } + priceFormat: { type: 'price', precision: savedPrecision, minMove: initialMinMove } }, 0); + + // Color change listeners + if (candleUpInput) { + candleUpInput.addEventListener('input', (e) => { + const color = e.target.value; + localStorage.setItem('winterfail_candle_up', color); + this.candleSeries.applyOptions({ + upColor: color, + borderUpColor: color, + wickUpColor: color + }); + }); + } + + if (candleDownInput) { + candleDownInput.addEventListener('input', (e) => { + const color = e.target.value; + localStorage.setItem('winterfail_candle_down', color); + this.candleSeries.applyOptions({ + downColor: color, + borderDownColor: color, + wickDownColor: color + }); + }); + } this.avgPriceSeries = this.chart.addSeries(LightweightCharts.LineSeries, { color: '#00bcd4', @@ -372,7 +425,7 @@ constructor() { priceLineVisible: false, crosshairMarkerVisible: false, title: '', - priceFormat: { type: 'price', precision: 0, minMove: 1 } + priceFormat: { type: 'price', precision: savedPrecision, minMove: initialMinMove } }); this.currentPriceLine = this.candleSeries.createPriceLine({ @@ -432,9 +485,24 @@ constructor() { } initPriceScaleControls() { + const btnSettings = document.getElementById('btnSettings'); + const settingsPopup = document.getElementById('settingsPopup'); const btnAutoScale = document.getElementById('btnAutoScale'); const btnLogScale = document.getElementById('btnLogScale'); + if (btnSettings && settingsPopup) { + btnSettings.addEventListener('click', (e) => { + e.stopPropagation(); + settingsPopup.classList.toggle('hidden'); + }); + + document.addEventListener('click', (e) => { + if (!settingsPopup.contains(e.target) && e.target !== btnSettings && !btnSettings.contains(e.target)) { + settingsPopup.classList.add('hidden'); + } + }); + } + if (!btnAutoScale || !btnLogScale) return; this.priceScaleState = { @@ -1045,16 +1113,17 @@ async loadSignals() { }); } - document.getElementById('currentPrice').textContent = price.toFixed(2); + const savedPrecision = parseInt(localStorage.getItem('winterfail_price_precision')) || 2; + document.getElementById('currentPrice').textContent = price.toFixed(savedPrecision); if (this.statsData) { const change = this.statsData.change_24h; document.getElementById('currentPrice').className = 'stat-value ' + (change >= 0 ? 'positive' : 'negative'); document.getElementById('priceChange').textContent = (change >= 0 ? '+' : '') + change.toFixed(2) + '%'; document.getElementById('priceChange').className = 'stat-value ' + (change >= 0 ? 'positive' : 'negative'); - document.getElementById('dailyHigh').textContent = this.statsData.high_24h.toFixed(2); - document.getElementById('dailyLow').textContent = this.statsData.low_24h.toFixed(2); -} + document.getElementById('dailyHigh').textContent = this.statsData.high_24h.toFixed(savedPrecision); + document.getElementById('dailyLow').textContent = this.statsData.low_24h.toFixed(savedPrecision); + } } switchTimeframe(interval) {