diff --git a/public/img/instructions/game-start.webp b/public/img/instructions/game-start.webp new file mode 100644 index 0000000..ed2cf13 Binary files /dev/null and b/public/img/instructions/game-start.webp differ diff --git a/public/img/instructions/hexagon-gem.webp b/public/img/instructions/hexagon-gem.webp new file mode 100644 index 0000000..687b13a Binary files /dev/null and b/public/img/instructions/hexagon-gem.webp differ diff --git a/public/img/instructions/leaderboard.webp b/public/img/instructions/leaderboard.webp new file mode 100644 index 0000000..06667af Binary files /dev/null and b/public/img/instructions/leaderboard.webp differ diff --git a/public/img/instructions/matchmaking.webp b/public/img/instructions/matchmaking.webp new file mode 100644 index 0000000..1c58ce6 Binary files /dev/null and b/public/img/instructions/matchmaking.webp differ diff --git a/public/img/instructions/profile-replays.webp b/public/img/instructions/profile-replays.webp new file mode 100644 index 0000000..28a9a0f Binary files /dev/null and b/public/img/instructions/profile-replays.webp differ diff --git a/public/img/instructions/replay.webp b/public/img/instructions/replay.webp new file mode 100644 index 0000000..475a63a Binary files /dev/null and b/public/img/instructions/replay.webp differ diff --git a/public/img/instructions/room-creation.webp b/public/img/instructions/room-creation.webp new file mode 100644 index 0000000..637478a Binary files /dev/null and b/public/img/instructions/room-creation.webp differ diff --git a/public/img/instructions/three-hexagons.webp b/public/img/instructions/three-hexagons.webp new file mode 100644 index 0000000..bb5a166 Binary files /dev/null and b/public/img/instructions/three-hexagons.webp differ diff --git a/public/img/instructions/tile-placement.webp b/public/img/instructions/tile-placement.webp new file mode 100644 index 0000000..4084d5a Binary files /dev/null and b/public/img/instructions/tile-placement.webp differ diff --git a/public/img/instructions/trade.webp b/public/img/instructions/trade.webp new file mode 100644 index 0000000..b43015e Binary files /dev/null and b/public/img/instructions/trade.webp differ diff --git a/public/img/instructions/two-hexagons.webp b/public/img/instructions/two-hexagons.webp new file mode 100644 index 0000000..e93c75c Binary files /dev/null and b/public/img/instructions/two-hexagons.webp differ diff --git a/routes/index.js b/routes/index.js index 66fc5c5..7fe772d 100644 --- a/routes/index.js +++ b/routes/index.js @@ -23,6 +23,11 @@ router.use("/leaderboard", (req, res) => { res.render("pages/leaderboard"); }); +// Load the instructions route +router.use("/instructions", (req, res) => { + res.render("pages/instructions"); +}); + // Load the game route router.use("/game", (req, res) => { res.render("pages/game"); diff --git a/views/components/main-header.ejs b/views/components/main-header.ejs index 1b1454f..b77958c 100644 --- a/views/components/main-header.ejs +++ b/views/components/main-header.ejs @@ -12,8 +12,8 @@ class="mr-5 <%= currentPage === 'play-now' ? 'text-gray-900' : 'hover:text-gray-900' %>">Play Now Leaderboard - How to Play + How to Play My diff --git a/views/pages/instructions.ejs b/views/pages/instructions.ejs new file mode 100644 index 0000000..cfe3a5e --- /dev/null +++ b/views/pages/instructions.ejs @@ -0,0 +1,168 @@ + + + + + <%- include("../components/head") %> + + Tridecco | How to Play + + + + <%- include("../components/main-header", { currentPage: "instructions" }) %> + + + + How to Play Tridecco (Online) + ← Return to Home + + + + + + + Getting Started + + + Option 1: Create or Join a Room + + From the home page, you can either create a new room or join an existing one. If you create a room, you will receive a unique room code that other players can use to join. Alternatively, browse the room list to find and join a public room. + + + + + + + Option 2: Use Matchmaking + + Head to the Play Now page to enter the matchmaking queue. Once enough players are gathered, the game will start automatically. This is a quick and easy way to find opponents. + + + + + + + + + Game Rules + + + Objective + + On your turn, place tiles at different positions on the board. To win, get rid of all of your tiles before the other players do. + + + + + + Game Modes + + Choose between single round and multiple round modes, and select the number of players for each game. Single round games are quick and intense, while multiple round games allow for more strategic play. + + + + + + Starting the Game + + At the start of a basic game, the first player tosses one of their tiles into the air. Where it lands determines their starting placement. Play continues clockwise. + + + + + + + Tile Placement + + Each player places a tile adjacent to any other tile on the board. + + + + + + + Forming a Hexagon Gem + + If a player places a tile in a way that forms a hexagon gem of a single color, that player can play another tile. Otherwise, it’s the next player’s turn. + + + + + + + Winning the Game + + The first player to get rid of all their tiles wins the game. + + + + + + Advanced Rules: To Trade + + Each player has the option to trade every turn. If the other players reject the trade, the player can place a tile or offer a new trade with a different player. + + + + + + + Advanced Rules: Ending a Turn + + A turn ends when the player places a tile that does not form a gem or when the player completes a trade. + + + + + + Advanced Rules: Forming 2 Hexagons + + After the player forms two gems, they can force trade with another layer (opponent cannot decline) AND can place another tile. + + + + + + + Advanced Rules: Forming 3 Hexagons + + At any time, when three gems are formed in one placement, the player wins the round immediately. + + + + + + + + + Endgame and Player Progression + + + Experience Points and Ranking + + At the end of each game, players earn experience points based on their rank. These points contribute to your leaderboard position, allowing you to climb the ranks and showcase your skills. + + + + + + + Replays and Game History + + All your game records, including detailed replays, are available on your profile. Use this feature to analyze your strategies and improve your gameplay. + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/views/pages/leaderboard.ejs b/views/pages/leaderboard.ejs index a523efb..d4a35a4 100644 --- a/views/pages/leaderboard.ejs +++ b/views/pages/leaderboard.ejs @@ -7,6 +7,16 @@ Tridecco | Leaderboard +
+ From the home page, you can either create a new room or join an existing one. If you create a room, you will receive a unique room code that other players can use to join. Alternatively, browse the room list to find and join a public room. +
+ Head to the Play Now page to enter the matchmaking queue. Once enough players are gathered, the game will start automatically. This is a quick and easy way to find opponents. +
+ On your turn, place tiles at different positions on the board. To win, get rid of all of your tiles before the other players do. +
+ Choose between single round and multiple round modes, and select the number of players for each game. Single round games are quick and intense, while multiple round games allow for more strategic play. +
+ At the start of a basic game, the first player tosses one of their tiles into the air. Where it lands determines their starting placement. Play continues clockwise. +
+ Each player places a tile adjacent to any other tile on the board. +
+ If a player places a tile in a way that forms a hexagon gem of a single color, that player can play another tile. Otherwise, it’s the next player’s turn. +
+ The first player to get rid of all their tiles wins the game. +
+ Each player has the option to trade every turn. If the other players reject the trade, the player can place a tile or offer a new trade with a different player. +
+ A turn ends when the player places a tile that does not form a gem or when the player completes a trade. +
+ After the player forms two gems, they can force trade with another layer (opponent cannot decline) AND can place another tile. +
+ At any time, when three gems are formed in one placement, the player wins the round immediately. +
+ At the end of each game, players earn experience points based on their rank. These points contribute to your leaderboard position, allowing you to climb the ranks and showcase your skills. +
+ All your game records, including detailed replays, are available on your profile. Use this feature to analyze your strategies and improve your gameplay. +