You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: DOCUMENTATION.md
+15-14Lines changed: 15 additions & 14 deletions
Original file line number
Diff line number
Diff line change
@@ -5,51 +5,52 @@ Throughout the project I've attempted to document and leave comments. Go ahead a
5
5
In the root of this project you'll find configuration files as well as three folders:
6
6
7
7
-[src →](src/) The web root.
8
+
-[content](src/content) contains cards, dungeons, encounters and monsters etc.
8
9
-[game](src/game) contains the core game logic
9
-
-[content](src/content) uses methods from the game engine to build cards, dungeon and monsters
10
10
-[ui](src/ui) is the example web interface to actually play the game
11
11
-[public →](public/) Copied to the web root as-is
12
12
-[tests →](tests/) Contains all tests for the game engine. Nothing for the UI. Run `npm test`.
13
13
14
-
## Src
14
+
## Coding style
15
15
16
-
This is the full source code of the game _and_ UI. The game logic does not concern with the UI.
16
+
- JavaScript (ES modules)
17
+
- Web components and Preact HTM for rendering
18
+
- Immer for immutable state updates
19
+
- Error handling: Use try/catch sparingly; prefer validation and early returns
20
+
- JSDoc for documentation
21
+
- No semicolons, single quotes, tabs
17
22
18
23
### Game
19
24
20
25
#### Game State
21
26
22
-
The full game state is always stored in a single, large "game state" object. It is everything needed to reproduce a certain state of the game. Everything is synchronous. It does not care about your UI. The state is always modified using "actions".
27
+
The full game state is always stored in a single, large "game state" object. It is everything needed to reproduce a certain state of the game. It does not know about your UI. The state is modified using synchronous "actions".
23
28
24
29
#### Actions
25
30
26
31
An action is a function that takes a `state` object, modifies it, and returns a new one. There are actions for drawing a card, dealing damage, applying a debuff... everything you want to do, there's an action.
27
32
28
-
See all actions in [actions.js](src/game/actions.js). Most have comments and corresponding tests you can check.
33
+
See all (mostly well documented) actions in [actions.js](src/game/actions.js).
29
34
30
35
#### Action Manager
31
36
32
-
As said, actions return a new state. They don't modify the original state. To keep track of all the moves (actions) made, we use the "action manager" to queue and dequeue them.
37
+
As said, actions return a new state. To keep track of actions made, we use an "action manager" to queue and dequeue them.
33
38
34
39
Run `enqueue(action)` to add an action to the list.
35
40
Run `dequeue()` to update the state with the changes from the oldest action in the queue.
36
41
37
-
> Note, you don't pass an action directly to the action manager. Rather you pass an object. Like this: `{type: 'nameOfAction', damage: 5, ... more properties}`.
42
+
> Note, you don't pass an action directly to the action manager. Rather you pass a description, like so: `{type: 'nameOfAction', damage: 5, ... more properties}`.
38
43
39
44
#### Cards
40
45
41
-
You have a deck of cards. Cards have different energy cost and can trigge other game actionswhen they are played.
46
+
You have a deck of cards. Cards have energy cost, have target(s), can deal damage and block, trigger game actions, apply powers (de/buffs) when played and have conditions that decide when they can be played.
42
47
43
-
1. Cards start in the "draw pile".
44
-
2. From there they are drawn to the "hand"
45
-
3. ...and finally, once played, to the "discard pile".
48
+
Cards move from the "draw pile" into your hand, and once played to the discard pile.
46
49
47
-
Once the draw pile is empty, and you attempt to draw, the discard pile is reshuffled into the draw pile.
50
+
If the draw pile has fewer cards than you attempt to draw, the discard pile is shuffled into the draw pile.
48
51
49
52
Cards also have a `target` property to suggest which targets the card should affect.
50
53
51
-
For more advanced cards, you can define (custom) actions to run when the card is played. To limit when a a card can be played, use "conditions" (see the source code).
52
-
53
54
#### Powers
54
55
55
56
Cards can apply "powers". A power is a status effect or aura that usually lasts one or more turns. It can target the player, a monster or all enemies. A power could do literally anything, but an example is the "Vulnerable" power, which makes the target take 50% more damage for two turns.
Copy file name to clipboardExpand all lines: README.md
+26-40Lines changed: 26 additions & 40 deletions
Original file line number
Diff line number
Diff line change
@@ -1,71 +1,57 @@
1
1
# Slay the Web
2
2
3
-
A digital, single player deckbuilding roguelike card game for the web based on Slay The Spire,
3
+
A single player deck-building roguelike video card game for the web based on Slay The Spire,
4
4
a fantastic video game designed by [MegaCrit](https://www.megacrit.com/).
5
5
6
+
### [Play on slaytheweb.cards](https://slaytheweb.cards/)
6
7
7
-
### [Play on slaytheweb.cards](https://slaytheweb.cards/)
8
8
### [Chat on #slaytheweb:matrix.org](https://matrix.to/#/#slaytheweb:matrix.org)
9
9
10
10
<ahref="https://slaytheweb.cards"><imgsrc="https://i.imgur.com/m9CRCsa.png"alt="Screenshot of Slay the Web"width="640"></a>
11
11
12
+
## Background
13
+
12
14
After many runs in the Spire, I got into the theory behind the game. Inspired by the STS modding community, I thought it'd be fun and a great learning experience to try and implement the core logic of the game in JavaScript for the web. And that is what _Slay the Web_ is: a kind of stable, UI agnostic game engine with an example UI for the web.
13
15
14
-
## State of the game
16
+
## Updates
15
17
16
-
December 2023. The core mechanics seem to work. There is a [dynamic map](https://slaytheweb.cards/map-demo) you can navigate with different rooms and monsters. You can fight against them using your cards and their powers.
18
+
See the CHANGELOG.md file.
17
19
18
-
There are many things that would make it more fun to play:
20
+
## Development
19
21
20
-
- new cards
21
-
- new powers
22
-
- more monsters
23
-
- expand the map into multiple "worlds" (or acts...)
24
-
- better UI and animations
25
-
- optimize UI for mobile
22
+
TLDR;
23
+
24
+
1. Clone the repository
25
+
2. Run `npm install` followed by `npm run dev` to open a local development server.
26
26
27
-
See the [open issues](https://github.com/oskarrough/slaytheweb/issues). Have an idea? Please [open a new issue](https://github.com/oskarrough/slaytheweb/issues/new).
28
27
29
28
## Documentation
30
29
31
30
If you're interested in contributing to the game or merely curious how it works:
32
31
33
32
-[The documentation](DOCUMENTATION.md)
34
33
35
-
Or browse the code. Especially the game logic includes tons of comments (written in JSDoc).
34
+
Or browse the code. Especially the game logic includes tons of comments.
36
35
37
-
## Development
36
+
See the [open issues](https://github.com/oskarrough/slaytheweb/issues).
37
+
Have an idea? Please [open a new issue](https://github.com/oskarrough/slaytheweb/issues/new).
38
38
39
-
TLDR;
40
-
41
-
1. Clone the repository
42
-
2. Run `npm install` followed by `npm run dev` to open a local development server.
43
-
44
-
The `src/game` folder contains the actual game logic.
45
-
The `src/ui` folder is the website UI where you can actually play the game.
46
-
The `src/content` folder builds content for the game.
47
-
48
-
### Coding style
49
-
50
-
- JavaScript (ES modules)
51
-
- JSDoc for documentation
52
-
- No semicolons, single quotes, tabs
53
-
- Error handling: Use try/catch sparingly; prefer validation and early returns
54
-
55
-
## Architecture
56
-
-`src/game/` - Core game logic
57
-
-`src/content/` - Game content definition (cards, encounters)
58
-
-`src/ui/` - Frontend components and UI logic
59
-
- Use Preact/HTM for components, Immer for immutable state updates
39
+
There are many areas that would make it more fun to play:
60
40
41
+
- new cards
42
+
- new powers
43
+
- more monsters
44
+
- expand the map into multiple "worlds" (or acts...)
45
+
- better UI and animations
46
+
- optimize UI for mobile
61
47
62
48
## How to release a new version (aka deploy)
63
49
64
-
Every commit to the `main` branch automatically deploys to https://slaytheweb.cards via the Vercel service.
50
+
Every commit to the `main` branch automatically deploys to https://slaytheweb.cards via the Vercel service.
65
51
66
-
If you open a PR, it'll give you a preview URL as well for testing.
52
+
If you open a PR, it'll give you a preview URL where we can see if things are as expected.
67
53
68
-
To update `CHANGELOG.md`, run `bunx release-it` and follow the prompts. We do not use GitHub releases.
54
+
To update the `CHANGELOG.md`, run `bun run release` and follow the prompts. We do not use GitHub releases.
69
55
70
56
## References
71
57
@@ -100,7 +86,7 @@ To update `CHANGELOG.md`, run `bunx release-it` and follow the prompts. We do no
0 commit comments