Skip to content

Commit af5cb1e

Browse files
daedalistdaedalist
committed
Merge branch 'ci-workflow' of github.com:daedalist/ghostbook into ci-workflow
2 parents 355bfd2 + 605d5a6 commit af5cb1e

File tree

2 files changed

+146
-23
lines changed

2 files changed

+146
-23
lines changed

‎README.md‎

Lines changed: 138 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,155 @@
11
# Phasmophobia Ghostbook
22

3-
A little web app for [Phasmophobia](https://store.steampowered.com/app/739630/Phasmophobia/)
4-
to keep track of evidence and narrow down which ghost you are hunting (or is
5-
hunting you)!
3+
A web app for [Phasmophobia](https://store.steampowered.com/app/739630/Phasmophobia/) to keep track of evidence and narrow down which ghost you are hunting (or is hunting you)!
64

7-
Written in React, and bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
5+
Built with Next.js and deployed as a static site.
86

9-
If you're here for the actual app, go to [daedalist.github.io/ghostbook](https://daedalist.github.io/ghostbook/)
7+
🔗 **Live App**: [daedalist.github.io/ghostbook](https://daedalist.github.io/ghostbook/)
108

11-
## Getting started
9+
## Features
1210

13-
To download and tinker with this code, just do the following:
11+
- **Evidence Tracking**: Click evidence to cycle through states (Not Selected → Selected → Ruled Out)
12+
- **Smart Ghost Filtering**: Automatically filters possible ghosts based on your evidence
13+
- **Evidence Disabling**: Grays out evidence that's impossible based on current selections
14+
- **Reset Function**: Clear all evidence with one click
15+
- **Responsive Design**: Works on desktop and mobile devices
1416

15-
```sh
16-
git clone git@github.com:daedalist/ghostbook.git
17-
cd ghostbook
18-
npm install
17+
## Getting Started
18+
19+
### Prerequisites
20+
21+
- Node.js (version 14 or higher)
22+
- npm
23+
24+
### Installation
25+
26+
1. Clone the repository:
27+
```bash
28+
git clone https://github.com/daedalist/ghostbook.git
29+
cd ghostbook
30+
```
31+
32+
2. Install dependencies:
33+
```bash
34+
npm install
35+
```
36+
37+
3. Run the development server:
38+
```bash
39+
npm run dev
40+
```
41+
42+
4. Open [http://localhost:3000](http://localhost:3000) in your browser
43+
44+
## Available Scripts
45+
46+
### Development
47+
- `npm run dev` - Start development server with hot reloading
48+
- `npm run build` - Build the app for production
49+
- `npm start` - Serve the built app locally
50+
51+
### Testing & Deployment
52+
- `npm run test:github-pages` - Test the app as it will appear on GitHub Pages
53+
- `npm run clean` - Remove build artifacts and test files
54+
55+
## How to Use
56+
57+
1. **Select Evidence**: Click on evidence types as you discover them in-game
58+
- First click: Mark as "Selected" (white background)
59+
- Second click: Mark as "Ruled Out" (gray background with strikethrough)
60+
- Third click: Return to "Not Selected"
61+
62+
2. **View Possible Ghosts**: The right panel shows ghosts ranked by likelihood based on your evidence
63+
64+
3. **Evidence Auto-Disable**: Evidence that becomes impossible will be grayed out automatically
65+
66+
4. **Reset**: Use the "Reset" button to clear all evidence and start fresh
67+
68+
## Technology Stack
69+
70+
- **Next.js 15** - React framework with static site generation
71+
- **React 18** - UI library
72+
- **CSS** - Custom styling with CSS Grid and Flexbox
73+
- **GitHub Pages** - Static site hosting
74+
75+
## Project Structure
76+
77+
```
78+
src/
79+
├── app/
80+
│ ├── layout.tsx # Root layout with metadata
81+
│ ├── globals.css # Global styles
82+
│ └── [[...slug]]/ # Catch-all route for SPA behavior
83+
│ ├── page.tsx # Main page component
84+
│ └── client.tsx # Client-side wrapper
85+
├── components/
86+
│ ├── Ghostbook.jsx # Main application component
87+
│ ├── ObservationList.jsx # Evidence tracking interface
88+
│ └── CandidateList.jsx # Ghost filtering display
89+
└── lib/
90+
├── ghost.js # Ghost and evidence data
91+
├── ghost_data_map.json # Ghost evidence mappings
92+
└── evidenceState.js # Evidence state constants
1993
```
2094

21-
## Select commands
95+
## Development Notes
96+
97+
### Migration from Create React App
98+
99+
This project was migrated from Create React App to Next.js to take advantage of:
100+
- Better build optimization and tree-shaking
101+
- Automatic code splitting
102+
- Static site generation
103+
- Foundation for future server-side features
104+
105+
The app currently runs as a Single Page Application (SPA) using Next.js static export for GitHub Pages compatibility.
106+
107+
### Evidence State Management
108+
109+
Evidence states are managed using JavaScript Maps and React class component state. Each evidence type can be in one of four states:
110+
- `NOT_SELECTED` - Default state
111+
- `SELECTED` - User has confirmed this evidence
112+
- `RULED_OUT` - User has confirmed this evidence is NOT present
113+
- `DISABLED` - Evidence is impossible based on current ghost candidates
114+
115+
### Ghost Scoring Algorithm
116+
117+
Ghosts are scored based on evidence:
118+
- +10 points for each matching primary evidence
119+
- +5 points for each matching fake evidence
120+
- -10 points (elimination) for contradictory evidence
121+
122+
## Deployment
123+
124+
The app is configured for static deployment to GitHub Pages:
125+
126+
1. Build the static site:
127+
```bash
128+
npm run build
129+
```
130+
131+
2. The `build/` directory contains all static files ready for deployment
132+
133+
3. GitHub Pages serves from the `/ghostbook` path, configured via `basePath` in `next.config.js`
22134

23-
### `npm start`
135+
## Contributing
24136

25-
Runs the app in the development mode.\
26-
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
137+
1. Fork the repository
138+
2. Create a feature branch (`git checkout -b feature/amazing-feature`)
139+
3. Commit your changes (`git commit -m 'Add amazing feature'`)
140+
4. Push to the branch (`git push origin feature/amazing-feature`)
141+
5. Open a Pull Request
27142

28-
The page will reload if you make edits.\
29-
You will also see any lint errors in the console.
143+
## License
30144

31-
### `npm run build`
145+
This project is open source and available under the [MIT License](LICENSE).
32146

33-
Builds the app for production to the `build` folder.\
34-
It correctly bundles React in production mode and optimizes the build for the best performance.
147+
## Acknowledgments
35148

36-
## More about Create React App
149+
- [Phasmophobia](https://store.steampowered.com/app/739630/Phasmophobia/) by Kinetic Games
150+
- Ghost data and evidence information from the Phasmophobia community
151+
- Originally built with Create React App, migrated to Next.js
37152

38-
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
153+
---
39154

40-
To learn React, check out the [React documentation](https://reactjs.org/).
155+
Happy ghost hunting! 👻

‎src/components/Header.jsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export default function Header() {
2+
return (
3+
<header>
4+
<h1>Phasmophobia Ghostbook</h1>
5+
<p>Keep track of evidence and narrow down which ghost you are hunting!</p>
6+
</header>
7+
)
8+
}

0 commit comments

Comments
 (0)