index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://tetris.fun
+ metaTags
+ editButton /edit.html
+ title Tetris.fun - Play Classic Tetris Online
+ style.css
+
+ header
+ class hero
+ div
+ class hero-content
+ h1 Tetris.fun
+ p The classic block-stacking game, reimagined for the web
+ main
+ section
+ class game-container
+ div
+ class grid
+ div
+ class display
+ h2 Next
+ div
+ class next-piece
+ h2 Score
+ div
+ class score 0
+ h2 Level
+ div
+ class level 1
+ button
+ class start-button Start Game
+ footer
+ div
+ class footer-content
+ p Made with ❤️ by Tetris fans
prompt.json
Changed around line 1
+ {
+ "id": "5a584d09-475d-4348-bd1e-d72183bdd616",
+ "object": "chat.completion",
+ "created": 1738072318,
+ "model": "deepseek-chat",
+ "choices": [
+ {
+ "index": 0,
+ "message": {
+ "role": "assistant",
+ "content": "---domain---\ntetris.fun\n---index.scroll---\nbuildHtml\nbaseUrl https://tetris.fun\nmetaTags\neditButton /edit.html\ntitle Tetris.fun - Play Classic Tetris Online\nstyle.css\n\nheader\n class hero\n div\n class hero-content\n h1 Tetris.fun\n p The classic block-stacking game, reimagined for the web\nmain\n section\n class game-container\n div\n class grid\n div\n class display\n h2 Next\n div\n class next-piece\n h2 Score\n div\n class score 0\n h2 Level\n div\n class level 1\n button\n class start-button Start Game\nfooter\n div\n class footer-content\n p Made with ❤️ by Tetris fans\n---style.css---\n:root {\n --primary-color: #2c3e50;\n --secondary-color: #34495e;\n --accent-color: #e74c3c;\n --text-color: #ecf0f1;\n --grid-color: #7f8c8d;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Arial', sans-serif;\n background-color: var(--primary-color);\n color: var(--text-color);\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n}\n\n.hero {\n background-color: var(--secondary-color);\n padding: 2rem;\n text-align: center;\n}\n\n.hero-content h1 {\n font-size: 3rem;\n margin-bottom: 0.5rem;\n}\n\n.game-container {\n display: flex;\n justify-content: center;\n gap: 2rem;\n padding: 2rem;\n flex-grow: 1;\n}\n\n.grid {\n display: grid;\n grid-template-columns: repeat(10, 30px);\n grid-template-rows: repeat(20, 30px);\n gap: 1px;\n background-color: var(--grid-color);\n border: 2px solid var(--text-color);\n}\n\n.grid div {\n width: 30px;\n height: 30px;\n background-color: var(--primary-color);\n border: 1px solid var(--secondary-color);\n}\n\n.display {\n background-color: var(--secondary-color);\n padding: 1rem;\n border-radius: 8px;\n text-align: center;\n}\n\n.next-piece {\n display: grid;\n grid-template-columns: repeat(4, 20px);\n grid-template-rows: repeat(4, 20px);\n gap: 1px;\n margin: 1rem auto;\n width: fit-content;\n}\n\n.score, .level {\n font-size: 1.5rem;\n margin: 1rem 0;\n}\n\n.start-button {\n background-color: var(--accent-color);\n color: var(--text-color);\n border: none;\n padding: 0.5rem 1rem;\n border-radius: 4px;\n cursor: pointer;\n font-size: 1rem;\n transition: background-color 0.3s;\n}\n\n.start-button:hover {\n background-color: #c0392b;\n}\n\n.footer-content {\n text-align: center;\n padding: 1rem;\n background-color: var(--secondary-color);\n}\n\n@media (max-width: 768px) {\n .game-container {\n flex-direction: column;\n align-items: center;\n }\n \n .grid {\n grid-template-columns: repeat(10, 25px);\n grid-template-rows: repeat(20, 25px);\n }\n \n .grid div {\n width: 25px;\n height: 25px;\n }\n}\n---script.js---\nconst grid = document.querySelector('.grid');\nconst display = document.querySelector('.display');\nconst nextPieceDisplay = document.querySelector('.next-piece');\nconst scoreDisplay = document.querySelector('.score');\nconst levelDisplay = document.querySelector('.level');\nconst startButton = document.querySelector('.start-button');\n\nconst width = 10;\nlet squares = Array.from(grid.querySelectorAll('div'));\nlet nextSquares = Array.from(nextPieceDisplay.querySelectorAll('div'));\nlet currentPosition = 4;\nlet currentRotation = 0;\nlet timerId;\nlet score = 0;\nlet level = 1;\nlet isGameOver = false;\n\nconst colors = [\n '#00bcd4', // I\n '#ffeb3b', // O\n '#9c27b0', // T\n '#2196f3', // J\n '#f44336', // L\n '#4caf50', // S\n '#ff9800' // Z\n];\n\nconst lTetromino = [\n [1, width+1, width*2+1, 2],\n [width, width+1, width+2, width*2+2],\n [1, width+1, width*2+1, width*2],\n [width, width*2, width*2+1, width*2+2]\n];\n\n// Add other tetrominoes here...\n\nfunction draw() {\n current.forEach(index => {\n squares[currentPosition + index].style.backgroundColor = colors[random];\n });\n}\n\nfunction undraw() {\n current.forEach(index => {\n squares[currentPosition + index].style.backgroundColor = '';\n });\n}\n\nfunction control(e) {\n if(e.keyCode === 37) {\n moveLeft();\n } else if(e.keyCode === 38) {\n rotate();\n } else if(e.keyCode === 39) {\n moveRight();\n } else if(e.keyCode === 40) {\n moveDown();\n }\n}\n\nfunction moveDown() {\n undraw();\n currentPosition += width;\n draw();\n freeze();\n}\n\nfunction freeze() {\n if(current.some(index => squares[currentPosition + index + width].classList.contains('taken'))) {\n current.forEach(index => squares[currentPosition + index].classList.add('taken'));\n // Start a new tetromino falling\n random = nextRandom;\n nextRandom = Math.floor(Math.random() * theTetrominoes.length);\n current = theTetrominoes[random][currentRotation];\n currentPosition = 4;\n draw();\n displayShape();\n addScore();\n gameOver();\n }\n}\n\nfunction moveLeft() {\n undraw();\n const isAtLeftEdge = current.some(index => (currentPosition + index) % width === 0);\n \n if(!isAtLeftEdge) currentPosition -= 1;\n \n if(current.some(index => squares[currentPosition + index].classList.contains('taken'))) {\n currentPosition += 1;\n }\n \n draw();\n}\n\nfunction moveRight() {\n undraw();\n const isAtRightEdge = current.some(index => (currentPosition + index) % width === width - 1);\n \n if(!isAtRightEdge) currentPosition += 1;\n \n if(current.some(index => squares[currentPosition + index].classList.contains('taken'))) {\n currentPosition -= 1;\n }\n \n draw();\n}\n\nfunction rotate() {\n undraw();\n currentRotation++;\n if(currentRotation === current.length) {\n currentRotation = 0;\n }\n current = theTetrominoes[random][currentRotation];\n draw();\n}\n\nfunction displayShape() {\n // Clear next display\n nextSquares.forEach(square => {\n square.style.backgroundColor = '';\n square.classList.remove('taken');\n });\n \n // Draw next shape\n next.forEach(index => {\n nextSquares[currentPosition + index].style.backgroundColor = colors[nextRandom];\n });\n}\n\nfunction addScore() {\n for(let i = 0; i < 199; i += width) {\n const row = [i, i+1, i+2, i+3, i+4, i+5, i+6, i+7, i+8, i+9];\n \n if(row.every(index => squares[index].classList.contains('taken'))) {\n score += 10;\n scoreDisplay.innerHTML = score;\n row.forEach(index => {\n squares[index].classList.remove('taken');\n squares[index].style.backgroundColor = '';\n });\n const squaresRemoved = squares.splice(i, width);\n squares = squaresRemoved.concat(squares);\n squares.forEach(cell => grid.appendChild(cell));\n }\n }\n}\n\nfunction gameOver() {\n if(current.some(index => squares[currentPosition + index].classList.contains('taken'))) {\n scoreDisplay.innerHTML = 'end';\n clearInterval(timerId);\n isGameOver = true;\n }\n}\n\nstartButton.addEventListener('click', () => {\n if(isGameOver) {\n // Reset game\n squares.forEach(square => {\n square.classList.remove('taken');\n square.style.backgroundColor = '';\n });\n score = 0;\n scoreDisplay.innerHTML = score;\n level = 1;\n levelDisplay.innerHTML = level;\n isGameOver = false;\n }\n \n if(timerId) {\n clearInterval(timerId);\n timerId = null;\n } else {\n draw();\n timerId = setInterval(moveDown, 1000);\n nextRandom = Math.floor(Math.random() * theTetrominoes.length);\n displayShape();\n }\n});\n\ndocument.addEventListener('keydown', control);\n---end---"
+ },
+ "logprobs": null,
+ "finish_reason": "stop"
+ }
+ ],
+ "usage": {
+ "prompt_tokens": 719,
+ "completion_tokens": 2042,
+ "total_tokens": 2761,
+ "prompt_tokens_details": {
+ "cached_tokens": 0
+ },
+ "prompt_cache_hit_tokens": 0,
+ "prompt_cache_miss_tokens": 719
+ },
+ "system_fingerprint": "fp_3a5770e1b4"
+ }
readme.scroll
Changed around line 1
+ # tetris.fun.TLD
+
+ Prompt: website
+ Agent: deepseek
+ Model: deepseek-chat
+
+ ## User prompt
+ creat a tetris game
+
+ ## System prompt
+ You are an expert web developer. Create a website based on this request: "creat a tetris game"
+
+ Requirements:
+ - Use only Scroll, CSS, and JavaScript (NO frameworks, NO external dependencies)
+ - Create clean, semantic HTML5
+ - Make it mobile-responsive
+ - Follow modern best practices and accessibility guidelines
+ - Keep it simple but professional
+ - Use only relative links and no external resources
+ - Do not put a copyright symbol or all rights reserved in the footer.
+ - Make it beautiful. Dazzling. Advanced used of CSS.
+
+ As a refresher, for doing the html body, Scroll is a whitespace based language that uses a single indented space to mark a line (aka particle) as a subparticle of a parent line.
+
+ For example:
+
+ header
+ class hero
+ nav
+ div Scroll
+ class logo
+ div
+ class nav-links
+ a Features
+ href #features
+ a Examples
+ href #examples
+ a Edit
+ href edit.html
+ a GitHub
+ class cta-button
+ href https://github.com/breck7/scroll
+ div
+ class hero-content
+ h1 Write Better with Scroll
+ p The extendible markup language that makes source beautiful and compiles to anything
+ a Get Started
+ class primary-button
+ href https://hub.scroll.pub/
+ main
+ section
+ id features
+ class features
+ h2 Why Scroll?
+ div
+ class feature-grid
+ div
+ class feature-card
+ div ⚡
+ class feature-icon
+ h3 Simple Syntax
+ p Like Markdown, but more powerful. No parentheses needed.
+ div
+ class feature-card
+ div 🧩
+ class feature-icon
+ h3 Extendible
+ p Build your own custom parsers.
+ div
+ class feature-card
+ div 🎨
+ class feature-icon
+ h3 Beautiful Output
+ p Create stunning documents with minimal effort.
+ div
+ class feature-card
+ div 🚀
+ class feature-icon
+ h3 Fast & Light
+ p Built on the efficient PPS Stack.
+ section
+ id examples
+ class code-demo
+ h2 See It In Action
+ div
+ class code-container
+ pre
+ class code-example
+ div
+ class code-output
+ footer
+ div
+ class footer-content
+ div
+ class footer-links
+ a Documentation
+ href https://scroll.pub/tutorial.html
+ a Community
+ href https://www.reddit.com/r/WorldWideScroll/
+ a Blog
+ href https://scroll.pub/blog
+ p Started by Breck Yunits. Evolved by a community.
+ https://twitter.com/breckyunits Breck Yunits
+ https://github.com/breck7/scroll/graphs/contributors community
+
+
+ First suggest a short, memorable domain name ending in TLD that represents this website. Then provide the website files. Use this exact format:
+
+ ---domain---
+ (domainTLD here)
+ ---index.scroll---
+ buildHtml
+ baseUrl https://(domainTLD here)
+ metaTags
+ editButton /edit.html
+ title (Title here)
+ style.css
+
+ (body content here. no blank lines please.)
+
+ script.js
+ ---style.css---
+ (CSS content here)
+ ---script.js---
+ (JavaScript content here)
+ ---end---
script.js
Changed around line 1
+ const grid = document.querySelector('.grid');
+ const display = document.querySelector('.display');
+ const nextPieceDisplay = document.querySelector('.next-piece');
+ const scoreDisplay = document.querySelector('.score');
+ const levelDisplay = document.querySelector('.level');
+ const startButton = document.querySelector('.start-button');
+
+ const width = 10;
+ let squares = Array.from(grid.querySelectorAll('div'));
+ let nextSquares = Array.from(nextPieceDisplay.querySelectorAll('div'));
+ let currentPosition = 4;
+ let currentRotation = 0;
+ let timerId;
+ let score = 0;
+ let level = 1;
+ let isGameOver = false;
+
+ const colors = [
+ '#00bcd4', // I
+ '#ffeb3b', // O
+ '#9c27b0', // T
+ '#2196f3', // J
+ '#f44336', // L
+ '#4caf50', // S
+ '#ff9800' // Z
+ ];
+
+ const lTetromino = [
+ [1, width+1, width*2+1, 2],
+ [width, width+1, width+2, width*2+2],
+ [1, width+1, width*2+1, width*2],
+ [width, width*2, width*2+1, width*2+2]
+ ];
+
+ // Add other tetrominoes here...
+
+ function draw() {
+ current.forEach(index => {
+ squares[currentPosition + index].style.backgroundColor = colors[random];
+ });
+ }
+
+ function undraw() {
+ current.forEach(index => {
+ squares[currentPosition + index].style.backgroundColor = '';
+ });
+ }
+
+ function control(e) {
+ if(e.keyCode === 37) {
+ moveLeft();
+ } else if(e.keyCode === 38) {
+ rotate();
+ } else if(e.keyCode === 39) {
+ moveRight();
+ } else if(e.keyCode === 40) {
+ moveDown();
+ }
+ }
+
+ function moveDown() {
+ undraw();
+ currentPosition += width;
+ draw();
+ freeze();
+ }
+
+ function freeze() {
+ if(current.some(index => squares[currentPosition + index + width].classList.contains('taken'))) {
+ current.forEach(index => squares[currentPosition + index].classList.add('taken'));
+ // Start a new tetromino falling
+ random = nextRandom;
+ nextRandom = Math.floor(Math.random() * theTetrominoes.length);
+ current = theTetrominoes[random][currentRotation];
+ currentPosition = 4;
+ draw();
+ displayShape();
+ addScore();
+ gameOver();
+ }
+ }
+
+ function moveLeft() {
+ undraw();
+ const isAtLeftEdge = current.some(index => (currentPosition + index) % width === 0);
+
+ if(!isAtLeftEdge) currentPosition -= 1;
+
+ if(current.some(index => squares[currentPosition + index].classList.contains('taken'))) {
+ currentPosition += 1;
+ }
+
+ draw();
+ }
+
+ function moveRight() {
+ undraw();
+ const isAtRightEdge = current.some(index => (currentPosition + index) % width === width - 1);
+
+ if(!isAtRightEdge) currentPosition += 1;
+
+ if(current.some(index => squares[currentPosition + index].classList.contains('taken'))) {
+ currentPosition -= 1;
+ }
+
+ draw();
+ }
+
+ function rotate() {
+ undraw();
+ currentRotation++;
+ if(currentRotation === current.length) {
+ currentRotation = 0;
+ }
+ current = theTetrominoes[random][currentRotation];
+ draw();
+ }
+
+ function displayShape() {
+ // Clear next display
+ nextSquares.forEach(square => {
+ square.style.backgroundColor = '';
+ square.classList.remove('taken');
+ });
+
+ // Draw next shape
+ next.forEach(index => {
+ nextSquares[currentPosition + index].style.backgroundColor = colors[nextRandom];
+ });
+ }
+
+ function addScore() {
+ for(let i = 0; i < 199; i += width) {
+ const row = [i, i+1, i+2, i+3, i+4, i+5, i+6, i+7, i+8, i+9];
+
+ if(row.every(index => squares[index].classList.contains('taken'))) {
+ score += 10;
+ scoreDisplay.innerHTML = score;
+ row.forEach(index => {
+ squares[index].classList.remove('taken');
+ squares[index].style.backgroundColor = '';
+ });
+ const squaresRemoved = squares.splice(i, width);
+ squares = squaresRemoved.concat(squares);
+ squares.forEach(cell => grid.appendChild(cell));
+ }
+ }
+ }
+
+ function gameOver() {
+ if(current.some(index => squares[currentPosition + index].classList.contains('taken'))) {
+ scoreDisplay.innerHTML = 'end';
+ clearInterval(timerId);
+ isGameOver = true;
+ }
+ }
+
+ startButton.addEventListener('click', () => {
+ if(isGameOver) {
+ // Reset game
+ squares.forEach(square => {
+ square.classList.remove('taken');
+ square.style.backgroundColor = '';
+ });
+ score = 0;
+ scoreDisplay.innerHTML = score;
+ level = 1;
+ levelDisplay.innerHTML = level;
+ isGameOver = false;
+ }
+
+ if(timerId) {
+ clearInterval(timerId);
+ timerId = null;
+ } else {
+ draw();
+ timerId = setInterval(moveDown, 1000);
+ nextRandom = Math.floor(Math.random() * theTetrominoes.length);
+ displayShape();
+ }
+ });
+
+ document.addEventListener('keydown', control);
style.css
Changed around line 1
+ :root {
+ --primary-color: #2c3e50;
+ --secondary-color: #34495e;
+ --accent-color: #e74c3c;
+ --text-color: #ecf0f1;
+ --grid-color: #7f8c8d;
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ body {
+ font-family: 'Arial', sans-serif;
+ background-color: var(--primary-color);
+ color: var(--text-color);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ }
+
+ .hero {
+ background-color: var(--secondary-color);
+ padding: 2rem;
+ text-align: center;
+ }
+
+ .hero-content h1 {
+ font-size: 3rem;
+ margin-bottom: 0.5rem;
+ }
+
+ .game-container {
+ display: flex;
+ justify-content: center;
+ gap: 2rem;
+ padding: 2rem;
+ flex-grow: 1;
+ }
+
+ .grid {
+ display: grid;
+ grid-template-columns: repeat(10, 30px);
+ grid-template-rows: repeat(20, 30px);
+ gap: 1px;
+ background-color: var(--grid-color);
+ border: 2px solid var(--text-color);
+ }
+
+ .grid div {
+ width: 30px;
+ height: 30px;
+ background-color: var(--primary-color);
+ border: 1px solid var(--secondary-color);
+ }
+
+ .display {
+ background-color: var(--secondary-color);
+ padding: 1rem;
+ border-radius: 8px;
+ text-align: center;
+ }
+
+ .next-piece {
+ display: grid;
+ grid-template-columns: repeat(4, 20px);
+ grid-template-rows: repeat(4, 20px);
+ gap: 1px;
+ margin: 1rem auto;
+ width: fit-content;
+ }
+
+ .score, .level {
+ font-size: 1.5rem;
+ margin: 1rem 0;
+ }
+
+ .start-button {
+ background-color: var(--accent-color);
+ color: var(--text-color);
+ border: none;
+ padding: 0.5rem 1rem;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 1rem;
+ transition: background-color 0.3s;
+ }
+
+ .start-button:hover {
+ background-color: #c0392b;
+ }
+
+ .footer-content {
+ text-align: center;
+ padding: 1rem;
+ background-color: var(--secondary-color);
+ }
+
+ @media (max-width: 768px) {
+ .game-container {
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .grid {
+ grid-template-columns: repeat(10, 25px);
+ grid-template-rows: repeat(20, 25px);
+ }
+
+ .grid div {
+ width: 25px;
+ height: 25px;
+ }
+ }