Free to play multiplayer catan style board game
npm i
npm start
The server will be reachable at localhost:3000. You're now ready to play the game…
I have an
.nvmrc
pointing to node versionv20.10
. Please use at leastv18
and above…
- Browser Notifications
- Optimization (memory1, speed, colors)
- Join random games
- Private & public games
- Watch games
- Custom map builder
- Rethink ports
- multiple in single Sea tile
- disallow connected edges of land being added as ports
- Introducing 8 player maps
- Social login (w pic and/or just a name/id)
- Discord help (for talking)
- Seafarers expansion (fairly easy one)
- Trade negotiations
- The map is decoded from left-to-right and top-to-bottom.
- Each
row
is seperated by a-
or+
representing its first-tile relationship to the first-tile of the previous row.-
makes it bottom-left and+
for bottom-right.<row> -<row> +<row> - <row>
- There can by any amount of
\s
(space) and\n
(newline) inbetween the rows and tiles. They are ignored by.trim()
. - Each
Tile
is separated by a.
(dot)<Tile> .<Tile> . <Tile>
- A Resource tile is represented by its key and
Number
next to each other.<TileKey><Number>
- A Sea tile (represented by
S
) can optionally have one trade.S(<Trade>)?
- A
Trade
is represented by its edgeTradeEdge
(of the Sea tile it's on), typeTradeType
and a numberTradeRatio
covered by()
(round braces) and split by_
(underscore).(<TradeEdge>_<TradeType><TradeRatio>)
- Surrounding your land with the sea is not necessary but recommended to get the beautiful sea shores.
- The robber will be placed in the last desert found during decoding.
const TileKey = { G: 'Grassland', J: 'Jungle', C: 'Clay Pit', M: 'Mountain', F: 'Fields', S: 'Sea', D: 'Desert' }
const Number = [2, 3, 4, 5, 6, 8, 9, 10, 11, 12]
const tradeEdge = {
tl: 'top_left', tr: 'top_right',
l: 'left', r: 'right',
bl: 'bottom_left', br: 'bottom_right',
}
const tradeTyp = { '*': 'All', S: 'Sheep', L: 'Lumber', B: 'Brick', O: 'Ore', W: 'Wheat' }
const tradeRatio = [2, 3]
This configuration…
const config = {
mapkey: `
S .S(bl_O2) .S(br_O2) .S
-S .M8 .D .M8 .S
-S .G9 .S .S .G9 .S
-S .F10 .S .S .S .F10.S
-S .S .C11 .S .S .C12 .S .S
-S .S .S .C2 .S .C3 .S .S .S
-S(r_L2).J6.J5 .J4 .S .S .J4 .J5 .J6 .S(l_L2)
+S .S .S .S .S .S .S .S .S
`
}
// Same as writing…
config.mapkey = `S.S(bl_O2).S(br_O2).S-S.M8.D.M8.S-S.G9.S.S.G9.S-S.F10.S.S.S.F10.S-S.S.C11.S.S.C12.S.S-S.S.S.C2.S.C3.S.S.S-S(r_L2).J6.J5.J4.S.S.J4.J5.J6.S(l_L2)+S.S.S.S.S.S.S.S.S`
- Mustache for rendering JSON data in HTML
- nodemon for ease of development
- random-words for generating game-keys
- cookie-parser for 🤷🏻♂️
-
Alert history -
Quit game -
Login & waiting room UI rework -
End Game
-
Accessibility (Zoom, Fullscreen, Sound, Shortcuts) -
Opponents UI -
Shuffler -
Longest Road & Largest Army -
Animations (DC, Cost, Build, Dice, Hand) -
Dev Card Actions -
Trade -
Keyboard Shortcuts -
Client Refactor -
Robber -
Basic Turn Actions -
Refactor server-side Game.js -
Page refresh state persistance -
Render Hand -
Distribute resource -
Place second house & road -
Place first house & road
-
Alert & Notification Messaging -
Timer System
-
Sound Collection -
Waiting Room
-
Socket IO setup -
Render Corners and Edges -
Render Board -
Image and Sprite Collection & Edit -
Login Page -
Simple Server -
Decoding the map from key
-
Road into the Sea
- Initial build - show the built house
-
Resource animation after dice animation - Music reminder
- Can play DC after dice, update text
- Trade denied/accepted message
- Remember player name
- Timer focus when few seconds left
- Game end, new game link
- Login splash image quick load
- larger screen number fix