ビンゴボード

Create randomized ビンゴボード from comma separated list

by db_dev

HTML

<section class="no-print">
    <div class="formItem">
        <label for="userTitle">Title</label>
        <input type="text" id="userTitle" />
    </div>

    <div class="formItem">
        <label for="commaList">List</label>
        <textarea name="" id="commaList" cols="30" rows="10"></textarea>
    </div>

    <div class="formItem">
        <button id="generate" type="button">Generate Board</button>
    </div>
</section>
<h1 class="title"></h1>
<div class="container"></div>

SCSS

$color1:#D499B9;
$color2:#9055A2;
$color3:#2E294E;
$color4:#011638;
body {
    background-color: $color4;
    font-family: sans-serif;
    color: $color1;
    * {
        box-sizing: border-box;
    }
}

.title {
    text-align: center;
    color: $color1;
}

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: flex-start;
    width: 100%;
    height: auto;
}

.block {
    padding: 4px;
    margin: 4px;
    height: 100px;
    flex: 0 1 calc(20% - 16px);
    align-items: center;
    display: flex;
    justify-content: center; // Look
    background-color: $color3;
    border: solid 1px $color2;
    color: $color1;
   font-size: 1.5rem;
   text-align: center;
}

.free {
    font-weight: bold;
}

button {
    border: none;
    padding: 6px;
    color: $color1;
    background-color: $color3;
    border-radius: 3px;
    &:hover {
        background-color: $color2;
    }
}

.formItem {
    margin-bottom: 12px;
    textarea,
    input {
        width: 100%;
    }
    button {
        float: right;
    }
}
@media print {
	.no-print {display:none;}
}

JavaScript

// Accept a comma separated list & Create array of 25 spaces
//const userList = ["Allura", "Coran", "Shiro", "Keith", "Pidge", "Lance", "Hunk", "Space Mice", "Zarkon", "Haggar", "Sendak", "Thace", "Kolivan", "Ulaz", "Throk", "Branko", "Raht", "CG", "Trugg", "Ladnok", "Janka", "Gnov", "Morvok", "Varkon", "Vrepit Sal", "Ruki", "Shay", "Ozar", "Ilun"];

//Make List Random
function shuffle(arr) {
    var i,
        j,
        temp;
    for (i = arr.length - 1; i > 0; i--) {
        j = Math.floor(Math.random() * (i + 1));
        temp = arr[i];
        arr[i] = arr[j];
        arr[j] = temp;
    }
    return arr;
};

function generateBoard() {

    const title = $("#userTitle").val();
    const blockCount = 25;
    const half = Math.ceil(blockCount / 2);
    const free = 'FreeSpace ';

    let userList = $("#commaList").val();

    userList = userList.split(', ');

    const list = shuffle(userList);

    // Add Title 
    $(".title").text(title);

    // Generate Blocks
    for (i = 0; i < list.length; i++) {
        // Fill in squares, except the center square must be empty
        if (i === half - 1) {
            $('.container').append("<div class='block free'>" + free + "</div>")
        }
        // Fill array from list, (when it reaches 25, stop)
        if (i === blockCount - 1) {
            break;
        }

        $('.container').append("<div class='block'>" + list[i] + "</div>")
    }

}
$("body").on('click', '#generate', function() {
    $(".container").empty();
    generateBoard();
});









//--Later Additions --//
// Get list from input boxes
// Limit characters