Time Travelling CSS With :goal

Checkbox and radio button hacks are the (in)well-known trick for creating video games utilizing simply CSS. But it surely seems that different components based mostly on consumer enter might be hacked and gamified. There are very cool examples of builders getting artistic with CSS video games based mostly on the :hover pseudo-class, and even different video games based mostly on the :legitimate pseudo-class.

What I’ve discovered, although, is that the :goal pseudo-class appears comparatively unexplored territory in this space of CSS hacking. It’s an underrated highly effective CSS characteristic when you consider it: :goal permits us to fashion something based mostly on the chosen leap hyperlink, so we’ve got a primitive model of client-side routing constructed into the browser! Let’s go mad scientist with it and see the place that takes us.

Unbeatable AI in CSS

Did I sort these phrases collectively? Are we going to hack CSS so arduous that we hit the singularity? Attempt to beat the stylesheet beneath at Tic Tac Toe and determine for your self.

The stylesheet will typically permit the sport to finish in a draw, so you at the very least have a smidge of hope.

No want to fret! CSS hasn’t gone Skynet on us but. Like all CSS hack, the rule of thumb to find out whether or not a recreation is feasible to implement with CSS is the variety of attainable recreation states. I discovered that when I used to be in a position to create a 4×4 Sudoku solver however discovered a 9×9 model fairly darn close to unattainable. That’s as a result of CSS hacks come all the way down to hiding and displaying recreation states based mostly on selectors that reply to consumer enter.

Tic Tac Toe has 5,478 authorized states reachable if X strikes first and there’s a well-known algorithm that may calculate the optimum transfer for any authorized state. It stands to motive, then, that we will hack collectively the Tic Tac Toe recreation utterly in CSS.

OK, however how?

In a approach, we aren’t hacking CSS in any respect, however reasonably utilizing CSS as the Lord Almighty meant: to cover, present, and animate stuff. The “intelligence” is how the HTML is generated. It’s like a “select your personal journey” guide of each attainable state within the Tic Tac Toe multiverse with the empty squares linked to the optimum subsequent transfer for the pc.

We generate this utilizing a mutant model of the minimax algorithm applied in Ruby. And do you know that since CodePen helps HAML (which helps Ruby blocks), we will use it secretly as a Ruby playground? Now you do.

Every state our HAML generates seems like this in HTML:

<div class="b" id="--OOX----">
  <svg class="o s">
    <circle></circle>
  </svg>

  <a category="s" href="#OXOOX----">
    <div></div>
  </a>

  <svg class="o s">
    <circle class="c"></circle>
  </svg>

  <svg class="o s">
    <circle class="c"></circle>
  </svg>

  <div class="x"></div>

  <a category="s" href="#O-OOXX---">
    <div></div>
  </a>

  <a category="s" href="#O-OOX-X--">
    <div></div>
  </a>

  <a category="s" href="#O-OOX--X-">
    <div></div>
  </a>

  <a category="s" href="#O-OOX---X">
    <div></div>
  </a>
</div>

With a sprinkling of surprisingly easy CSS, we will show solely the at present chosen recreation state utilizing :goal selectors. We’ll additionally add a .c class to historic laptop strikes — that approach, we solely set off the handwriting animation for the laptop’s newest transfer. This provides the phantasm that we’re solely enjoying on a single gameboard when we’re, in actuality, leaping between completely different sections of the doc.

/* Recreation's father or mother container */
.b, physique:has(:goal) #--------- {
  /* Recreation states */
  .s {
    show: none;
  }
}

/* Recreation items with :goal, components with href */
:goal, #--------- {
  width: 300px;
  top: 300px; /
  left: calc(50vw - 150px);
  high: calc(50vh - 150px);
  background-image: url(/path/to/animated/grid.gif);
  background-repeat:  no-repeat;
  background-size: 100% auto;
  
  /* Show that recreation state and convey it to the forefront  */
  .s {
    z-index: 1;
    show: inline-block;
  }
  
  /* The participant's transfer */
  .x {
    z-index: 1;
    show: inline-block;
    background-image: url("knowledge:picture/svg+xml [...]"); /** shortened for brevity **/ 
    top: 100px;
    width: 100px;
  }
  
  /* The browser's transfer */
  circle {
    animation-fill-mode: forwards;
    animation-name: draw;
    animation-duration: 1s;
    
    /* Solely animate the browser's newest flip */
    &.c {
      animation-play-state: paused;
      animation-delay: -1s;
    }
  }
}

When a leap hyperlink is chosen by clicking an empty sq., the :goal pseudo-class shows the up to date recreation state(.s), styled in order that the pc’s precalculated response makes an animated entrance (.c).

Notice the particular case after we begin the sport: We have to show the preliminary empty grid earlier than the consumer selects any leap hyperlink. There’s nothing to fashion with :goal initially, so we conceal the preliminary state — with the:physique:has(:goal) #--------- selector — as soon as a leap hyperlink is chosen. Equally, in case you create your experiments utilizing :goal you’ll wish to current an preliminary view earlier than the consumer begins interacting along with your web page. 

Wrapping up

I gained’t go into “why” we’d wish to implement this in CSS as a substitute of what could be an “simpler” path with JavaScript. It’s merely enjoyable and academic to push the boundaries of CSS. We may, for instance, pull this off with the traditional checkbox hack — someone did, in reality.

Is there something attention-grabbing about utilizing :goal as a substitute? I believe so as a result of:

• We will save video games in CSS! Bookmark the URL and are available again to it anytime within the state you left it.
• There’s a possible to make use of the browser’s Again and Ahead buttons as recreation controls. It’s attainable to undo a transfer by going Again in time or replay a transfer by navigating Ahead. Think about combining :goal with the checkbox hack to create video games with a time-travel mechanic within the custom of Braid.
• Share your recreation states. There’s the potential of Wordle-like bragging rights. Should you handle to pull off a win or a draw towards the unbeatable CSS Tic Tac Toe algorithm, you could possibly present your achievement off to the world by sharing the URL.
• It’s utterly semantic HTML. The checkbox hack requires you to cover checkboxes or radio buttons, so it will all the time be a little bit of a hack and painful horse-trading in relation to accessibility. This method arguably isn’t a hack since all we’re doing is utilizing leap hyperlinks and divs and their styling. This may occasionally even make it — dare I say —“simpler” to supply a extra accessible expertise. That’s to not say that is accessible proper out of the field, although.