About

CSS Hole is a collection of projects that test the limits of what is possible without any javascript. Enjoy the games, try to figure out how they are possible, or get inspired to create your own alternatives.

Chess

You can play chess against yourself or a friend on the same computer. If you are using a phone or older laptop, the game may be unplayably slow. Even if you have a fast computer the full game may not provide the fast-paced experience that most chess players crave.

The chess puzzles are quite a bit faster and not timed if the full game is too slow. Firefox seems to be faster, but the CSS backdrop-filter property is not enabled¹¹ You can supposedly enable backdrop-filter, but it may not actually work.. Without this filter the game still works but there will be neon green-blue chess pieces in a few extra places. The moves are still blocked but the indicator is not invisible.

How to Play

For the most part illegal moves are not playable. Most commonly, it is possible to make plays that keep your king in check. There is also no tracking of whether en passant or castling are currently legal. Every legal move should be playable, and almost all of them will display a neon green-blue helper covering legal destinations.

In general, a turn consists of clicking the piece you want to move then clicking the destination square and then clicking your clock.

White should take its first turn before pressing the clock to start the clock for black. Once you have pressed your clock the board will flip and it will be your opponent’s turn.

To capture a piece you must click the destination square twice. The first click will remove the opponent’s piece and the second will move your piece to that square.

En passant is possible. First click the piece you wish to move, then click the piece you want to remove, then click the square you wish to move to. The computer allows en passant at all times, so make sure your opponent does not try to do something illegal.

Castling requires moving the king to the desired square (one square at a time) and then moving the rook to the desired square. The computer always allows castling so watch your opponent.

To promote your pawn to a queen, first move your pawn to its destination where it will appear as a queen. If you are capturing use the normal procedure. Your old pawn will still be on the board. A new square at the top right of the board should have appeared. Click this square at the end to remove your pawn.

It is currently only possible to promote to queen, and you are only able to have a max of 3 queens on the board at the same time.

If you click something that causes something weird to happen then there is unlikely any recourse other than restarting the game. If you select the wrong piece to move, click it again to unselect it. Turns only end when the clock is pressed so you can make multiple (or 0) moves either intentionally or accidentally.

Chess Puzzles

The chess puzzles are untimed, significantly faster on most devices, and work the same way as the regular game. You will always play as the white pieces and must mate to win. If you try to take a turn and nothing happens that means that you have not selected the best move. Try another move. Once you have found the best move, a new button might appear below the board. If so, click this button to see your opponent’s response. If not, that means you have successfully checkmated your opponent!

Sudoku

Play sudoku by selecting a number from the top row and then placing it in the desired square. Only legal plays should be playable. As you hover over a square, other available squares in the same row, column, or 3x3 block will be different colors. These colors may or may not be helpful to you, but they were really hard to implement so they are not optional.

Sudoku Farm

CSS only Sudoku Farm is played in a similar manner to normal Sudoku Farm, but the gameplay can range from noticeably slow to unplayably slow depending on your computer/browser. Firefox seems to work significantly faster right now, but that may depend on the version/OS and could change at any time. If you run out of a resource then it will show a negative number in the total row. Admitting defeat at this point relies on the honor system.

Sortable Table

A large, paginated table that can easily be sorted and is somewhat filterable. The stats come from https://github.com/chadwickbureau/baseballdatabank, the war data comes from https://www.baseball-reference.com/, and the wOBA constants come from https://www.fangraphs.com/guts.aspx. The data only updates each Spring so there won’t be any 2021 data until early 2022.

You can sort the table by clicking the column header. Click the ascending or descending button below the table to change the sort order.

In the options box there is an option to filter for minimum PA or IP. The left column sets the hundreds digit, the middle column sets the tens digit, and the right column sets the ones digit.

Move to a different page of results by clicking the page number in the bottom right.

~FIP

The ~FIP stat is computed the same way as regular FIP²² FIP = Fielding Independent Pitching with expected IP replacing IP. Expected IP is the sum of expected outs from balls in play plus strikeouts. The league average for outs per ball in play is multiplied by each pitcher’s balls in play and then added to their strikeouts. It only has a significant impact on pitchers who have faced a few batters, but is probably better in these cases. For one thing there are fewer 0s in denominators.

Math Quiz

Enter the answer to each trigonometry question. Answer 16 in a row correctly to win. You should be able to enter sqrt(3) or root(3) for $\sqrt{3}\backslash sqrt\{3\}$ . Use the unit circle to see where the various angles are. Hover over the square and move the mouse to different locations to get the angle in radians.