JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

Explore demo. Different random events are available depending on the location, season, time of day and weather conditions. Whew! Lots of writing needed.<br>The clock ticks up as you move through the 8 times of day, and exploring ends at midnight. You might also get events from the previous or next time of day, so the line is a bit blurred.
<hr>

<div id='explore-container'>

<div id='explore-clock'>
    <div id='clock-circle'>
        <div class='segment seg1' style='transform: rotate(270deg) skew(30deg)'></div>
        <div class='segment seg2' style='transform: rotate(0deg) skew(0deg)'></div>
        <div class='segment seg3' style='transform: rotate(90deg) skew(0deg)'></div>    
        <div class='segment seg4' style='transform: rotate(180deg) skew(0deg)'></div>
  </div>
  <div id='clock-inner'>
      <div id='clock-text-time'></div>
      <div id='clock-text-percent'>%</div>
      <div id='clock-text-counter'></div>
  </div>
</div>

<div id='explore-options'>
    <!--
    Breed: <select id='select-breed'></select>
    <br>
    Sex: <select id='select-sex'>
        <option value='1'>Male</option>
        <option value='2'>Female</option>
    </select>
    -->
    Area: <select id='select-area'></select> 
    <br>
    Season: <select id='select-season'></select>
    <br>
    Time of day: <select id='select-time'></select> 
    <br>
    Weather: <select id='select-weather'></select>
    <br>
    <!--<textarea id='select-text'>Write scene text...</textarea>
    <br>-->
    <button id='explore-btn'>Find a scene</button><!-- | <button id='create-scene-btn'>Create new scene</button>-->
    <br>
</div>

<div id='explore-view'>
    <!--<div id='explore-bg'>[background]</div>-->
    <div id='explore-text'>[text]</div>
    <!--<div id='explore-sprite'>[sprite]</div>-->
    <!--<div id='explore-choices'>[choices]</div>-->
</div>

</div>

CSS

div, img, button, canvas, p, span, select, input {
    box-sizing: border-box;
}

#explore-container {
    width: 500px;
    height: 500px;
    background-color: #eee;
    position: relative;
}

#explore-clock {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 180px;
    height: 180px;
    border: 1px solid grey;
    background-color: #fff;
}

#explore-options {
    position: absolute;
    top: 5px;
    left: 190px;
    width: 250px;
    height: 180px;
    border: 1px solid grey;
    background-color: #fff;
}

#explore-view {
    position: absolute;
    top: 190px;
    left: 5px;
    width: 480px;
    height: 180px;
    border: 1px solid grey;
    background-color: #fff;
}

/* Clock */

#clock-circle {
  position: relative;
  width: 100%;
  height: 100%;
  /* 8 segments with time-of-day art */
  background-image: url("https://tse1.mm.bing.net/th?id=OIP.zWckxl9iaxDjmVuXFEtuCQHaHa&pid=Api");
  background-size: 130%;
  background-position: center;
  
  border-radius: 50%;
  border: 2px solid #000;
  overflow: hidden;
}

.segment {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100vw;
  /*background: grey;*/
  transform-origin: 0 0;
}

.seg1 {background-color: red;}
.seg2 {background-color: yellow;}
.seg3 {background-color: green;}
.seg4 {background-color: blue;}

/* Multiple borders. Inside, change BG image to match area, time of day, season. All maybe? */
#clock-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 130px;
  height: 130px;
  transform: translateX(-50%) translateY(-50%);
  background-color: lightblue;
  border-radius: 50%;
  box-shadow: inset #000 0px 0px 0px 1px, inset #fff 0 0 0 5px; 
  
  display: flex;
  justify-content: center;
  flex-flow: column;
  align-items: center;
}

/* Text only, in middle of circle. */
#clock-text {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120px;
  height: 120px;
  transform: translateX(-50%) translateY(-50%);
  border: 1px dashed blue;
  border-radius:...

JavaScript

const imagePath = "https://milcote.net/images/pix/";

const db = {
    
    areas: [
        {id: 1, name: "Forest"},
        {id: 2, name: "Mountains"}
    ],
    
    times: [
        {id: 1, name: "Early Hours"},
        {id: 2, name: "Dawn"},
        {id: 3, name: "Morning"},
        {id: 4, name: "Midday"},
        {id: 5, name: "Afternoon"},
        {id: 6, name: "Dusk"},
        {id: 7, name: "Evening"},
        {id: 8, name: "Midnight"}
    ],
    
    seasons: [
        {id: 1, name: "Spring"},
        {id: 2, name: "Summer"},
        {id: 3, name: "Autumn"},
        {id: 4, name: "Winter"}
    ],
    
    breeds: [
        {id: 1, name: "Griffin"},
        {id: 2, name: "Opinicus"}
    ],
    
    /*
    * This is set on the site. Changes daily?
    * Affects all areas at once.
    * Season determines chance/possibility.
    */
    weathers: [
        {id: 1, name: "Clear"}, // Sunny in daytime
        {id: 2, name: "Raining"},
        {id: 3, name: "Cloudy"},
        {id: 4, name: "Snowing"},
        {id: 5, name: "Thunder"},
        {id: 6, name: "Magic Storm"}, // Weirdness
        {id: 7, name: "Misty"},
        {id: 8, name: "Windy"}
    ],
    
    scenes: [
        {
            id: 1, area: 0, time: 0, season: 0, breed: 0,
            text: "anything"
        },{
            id: 2, area: 0, time: 0, season: 0, breed: 1,
            text: "Your wings ache a bit."
        },{
            id: 3, area: 0, time: 0, season: 0, breed: 2,
            text: "You ruffle your neck feathers."
        },{
            id: 4, area: 1, time: 0, season: 1, breed: 0,
            text: "The forest floor is full of budding plants."
        },{
            id: 5, area: 1, time: 0, season: 2, breed: 0,
            text: "The forest is lush and green."
        },{
            id: 6, area: 1, time: 0, season: 3, breed: 0,
            text: "The trees are turning brown, leaves are littered all over the forest floor."
        },{
            id: 7, area: 1, time: 0,...