Added most info for Mudus, did a bit of refactoring.

17 files changed, 127 insertions, 11 deletions

diff --git a/website/about.html b/website/about.html
index 45cff56..bccd26e 100644
--- a/website/about.html
+++ b/website/about.html
@@ -16,7 +16,7 @@
             <a href="./resume.html" class="other-tab">Resume</a>
         </div>
 
-        <div class=page  style="text-align: center;">
+        <div class=page-centered>
             Hello! <br>
             My name is Kamen, and I am a 18 year old high school student from Bulgaria. <br>
             My passion is programming and computers in general. <br>
diff --git a/website/credit.html b/website/credit.html
index 3c6b9c1..11da8e2 100644
--- a/website/credit.html
+++ b/website/credit.html
@@ -16,7 +16,7 @@
             <a href="./resume.html" class="other-tab">Resume</a>
         </div>
 
-        <div class="page" style="text-align: center;">
+        <div class=page-centered>
             <h2>This page is for crediting creators, whose stuff I use in this website</h2>
 
             <a href="https://iconscout.com/icons/github" target="_blank" class=hyperlink>Github Logo Icon</a> by <a href="https://iconscout.com/contributors/roundicons-com" target="_blank" class=hyperlink>Roundicons .com</a>
diff --git a/website/index.html b/website/index.html
index 2974cf2..234cabf 100644
--- a/website/index.html
+++ b/website/index.html
@@ -16,7 +16,7 @@
             <a href="./resume.html" class="other-tab">Resume</a>
         </div>
 
-        <div class=page style="text-align: center;">
+        <div class=page-centered>
             <h2>Welcome to my personal website</h2>
             Here I will share information that I know and can't find online and information about myself and my programming life.
             <br><br>
diff --git a/website/projects/index.html b/website/projects/index.html
index 87890c7..508bcd3 100644
--- a/website/projects/index.html
+++ b/website/projects/index.html
@@ -16,7 +16,7 @@
             <a href="../resume.html" class="other-tab">Resume</a>
         </div>
 
-        <div class=page style="text-align: center;">
+        <div class=page-centered>
             <a href="./mundus/introduction.html" class=hyperlink>Mundus</a>
         </div>
 
diff --git a/website/projects/mundus/basic-concepts.html b/website/projects/mundus/basic-concepts.html
index 49ec27d..a2a98b8 100644
--- a/website/projects/mundus/basic-concepts.html
+++ b/website/projects/mundus/basic-concepts.html
@@ -16,9 +16,11 @@
             <a href="./history.html" class=other-tab>History</a>
             <a href="./user-interface.html" class=other-tab>User Interface</a>
             <a href="./basic-concepts.html" class=selected-tab>Basic concepts</a>
+            <!--
             <a href="./data-layer.html" class=other-tab>Data Layer</a>
             <a href="./service-layer.html" class=other-tab>Service Layer</a>
             <a href="./view-layer.html" class=other-tab>View Layer</a>
+            -->
 
             <a href="../index.html" class=close style="margin-left: 92px;"><img src="../../images/ui/close.png" alt="Back"></a>
         </div>
@@ -39,10 +41,10 @@
             <p>
                 Items, however, are divided into: Structure, Ground, Material, Tool and Gear:
                 <ul>
-                    <li>Material tiles are primarly used for crafting. Some tools are "consumable", meaning they can be consumed by the mob, which removes them from the inventory and changes the value of some property. In your inventory they are surrounded in oringe [color the word].</li>
-                    <li>Gear tiles are something you equip (in your accessories and gear inventories) that boost your stats. In your inventory they are surrounded in purple [color the word].</li>
+                    <li>Material tiles are primarly used for crafting. Some tools are "consumable", meaning they can be consumed by the mob, which removes them from the inventory and changes the value of some property. In your inventory they are surrounded in <span style="color: #FF7F00;">oringe</span> .</li>
+                    <li>Gear tiles are something you equip (in your accessories and gear inventories) that boost your stats. In your inventory they are surrounded in <span style="color: #9932CC">purple</span>.</li>
                     <li>Ground tiles are the tiles on the superlayer ground. For example, grass, water, sand are all ground tiles, because structures and mobs will be walking on top of them.</li>
-                    <li>Structure tiles are tiles that can be placed in the world. For example, a tree is a type of structure tile. Some of them can be picked up. For example, a ladder is something you can have in your inventory, but something you can also place. They have a health and a dropped item (they drop their dropped item each time they're hurt). In your inventory they are surrounded in red [color the word].</li>
+                    <li>Structure tiles are tiles that can be placed in the world. For example, a tree is a type of structure tile. Some of them can be picked up. For example, a ladder is something you can have in your inventory, but something you can also place. They have a health and a dropped item (they drop their dropped item each time they're hurt). In your inventory they are surrounded in <span style="color: #ED3838">red</span>.</li>
                     <li>
                         Tool tiles are used for interracting (changing) the environment of the world. There are four types: Shovel, Axe, Pickaxe and Sword.
                         <ul>
@@ -51,7 +53,7 @@
                             <li>Pickaxes are used for breaking (removing) structures made from hard materials (rocks, boulders, ...).</li>
                             <li>Finally, swords are used for damaging mobs. </li>
                         </ul>
-                        Tools aren't interchangeable, you can't use an axe to mine a bouder or an axe to kill a cow. In your inventory they are surrounded in blue [color the word].
+                        Tools aren't interchangeable, you can't use an axe to mine a bouder or an axe to kill a cow. In your inventory they are surrounded in <span style="color: #0080FF">blue</span>.
                     </li>
                 </ul>
             </p>
diff --git a/website/projects/mundus/history.html b/website/projects/mundus/history.html
index ad3bc3f..86168fe 100644
--- a/website/projects/mundus/history.html
+++ b/website/projects/mundus/history.html
@@ -16,9 +16,11 @@
             <a href="./history.html" class=selected-tab>History</a>
             <a href="./user-interface.html" class=other-tab>User Interface</a>
             <a href="./basic-concepts.html" class=other-tab>Basic concepts</a>
+            <!--
             <a href="./data-layer.html" class=other-tab>Data Layer</a>
             <a href="./service-layer.html" class=other-tab>Service Layer</a>
             <a href="./view-layer.html" class=other-tab>View Layer</a>
+            -->
 
             <a href="../index.html" class=close style="margin-left: 92px;"><img src="../../images/ui/close.png" alt="Back"></a>
         </div>
diff --git a/website/projects/mundus/images/crafting-window.png b/website/projects/mundus/images/crafting-window.png
new file mode 100644
index 0000000..61a7127
--- /dev/null
+++ b/website/projects/mundus/images/crafting-window.png
diff --git a/website/projects/mundus/images/create-new-game.png b/website/projects/mundus/images/create-new-game.png
new file mode 100644
index 0000000..fe8d672
--- /dev/null
+++ b/website/projects/mundus/images/create-new-game.png
diff --git a/website/projects/mundus/images/inventory-menu.png b/website/projects/mundus/images/inventory-menu.png
new file mode 100644
index 0000000..297d408
--- /dev/null
+++ b/website/projects/mundus/images/inventory-menu.png
diff --git a/website/projects/mundus/images/main-screen.png b/website/projects/mundus/images/main-screen.png
new file mode 100644
index 0000000..bcf13c5
--- /dev/null
+++ b/website/projects/mundus/images/main-screen.png
diff --git a/website/projects/mundus/images/map-menu.png b/website/projects/mundus/images/map-menu.png
new file mode 100644
index 0000000..049bdc1
--- /dev/null
+++ b/website/projects/mundus/images/map-menu.png
diff --git a/website/projects/mundus/images/small-game-window.png b/website/projects/mundus/images/small-game-window.png
new file mode 100644
index 0000000..8af9885
--- /dev/null
+++ b/website/projects/mundus/images/small-game-window.png
diff --git a/website/projects/mundus/introduction.html b/website/projects/mundus/introduction.html
index deb83db..89dce6e 100644
--- a/website/projects/mundus/introduction.html
+++ b/website/projects/mundus/introduction.html
@@ -16,10 +16,11 @@
             <a href="./history.html" class=other-tab>History</a>
             <a href="./user-interface.html" class=other-tab>User Interface</a>
             <a href="./basic-concepts.html" class=other-tab>Basic concepts</a>
+            <!--
             <a href="./data-layer.html" class=other-tab>Data Layer</a>
             <a href="./service-layer.html" class=other-tab>Service Layer</a>
             <a href="./view-layer.html" class=other-tab>View Layer</a>
-
+            -->
             <a href="../index.html" class=close style="margin-left: 92px;"><img src="../../images/ui/close.png" alt="Back"></a>
         </div>
 
diff --git a/website/projects/mundus/user-interface.html b/website/projects/mundus/user-interface.html
index 9c7fa2a..8cd62f9 100644
--- a/website/projects/mundus/user-interface.html
+++ b/website/projects/mundus/user-interface.html
@@ -6,6 +6,22 @@
         <title>Mundus - User interface</title>
         <link rel="stylesheet" href="../../styles.css">
         <link rel="stylesheet" href="../../styles-multiple-page-articles.css">
+
+        <style media="screen">
+        span {
+            align-self: center;
+            vertical-align: middle;
+        }
+
+        img {
+            padding-right: 15px;
+            vertical-align: middle;
+        }
+
+        p {
+            display: flex;
+        }
+        </style>
     </head>
 
     <body>
@@ -16,14 +32,84 @@
             <a href="./history.html" class=other-tab>History</a>
             <a href="./user-interface.html" class=selected-tab>User Interface</a>
             <a href="./basic-concepts.html" class=other-tab>Basic concepts</a>
+            <!--
             <a href="./data-layer.html" class=other-tab>Data Layer</a>
             <a href="./service-layer.html" class=other-tab>Service Layer</a>
             <a href="./view-layer.html" class=other-tab>View Layer</a>
+            -->
 
             <a href="../index.html" class=close style="margin-left: 92px;"><img src="../../images/ui/close.png" alt="Back"></a>
         </div>
 
         <div class=page>
+            Note: all screenshots are made in Linux with Mint-Y theme.
+            <p>
+
+                <img src="./images/main-screen.png" alt="">
+                <span>
+                    We start off at the main screen. <br>
+                    Here you can load a save file (not implimented as of 21.05.2020), create a new game, view the tutorial (not implimented as of 21.05.2020), or change settings (not implimented as of 21.05.2020).
+                </span>
+            </p>
+            <p>
+                <img src="./images/create-new-game.png" alt="">
+                <span>
+                    Creating a game gives you a couple of options. <br><br>
+                    First one is Game Mode. Here you can select survival, in which you will start with almost no items and creative (not implimented as of 21.05.2020) where you will have access to all items at all times. <br><br>
+                    Then you have difficulty. In higher difficulties, your energy gets depleated much more quickly and trees, boulders and mobs are rarer.<br><br>
+                    After that you have Screen & Inventory size. The screen is the world area that you can see. Because of the user interface I use, the two are connected. <br><br>
+                    Finally, there is Map size. Map size is currently determined by the Screen & Inventory size, the higher the size, the smaller the map.
+                </span>
+            </p>
+            Note: all game window screenshots are made with the Small Game Window.
+            <p>
+                <img src="./images/small-game-window.png" alt="">
+                <span>
+                    After the world is generated, the game window opens.<br><br>
+                    A the top you have your (game) screen. Here you can see the world. To navigate click on a place you want to go to. If you want to alter the envirnment, first click on an item (that can modify the world) and click the place you want to alter.<br><br>
+                    Below that is your energy bar. Each mob (including the player) has an energy bar, each action you take takes energy. If your energy gets depleated, you start taking damage for each action you take. To replenish energy, kill mobs and consume their meats.<br><br>
+                    Then you have your health. It represents how much life you have. If it drops to zero, you die (not fully implimented as of 21.05.2020). <br><br>
+                    Underneath that, there is your hotbar. It is a part of your inventory (for more information, consult <a href="./basic-concepts.html" class=hyperlink>Basic Concepts</a>). <br><br>
+                    After that, you have the Event log button and some of the most recent events. Clicking the Event log button opens a window from which you can browse all event logs. For more information, consult <a href="./basic-concepts.html" class=hyperlink>Basic Concepts</a>. <br><br>
+                    To the sides there are a couple of buttons: <br><br>
+                    Map - opens the map menu <br>
+                    Inv - opens the inventory menu <br>
+                    Music - opens the music window (not fully implimented as of 21.05.2020) <br>
+                    Pause - opens the pause window <br>
+                </span>
+            </p>
+            <p>
+                <img src="./images/map-menu.png" alt="">
+                <span>
+                    The Map menu is an extension (to the left) to the normal game window. It is toggled with the inventory menu (either one of them or neither can be opened at the same time). For more information on the map, refer to <a href="./basic-concepts.html" class=hyperlink>Basic Concepts</a>.<br><br>
+                    It contains a couple of things: <br><br>
+                    Ground layer - shows only the ground layer tiles of the map <br>
+                    name of the superlayer you are currenly in and your coordinates in it <br>
+                    Structure layer - shows only the structure layer tiles of the map <br>
+                    There is hole above player - used to determine if you can climb up a superlayer
+                </span>
+            </p>
+            <p>
+                <img src="./images/inventory-menu.png" alt="">
+                <span>
+                    The Inventory menu is an extension (to the right) to the normal game window. It is toggled with the map menu (either one of them or neither can be opened at the same time). For more information on the inventory, refer to <a href="./basic-concepts.html" class=hyperlink>Basic Concepts</a>. <br><br>
+                    It contains a couple of things: <br><br>
+                    Items inventory <br>
+                    Crafing button - opens the crafting menu <br>
+                    Accessories inventory <br>
+                    Gear inventory <br>
+                    Information about the selected item (icon and values)
+                </span>
+            </p>
+            <p>
+                <img src="./images/crafting-window.png" alt="">
+                <span>
+                    Every time you open the crafting menu, it automatically gets all items that you can craft, using the items in your Items inventory. <br><br>
+                    At the top it shows you all required items (icons) and how much you need of each one. <br><br>
+                    Below that it shows the item that you can craft. There are also two buttons, Prev and Next, for navigating multiple items you can craft. <br><br>
+                    Finally, there is the Craft button, with which you can craft that item (removes required item from inventory and adds the crafted item).
+                </span>
+            </p>
         </div>
 
         <br>
diff --git a/website/resume.html b/website/resume.html
index 9e84abc..0747d04 100644
--- a/website/resume.html
+++ b/website/resume.html
@@ -33,7 +33,7 @@
             <a href="./resume.html" class="selected-tab">Resume</a>
         </div>
 
-        <div class=page>
+        <div class=page-centered>
             <table>
                 <tr>
                     <td class=title-data>Technologies</td>
@@ -61,9 +61,18 @@
                     <td class=title-data>Education</td>
                     <td colspan="2">
                         <b>Applied programmer</b><br>
+                        <i>C# MySQL</i><br>
                         <b style="color:#ff9999">[ONGOING]</b> 2019-2021, Course <a href="https://it-kariera.mon.bg/e-learning/" class=hyperlink>IT-kariera</a>
                     </td>
                 </tr>
+                <tr>
+                    <td class=title-data>Visits</td>
+                    <td colspan="2">
+                        <a href=    "https://careers-digital.bg/" class="hyperlink">Lidl Digital</a> 24.02.2020
+                        <br><br>
+                        <a href="https://helecloud.com/" class=hyperlink>Helecloud</a> 20.02.2020
+                    </td>
+                </tr>
             </table>
         </div>
 
diff --git a/website/styles.css b/website/styles.css
index 4945531..d377314 100644
--- a/website/styles.css
+++ b/website/styles.css
@@ -69,6 +69,18 @@ body {
     border: 15px solid var(--page-bg-color);
 }
 
+.page-centered {
+    font: 20px Arial;
+    text-align: center;
+    margin-left: auto;
+    margin-right: auto;
+    color: var(--page-color);
+    min-width: 450px;
+    background-color: var(--page-bg-color);
+    margin-top: 9px;
+    border: 15px solid var(--page-bg-color);
+}
+
 .hyperlink {
     color: var(--page-color);
     text-decoration: none;
diff --git a/website/tutorials/index.html b/website/tutorials/index.html
index 48b9613..a02f3fd 100644
--- a/website/tutorials/index.html
+++ b/website/tutorials/index.html
@@ -16,8 +16,12 @@
             <a href="../resume.html" class="other-tab">Resume</a>
         </div>
 
-        <div class=page style="text-align: center;">
+        <div class=page-centered>
             GtkSharp 2.0 [COMING SOON]
+
+            <p>
+                I have some tutorial-style notes in my <a href="https://github.com/Syndamia/References" class=hyperlink>references repo</a>. Warning: some stuff might be wrong.
+            </p>
         </div>
 
         <br>