213 lines
No EOL
7.8 KiB
HTML
213 lines
No EOL
7.8 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport"
|
|
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<title>Kaj Forney -- GIMM 260 Data Visualization Narrative</title>
|
|
|
|
<link rel="stylesheet" href="css/main.css">
|
|
<link rel="stylesheet" href="css/grid.css">
|
|
<link rel="stylesheet" href="css/animation.css">
|
|
|
|
<script src="https://kit.fontawesome.com/55072ce5fd.js" crossorigin="anonymous"></script>
|
|
</head>
|
|
<body class="parallax">
|
|
|
|
<div class="row">
|
|
<div class="col-3"></div>
|
|
<div class="col-6">
|
|
<h1 class="titlePulse">
|
|
<i class="fa-solid fa-gamepad"></i>
|
|
Gaming on Linux
|
|
<i class="fa-brands fa-steam"></i>
|
|
</h1>
|
|
</div>
|
|
<div class="col-4"></div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-1"></div>
|
|
<div class="col-5 roundCorners card">
|
|
<h2>Introduction</h2>
|
|
<p>I have been a user of Linux for the past 14 years. In that time, I've observed a notable improvement in the ease of running games on the system, particularly games that were originally made for other operating systems, such as Microsoft Windows.</p>
|
|
<p>This can be attributed to the hard work and dedication of the Linux community, particularly the WINE project. More recent improvements are the work of Valve Corporation, who introduced Proton in 2019.</p>
|
|
</div>
|
|
<div class="col-1"></div>
|
|
<div class="col-3 bigIcon">
|
|
<i class="fa-brands fa-linux wobble"></i>
|
|
</div>
|
|
<div class="col-2"></div>
|
|
</div>
|
|
|
|
<div class="spacer"></div>
|
|
|
|
<div class="row">
|
|
<div class="col-2"></div>
|
|
<div class="col-3 bigIcon">
|
|
<i class="fa-solid fa-wine-glass wobble"></i>
|
|
</div>
|
|
<div class="col-1"></div>
|
|
<div class="col-5 roundCorners card">
|
|
<h2>WINE</h2>
|
|
<p>[Introduce the WINE project here, which is the basis for running any Windows application on Linux.]</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-1"></div>
|
|
<div class="col-5 roundCorners card">
|
|
<h2>Proton</h2>
|
|
<p>[Introduce Proton from Valve here.]</p>
|
|
</div>
|
|
<div class="col-1"></div>
|
|
<div class="col-4">
|
|
<div class="youtube-container">
|
|
<iframe class="youtube-iframe" src="https://www.youtube-nocookie.com/embed/_OAqvtlgfGA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
|
</div>
|
|
</div>
|
|
<div class="col-1"></div>
|
|
</div>
|
|
|
|
<div class="spacer"></div>
|
|
|
|
<div class="row">
|
|
<div class="col-1"></div>
|
|
<div class="col-4">
|
|
<h2>[DATA VIZ HERE]</h2>
|
|
</div>
|
|
<div class="col-1"></div>
|
|
<div class="col-5 roundCorners card">
|
|
<p>This data visualization will illustrate the speed at which a newly game can now become Linux-compatible, using Age of Empires II as an example.</p>
|
|
</div>
|
|
<div class="col-1"></div>
|
|
</div>
|
|
|
|
<div class="spacer"></div>
|
|
|
|
<h2>[More visualizations will go here...]</h2>
|
|
|
|
<div class="row">
|
|
<div class="col-4"></div>
|
|
<div class="col-4 roundCorners card">
|
|
<label>Show Only Working?</label>
|
|
<input id='working' type='checkbox' />
|
|
<br>
|
|
<label>Game Title</label>
|
|
<input id='gameTitle' type='text' />
|
|
<br>
|
|
<label>Linux Distro</label>
|
|
<input id='os' type='text' />
|
|
<br>
|
|
<label>CPU Model</label>
|
|
<input id='cpu' type='text' />
|
|
<br>
|
|
<label>GPU Model</label>
|
|
<input id='gpu' type='text' />
|
|
<br>
|
|
<label>Sort By Time Submitted</label>
|
|
<select id='sortTime'>
|
|
<option value=''></option>
|
|
<option value='ASC'>Ascending</option>
|
|
<option value='DESC'>Descending</option>
|
|
</select>
|
|
<br>
|
|
<button id='search'>View Reports</button>
|
|
</div>
|
|
<div class="col-4"></div>
|
|
|
|
<script>
|
|
const isEmpty = (obj) => Object.keys(obj).length === 0;
|
|
|
|
document.getElementById('search').addEventListener('click', (event) => {
|
|
const dataUrl = 'http://localhost:8888';
|
|
let ajaxParameters = {};
|
|
if (document.querySelector('#working:checked')) {
|
|
ajaxParameters.working = 1;
|
|
}
|
|
if (document.getElementById('gameTitle').value.length !== 0) {
|
|
ajaxParameters.gameTitle = document.getElementById('gameTitle').value;
|
|
}
|
|
if (document.getElementById('os').value.length !== 0) {
|
|
ajaxParameters.os = document.getElementById('os').value;
|
|
}
|
|
if (document.getElementById('cpu').value.length !== 0) {
|
|
ajaxParameters.cpu = document.getElementById('cpu').value;
|
|
}
|
|
if (document.getElementById('gpu').value.length !== 0) {
|
|
ajaxParameters.gpu = document.getElementById('gpu').value;
|
|
}
|
|
if (document.getElementById('sortTime').value.length !== 0) {
|
|
ajaxParameters.sortTime = document.getElementById('sortTime').value;
|
|
}
|
|
|
|
function niceOutput(a) {
|
|
if(a == 1) {
|
|
return "Yes";
|
|
} else {
|
|
return "No";
|
|
}
|
|
}
|
|
|
|
const xhttp = new XMLHttpRequest();
|
|
xhttp.onload = function() {
|
|
let displayTable = '<table>' +
|
|
'<thead>' +
|
|
'<tr>' +
|
|
'<th>Game Title</th>' +
|
|
'<th>Submitted</th>' +
|
|
'<th>Working?</th>' +
|
|
'<th>Distro</th>' +
|
|
'<th>CPU</th>' +
|
|
'<th>GPU</th>' +
|
|
'<th>Notes</th>' +
|
|
'</tr>' +
|
|
'</thead>' +
|
|
'<tbody>';
|
|
if (typeof this.responseText !== 'undefined' && this.responseText.length > 0) {
|
|
let ajaxResult = JSON.parse(this.responseText);
|
|
if (typeof ajaxResult.reports !== 'undefined') {
|
|
for (let x = 0; x < ajaxResult.reports.length; x++) {
|
|
displayTable += '<tr>' +
|
|
'<td>' + ajaxResult.reports[x].game_title + '</td>' +
|
|
'<td>' + new Date(ajaxResult.reports[x].timestamp * 1000).toLocaleDateString() + '</td>' +
|
|
'<td>' + niceOutput(ajaxResult.reports[x].verdict) + '</td>' +
|
|
'<td>' + ajaxResult.reports[x].systemInfo_os + '</td>' +
|
|
'<td>' + ajaxResult.reports[x].systemInfo_cpu + '</td>' +
|
|
'<td>' + ajaxResult.reports[x].systemInfo_gpu + '</td>' +
|
|
'<td>' + ajaxResult.reports[x].notes_summary + '</td>' +
|
|
'</tr>';
|
|
}
|
|
}
|
|
}
|
|
displayTable += '</tbody></table>';
|
|
document.getElementById('tableOutput').innerHTML = displayTable;
|
|
}
|
|
xhttp.open("GET", dataUrl + (!isEmpty(ajaxParameters) ? '?' + new URLSearchParams(ajaxParameters) : ''));
|
|
xhttp.send();
|
|
});
|
|
</script>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-1"></div>
|
|
<div class="col-10 overflow" id="tableOutput"></div>
|
|
<div class="col-1"></div>
|
|
</div>
|
|
|
|
<div id="footer-spacer"></div>
|
|
|
|
<div id="footer">
|
|
<div class="row">
|
|
<div class="col-6"></div>
|
|
<div class="col-6">
|
|
<img src="img/logos/lunarpenguin.png" alt="Lunar Penguin Logo" id="footer-logo">
|
|
<span id="footer-text">Page created by <a href="https://lunarpenguin.net">Kaj Forney</a>, 2022.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</body>
|
|
</html> |