server/templates/views/docs: Added the docs page

With information on how to play the game.

Also updated the README

Notes.md

@@ -0,0 +1,7 @@
+## Map
+
+Each line 18t wide, 16t of those are usable and the other 2t are the left and right corners
+
+The spawn area is 7tx16t and the end area is 3tx16t the building area is 74tx16t
+
+The separation between maps (if they are side by side) is of 10t and the vertical separation is also of 10t

README.md

@@ -1,9 +1,25 @@
+<p align="center">
+    <img src="server/assets/images/logo.png" width="400">
+</p>
+
 # Maze Wars
 
-## Map
+**Bring your enemies lives to 0 by stealing them with your summoned units passing through their mazes, but be careful, they'll do the same to you!**
+
+To **play** the game go to [maze-wars.com/play](https://maze-wars.com/play) and for **documentation** on how to play the game go to [maze-wars.com/docs](https://maze-wars.com/docs)
+
+<p align="center">
+    <img src="server/assets/images/game_sample.png">
+</p>
+
+# About the game
+
+I build this game based on a Warcraft 3 mod I use to play on a cybercafe, named [Line Tower Wars](https://www.epicwar.com/maps/159757/).
 
-Each line 18t wide, 16t of those are usable and the other 2t are the left and right corners
+I have no previous experience on building Games but I wanted to try to build this one as I was not able to find any new version of it
+that did not require you to have Warcraft installed.
 
-The spawn area is 7tx16t and the end area is 3tx16t the building area is 74tx16t
+The game is **UNDER HEAVY DEVELOPMENT** which means that bugs will happen and changes/improvement will be constant, as much as I can on my free time.
+At the end this is, for now, a really fun side project that I enjoy working on.
 
-The separation between maps (if they are side by side) is of 10t and the vertical separation is also of 10t
+I'm totally open to any type of suggestions about the game.

client/game.go

@@ -2,7 +2,6 @@ package client
 
 import (
 	"github.com/hajimehoshi/ebiten/v2"
-	"github.com/xescugc/maze-wars/action"
 	"github.com/xescugc/maze-wars/store"
 )
 
@@ -24,18 +23,10 @@ type Game struct {
 func (g *Game) Update() error {
 	g.Map.Update()
 	g.Camera.Update()
-	g.HUD.Update()
 	g.Units.Update()
 	g.Towers.Update()
+	g.HUD.Update()
 
-	if len(g.Store.Players.List()) == 0 {
-		actionDispatcher.Dispatch(action.NewAddPlayer("1", "test1", 0))
-		actionDispatcher.Dispatch(action.NewAddPlayer("2", "test2", 1))
-		actionDispatcher.Dispatch(action.NewAddPlayer("3", "test3", 2))
-		actionDispatcher.Dispatch(action.NewAddPlayer("4", "test4", 3))
-		actionDispatcher.Dispatch(action.NewAddPlayer("5", "test5", 4))
-		actionDispatcher.Dispatch(action.NewAddPlayer("6", "test6", 5))
-	}
 	actionDispatcher.TPS()
 
 	return nil

client/units.go

@@ -3,7 +3,6 @@ package client
 import (
 	"bytes"
 	"image"
-	"image/color"
 
 	"github.com/hajimehoshi/ebiten/v2"
 	"github.com/xescugc/maze-wars/assets"
@@ -86,9 +85,11 @@ func (us *Units) Draw(screen *ebiten.Image) {
 
 func (us *Units) DrawUnit(screen *ebiten.Image, c *CameraStore, u *store.Unit) {
 	cs := c.GetState().(CameraState)
-	for _, s := range u.Path {
-		screen.Set(int(s.X-cs.X), int(s.Y-cs.Y), color.Black)
-	}
+	// This is to display the full unit calculated path as a line
+	// used for testing visually the path
+	//for _, s := range u.Path {
+	//screen.Set(int(s.X-cs.X), int(s.Y-cs.Y), color.Black)
+	//}
 	if !u.IsColliding(cs.Object) {
 		return
 	}

server/assets/css/cover.css

@@ -16,13 +16,23 @@
  * Base structure
  */
 
+html {
+  margin: 0px;
+  height: 100%;
+  width: 100%;
+}
 body {
+  margin: 0px;
+  min-height: 100%;
+  width: 100%;
+
   text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
   box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
 }
 
 .cover-container {
-  max-width: 42em;
+  max-width: 50%;
+  /*max-width: 42em;*/
 }
 
 

server/new.go

@@ -39,6 +39,7 @@ func New(ad *ActionDispatcher, s *Store, opt Options) error {
 
 	r.HandleFunc("/play", playHandler).Methods(http.MethodGet)
 	r.HandleFunc("/game", gameHandler).Methods(http.MethodGet)
+	r.HandleFunc("/docs", docsHandler).Methods(http.MethodGet)
 	r.HandleFunc("/", homeHandler).Methods(http.MethodGet)
 
 	r.HandleFunc("/users", usersCreateHandler(s)).Methods(http.MethodPost).Headers("Content-Type", "application/json")
@@ -63,21 +64,30 @@ func New(ad *ActionDispatcher, s *Store, opt Options) error {
 	return nil
 }
 
+type templateData struct {
+	Tab string
+}
+
 func homeHandler(w http.ResponseWriter, r *http.Request) {
 	t, _ := templates.Templates["views/home/index.tmpl"]
-	t.Execute(w, nil)
+	t.Execute(w, templateData{"home"})
 }
 
 func playHandler(w http.ResponseWriter, r *http.Request) {
 	t, _ := templates.Templates["views/game/play.tmpl"]
-	t.Execute(w, nil)
+	t.Execute(w, templateData{"game"})
 }
 
 func gameHandler(w http.ResponseWriter, r *http.Request) {
 	t, _ := templates.Templates["views/game/game.tmpl"]
 	t.Execute(w, nil)
 }
 
+func docsHandler(w http.ResponseWriter, r *http.Request) {
+	t, _ := templates.Templates["views/docs/index.tmpl"]
+	t.Execute(w, templateData{"docs"})
+}
+
 type usersCreateRequest struct {
 	Username string `json:"username"`
 }

server/templates/templates.go

@@ -16,7 +16,7 @@ const (
 var (
 	layoutsDir = filepath.Join(viewsDir, "layouts")
 
-	//go:embed views/layouts/* views/home/* views/game/*
+	//go:embed views/layouts/* views/home/* views/game/* views/docs/*
 	files embed.FS
 
 	// Templates is the cache of all the templates we have

server/templates/views/docs/index.tmpl

@@ -0,0 +1,94 @@
+{{template "main" .}}
+{{define "title" }}
+  Maze Wars - Docs
+{{ end }}
+{{define "content"}}
+  <div>
+    <h1>Documentation</h1>
+    <p class="lead">
+      This section will explain the Game interface and how to play the game
+    </p>
+    </br>
+    <div class="px-3">
+      <img src="/images/game_sample.png" class="img-fluid">
+    </div>
+    </br>
+    <div style="text-align: justify">
+      <div class="px-3">
+        <h2>Abstract</h2>
+        <p class ="lead">
+          The purpose of the game is to <strong>steal the enemies lives</strong> by sending <strong>units</strong> that will traverse the enemy maze and when they reach the end of the enemy line a live would be taken from the enemy and gain by owner of the unit. The units that achieve to pass through and reach the end then they'll continue to the next enemy, this will continue until the unit dies or goes back to your line.
+        </p>
+        <p class ="lead">
+          To protect against the enemy units you have to build a maze using towers to slow the units path and kill them before they reach the end of your line.
+        </p>
+      </div>
+      <div class="px-3">
+        <h3>Lobby</h3>
+        <div class="text-center px-3">
+          <img src="/images/sign_up.png" class="img-fluid">
+        </div>
+        <p class ="lead">
+          When you first enter the game it'll ask for a <strong>username</strong> to identify yourself. For now there is no Sign Up so every time you'll have to enter the name you want to be seen as
+        </p>
+        <div class="text-center px-3">
+          <img src="/images/lobby.png" class="img-fluid">
+        </div>
+        <p class ="lead">
+          After that you enter the Lobby, where you can see the <strong>total number of players online</strong> and where you can also start to <strong>Play</strong> the Game.
+        </p>
+        <div class="text-center px-3">
+          <img src="/images/waiting_room.png" class="img-fluid">
+        </div>
+        <p class ="lead">
+          Once you click <strong>Play</strong> you enter a waiting room. This room is intended to match you with other players that also want to play the Game, as the player population is really low it also has a <strong>countdown</strong> where every <strong>10s</strong> it'll <strong>reduce the size</strong> from 6 to minimum of 2 as the game can be played by a maximum of 6 players or a minimum of 2.
+        </p>
+      </div>
+      <div class="px-3">
+        <h3>Units</h3>
+        <div class="text-center px-3">
+          <img src="/images/units.png" class="img-fluid">
+        </div>
+        <p class ="lead">
+          The Units that you can summon can be found on the bottom right of the screen on the tab Units. Every unit has a <strong>gold cost</strong> to summon and it provides an <strong>increase on the income</strong> of the player. And when killed they give gold to the player that killed it equal to the income they give when summoned.
+        </p>
+        <p class ="lead">
+          Units get <strong>summoned</strong> in a random place on the <strong>top gray section</strong> of the line and <strong>steal the live</strong> when they arrive at the <strong>bottom</strong> of the line, on the other <strong>gray area</strong>
+        </p>
+      </div>
+      <div class="px-3">
+        <h3>Towers</h3>
+        <div class="text-center px-3">
+          <img src="/images/towers.png" class="img-fluid">
+        </div>
+        <p class ="lead">
+          The Towers that you can build can be found on the bottom right of the screen on the tab Towers. Every tower has a gold cost to build. As of now there are 2 types of towers, range and melee.
+        </p>
+        <p class ="lead">
+          When building the towers you should try to extend the path that enemy units have to do to reach the end of your line by creating a maze that they have to traverse. I f you want to <strong>remove a build tower</strong> click on it and a cross will appear, click on it again and the tower will be removed and 50% of the gold will be given back to the player.
+        </p>
+      </div>
+      <div class="px-3">
+        <h3>Stats</h3>
+        <div class="text-center px-3">
+          <img src="/images/stats.png" class="img-fluid">
+        </div>
+        <p class ="lead">
+          This gives a general view of all the players in the Game, which are their lives and income.
+        </p>
+      </div>
+      <div class="px-3">
+        <h4>Income</h4>
+        <p class ="lead">
+          Every 15s you'll receive Gold equal to the income you have, to increase the income summon more units.
+        </p>
+      </div>
+      <div class="px-3">
+        <h4>Gold</h3>
+        <p class ="lead">
+          Gold is used to build towers and summon units, to get more gold kill enemy units or summon more units to increase the income
+        </p>
+      </div>
+    </div>
+  </div>
+{{ end}}

server/templates/views/home/index.tmpl

@@ -4,12 +4,17 @@
 {{ end }}
 {{define "content"}}
   <div class="px-3">
-		<h1>Maze Wars</h1>
-		<p class="lead">
-			Short description of the game
-		</p>
-		<p class="lead">
-			<a href="/play" class="btn btn-lg btn-light fw-bold border-white bg-white">Play</a>
-		</p>
-	</div>
+    <p class="lead">
+      <strong>Bring your enemies lives to 0 by stealing them</strong>
+    </p>
+    <p class="lead">
+      <strong>with your summoned units passing through their mazes,</strong>
+    </p>
+    <p class="lead">
+      <strong>but be careful, they'll do the same to you!</strong>
+    </p>
+    <p class="lead">
+      <a href="/play" class="btn btn-lg btn-light fw-bold border-white bg-white">Play</a>
+    </p>
+  </div>
 {{ end}}

server/templates/views/layouts/layout.tmpl

@@ -1,6 +1,6 @@
 {{define "main"}}
   <!DOCTYPE html>
-  <html class="h-100" lang="en">
+  <html lang="en">
     <head>
       <title>
         {{ template "title" . }}
@@ -19,18 +19,19 @@
           gtag('config', 'G-8W1NGJ7X95');
     </script>
 
-    <body class="d-flex h-100 text-center text-bg-dark">
-      <div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
+    <body class="d-flex text-center text-bg-dark">
+      <div class="cover-container d-flex w-100 p-3 mx-auto flex-column">
         <header class="mb-auto" >
           <div>
             <h3 class="float-md-start mb-0">
               <a class="text-decoration-none text-reset" href="/">
                 <img class="img-fluid logo" src="images/logo.png"/>
               </a>
-						</h3>
+            </h3>
             <nav class="nav nav-masthead justify-content-center float-md-end">
-              <a class="nav-link fw-bold py-1 px-0 active" href="/">Home</a>
-              <a class="nav-link fw-bold py-1 px-0">Docs</a>
+              <a class="nav-link fw-bold py-1 px-0 {{if eq .Tab "home"}}active{{end}}" href="/">Home</a>
+              <a class="nav-link fw-bold py-1 px-0 {{if eq .Tab "game"}}active{{end}}" href="/play">Game</a>
+              <a class="nav-link fw-bold py-1 px-0 {{if eq .Tab "docs"}}active{{end}}" href="/docs">Docs</a>
             </nav>
           </div>
         </header>