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 primarily based on person enter will be hacked and gamified. There are very cool examples of builders getting inventive with CSS video games primarily based on the :hover pseudo-class, and even different video games primarily based 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 model something primarily based on the chosen soar hyperlink, so now we have 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 laborious 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 no less than have a smidge of hope.

No want to fret! CSS hasn’t gone Skynet on us but. Like several CSS hack, the rule of thumb to find out whether or not a recreation is feasible to implement with CSS is the variety of potential recreation states. I realized that when I used to be capable of create a 4×4 Sudoku solver however discovered a 9×9 model fairly darn close to inconceivable. That’s as a result of CSS hacks come all the way down to hiding and displaying recreation states primarily based on selectors that reply to person 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 fully in CSS.

OK, however how?

In a method, we’re not hacking CSS in any respect, however somewhat 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 potential 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 to be 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 method, we solely set off the handwriting animation for the laptop’s newest transfer. This offers the phantasm that we’re solely enjoying on a single gameboard when we’re, in actuality, leaping between completely different sections of the doc.

/* Sport’s mother or father container */
.b, physique:has(:goal) #——— {
/* Sport states */
.s {
show: none;
}
}

/* Sport items with :goal, components with href */
:goal, #——— {
width: 300px;
top: 300px; /
left: calc(50vw – 150px);
high: calc(50vh – 150px);
background-image: url(https://v3n6x2i7.rocketcdn.me/path/to/animated/grid.gif);
background-repeat: no-repeat;
background-size: 100% auto;

/* Show that recreation state and produce 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(“information: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 soar 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).

Observe the particular case after we begin the sport: We have to show the preliminary empty grid earlier than the person selects any soar hyperlink. There’s nothing to model with :goal in the beginning, so we conceal the preliminary state — with the:physique:has(:goal) #——— selector — as soon as a soar hyperlink is chosen. Equally, if you happen to create your experiments utilizing :goal you’ll wish to current an preliminary view earlier than the person begins interacting together with your web page. 

Wrapping up

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

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

We are able to 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 potential 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. In case you handle to pull off a win or a draw in opposition to the unbeatable CSS Tic Tac Toe algorithm, you could possibly present your achievement off to the world by sharing the URL.

It’s fully 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 on the subject of accessibility. This method arguably isn’t a hack since all we’re doing is utilizing soar 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.

Time Travelling CSS With :goal initially revealed on CSS-Methods, which is a part of the DigitalOcean household. You must get the e-newsletter.