Okay, the user wants me to build a playable Tetris game in a single HTML file. Let me think about how to approach this.

First, I need to create an HTML file with a canvas element. The canvas will be used to draw the game. Then, I'll need to include CSS for styling and JavaScript for the game logic.

The Tetris game requires several components: the game grid, tetrominoes, rotation, line clearing, scoring, and a next-piece preview. All of these need to be handled in JavaScript.

I should start by setting up the HTML structure. The canvas element will be the main drawing area. Maybe add a div for the score and next piece. But since the user wants everything in one file, I'll include the CSS in a <style> tag and the JS in a <script> tag.

For the JavaScript, I'll need to define the tetromino shapes. Each tetromino has a different shape, like I, O, T, S, Z, J, L. Each shape can be represented as a 2D array. Then, the game loop will handle moving the pieces down, checking for collisions, and updating the grid.

Rotation is a bit tricky. When a piece is rotated, I need to check if the new position is valid. If not, maybe adjust the position to prevent it from going out of bounds.

Line clearing involves checking each row of the grid. If a row is completely filled, it gets cleared, and the rows above it drop down. The score increases based on the number of lines cleared.

The next-piece preview can be a small canvas or a div that shows the next tetromino. I'll need to generate the next piece when the current one is placed.

Speed increases as the score increases. The game loop's interval can be adjusted based on the score to make the pieces fall faster.

I should also handle user input for moving and rotating the pieces. Using event listeners for keyboard events like arrow keys and spacebar.

Testing the code is important. Make sure that the pieces spawn correctly, move, rotate, and that lines are cleared properly. Also, check that the score updates and the game ends when the pieces reach the top.

Putting it all together, the HTML file will have the structure, CSS for layout, and JavaScript with all the game logic. I need to make sure there are no external dependencies, so all code is self-contained.

Wait, the user mentioned "all seven tetrominoes, rotation, line clears, increasing speed, a next-piece preview, and score." So I need to make sure each of these is implemented.

Let me outline the steps:

1. Create the HTML structure with a canvas for the game and another for the next piece.
2. Style the page with CSS to center everything and set up the canvas sizes.
3. Write JavaScript to handle the game loop, tetromino generation, movement, rotation, collision detection, line clearing, scoring, and game over.

I'll need to define the tetromino shapes, the grid, and the current piece. The game loop will use setInterval to update the game state periodically.

For the next-piece preview, I can have a separate function that draws the next tetromino on a small canvas.

Testing each part step by step. For example, first check if the tetrominoes can be drawn, then handle movement, then rotation, then collision detection, etc.

I should also handle the game over condition when a new piece can't be placed at the top.

Finally, ensure that all code is in one file, no external resources. That means no CDNs or external JS/CSS files. All inlined.

Now, writing the code. Start with the HTML, then the style, then the script. Make sure the canvas elements are properly sized and positioned.

Potential issues: The game loop might be too fast or too slow. Adjust the interval based on the score. Also, handling rotation correctly without overlapping.

I think that's a solid plan. Let's put it all together into the index.html file.

Okay, I need to check if the user's request for a Tetris game in a single HTML file was correctly addressed. The assistant provided a self-contained index.html with embedded CSS and JavaScript. Let me verify the key components:

1. **HTML Structure**: The file has a canvas for the game and another for the next-piece preview, along with a score display. That's good.

2. **CSS**: The styles are inline, centering elements and styling the canvas and score. Looks correct.

3. **JavaScript**:
   - **Tetromino Shapes**: Defined all seven tetrominoes (I, O, T, S, Z, J, L). Each with their respective 2D arrays.
   - **Game Loop**: Uses `setInterval` to update the game state. Handles piece movement, collision detection, and line clearing.
   - **Drawing**: Functions to draw the grid, pieces, and next piece. Uses the canvas context for rendering.
   - **Controls**: Listens for arrow key events to move and rotate pieces. Spacebar for hard drop isn't included, but the user didn't specify that.
   - **Collision Detection**: Checks if a piece can move or rotate without overlapping existing blocks or going out of bounds.
   - **Line Clearing**: Detects full lines and removes them, updating the score.
   - **Game Over**: Alerts the user when the game ends and reloads the page.

4. **Self-Contained**: No external resources, all code in one file. Correct.

Potential issues to check:
- **Piece Spawning**: The initial piece is placed in the middle, which should be correct.
- **Rotation**: The rotate function transposes the matrix, which is the standard approach.
- **Score System**: Increases with each line cleared, displayed properly.
- **Next Piece Preview**: The next piece is drawn in a separate canvas, which works.

The code seems solid. The user might want to test it in a browser to ensure it works as expected. The assistant's solution meets all the requirements specified.