keya: initial commit
This commit is contained in:
Kaya Samat
+24
@@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"$schema": "./node_modules/oxlint/configuration_schema.json",
|
||||
"plugins": ["react", "oxc"],
|
||||
"rules": {
|
||||
"react/rules-of-hooks": "error",
|
||||
"react/only-export-components": ["warn", { "allowConstantExport": true }]
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
# React + Vite
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some Oxlint rules.
|
||||
|
||||
Currently, two official plugins are available:
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
|
||||
|
||||
## React Compiler
|
||||
|
||||
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
|
||||
|
||||
## Expanding the Oxlint configuration
|
||||
|
||||
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and Oxlint's TypeScript related rules in your project.
|
||||
+13
@@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>tetris</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"type": "static"
|
||||
}
|
||||
Generated
+1294
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"name": "tetris",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"lint": "oxlint",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^19.2.8",
|
||||
"react-dom": "^19.2.8"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^19.2.17",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"@vitejs/plugin-react": "^6.0.4",
|
||||
"oxlint": "^1.75.0",
|
||||
"vite": "^8.2.0"
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.3 KiB |
@@ -0,0 +1,24 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<symbol id="bluesky-icon" viewBox="0 0 16 17">
|
||||
<g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
|
||||
<defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
|
||||
</symbol>
|
||||
<symbol id="discord-icon" viewBox="0 0 20 19">
|
||||
<path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
|
||||
</symbol>
|
||||
<symbol id="documentation-icon" viewBox="0 0 21 20">
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
|
||||
</symbol>
|
||||
<symbol id="github-icon" viewBox="0 0 19 19">
|
||||
<path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
|
||||
</symbol>
|
||||
<symbol id="social-icon" viewBox="0 0 20 20">
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
|
||||
</symbol>
|
||||
<symbol id="x-icon" viewBox="0 0 19 19">
|
||||
<path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.9 KiB |
+105
@@ -0,0 +1,105 @@
|
||||
import { useEffect } from 'react'
|
||||
import Board from './components/Board'
|
||||
import Controls from './components/Controls'
|
||||
import Overlay from './components/Overlay'
|
||||
import Preview from './components/Preview'
|
||||
import Stats from './components/Stats'
|
||||
import { useTetris } from './hooks/useTetris'
|
||||
|
||||
const CELL_SIZE = 30
|
||||
|
||||
export default function App() {
|
||||
const { state, actions, ghost } = useTetris()
|
||||
const { status, current, board, queue, score, level, lines } = state
|
||||
const running = status === 'playing'
|
||||
|
||||
useEffect(() => {
|
||||
const onKeyDown = (e) => {
|
||||
const key = e.key
|
||||
if (key === ' ' || key === 'ArrowDown' || key === 'ArrowUp') {
|
||||
e.preventDefault()
|
||||
}
|
||||
switch (key) {
|
||||
case 'ArrowLeft':
|
||||
actions.left()
|
||||
break
|
||||
case 'ArrowRight':
|
||||
actions.right()
|
||||
break
|
||||
case 'ArrowDown':
|
||||
actions.soft()
|
||||
break
|
||||
case 'ArrowUp':
|
||||
case 'x':
|
||||
case 'X':
|
||||
actions.rotate()
|
||||
break
|
||||
case ' ':
|
||||
actions.hard()
|
||||
break
|
||||
case 'p':
|
||||
case 'P':
|
||||
case 'Escape':
|
||||
actions.pause()
|
||||
break
|
||||
case 'Enter':
|
||||
if (status === 'idle') actions.start()
|
||||
else if (status === 'over') actions.restart()
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
}
|
||||
window.addEventListener('keydown', onKeyDown)
|
||||
return () => window.removeEventListener('keydown', onKeyDown)
|
||||
}, [actions, status])
|
||||
|
||||
return (
|
||||
<div className="app">
|
||||
<header className="app-header">
|
||||
<h1>Tetris</h1>
|
||||
<p className="app-subtitle">React ile klasik blok bulmacası</p>
|
||||
</header>
|
||||
<main className="layout">
|
||||
<section className="panel">
|
||||
<Stats label="Panel" score={score} lines={lines} level={level} status={status} />
|
||||
<div className="board-wrap">
|
||||
<Board board={board} current={current} ghost={ghost} cellSize={CELL_SIZE} />
|
||||
<Overlay
|
||||
status={status}
|
||||
onStart={actions.start}
|
||||
actions={actions}
|
||||
score={score}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
<aside className="side">
|
||||
<div className="side-card">
|
||||
<h3>Sıradaki</h3>
|
||||
<Preview queue={queue} count={3} />
|
||||
</div>
|
||||
<div className="side-card side-actions">
|
||||
<button className="ghost-button" onClick={actions.pause} disabled={!running && status !== 'paused'}>
|
||||
{status === 'paused' ? 'Devam' : 'Duraklat'}
|
||||
</button>
|
||||
<button className="ghost-button" onClick={actions.restart}>
|
||||
Yeniden Başlat
|
||||
</button>
|
||||
</div>
|
||||
<div className="side-card keys-card">
|
||||
<h3>Kontroller</h3>
|
||||
<ul className="keys">
|
||||
<li><kbd>←</kbd><kbd>→</kbd> hareket</li>
|
||||
<li><kbd>↓</kbd> yavaş bırak</li>
|
||||
<li><kbd>↑</kbd> / <kbd>X</kbd> döndür</li>
|
||||
<li><kbd>Space</kbd> hızlı bırak</li>
|
||||
<li><kbd>P</kbd> / <kbd>Esc</kbd> duraklat</li>
|
||||
<li><kbd>Enter</kbd> başlat / yeniden</li>
|
||||
</ul>
|
||||
</div>
|
||||
</aside>
|
||||
<Controls actions={actions} />
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.5 KiB |
@@ -0,0 +1,55 @@
|
||||
import { COLS, COLOR, ROWS, currentCells } from '../game/tetris'
|
||||
|
||||
export default function Board({ board, current, ghost, cellSize }) {
|
||||
const cells = []
|
||||
const pieceCells = new Map()
|
||||
const ghostSet = new Set()
|
||||
|
||||
if (current) {
|
||||
currentCells(current).forEach(([x, y]) => pieceCells.set(`${x},${y}`, current.type))
|
||||
}
|
||||
if (ghost) {
|
||||
ghost.forEach(([x, y]) => {
|
||||
if (x >= 0 && x < COLS && y >= 0 && y < ROWS && !pieceCells.has(`${x},${y}`)) {
|
||||
ghostSet.add(`${x},${y}`)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
for (let y = 0; y < ROWS; y++) {
|
||||
for (let x = 0; x < COLS; x++) {
|
||||
const key = `${x},${y}`
|
||||
const type = pieceCells.get(key) ?? board[y][x]
|
||||
const isGhost = ghostSet.has(key)
|
||||
cells.push(
|
||||
<div
|
||||
key={key}
|
||||
className={isGhost ? 'cell ghost' : type ? 'cell filled' : 'cell'}
|
||||
style={{
|
||||
width: cellSize,
|
||||
height: cellSize,
|
||||
background: isGhost
|
||||
? `rgba(255,255,255,0.08)`
|
||||
: type
|
||||
? COLOR[type]
|
||||
: undefined,
|
||||
boxShadow: type && !isGhost ? `inset 0 0 0 1px rgba(0,0,0,0.25)` : undefined,
|
||||
}}
|
||||
/>,
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="board"
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: `repeat(${COLS}, ${cellSize}px)`,
|
||||
gridTemplateRows: `repeat(${ROWS}, ${cellSize}px)`,
|
||||
}}
|
||||
>
|
||||
{cells}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
export default function Controls({ actions }) {
|
||||
return (
|
||||
<div className="controls">
|
||||
<div className="control-row">
|
||||
<button onClick={actions.left} aria-label="Sola">
|
||||
◀
|
||||
</button>
|
||||
<button onClick={actions.rotate} aria-label="Döndür">
|
||||
⟳
|
||||
</button>
|
||||
<button onClick={actions.right} aria-label="Sağa">
|
||||
▶
|
||||
</button>
|
||||
</div>
|
||||
<div className="control-row">
|
||||
<button onClick={actions.soft} aria-label="Yavaş bırak">
|
||||
▼
|
||||
</button>
|
||||
<button onClick={actions.hard} aria-label="Hızlı bırak">
|
||||
⏬
|
||||
</button>
|
||||
<button onClick={actions.pause} aria-label="Duraklat">
|
||||
⏸
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
export default function Overlay({ status, onStart, actions, score }) {
|
||||
if (status === 'playing') return null
|
||||
|
||||
let title
|
||||
let subtitle
|
||||
let buttonLabel
|
||||
let onButton
|
||||
|
||||
if (status === 'idle') {
|
||||
title = 'Tetris'
|
||||
subtitle = 'Puzzle populemizi toplayın'
|
||||
buttonLabel = 'Başlat'
|
||||
onButton = onStart
|
||||
} else if (status === 'paused') {
|
||||
title = 'Duraklatıldı'
|
||||
subtitle = 'Devam etmek için tekrar başlatın'
|
||||
buttonLabel = 'Devam Et'
|
||||
onButton = actions.pause
|
||||
} else {
|
||||
title = 'Oyun Bitti'
|
||||
subtitle = `Skorunuz: ${score}`
|
||||
buttonLabel = 'Yeniden Oyna'
|
||||
onButton = actions.restart
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="overlay">
|
||||
<div className="overlay-card">
|
||||
<h2 className="overlay-title">{title}</h2>
|
||||
{subtitle && <p className="overlay-subtitle">{subtitle}</p>}
|
||||
<button className="overlay-button" onClick={onButton ?? onStart}>
|
||||
{buttonLabel}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
import { COLOR, rotationCells } from '../game/tetris'
|
||||
|
||||
export default function Preview({ queue, count }) {
|
||||
const previews = queue.slice(0, count ?? 3)
|
||||
return (
|
||||
<div className="preview-list">
|
||||
{previews.map((type, index) => (
|
||||
<MiniPiece key={index} type={type} />
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function MiniPiece({ type }) {
|
||||
const cells = rotationCells(type, 0)
|
||||
const minX = Math.min(...cells.map(([x]) => x))
|
||||
const minY = Math.min(...cells.map(([, y]) => y))
|
||||
const maxX = Math.max(...cells.map(([x]) => x))
|
||||
const maxY = Math.max(...cells.map(([, y]) => y))
|
||||
const width = maxX - minX + 1
|
||||
const height = maxY - minY + 1
|
||||
const size = 22
|
||||
|
||||
return (
|
||||
<div
|
||||
className="mini"
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: `repeat(${width}, ${size}px)`,
|
||||
gridTemplateRows: `repeat(${height}, ${size}px)`,
|
||||
width: width * size,
|
||||
height: height * size,
|
||||
}}
|
||||
>
|
||||
{cells.map(([x, y], i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="mini-mask"
|
||||
style={{
|
||||
gridColumn: x - minX + 1,
|
||||
gridRow: y - minY + 1,
|
||||
background: COLOR[type],
|
||||
boxShadow: 'inset 0 0 0 1px rgba(0,0,0,0.25)',
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
export default function Stats({ score, lines, level, status }) {
|
||||
return (
|
||||
<div className="stats">
|
||||
<div className="stat">
|
||||
<span className="stat-label">Skor</span>
|
||||
<span className="stat-value">{score}</span>
|
||||
</div>
|
||||
<div className="stat">
|
||||
<span className="stat-label">Seviye</span>
|
||||
<span className="stat-value">{level}</span>
|
||||
</div>
|
||||
<div className="stat">
|
||||
<span className="stat-label">Satır</span>
|
||||
<span className="stat-value">{lines}</span>
|
||||
</div>
|
||||
<div className="stat">
|
||||
<span className="stat-label">Durum</span>
|
||||
<span className="stat-value status-text">
|
||||
{status === 'idle' ? '—' : status === 'playing' ? 'Oyun' : status === 'paused' ? 'Duraklatıldı' : 'Bitti'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,160 @@
|
||||
export const COLS = 10
|
||||
export const ROWS = 20
|
||||
|
||||
// Pieces in local coordinates (normalized so min x/y = 0).
|
||||
const SHAPES = {
|
||||
I: [[0, 0], [1, 0], [2, 0], [3, 0]],
|
||||
O: [[0, 0], [1, 0], [0, 1], [1, 1]],
|
||||
T: [[1, 0], [0, 1], [1, 1], [2, 1]],
|
||||
S: [[1, 0], [2, 0], [0, 1], [1, 1]],
|
||||
Z: [[0, 0], [1, 0], [1, 1], [2, 1]],
|
||||
J: [[0, 0], [0, 1], [1, 1], [2, 1]],
|
||||
L: [[2, 0], [0, 1], [1, 1], [2, 1]],
|
||||
}
|
||||
|
||||
export const COLOR = {
|
||||
I: '#22d3ee',
|
||||
O: '#facc15',
|
||||
T: '#c084fc',
|
||||
S: '#4ade80',
|
||||
Z: '#f87171',
|
||||
J: '#60a5fa',
|
||||
L: '#fb923c',
|
||||
}
|
||||
|
||||
export const PIECE_TYPES = Object.keys(SHAPES)
|
||||
|
||||
// Precompute all 4 rotations of each piece (local coords).
|
||||
const ROTATIONS = {}
|
||||
for (const type of PIECE_TYPES) {
|
||||
let cells = [...SHAPES[type]]
|
||||
const list = []
|
||||
for (let r = 0; r < 4; r++) {
|
||||
const minX = Math.min(...cells.map((c) => c[0]))
|
||||
const minY = Math.min(...cells.map((c) => c[1]))
|
||||
list.push(cells.map(([x, y]) => [x - minX, y - minY]))
|
||||
cells = cells.map(([x, y]) => [-y, x])
|
||||
}
|
||||
ROTATIONS[type] = list
|
||||
}
|
||||
|
||||
export function rotationCells(type, rotation, x = 0, y = 0) {
|
||||
return ROTATIONS[type][((rotation % 4) + 4) % 4].map(([rx, ry]) => [rx + x, ry + y])
|
||||
}
|
||||
|
||||
// Horizontal offset chosen so each piece is centered on a 10-wide board.
|
||||
export function spawnPiece(type) {
|
||||
const w = Math.max(...SHAPES[type].map(([x]) => x)) + 1
|
||||
const x = Math.floor((COLS - w) / 2)
|
||||
return { type, rotation: 0, x, y: 0 }
|
||||
}
|
||||
|
||||
export function createEmptyBoard() {
|
||||
return Array.from({ length: ROWS }, () => Array(COLS).fill(null))
|
||||
}
|
||||
|
||||
export function collides(board, cells) {
|
||||
for (const [x, y] of cells) {
|
||||
if (x < 0 || x >= COLS || y >= ROWS) return true
|
||||
if (y >= 0 && board[y][x] != null) return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
export function mergePiece(board, cells, type) {
|
||||
const next = board.map((row) => row.slice())
|
||||
for (const [x, y] of cells) {
|
||||
if (y >= 0 && y < ROWS && x >= 0 && x < COLS) next[y][x] = type
|
||||
}
|
||||
return next
|
||||
}
|
||||
|
||||
export function clearLines(board) {
|
||||
const remaining = board.filter((row) => row.some((cell) => cell == null))
|
||||
const cleared = ROWS - remaining.length
|
||||
while (remaining.length < ROWS) {
|
||||
remaining.unshift(Array(COLS).fill(null))
|
||||
}
|
||||
return { board: remaining, cleared }
|
||||
}
|
||||
|
||||
export function currentCells(piece) {
|
||||
return rotationCells(piece.type, piece.rotation, piece.x, piece.y)
|
||||
}
|
||||
|
||||
export function projectedCells(piece, dx = 0, dy = 0, rotation = piece.rotation) {
|
||||
return rotationCells(piece.type, rotation, piece.x + dx, piece.y + dy)
|
||||
}
|
||||
|
||||
export function ghostCells(piece, board) {
|
||||
const cells = rotationCells(piece.type, piece.rotation, piece.x, piece.y)
|
||||
let y = 0
|
||||
while (!collides(board, cells.map(([cx, cy]) => [cx, cy + y + 1]))) {
|
||||
y++
|
||||
}
|
||||
return cells.map(([cx, cy]) => [cx, cy + y])
|
||||
}
|
||||
|
||||
export const SCORE_TABLE = { 1: 100, 2: 300, 3: 500, 4: 800 }
|
||||
|
||||
export function lineScore(cleared, level) {
|
||||
return (SCORE_TABLE[cleared] ?? 0) * level
|
||||
}
|
||||
|
||||
export function dropSpeed(level) {
|
||||
return Math.max(70, Math.round(1000 * Math.pow(0.85, Math.min(Math.max(level - 1, 0), 10))))
|
||||
}
|
||||
|
||||
export function levelAfterLines(lines) {
|
||||
return Math.floor(lines / 10) + 1
|
||||
}
|
||||
|
||||
export function shuffleBag() {
|
||||
const bag = [...PIECE_TYPES]
|
||||
for (let i = bag.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1))
|
||||
;[bag[i], bag[j]] = [bag[j], bag[i]]
|
||||
}
|
||||
return bag
|
||||
}
|
||||
|
||||
// Standard rotation points for wall kicks. Key: "fromTo".
|
||||
const KICKS = {
|
||||
I: {
|
||||
'0>1': [[-2, 0], [1, 0], [-2, -1], [1, 2]],
|
||||
'1>0': [[2, 0], [-1, 0], [2, 1], [-1, -2]],
|
||||
'1>2': [[-1, 0], [2, 0], [-1, 2], [2, -1]],
|
||||
'2>1': [[1, 0], [-2, 0], [1, -2], [-2, 1]],
|
||||
'2>3': [[2, 0], [-1, 0], [2, 1], [-1, -2]],
|
||||
'3>2': [[-2, 0], [1, 0], [-2, -1], [1, 2]],
|
||||
'3>0': [[1, 0], [-2, 0], [1, -2], [-2, 1]],
|
||||
'0>3': [[-1, 0], [2, 0], [-1, 2], [2, -1]],
|
||||
},
|
||||
O: {},
|
||||
standard: {
|
||||
'0>1': [[-1, 0], [-1, 1], [0, -2], [-1, -2]],
|
||||
'1>0': [[1, 0], [1, -1], [0, 2], [1, 2]],
|
||||
'1>2': [[1, 0], [1, -1], [0, 2], [1, 2]],
|
||||
'2>1': [[-1, 0], [-1, 1], [0, -2], [-1, -2]],
|
||||
'2>3': [[1, 0], [1, 1], [0, -2], [1, -2]],
|
||||
'3>2': [[-1, 0], [-1, -1], [0, 2], [-1, 2]],
|
||||
'3>0': [[-1, 0], [-1, -1], [0, 2], [-1, 2]],
|
||||
'0>3': [[1, 0], [1, 1], [0, -2], [1, -2]],
|
||||
},
|
||||
}
|
||||
|
||||
export function kickOffsets(type, from, to) {
|
||||
const table = type === 'I' ? KICKS.I : type === 'O' ? {} : KICKS.standard
|
||||
return table[`${from}>${to}`] ?? []
|
||||
}
|
||||
|
||||
export function tryRotation(board, piece, toRotation) {
|
||||
const kicks = kickOffsets(piece.type, piece.rotation, toRotation)
|
||||
const candidates = [{ dx: 0, dy: 0 }, ...kicks.map(([dx, dy]) => ({ dx, dy }))]
|
||||
for (const { dx, dy } of candidates) {
|
||||
if (!collides(board, rotationCells(piece.type, toRotation, piece.x + dx, piece.y + dy))) {
|
||||
return { ...piece, rotation: toRotation, x: piece.x + dx, y: piece.y + dy }
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
@@ -0,0 +1,148 @@
|
||||
import { useCallback, useEffect, useReducer, useRef } from 'react'
|
||||
import {
|
||||
clearLines,
|
||||
collides,
|
||||
createEmptyBoard,
|
||||
currentCells,
|
||||
dropSpeed,
|
||||
ghostCells,
|
||||
levelAfterLines,
|
||||
lineScore,
|
||||
mergePiece,
|
||||
projectedCells,
|
||||
spawnPiece,
|
||||
shuffleBag,
|
||||
tryRotation,
|
||||
} from '../game/tetris'
|
||||
|
||||
const QUEUE_LENGTH = 5
|
||||
const LOCK_DELAY = 3
|
||||
|
||||
function refillQueue(queue) {
|
||||
let q = [...queue]
|
||||
while (q.length < QUEUE_LENGTH) q = [...q, ...shuffleBag()]
|
||||
return q
|
||||
}
|
||||
|
||||
export function initialState() {
|
||||
const queue = refillQueue([])
|
||||
return {
|
||||
board: createEmptyBoard(),
|
||||
current: spawnPiece(queue[0]),
|
||||
queue: queue.slice(1),
|
||||
score: 0,
|
||||
lines: 0,
|
||||
level: 1,
|
||||
status: 'idle',
|
||||
lastClear: 0,
|
||||
rests: LOCK_DELAY,
|
||||
}
|
||||
}
|
||||
|
||||
function lockPiece(state) {
|
||||
const merged = mergePiece(state.board, currentCells(state.current), state.current.type)
|
||||
const { board, cleared } = clearLines(merged)
|
||||
const lines = state.lines + cleared
|
||||
const level = levelAfterLines(lines)
|
||||
const current = spawnPiece(state.queue[0])
|
||||
const next = {
|
||||
...state,
|
||||
board,
|
||||
current,
|
||||
queue: refillQueue(state.queue.slice(1)),
|
||||
score: state.score + lineScore(cleared, state.level),
|
||||
lines,
|
||||
level,
|
||||
lastClear: cleared,
|
||||
rests: LOCK_DELAY,
|
||||
}
|
||||
return collides(board, currentCells(current)) ? { ...next, status: 'over' } : next
|
||||
}
|
||||
|
||||
function reducer(state, action) {
|
||||
switch (action.type) {
|
||||
case 'START': {
|
||||
if (state.status === 'playing' || state.status === 'paused') return state
|
||||
return { ...initialState(), status: 'playing' }
|
||||
}
|
||||
case 'TICK': {
|
||||
if (state.status !== 'playing') return state
|
||||
if (collides(state.board, projectedCells(state.current, 0, 1))) {
|
||||
if (state.rests > 0) return { ...state, rests: state.rests - 1 }
|
||||
return lockPiece(state)
|
||||
}
|
||||
return move(state, 0, 1)
|
||||
}
|
||||
case 'LEFT':
|
||||
return state.status === 'playing' ? move(state, -1, 0) : state
|
||||
case 'RIGHT':
|
||||
return state.status === 'playing' ? move(state, 1, 0) : state
|
||||
case 'ROTATE': {
|
||||
if (state.status !== 'playing') return state
|
||||
const rotated = tryRotation(state.board, state.current, (state.current.rotation + 1) % 4)
|
||||
return rotated ? { ...state, current: rotated, rests: LOCK_DELAY } : state
|
||||
}
|
||||
case 'SOFT_DROP':
|
||||
return state.status === 'playing' ? move(state, 0, 1) : state
|
||||
case 'HARD_DROP': {
|
||||
if (state.status !== 'playing') return state
|
||||
const drop = dropDistance(state.board, state.current)
|
||||
return drop > 0 ? lockPiece({ ...state, current: { ...state.current, y: state.current.y + drop } }) : lockPiece(state)
|
||||
}
|
||||
case 'TOGGLE_PAUSE': {
|
||||
if (state.status === 'playing') return { ...state, status: 'paused' }
|
||||
if (state.status === 'paused') return { ...state, status: 'playing' }
|
||||
return state
|
||||
}
|
||||
case 'RESTART':
|
||||
return initialState()
|
||||
default:
|
||||
return state
|
||||
}
|
||||
}
|
||||
|
||||
function move(state, dx, dy) {
|
||||
if (!collides(state.board, projectedCells(state.current, dx, dy))) {
|
||||
return {
|
||||
...state,
|
||||
current: { ...state.current, x: state.current.x + dx, y: state.current.y + dy },
|
||||
rests: LOCK_DELAY,
|
||||
}
|
||||
}
|
||||
return state
|
||||
}
|
||||
|
||||
function dropDistance(board, piece) {
|
||||
let distance = 0
|
||||
while (!collides(board, projectedCells(piece, 0, distance + 1))) {
|
||||
distance++
|
||||
}
|
||||
return distance
|
||||
}
|
||||
|
||||
export function useTetris() {
|
||||
const [state, dispatch] = useReducer(reducer, undefined, initialState)
|
||||
const speed = dropSpeed(state.level)
|
||||
const interval = state.status === 'playing' ? speed : null
|
||||
|
||||
useEffect(() => {
|
||||
if (interval == null) return
|
||||
const id = setInterval(() => dispatch({ type: 'TICK' }), interval)
|
||||
return () => clearInterval(id)
|
||||
}, [interval])
|
||||
|
||||
const actions = useRef({})
|
||||
actions.current.start = useCallback(() => dispatch({ type: 'START' }), [])
|
||||
actions.current.left = useCallback(() => dispatch({ type: 'LEFT' }), [])
|
||||
actions.current.right = useCallback(() => dispatch({ type: 'RIGHT' }), [])
|
||||
actions.current.rotate = useCallback(() => dispatch({ type: 'ROTATE' }), [])
|
||||
actions.current.soft = useCallback(() => dispatch({ type: 'SOFT_DROP' }), [])
|
||||
actions.current.hard = useCallback(() => dispatch({ type: 'HARD_DROP' }), [])
|
||||
actions.current.pause = useCallback(() => dispatch({ type: 'TOGGLE_PAUSE' }), [])
|
||||
actions.current.restart = useCallback(() => dispatch({ type: 'RESTART' }), [])
|
||||
|
||||
const ghost =
|
||||
state.status === 'playing' && state.current ? ghostCells(state.current, state.board) : null
|
||||
|
||||
return { state, actions: actions.current, ghost }
|
||||
}
|
||||
+338
@@ -0,0 +1,338 @@
|
||||
:root {
|
||||
--bg: #0f1117;
|
||||
--panel: #161a24;
|
||||
--panel-2: #1d2330;
|
||||
--border: #2a3142;
|
||||
--text: #e6e9f0;
|
||||
--muted: #8b93a7;
|
||||
--accent: #7c6cff;
|
||||
--accent-2: #22d3ee;
|
||||
font-family: system-ui, 'Segoe UI', Roboto, sans-serif;
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100svh;
|
||||
}
|
||||
|
||||
#root {
|
||||
min-height: 100svh;
|
||||
}
|
||||
|
||||
.app {
|
||||
min-height: 100svh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
padding: 24px 16px 40px;
|
||||
}
|
||||
|
||||
.app-header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.app-header h1 {
|
||||
margin: 0;
|
||||
font-size: 44px;
|
||||
letter-spacing: -1px;
|
||||
background: linear-gradient(120deg, var(--accent-2), var(--accent));
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.app-subtitle {
|
||||
margin: 6px 0 0;
|
||||
color: var(--muted);
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.layout {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.board-wrap {
|
||||
position: relative;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.board {
|
||||
background: #0a0c12;
|
||||
border: 2px solid var(--border);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
|
||||
.cell {
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
}
|
||||
|
||||
.cell.filled {
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.cell.ghost {
|
||||
border: 1px dashed rgba(255, 255, 255, 0.22);
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(10, 12, 18, 0.82);
|
||||
backdrop-filter: blur(3px);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.overlay-card {
|
||||
text-align: center;
|
||||
padding: 24px 18px;
|
||||
}
|
||||
|
||||
.overlay-title {
|
||||
margin: 0 0 8px;
|
||||
font-size: 28px;
|
||||
background: linear-gradient(120deg, var(--accent-2), var(--accent));
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.overlay-subtitle {
|
||||
margin: 0 0 18px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.overlay-button {
|
||||
appearance: none;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
padding: 12px 28px;
|
||||
border-radius: 10px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
background: linear-gradient(120deg, var(--accent-2), var(--accent));
|
||||
box-shadow: 0 10px 24px rgba(108, 108, 255, 0.35);
|
||||
transition: transform 0.12s ease, filter 0.12s ease;
|
||||
}
|
||||
|
||||
.overlay-button:hover {
|
||||
transform: translateY(-2px);
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
.side {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
width: 184px;
|
||||
}
|
||||
|
||||
.side-card {
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.side-card h3 {
|
||||
margin: 0 0 12px;
|
||||
font-size: 14px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.2px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.preview-list {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mini {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.side-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.ghost-button {
|
||||
appearance: none;
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--panel-2);
|
||||
color: var(--text);
|
||||
padding: 10px 12px;
|
||||
border-radius: 10px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
transition: border-color 0.15s ease;
|
||||
}
|
||||
|
||||
.ghost-button:hover:not(:disabled) {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.ghost-button:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.keys {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
kbd {
|
||||
display: inline-block;
|
||||
min-width: 22px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 6px;
|
||||
background: var(--panel-2);
|
||||
border: 1px solid var(--border);
|
||||
border-bottom-width: 2px;
|
||||
font-family: ui-monospace, Consolas, monospace;
|
||||
font-size: 12px;
|
||||
color: var(--text);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 10px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.stat {
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 12px 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
color: var(--muted);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
display: block;
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-size: 14px;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.layout {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.stats {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
|
||||
.side {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.side-card {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.keys-card {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.control-row {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.controls button {
|
||||
appearance: none;
|
||||
cursor: pointer;
|
||||
width: 64px;
|
||||
height: 56px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--panel);
|
||||
color: var(--text);
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.controls button:active {
|
||||
background: var(--panel-2);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.app-subtitle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import './index.css'
|
||||
import App from './App.jsx'
|
||||
|
||||
createRoot(document.getElementById('root')).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
)
|
||||
@@ -0,0 +1,7 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
})
|
||||
Reference in New Issue
Block a user