Skip to content

Commit

Permalink
New exchange features
Browse files Browse the repository at this point in the history
  • Loading branch information
@DanielDavis05
DanielDavis05 committed Dec 6, 2023
1 parent 69714e0 commit 1b22283
Show file tree
Hide file tree
Showing 3 changed files with 288 additions and 56 deletions.
127 changes: 75 additions & 52 deletions leaderboard/trading.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,10 @@
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
/>

<!-- Load in external scripts -->
<script src=" https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js "></script>
<script src=" https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-adapter-date-fns.bundle.min.js "></script>
</head>

<body>
Expand All @@ -51,69 +55,88 @@
</header>

<section id="main-section" class="screen pure-g">
<div class="pure-u-1-12"><!-- formatting div PRE--></div>
<div class="pure-u-5-6 pure-g">
<h1 class="pure-u-1 center-text"> Currency Exchange </h1>
<h2 class="center-text error-text" id="error-display" style="display: none"></h2>
<div class="info-card">
<div class="convert-container">
<div class="left-section" style="margin-right: 30px; margin-bottom: 50px">
<div class="labels">
<h2>I Own</h2>
<p id="shekel-bal">0 Sharick Shekels</p>
<hr />
<p id="dd-bal">0 Dewees Dollars</p>
</div>
<div class="vertical-line"></div>
<h1 class="pure-u-1 center-text"> Currency Exchange </h1>
<h2 class="center-text error-text" id="error-display" style="display: none"></h2>
<div class="info-card" style="max-width: 700px">
<div class="convert-container">
<div class="left-section" style="margin-right: 30px; margin-bottom: 50px">
<div class="labels">
<h2>I Own</h2>
<p id="shekel-bal">0 Sharick Shekels</p>
<hr />
<p id="dd-bal">0 Dewees Dollars</p>
</div>
<div class="left-section">
<div class="labels">
<h2>Exchange Rate</h2>
<p id="shekel-master">1 Sharick Shekel</p>
<hr />
<p id="dd-conv">1 Dewees Dollar</p>
<div style="display: inline-flex; margin-top: 1em; align-items: center">
<img
src="/media/misc/logo-ftx.png"
height="28px"
style="margin-top: -2px; margin-right: 3px"
/><p style="margin-right: 5px">Real-Time Quote</p>
<span>
<div class="indicator"> </div>
</span>
</div>
<div class="vertical-line"></div>
</div>
<div class="left-section">
<div class="labels">
<h2>Exchange Rate</h2>
<p id="shekel-master">1 Sharick Shekel</p>
<hr />
<p id="dd-conv">1 Dewees Dollar</p>
<div style="display: inline-flex; margin-top: 1em; align-items: center">
<img
src="/media/misc/logo-ftx.png"
height="28px"
style="margin-top: -2px; margin-right: 3px"
/><p style="margin-right: 5px">Real-Time Quote</p>
<span>
<div class="indicator"> </div>
</span>
</div>
</div>
</div>
</div>
</div>

<div class="info-card">
<h2>Trade</h2>
<div class="convert-container">
<div class="left-section">
<div class="labels">
<div style="display: inline-flex; align-items: center">
<input type="number" min="1" value="1" style="width: 75px" id="conv-quantity" /><p
id="conv-input-label"
>
Sharick Shekels</p
>
</div>
<hr />
<p id="conv-result">0 Dewees Dollars</p>
<div class="info-card">
<h2>Trade</h2>
<div class="currency-selector">
<p style="margin-right: 0.5em">Sharick Shekels & </p>
<select id="currency-list">
<option value="dd">Dewees Dollars</option>
</select>
</div>
<div class="chart-container">
<div id="loader" class="chart-loader" id="loader">
<div class="lds-dual-ring"></div>
<p>Loading Chart..</p>
</div>
<canvas id="chart" class="hidden"></canvas>
</div>
<div class="button-row" id="row">
<button class="pure-button" id="time-1m">1m</button>
<button class="pure-button" id="time-5m">5m</button>
<button class="pure-button" id="time-15m">15m</button>
<button class="pure-button" id="time-1h">1h</button>
<button class="pure-button" id="time-4h">4h</button>
<button class="pure-button" id="time-1d">1d</button>
<button class="pure-button" id="time-1w">1w</button>
<button class="pure-button" id="time-1mo">1mo</button>
<button class="pure-button hidden" id="time-3mo">3mo</button>
<button class="pure-button hidden" id="time-1y">1y</button>
</div>
<div class="convert-container">
<div class="left-section">
<div class="labels">
<div style="display: inline-flex; align-items: center">
<input type="number" min="1" value="1" style="width: 75px" id="conv-quantity" /><p
id="conv-input-label"
>
Sharick Shekels</p
>
</div>
<div class="bracket"></div>
</div>
<div class="button-group">
<button class="pure-button" id="swap-button">Swap</button>
<button class="pure-button" id="buy-button" disabled="true">Execute</button>
<hr />
<p id="conv-result">0 Dewees Dollars</p>
</div>
<div class="bracket"></div>
</div>
<div class="button-group">
<button class="pure-button" id="swap-button">Swap</button>
<button class="pure-button" id="buy-button" disabled="true">Execute</button>
</div>
</div>

<!-- formatting div POST-->
</div>
<div class="pure-u-1-12"><!-- formatting div POST--></div>
</section>
</body>
</html>
149 changes: 148 additions & 1 deletion scripts/trading.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,25 @@
let shekelsOnTop = true;
let currentPrice = 0.0;
let lastInterval = '5m';
newChart = null;

intervals = Object.freeze({
'1m': 1,
'5m': 5,
'15m': 15,
'30m': 30,
'1h': 60,
'4h': 240,
'1d': 1440,
'1w': 10080,
'1mo': 43200,
'3mo': 129600,
'1y': 525600,
});

function sseSubscribe() {
let price = document.getElementById('dd-conv');
const source = new EventSource('https://shekels.mrsharick.com/events/dewees-dollars');
const source = new EventSource('https://shekels.mrsharick.com/events/trading/dd/price');
source.addEventListener('message', function (event) {
const data = JSON.parse(event.data);
currentPrice = data.price;
Expand All @@ -24,6 +40,20 @@ document.addEventListener('DOMContentLoaded', async function () {
sseSubscribe();
document.getElementById('conv-quantity').addEventListener('input', convert);
document.getElementById('swap-button').addEventListener('click', toggleCurrency);

getChart('dd', '5m');

const btnRow = document.getElementById('row');
for (let i = 0; i < btnRow.children.length; i++) {
btnRow.children[i].addEventListener('click', function () {
lastInterval = btnRow.children[i].id.split('-')[1];
getChart('dd', btnRow.children[i].id.split('-')[1]);
});
}

setInterval(function () {
getChart('dd', lastInterval);
}, 20000);
});

function convert() {
Expand Down Expand Up @@ -57,3 +87,120 @@ function toggleCurrency() {
);
convert();
}

function getChart(currency, interval) {
if (newChart != null) {
newChart.destroy();
}
document.getElementById('chart').classList.add('hidden');

const btnRow = document.getElementById('row');

for (let i = 0; i < btnRow.children.length; i++) {
btnRow.children[i].classList.remove('selected');
}

const pressedButton = document.getElementById('time-' + interval);
pressedButton.classList.add('selected');

fetch(`https://shekels.mrsharick.com/trading/${currency}/history/${interval}`)
.then((response) => response.json())
.then((data) => {
let labels = data.history.map((data) => data.timestamp);
let prices = data.history.map((data) => data.price);
const diff = prices[prices.length - 1] - prices[0];
const timeDiff = new Date(labels[labels.length - 1]) - new Date(labels[0]);

// if there is less data then selected interval, add a point at the beginning repeating the first price
// slack of 1 minute
if (timeDiff + 60000 < intervals[interval] * 60000) {
// go back every minute until the time difference is greater than the interval
let i = 1;
while (
new Date(labels[labels.length - 1]) - new Date(labels[0]) + 60000 <
intervals[interval] * 60000
) {
labels.unshift(new Date(new Date(labels[0]).getTime() - i * 60000).toISOString());
prices.unshift(prices[0]);
i++;
}
}

const color = diff > 0 ? 'rgb(119, 221, 118)' : 'rgb(255, 105, 98)';

const config = {
type: 'line',
data: {
labels: labels,
datasets: [
{
label: 'Price',
data: prices,
borderColor: color,
fill: false,
tension: 0.4,
pointRadius: 0,
},
],
},
options: {
responsive: true,
interaction: {
intersect: false,
mode: 'index',
},
plugins: {
legend: {
display: false,
onClick: (e) => e.stopPropagation(),
},
tooltip: {
enabled: true,
mode: 'index',
callbacks: {
label: function (context) {
let label = context.dataset.label || '';

if (label) {
label += ': ';
}
if (context.parsed.y !== null) {
label += new Intl.NumberFormat().format(context.parsed.y);
}
return label;
},
},
},
},
scales: {
x: {
type: 'time',
time: {
unit: 'minute',
},
title: {
display: true,
text: 'Time',
},
ticks: {
maxTicksLimit: 6,
minRotation: 30,
},
},
y: {
title: {
display: true,
text: 'Price ($)',
},
},
},
},
};

document.getElementById('loader').classList.add('hidden');
document.getElementById('chart').classList.remove('hidden');
// Instantiate the chart on your canvas
const ctx = document.getElementById('chart');
newChart = new Chart(ctx, config);
});
}
Loading

0 comments on commit 1b22283

Please sign in to comment.