docs: extend docker instructions

web/pw-server/src/routes/docs/doc.svelte

@@ -7,5 +7,4 @@
   .container {
     max-width: 800px;
   }
-
 </style>

web/pw-server/src/routes/docs/local-development.md

@@ -1,23 +1,31 @@
-## Local development
+# Local development
 
-Besides using the web editor, it is also possible to develop a bot in your own development environment.  
+Besides using the web editor, it is also possible to develop a bot in your own development environment.
-Using the `planetwars-client` you can play test matches remotely, with your bot running on your computer.  
-You can then submit your bot to the server as a docker container.  
 
-### Playing matches with a local bot
+Using the `planetwars-client` you can play matches remotely, with your bot running on your computer.
+This is similar to using the "Play" button in the web editor.
+
+You can then submit your bot to the server as a docker container.
+
+This way, you can author bots in any language or tool you want - as long as you can dockerize it.
+
+## Running your bot locally
 
 You can use the `planetwars-client` to play matches locally.
 
 Currently, no binaries are available, so you'll have to build the client from source.
 
-#### Building the binary
+### Building the binary
+
 If you do not have a rust compiler installed already, obtain one through https://rustup.rs/.
+
 1. Clone the repository:  
    `git clone https://github.com/iasoon/planetwars.dev.git`
 2. Build and install the client:  
    `cargo install --path planetwars.dev/planetwars-client`
 
-#### Create a bot config
+### Create a bot config
+
 The bot config file specifies how to run your bot. Create a file `mybot.toml` with contents like so:
 
 ```toml
@@ -30,20 +38,58 @@ command = "python simplebot.py"
 working_directory = "/home/user/simplebot"
 ```
 
-#### Playing a match
+### Playing a match
-Run `planetwars-client /path/to/mybot.toml opponent_name`
+
+Run `planetwars-client path/to/mybot.toml opponent_name`
 
 Try `planetwars-client --help` for more options.
 
+## Publishing your bot as a docker container
 
-### Publishing your bot as a docker container
 Once you are happy with your bot, you can push it to the planetwars server as a docker container.
 
-1. **Create a bot.**   
+First, we will containerize our bot.
-   Before you can publish a new bot version, you will first need a registered bot name.
+
-   You can use an existing name, or you can create one by using the "New bot" button on your user profile page (you can get there by clicking your name in the navbar).
+### Containerizing your bot
-2. Log in to the planetwars docker registry:  
+
+Our project directory looks like this:
+
+```
+simplebot/
+├── Dockerfile
+└── simplebot.py
+```
+
+We used this basic dockerfile. You can reuse this for simple python-based bots.
+
+```Dockerfile
+FROM python:3.10.1-slim-buster
+WORKDIR /app
+COPY simplebot.py simplebot.py
+CMD python simplebot.py
+```
+
+Refer to https://docs.docker.com for guides on how to write your own dockerfile.
+
+In the directory that contains your `Dockerfile`, run the following command:
+```bash
+docker build -t my-bot-name .
+```
+If all went well, your docker daemon now holds a container tagged as `my-bot-name`.
+
+### Publishing the bot
+
+1. **Create a bot**:  
+   Before you can publish your container, you will first need to create a bot on planetwars.dev.  
+   You can create a new bot by clicking the "New bot" button on your user profile page.  
+   If you have an existing bot that you wish to overwrite, you can use that instead.
+2. **Log in to the planetwars docker registry**:  
    `docker login registry.planetwars.dev`  
-3. Tag and push your bot to `registry.planetwars.dev/my-bot-name:latest`.
+   Authenticate using your planetwars.dev credentials.
-4. Your bot should be up and running now! Feel free to launch a game against it to test whether all is working well.
+3. **Tag your bot**:  
-   Shortly, your bot should show up in the rankings.
+   `docker tag my-bot-name registry.planetwars.dev/my-bot-name`
+4. **Push your bot**:  
+   `docker push registry.planetwars.dev/my-bot-name`  
+   This will upload the container to planetwars.dev, and automatically create a new bot version.
+
+That was it! If all went well, you should be able to see the new version on your bot page.

web/pw-server/src/styles/global.scss

@@ -1,4 +1,4 @@
 @forward "./variables.scss";
 @forward "./buttons.scss";
+@forward "./markdown.scss";
 @forward "./prism.scss";
-@forward "./markdown.scss"

web/pw-server/src/styles/markdown.scss

@@ -3,8 +3,15 @@
 .markdown-body {
   color: rgb(36, 41, 47);
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
-  "Open Sans", "Helvetica Neue", sans-serif;
+    "Open Sans", "Helvetica Neue", sans-serif;
 
+  h2 {
+    margin-top: 1.5em;
+  }
+
+  h3 {
+    margin-top: 1.2em;
+  }
 
   a {
     color: variables.$blue-primary;
@@ -32,6 +39,6 @@
   }
 
   li {
-    padding: .5em;
+    margin-bottom: 1em;
   }
-}
+}

web/pw-server/src/styles/prism.scss

@@ -5,82 +5,82 @@
 
 code[class*="language-"],
 pre[class*="language-"] {
-    color: #393a34;
+  color: #393a34;
-    font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
+  font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
-    direction: ltr;
+  direction: ltr;
-    text-align: left;
+  text-align: left;
-    white-space: pre;
+  white-space: pre;
-    word-spacing: normal;
+  word-spacing: normal;
-    word-break: normal;
+  word-break: normal;
-    font-size: 0.9em;
+  font-size: 0.9em;
-    line-height: 1.2em;
+  line-height: 1.2em;
 
-    -moz-tab-size: 4;
+  -moz-tab-size: 4;
-    -o-tab-size: 4;
+  -o-tab-size: 4;
-    tab-size: 4;
+  tab-size: 4;
 
-    -webkit-hyphens: none;
+  -webkit-hyphens: none;
-    -moz-hyphens: none;
+  -moz-hyphens: none;
-    -ms-hyphens: none;
+  -ms-hyphens: none;
-    hyphens: none;
+  hyphens: none;
 }
 
 pre > code[class*="language-"] {
-    font-size: 1em;
+  font-size: 1em;
 }
 
 pre[class*="language-"]::-moz-selection,
 pre[class*="language-"] ::-moz-selection,
 code[class*="language-"]::-moz-selection,
 code[class*="language-"] ::-moz-selection {
-    background: #b3d4fc;
+  background: #b3d4fc;
 }
 
 pre[class*="language-"]::selection,
 pre[class*="language-"] ::selection,
 code[class*="language-"]::selection,
 code[class*="language-"] ::selection {
-    background: #b3d4fc;
+  background: #b3d4fc;
 }
 
 /* Code blocks */
 pre[class*="language-"] {
-    padding: 1em;
+  padding: 1em;
-    margin: 0.5em 0;
+  margin: 0.5em 0;
-    overflow: auto;
+  overflow: auto;
-    border: 1px solid #dddddd;
+  border: 1px solid #dddddd;
-    background-color: white;
+  background-color: white;
 }
 
 /* Inline code */
 :not(pre) > code[class*="language-"] {
-    padding: 0.2em;
+  padding: 0.2em;
-    padding-top: 1px;
+  padding-top: 1px;
-    padding-bottom: 1px;
+  padding-bottom: 1px;
-    background: #f8f8f8;
+  background: #f8f8f8;
-    border: 1px solid #dddddd;
+  border: 1px solid #dddddd;
 }
 
 .token.comment,
 .token.prolog,
 .token.doctype,
 .token.cdata {
-    color: #999988;
+  color: #999988;
-    font-style: italic;
+  font-style: italic;
 }
 
 .token.namespace {
-    opacity: 0.7;
+  opacity: 0.7;
 }
 
 .token.string,
 .token.attr-value {
-    color: #e3116c;
+  color: #e3116c;
 }
 
 .token.punctuation,
 .token.operator {
-    color: #393a34; /* no highlight */
+  color: #393a34; /* no highlight */
 }
 
 .token.entity,
@@ -93,34 +93,34 @@ pre[class*="language-"] {
 .token.property,
 .token.regex,
 .token.inserted {
-    color: #36acaa;
+  color: #36acaa;
 }
 
 .token.atrule,
 .token.keyword,
 .token.attr-name,
 .language-autohotkey .token.selector {
-    color: #00a4db;
+  color: #00a4db;
 }
 
 .token.function,
 .token.deleted,
 .language-autohotkey .token.tag {
-    color: #9a050f;
+  color: #9a050f;
 }
 
 .token.tag,
 .token.selector,
 .language-autohotkey .token.keyword {
-    color: #00009f;
+  color: #00009f;
 }
 
 .token.important,
 .token.function,
 .token.bold {
-    font-weight: bold;
+  font-weight: bold;
 }
 
 .token.italic {
-    font-style: italic;
+  font-style: italic;
 }