Skip to content

Instantly share code, notes, and snippets.

@timothycarambat

timothycarambat/index.html

Created May 8, 2019 06:13
Show Gist options
  • Save timothycarambat/2a0a31bf4c5bc78fccce5ef586a1d007 to your computer and use it in GitHub Desktop.
Save timothycarambat/2a0a31bf4c5bc78fccce5ef586a1d007 to your computer and use it in GitHub Desktop.
Download ZIP
random dice roller / table maker for u/Drastic_Saracen off r/programmingrequests REDDIT LINK: https://www.reddit.com/r/programmingrequests/comments/bj12ea/tables_creator_and_diceroller_sorta/
Raw
index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Dice Roller</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style media="screen">
td.selected {
background-color: #83dea8
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script type="text/javascript" src='main.js'></script>
</head>
<body>
<div class="container">
<div class="row" style='margin-top:10%'>
<div class="col-md-2">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Word Matrix / Dice Roller</h5>
<p class="card-text" style='font-size:13px'><u>How to Use:</u>
<br><br>
- establish table dimensions with input fields below table. Default is 6x4.
<br><br>
- fill table out with data. You dont have to fill out the entire table.
<br><br>
- "Make Random Selection" will highlight one cell out of every row for selection.
<br><br>
- For ease of use you can export the selected items to a .txt file if you choose.
<br><br>
- You can save a table for later if you wish with the "export Table" button. Uploading a table only takes tables generated by this program.
</p>
<button onclick="randomSelect()" style='margin:10px' class="btn btn-primary">Make Random Selection</button>
<button onclick="resetSelection()" style='margin:10px' class="btn btn-secondary">Reset Selection</button>
<button onclick="exportSelection()" class="btn btn-light">Export Selected</button>
<hr>
<button onclick="exportTable()" style='margin:10px' class="btn btn-primary">Export Table</button>
<div style='margin:10px'>
<label for="">Upload A File:</label>
<input type='file' id='fileInput' accept='text/plain'><br>
</div>
</div>
</div>
</div>
<div class="offset-md-2 col-md-8">
<div class="card" style=" padding:10px; width: 100%;">
<table id='word-matrix' class='table table-bordered'>
<tbody>
</tbody>
</table>
<div class="row">
<div class="col">
<label for="">Rows:</label>
<input type="text" data-table-dim='row' class="form-control" placeholder="Rows">
</div>
<div class="col">
<label for="">Columns:</label>
<input type="text" data-table-dim='col' class="form-control" placeholder="Columns">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Raw
main.js
function makeTable(){
var rows = window.rowDim
var cols = window.colDim
clearTable()
var $matrix = $('#word-matrix');
var tableBody = $matrix.find('tbody')[0];
var tableHTML = ''
for(var rowCount = 0; rowCount < rows; rowCount++){
tableHTML += "<tr>"
for(var colCount = 0; colCount < cols; colCount++){
tableHTML += "<td contenteditable></td>"
}
tableHTML += "</tr>"
}
tableBody.innerHTML = tableHTML
}
function clearTable(){
$matrix = $('#word-matrix');
// wipe table rows and columns
$matrix.find('tbody').children().map((_ , el) => $(el).remove())
}
function handleDimensionChange(){
$('[data-table-dim]').change((e) =>{
var dimension = $(e.target).data('table-dim')
var value = $(e.target).val()
window[`${dimension}Dim`] = value
makeTable()
})
}
function handleFileUpload() {
var fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function(e) {
var file = $('#fileInput')[0].files[0];
var textType = /text.*/;
if (file.type.match(textType)) {
var reader = new FileReader();
reader.onload = function(e) {
populateTable(reader.result)
}
reader.readAsText(file);
} else {
alert("File not supported!")
}
})
}
function populateTable(fileContents) {
var contentArray = fileContents.split(';')
contentArray.pop() //remove last ';'
// get import dimensions and make table
window.rowDim = contentArray.length
window.colDim = contentArray[0].split(',').length
makeTable()
var $matrix = $('#word-matrix');
var tableBody = $matrix.find('tbody')[0];
contentArray.map((rowData, ridx) => {
rowData.split(',').map((value, cidx) => {
$(tableBody).find('tr').eq(ridx).find('td').eq(cidx).text(value)
})
})
}
function exportTable(){
var $matrix = $('#word-matrix');
var tableBody = $matrix.find('tbody')[0];
var rowCount = $(tableBody).find('tr').length > 0 ? $(tableBody).find('tr').length : 0
var colCount = $(tableBody).find('tr').eq(0).find('td').length > 0 ? $(tableBody).find('tr').eq(0).find('td').length : 0
var exportTxt = ''
if (!rowCount || !colCount){
alert('Nothing to Export!')
return false
}
$(tableBody).find('tr').map((ridx, rel) => {
rowData = []
$(tableBody).find('tr').eq(ridx).find('td').map((cidx, cel) =>{
cellValue = $(cel).text().length > 0 ? $(cel).text() : ' '
cellValue = cellValue.replace(',', ' ').replace(';',' ')
rowData.push(cellValue)
})
exportTxt += `${rowData.join(',')};`
})
download_export(exportTxt, 'table_export.txt')
}
function download_export(text, filename) {
var element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
element.setAttribute('download', filename);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
function getRandomSelection(max) {
return Math.floor(Math.random() * Math.floor(max));
}
function randomSelect(){
resetSelection()
var $matrix = $('#word-matrix');
var tableBody = $matrix.find('tbody')[0];
for(var selectedRow = 0; selectedRow < window.rowDim; selectedRow++){
selectedCol = getRandomSelection(window.colDim)
$(tableBody).find('tr').eq(selectedRow).find('td').eq(selectedCol).addClass('selected')
}
}
function resetSelection(){
$('td.selected').map((_, el) => {
$(el).removeClass('selected')
})
}
function exportSelection(){
var selections = []
var exportTxt = ''
$('td.selected').map((_, el) => {
selections.push($(el).text())
})
exportTxt = `${selections.join(',')}`
download_export(exportTxt, 'selection_export.txt')
}
$(function(){
window.rowDim = 6
window.colDim = 4
makeTable()
handleDimensionChange()
handleFileUpload()
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment