JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div id='container'>

<h2>Astronomy minigame</h2>
<p>A real constellation is hidden among the scattered stars. Can you find it?</p>

<button id='submit-btn'>Submit</button> 
--- <button id='reveal-btn'>Reveal</button><button id='hide-btn'>Hide</button>
---
<button id='reset-btn'>Reset</button>

<div id='submit-result'></div>

<div id='star-board'></div>

<div id='constellation-list'></div>

</div>

CSS

div, img, button, p {
    box-sizing: border-box;
}

#container {
    width: 900px;
    margin: auto;
    text-align: center;
}


#star-board {
    width: 840px;
    height: 500px;
    margin: 20px auto;
    background-image: url("https://wallpapercave.com/wp/24UgzNL.jpg");
    background-size: cover;
    box-shadow: inset 0 0 0 2px black;
    position: relative;
}

/* Scattered randomly, or part of constellation */
#star-board .star {
    position: absolute;
    border-radius: 50%;
    transition: 0.2s;
}
#star-board .star:hover {
    cursor: pointer;
    box-shadow: 0 0 5px 5px rgba(255, 255, 255, 0.9);
    transition: 0.2s;
}
#star-board .selected-star {
    box-shadow: 0 0 10px 10px #fff;
}

/* Different types of star */
.star-normal {
    width: 7px;
    height: 7px;
    background-color: #fff;
    box-shadow: 0 0 4px 4px rgba(255, 255, 255, 0.3);
}
.star-yellow {
    width: 7px;
    height: 7px;
    background-color: gold;
    box-shadow: 0 0 4px 4px rgba(255, 255, 0, 0.3);
}
.star-red {
    width: 7px;
    height: 7px;
    background-color: orange;
    box-shadow: 0 0 4px 4px rgba(255, 0, 0, 0.3);
}
.star-blue {
    width: 8px;
    height: 8px;
    background-color: cyan;
    box-shadow: 0 0 5px 5px rgba(0, 255, 255, 0.2);
}
.star-bright {
    width: 10px;
    height: 10px;
    background-color: #fff;
    box-shadow: 0 0 8px 8px rgba(255, 255, 255, 0.2);
}

/* Display only */
#constellation-list {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
}
#constellation-list .const {
    text-align: center;
    background-color: silver;
    padding: 5px;
}
#constellation-list .const-preview {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: darkblue;
}
#constellation-list .star {
    position: absolute;
    border-radius: 50%;
}
#constellation-list .const-name {
    font-size: 20px;
    margin-top: 5px;
}

JavaScript

const constellations = [
    {
        id: 1, name: "Orion",
        stars: [
            {x: 0, y: 0, type: "red"},
            {x: 61, y: 12},
            {x: 27, y: 78},
            {x: 39, y: 73},
            {x: 50, y: 67},
            {x: 13, y: 140},
            {x: 82, y: 131}
        ]
    },
    {
        id: 2, name: "Cygnus",
        stars: [
            {x: 118, y: 0},
            {x: 109, y: 33},
            {x: 66, y: 64, type: "bright"},
            {x: 44, y: 31},
            {x: 36, y: 97},
            {x: 0, y: 118},
            {x: 96, y: 92},
            {x: 118, y: 122},
            {x: 134, y: 134}
        ]
    },
    {
        id: 3, name: "Leo",
        stars: [
            {x: 82, y: 0},
            {x: 104, y: 4},
            {x: 68, y: 34},
            {x: 79, y: 52, type: "bright"},
            {x: 105, y: 57},
            {x: 121, y: 82},
            {x: 19, y: 92},
            {x: 32, y: 124},
            {x: 0, y: 142}
        ]
    },
    {
        id: 4, name: "Ursa Major",
        stars: [
            {x: 0, y: 0},
            {x: 50, y: 12},
            {x: 69, y: 38},
            {x: 97, y: 67},
            {x: 91, y: 101},
            {x: 144, y: 124},
            {x: 168, y: 92}
        ]
    }
];

function randomNumber(n1, n2){
    if(n1 == n2){ return n1; }
    let min = n1, max = n2;
    if(n1 > n2){ min = n2; max = n1; }
    return Math.floor(Math.random() * (max - min + 1) + min);
}

function randomArray(array){
    return array[Math.floor(Math.random() * array.length)];
}

class Demo {

    constructor(){
        this.starTypes = [
            "normal",
            "yellow",
            "red",
            "blue",
            "bright"
        ];
        this.previewConstellations();
        this.newBoard();
    }
    
    // Generate div + stars for each const.
    // May need to scale up/down to fit.
    previewConstellations(){
        let html = "";
        for(let c of constellations){
            let width = 0,
  ...