Skip to content

Commit f8abdf0

Browse files
brandonkachenbrandonkachen
committed
feat: added fishies repo to showcase
1 parent 408f9bd commit f8abdf0

23 files changed

+3689
-0
lines changed

‎showcase/README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
# showcase
2+
23
Community showcase of projects built by Codebuff
34

45
## Projects
@@ -9,6 +10,7 @@ Community showcase of projects built by Codebuff
910
- [Maze Generator](https://github.com/narthur/maze-gen) - A maze generation visualization built with TypeScript
1011
- [Codebuff Tricks](https://github.com/narthur/codebuff-tricks) - A community-built wizard to help you set up new projects with Codebuff
1112
- Minecraft simple - A basic version of Minecraft running in the browser!
13+
- Fishies - An aquarium with various fishies
1214
- Code Analysis - A project by [Lachlan Gray](https://github.com/LachlanGray) to show interesting stats on any Github repo
1315

1416
## Cloning

‎showcase/fishies/.gitignore‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# Dependencies
2+
node_modules
3+
.pnp
4+
.pnp.js
5+
6+
# Production build
7+
dist
8+
build
9+
10+
# Testing
11+
coverage
12+
13+
# Environment
14+
.env
15+
.env.local
16+
.env.development.local
17+
.env.test.local
18+
.env.production.local
19+
20+
# Logs
21+
npm-debug.log*
22+
yarn-debug.log*
23+
yarn-error.log*
24+
pnpm-debug.log*
25+
26+
# Editor directories and files
27+
.vscode/*
28+
!.vscode/extensions.json
29+
.idea
30+
.DS_Store
31+
*.suo
32+
*.ntvs*
33+
*.njsproj
34+
*.sln
35+
*.sw?
36+
37+
# TypeScript
38+
*.tsbuildinfo

‎showcase/fishies/README.md‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
# Vite + React Template
2+
3+
A minimal React + TypeScript starter template using [Vite](https://vitejs.dev/) for fast development and building.
4+
5+
## Getting Started
6+
7+
```bash
8+
codebuff --create vite my-app
9+
10+
# In another terminal window:
11+
npm run dev
12+
```
13+
14+
## Available Scripts
15+
- `npm run dev` - Start development server
16+
- `npm run build` - Build for production
17+
- `npm run lint` - Run ESLint
18+
- `npm run preview` - Preview production build locally
19+
20+
## Learn More
21+
- [Vite Documentation](https://vitejs.dev/)
22+
- [React Documentation](https://react.dev/)

‎showcase/fishies/eslint.config.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import js from '@eslint/js'
2+
import globals from 'globals'
3+
import reactHooks from 'eslint-plugin-react-hooks'
4+
import reactRefresh from 'eslint-plugin-react-refresh'
5+
import tseslint from 'typescript-eslint'
6+
7+
export default tseslint.config(
8+
{ ignores: ['dist'] },
9+
{
10+
extends: [js.configs.recommended, ...tseslint.configs.recommended],
11+
files: ['**/*.{ts,tsx}'],
12+
languageOptions: {
13+
ecmaVersion: 2020,
14+
globals: globals.browser,
15+
},
16+
plugins: {
17+
'react-hooks': reactHooks,
18+
'react-refresh': reactRefresh,
19+
},
20+
rules: {
21+
...reactHooks.configs.recommended.rules,
22+
'react-refresh/only-export-components': [
23+
'warn',
24+
{ allowConstantExport: true },
25+
],
26+
},
27+
},
28+
)

‎showcase/fishies/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + React + TS</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.tsx"></script>
12+
</body>
13+
</html>

‎showcase/fishies/knowledge.md‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
# Vite + React Template Knowledge
2+
3+
## Project Overview
4+
A fish tank simulation with swimming fish, predator behavior, and interactive elements.
5+
6+
## Key Features
7+
- Fish swim with natural movement patterns
8+
- Fish speed up to escape when predators are nearby
9+
- Predators chase nearest prey
10+
- Collision detection between creatures
11+
- Death animations for caught fish
12+
13+
## Animation Guidelines
14+
- Use CSS transitions for smooth movement
15+
- Use 3D transforms for depth:
16+
- Container needs perspective: 2000px
17+
- Container needs transform-style: preserve-3d
18+
- Fish: ±200px depth, fast cycle
19+
- Shark: ±300px depth, medium cycle
20+
- Whale shark: ±400px depth, slow cycle
21+
- Scale with depth for more dramatic effect:
22+
- Fish: ±10% scale
23+
- Shark: ±15% scale
24+
- Whale shark: ±20% scale
25+
- Use rotateY instead of scaleX for direction changes
26+
- Remove transitions for immediate reactions to events
27+
- Add depth to environment:
28+
- Use transparent gradient layers in background
29+
- Animate container with subtle 3D movement
30+
- Create parallax effect with container animation
31+
- Death animation sequence:
32+
1. Fish straightens out when shark attacks
33+
2. When shark moves away, fish flips upside down
34+
3. After 500ms, transforms to skull (☠️) and starts fading
35+
4. Completes fade out over next 500ms
36+
- Scale emojis for different creature sizes
37+
38+
## Combat Mechanics
39+
- Shark must be moving towards fish to attack (within 30px range)
40+
- Fish speed increases based on distance to shark using quadratic easing
41+
- Whale shark protects fish by pushing shark away when nearby
42+
43+
## Game Balance
44+
- Base fish speed: 0.5 units (slow peaceful swimming)
45+
- Shark speed: 3 units (fast predator)
46+
- Whale shark speed: 4 units (fast enough to catch shark)
47+
- Fish speed multiplier: gradually increases up to 2x within 200px of shark
48+
- Protection distances:
49+
- Shark catching fish: 15px (must be within 15 degrees of directly facing fish)
50+
- Whale shark slaps shark away 250px when within 100px range
51+
52+
## Verifying changes
53+
After every change, run:
54+
```bash
55+
npm run lint && npm run typecheck
56+
```
57+
This will check for lint issues and type errors.

0 commit comments

Comments
 (0)