JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<p>
    dig. 
    points: <span id='dig-points'>10</span> 
    hidden: <span id='dig-hidden'>10</span> 
    <button id='dig-points-btn'>More points</button> 
    <button id='dig-reset-btn'>Reset</button>
</p>

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

<div id='dig-message'></div>

<hr>

<p>
    craft. select 2/3 ingredients, make prize.
    <button id='mix-ing-btn'>More ingredients</button>
</p>

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

CSS

#dig-board {
    display: flex;
    flex-flow: row wrap;
}
#dig-board .dig-cell {
    width: 40px;
    height: 40px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}
#dig-board .dig-cell:hover {
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.8);
}

JavaScript

const db = {

    digArtifacts: [
        {id: 1, name: "Simple 1", size: 1},
        {id: 2, name: "Machinery", size: 1},
        {id: 3, name: "Ammonite", size: 1},
        {id: 4, name: "Pottery", size: 1},
        {id: 5, name: "Skull", size: 1},
        {id: 6, name: "Bird Fossil", size: 1},
        {id: 7, name: "Fossil", size: 1},
        {id: 8, name: "Fossil", size: 1},
        {id: 9, name: "Fossil", size: 1},
        {id: 10, name: "Fossil", size: 2},
        {id: 11, name: "Fossil", size: 2},
        {id: 12, name: "Fossil", size: 2},
        {id: 13, name: "Fossil", size: 2},
        {id: 14, name: "Huge Fossil", size: 3},
        {id: 15, name: "Dino Fossil", size: 3}
    ],

    //

    mixMaterials: [
        {id: 1, name: "Blue", rarity: 1},
        {id: 2, name: "Purple", rarity: 1},
        {id: 3, name: "Green", rarity: 1},
        {id: 4, name: "Silver", rarity: 1},
        {id: 5, name: "Copper", rarity: 1},
        {id: 6, name: "Zircon", rarity: 2},
        {id: 7, name: "Rose", rarity: 2},
        {id: 8, name: "Pansy", rarity: 2},
        {id: 9, name: "Orchid", rarity: 3},
        {id: 10, name: "Gold", rarity: 3}
    ],
    
    /*
    * Combinations of materials. What they make.
    */
    mixPrizes: [
        {id: 1, name: "Basic", mats: [1,2,3]},
        {id: 2, name: "Basic", mats: [1,2,4]},
        {id: 3, name: "Basic", mats: [1,2,5]},
        {id: 4, name: "Basic", mats: [1,2,6]},
        {id: 5, name: "Basic", mats: [1,2,7]},
        {id: 5, name: "Basic", mats: [1,2,8]}
    ]

};

function randomNumber(min, max){
  return Math.floor(Math.random() * (max - min + 1) + min);
}

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






class DigGame {

    constructor(){
        this.width = 10;
        this.height = 10;
        
        this.points = 10;
        this.hidden = 12;
        
        this.generate();
    }
    
    /*
    * Randomly scatter hidden stuff.
    * Then 6-10 layers of...