More tweaks

* #187 Move common ratios to the top
* #187 Rework the Tips section
* #187 Remove Combat section,
* #187 Move belt images to Belt section
* #187 Add bus image to Belt section
* #187 Simplify nuclear formulas in a table
* Update advanced oil research blurb
* Update Efficiency module blurb
* Add common smelter arrangements link to the material processing sheet
* Update links with Xterm's fundamentals
* Add satisfactory cheat sheet link
* Header tags and font size tweak
* Remove audio track from oil webm causing animation not to autoplay
* Closes #240 Update mining, belt signal, balancer and link Range Comparison image to imgr in Tips instead
* Closes #262 Update Banner Image

README.md

@@ -3,7 +3,7 @@ Cheat Sheet for [Factorio](https://www.factorio.com/): *"A compendium of the mos
 
 If you would like to contribute to the cheat sheet code/content, see `contributing.md`
 
-![Factorio Cheat Sheet](src/assets/icons/factorio-cheat-sheet-splash.png)
+![Factorio Cheat Sheet](src/assets/icons/factorio-cheat-sheet-splash.webp)
 
 ## Deployments [![Build Status](https://travis-ci.com/deniszholob/factorio-cheat-sheet.svg?branch=master)](https://travis-ci.com/deniszholob/factorio-cheat-sheet)
 
@@ -18,10 +18,10 @@ For anyone who is doing development work with Angular, I hope this project helps
 # Support Me
 If you find the cheat sheet or the source code useful, consider supporting me on Patreon.
 
-[![button](https://c5.patreon.com/external/logo/downloads_wordmark_white_on_coral.png)](https://www.patreon.com/deniszholob)
+<img src="https://c5.patreon.com/external/logo/downloads_wordmark_white_on_coral.png" width="260" />
 
 # Screenshots
 
-![Factorio Cheat Sheet Mobile Website](screenshots/factorio-sheat-sheet-home-screen-500.png)
+![Factorio Cheat Sheet Mobile Website](screenshots/factorio-sheat-sheet-home-screen-phone.webp)
 
-![Factorio Cheat Sheet Desktop Website](screenshots/factorio-cheat-sheet.png)
+![Factorio Cheat Sheet Desktop Website](screenshots/factorio-sheat-sheet-screen-pc.webp)

src/app/shared/app-settings.ts

@@ -15,7 +15,7 @@ export const APP_SETTINGS: AppInfo = {
         name: 'Github Source',
         url: 'https://github.com/deniszholob/factorio-cheat-sheet',
     },
-    data_version: '0.18.45',
+    data_version: '0.18.47',
     // languages: ['en-US'],
     links: {
         getLocalImagePath: function (imageName) {

src/app/shared/cheat-sheet/cheat-sheet.component.html

@@ -2,7 +2,7 @@
     <div class="card-header" (click)="cheatSheet?.toggleCollapse()">
         <a href="#{{cheatSheet?.id}}">
             <app-factorio-icon [icon]="cheatSheet?.icon"></app-factorio-icon>
-            <h5 class="card-title">{{cheatSheet?.title}}</h5>
+            <h3 class="card-title">{{cheatSheet?.title}}</h3>
         </a>
         <button *ngIf="cheatSheet?.isCollapsed" class="card-collapse" aria-label="Expand">
             <i class="fa fa-plus" aria-hidden="true" title="Expand"></i>

src/app/views/cheat-sheets/balancers/balancers.component.html

@@ -1,5 +1,5 @@
 <app-cheat-sheet [cheatSheet]="cheatSheet">
-    <p class="card-text">
+    <p>
         <strong><a href="https://wiki.factorio.com/Balancer_mechanics">Balancers</a></strong> are used to evenly
         distribute items over multiple belts, commonly used at ore patches or the <a href="https://wiki.factorio.com/Tutorial:Main_bus#Split-off">Main Bus</a>.
     </p>

src/app/views/cheat-sheets/belt-throughput/belt-throughput.component.html

@@ -1,33 +1,21 @@
 <app-cheat-sheet [cheatSheet]="cheatSheet">
-    <p class="card-text">
-        <strong>
-            <a href="https://wiki.factorio.com/Transport_belt" target="_blank" rel="noopener">
-                Transport Belt
-            </a> Throughput
-        </strong> - Items per second (i/s) passed over one belt tile.
-        <br>
-        <strong>Transport Belt Density</strong> - Maximum items that fit in one tile:
-        <strong>{{ sheetData?.belt_density }} items</strong> for all belts.
-    </p>
-    <p class="card-text">
-        <kbd class="txt-factorio-red">Red belt</kbd> is
-        <strong>{{ sheetData?.belt_info[1].throughput / sheetData?.belt_info[0].throughput }}x</strong> faster than
-        <kbd class="txt-factorio-yellow">Yellow belt</kbd>
-        <br>
-        <kbd class="txt-factorio-blue">Blue belt</kbd> is
-        <strong>{{ sheetData?.belt_info[2].throughput / sheetData?.belt_info[0].throughput }}x</strong> faster than
-        <kbd class="txt-factorio-yellow">Yellow belt</kbd>.
-    </p>
-    <div class="card-text">
-        See <a href="https://wiki.factorio.com/Belt_transport_system" target="_blank" rel="noopener">
-            Belt Transport System
-        </a> for all relevant belt information.
-    </div>
-
-    <hr>
-
     <div class="row align-items-center">
-        <div class="col-12 col-md-6">
+        <div class="col-12 col-md-7">
+            <p>
+                See <a href="https://wiki.factorio.com/Belt_transport_system" target="_blank" rel="noopener">
+                    Belt Transport System
+                </a> for all relevant belt information.
+            </p><p>
+                <strong>
+                    <a href="https://wiki.factorio.com/Transport_belt" target="_blank" rel="noopener">
+                        Transport Belt
+                    </a> Throughput
+                </strong> - Items per second (i/s) passed over one belt tile.
+                <br>
+                <strong>Transport Belt Density</strong> - Maximum items that fit in one tile:
+                <strong>{{ sheetData?.belt_density }} items</strong> for all belts.
+            </p>
+
             <table class="table table-sm table-hover fixed-width">
                 <thead class="text-center">
                     <tr>
@@ -49,9 +37,44 @@
             </table>
         </div>
 
-        <div class="col-12 col-md-6 text-center">
+        <div class="col-12 col-md-5 text-center">
             <p>All belts can hold up to <strong>{{ sheetData?.belt_density }} items</strong> on each tile.</p>
             <img src="{{APP_SETTINGS.links.getLocalImagePath('belt-signal-circuit.webp')}}" class="img-fluid rounded" alt="Transport Belt Signal" title="Transport Belt Signal">
         </div>
     </div>
+
+<br>
+    <p>
+        Its common to stack belts to form a <a href="https://wiki.factorio.com/Tutorial:Main_bus" target="_blank" rel="noopener">Main Bus</a>, which you can learn more with
+        <a href="https://www.youtube.com/watch?v=e9LSMqCRsd0&list=PLwehwVVQirAep2XwjX1IoJR4XIqU4eUCH&index=2" target="_blank" rel="noopener">Xterminator</a>,
+        <a href="https://www.youtube.com/watch?v=-kOxTtgHssk&list=PLnIE0W-m629dSJPPEETVY71CQhOfZ6r7W&index=8" target="_blank" rel="noopener">JDplays</a> and
+        <a href="https://www.youtube.com/watch?v=ErdHbEgJG58&list=PLV3rF--heRVu2xlDGZiRbdb7nbwzM9Vyz&index=2" target="_blank" rel="noopener">Nilaus</a>
+    </p>
+    <div class="row align-items-center">
+        <div class="col-12 align-items-center text-center">
+            <!-- <strong>Main Bus</strong> <br> -->
+            <a href="{{APP_SETTINGS.links.getLocalImagePath('bus.webp')}}" target="_blank" rel="noopener">
+                <img src="{{APP_SETTINGS.links.getLocalImagePath('bus.webp')}}" class="img-fluid rounded limit-img-height" alt="Main Bus" title="Main Bus">
+            </a>
+        </div>
+    </div>
+
+<br>
+
+    <div class="row align-items-center justify-content-around">
+        <div class="col-12 col-sm-6 col-lg-4 col-print-4 text-center">
+            <strong>Underground belts can be side loaded</strong><br>
+            <img src="{{APP_SETTINGS.links.getLocalImagePath('belt-tip-side-load.webp')}}" class="img-fluid rounded limit-img-height" alt="Side Load Underground" title="Side Load Underground">
+        </div>
+        <div class="col-12 col-sm-6 col-lg-4 col-print-4 text-center">
+            <strong>Splitters can filter items</strong><br>
+            <img src="{{APP_SETTINGS.links.getLocalImagePath('belt-tip-filter.webp')}}" class="img-fluid rounded limit-img-height" alt="Splitter Filter" title="Splitter Filter">
+        </div>
+        <div class="col-12 col-sm-6 col-lg-4 col-print-4 text-center">
+            <strong>Belts can be woven</strong><br>
+            <img src="{{APP_SETTINGS.links.getLocalImagePath('belt-weaving.webp')}}" class="img-fluid rounded limit-img-height" alt="Splitter Filter" title="Splitter Filter">
+        </div>
+    </div>
+
+
 </app-cheat-sheet>

src/app/views/cheat-sheets/common-ratios/common-ratios.component.html

@@ -1,9 +1,9 @@
 <app-cheat-sheet [cheatSheet]="cheatSheet">
 
-    <p class="card-text">
-        <strong>Description: </strong> First Item represents the type of machine
+    <p>
+        <strong>Description: </strong> First item represents the type of machine
         thats expected to assemble the following components.
-        <br> Following items represent the amount of machines needed making them.
+        <br> Following items represent the amount of <strong>machines</strong> needed making them.
         If there is no machine mixing (assemblers/chemical plants/furnaces)
         then ratios stay the same b/w assembly tiers.
         <br>
@@ -19,10 +19,11 @@
         </span>
     </p>
 
-    <p class="card-text">
+    <p>
         <strong>For example:</strong> To make rails,
         the right ratio is 1 iron stick assembler feeding 2 rail assemblers.
         <br> Using the level 3 assemblers you can produce 10 rails every second.
+        <br>See <a href="#links">Links</a> for blueprints and calculators
     </p>
 
     <div class="row">
@@ -81,7 +82,7 @@
     </div>
 
     <hr>
-    <h5 id="rocket">Rocket Components</h5>
+    <h3 id="rocket">Rocket Components</h3>
     <div class="row align-items-center">
         <p class="col-12 col-sm-4 text-center">
             <!-- <span class="text-muted">{{ sheetData?.rocketComponentsRatioNoSatellite?.name }}</span><br> -->

src/app/views/cheat-sheets/fluid-wagon-transfer/fluid-wagon-transfer.component.html

@@ -16,6 +16,7 @@
                     <a href="https://forums.factorio.com/viewtopic.php?f=18&t=19851" target="_blank" rel="noopener">fluid/s</a>
                     (offshore pump rate), place <a href="https://forums.factorio.com/viewtopic.php?f=5&t=46030">18 pipes between pumps</a>.
                 </li>
+                <li>Using underground pipes counts as less entities then if straight pipe for same distance.</li>
                 <li>
                     Fluid wagons can hold {{sheetData?.storageTankSize | number}} units of fluids which is equal to {{sheetData?.fluidWagonSize / sheetData?.storageTankSize}}
                     <a href="https://wiki.factorio.com/Storage_tank" target="_blank" rel="noopener">Storage Tanks</a>.
@@ -68,7 +69,7 @@
 
     <div class="row align-items-center justify-content-around">
         <div class="col text-center col-print-3">
-            <span><strong>Tanker-Pump Alignment</strong></span><br>
+            <span><strong>Tanker-Pump Alignment <a href="#note-alignment">*</a></strong></span><br>
             <video autoplay loop muted src="{{APP_SETTINGS.links.getLocalImagePath('fluid-wagon-alignment.webm')}}" class="img-fluid rounded" alt="Tanker-Pump Alignment" title="Tanker-Pump Alignment"></video>
         </div>
         <br>
@@ -82,6 +83,7 @@
             <video autoplay loop muted src="{{APP_SETTINGS.links.getLocalImagePath('fluid-transfer-rate-comparison.webm')}}" class="img-fluid rounded" alt="Transfer Rate Comparison" title="Transfer Rate Comparison"></video>
         </div>
     </div>
+    <p id="note-alignment">*Trains snap into position when placed at train stations.</p>
 
     <hr>
 

src/app/views/cheat-sheets/inserter-capacity-bonus/inserter-capacity-bonus.component.html

@@ -1,6 +1,6 @@
 <app-cheat-sheet [cheatSheet]="cheatSheet">
 
-    <p class="card-text">
+    <p>
         <strong><a href="https://wiki.factorio.com/Inserter_capacity_bonus_(research)" target="_blank" rel="noopener">Inserter capacity research</a></strong>
         is used to increase the stack size of the inserters.
     </p>

src/app/views/cheat-sheets/inserter-throughput/inserter-throughput.component.html

@@ -1,17 +1,18 @@
 <app-cheat-sheet [cheatSheet]="cheatSheet">
-    <p class="card-text">
+    <p>
         <strong><a href="https://wiki.factorio.com/Inserters#Inserter_Throughput" target="_blank" rel="noopener">Inserter Throughput</a></strong> - Items
         per second (i/s) moved by the inserter between targets (chests, belts, assemblers, trains, etc...)
-    </p>
-    <p class="card-text">
+        <br>
         <strong><a href="https://wiki.factorio.com/Inserter_capacity_bonus_(research)" target="_blank" rel="noopener">Inserter capacity research</a></strong> is used to increase the throughput.
     </p>
-    <p>The inserter throughput displayed in the tables below could be used to calculate the exact number of inserters needed
-        for your task.</p>
-
-    <p><kbd>
-        Inserters Required = (Target Item Rate) / (Inserter Throughput)
-    </kbd></p>
+    <p>
+        The inserter throughput displayed in the tables below could be used to calculate
+        the exact number of inserters needed for your task.
+        <br>
+        <kbd>
+            Inserters Required = (Target Item Rate) / (Inserter Throughput)
+        </kbd>
+    </p>
 
     <table class="table table-sm table-hover fixed-width">
         <caption class="text-center">
@@ -68,8 +69,7 @@
         </tbody>
     </table>
 
-    <!-- <hr> -->
-    <!-- <h5>Notes</h5> -->
+    <br>
 
     <ul>
         <li>

src/app/views/cheat-sheets/material-processing/material-processing.component.html

@@ -95,6 +95,7 @@ <h4 class="card-title" id="smelting-facts">Smelting Facts</h4>
                 </li>
                 <li>One furnace making iron can support one furnace making steel.</li>
                 <li>Stone and Steel Furnaces consume 0.0225 coal/second.</li>
+                <li>Common <a href="https://steamcommunity.com/sharedfiles/filedetails/?id=862972621" target="_blank" rel="noopener">Smelter Arrangements</a></li>
             </ul>
         </div>
 
@@ -150,7 +151,7 @@ <h4 class="card-title" id="uranium-facts">Uranium Facts</h4>
                 <i class="fas fa-long-arrow-alt-right text-muted"></i>
                 <app-factorio-icon [icon]="dataService.getFactorioIcon('Uranium-235', 7)"></app-factorio-icon>
                 <app-factorio-icon [icon]="dataService.getFactorioIcon('Uranium-238', 993)"></app-factorio-icon>
-                <a href="#oil_ratio_note">*</a>
+                <a href="#note_uranium_processing_ratio">**</a>
             </p>
             <p class="text-center">
                 <app-factorio-icon [icon]="dataService.getFactorioIcon('Uranium-235', 40)"></app-factorio-icon>
@@ -163,9 +164,9 @@ <h4 class="card-title" id="uranium-facts">Uranium Facts</h4>
     </div>
 
     <hr>
-    <p id="uranium_processing_ratio_note">
+    <p id="note_uranium_processing_ratio">
         <small>
-            * 10000 not 1000 ore, as
+            ** 10000 not 1000 ore, as
             <a href="https://wiki.factorio.com/Uranium_processing" target="_blank" rel="noopener">Uranium processing</a>
              takes 10 ore and produces 1 product on avg.
         </small>

src/app/views/cheat-sheets/modules-and-beacons/modules-and-beacons.component.html

@@ -27,11 +27,11 @@
                 </li>
 
                 <li>
-                    <a href="https://wiki.factorio.com/Efficiency_module_3" target="_blank" rel="noopener">Efficiency Modules</a> make your factory green,
-                    reducing power usage.
+                    <a href="https://wiki.factorio.com/Efficiency_module_3" target="_blank" rel="noopener">Efficiency Modules</a> reduce power usage.
                     <ul>
                         <li>Best to put in energy hogs.</li>
                         <li>Reducing Energy = Reducing pollution</li>
+                        <li>Tier 1 are superb in mining drills b/c there are so many</li>
                     </ul>
                 </li>
             </ul>

src/app/views/cheat-sheets/nuclear-power/nuclear-power.component.html

@@ -97,7 +97,7 @@ <h4 class="card-title" id="nuclear-sre-diagrams">SRE Diagrams</h4>
                 <div class="card-body row">
                     <div class="col-12 col-sm-6">
                     <h6 class="card-subtitle mb-2 text-muted">2xN Configuration</h6>
-                    <p class="card-text">
+                    <p>
                         16 reactors: 2x8, is<br>
                         <kbd>4*3 + 12*4 = 60 SRE</kbd>
                     <p>
@@ -114,7 +114,7 @@ <h6 class="card-subtitle mb-2 text-muted">2xN Configuration</h6>
                 <div class="card-body row">
                     <div class="col-12 col-sm-7">
                     <h6 class="card-subtitle mb-2 text-muted">NxM Configuration</h6>
-                    <p class="card-text">
+                    <p>
                         16 reactors: 4x4, is<br>
                         <kbd>4*3 + 8*4 + 4*5 = 64 SRE</kbd>
                     <p>
@@ -205,19 +205,44 @@ <h4 class="card-title" id="nuclear-formulas">Formulas</h4>
         for more details.
     </p>
 
-    <p><kbd>
-    Heat Exchangers (even config) = [Heat Exchangers Per Reactor * 4 * reactors] - [Heat Exchangers Per Reactor * 4]
-    </kbd></p>
-    <p><kbd>
-    Power (even config) = [Reactor Power * 4 * reactors] - [Reactor Power * 4]
-    </kbd></p>
-    <p><kbd>
-    Turbines = [Heat Exchangers * Heat Exchanger Power(10MW)] / [Turbine Power(5.82MW)]
-    </kbd></p>
-    <p><kbd>
-    Pumps = [Turbines] * [Water Per Turbine / Water Per Pump]
-    </kbd></p>
-    <p><strong>Steam Tanks:</strong> 1 fuel cell creates 8 GJ per reactor (eg 2 reactors puts out 4 solo reactors of energy = 32 GJ).
+    <table class="table table-sm table-hover">
+        <thead>
+            <tr>
+                <th>Unknown</th>
+                <th>Formula</th>
+                <th>Expanded Formula</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td><kbd>Heat Exchangers Per Reactor</kbd></td>
+                <td><kbd>{{nuclearData.reactorPower / nuclearData.heatExchangerPower}}</kbd></td>
+                <td><kbd>Reactor Power({{nuclearData.reactorPower}}MW) / H.E. Power({{nuclearData.heatExchangerPower}}MW)</kbd></td>
+            </tr>
+            <tr>
+                <td><kbd>Power (even config)</kbd></td>
+                <td><kbd>{{nuclearData.reactorPower*4}} * [Reactors - 1]</kbd></td>
+                <td><kbd>[Reactor Power({{nuclearData.reactorPower}}MW) * 4 * Reactors] - [Reactor Power * 4]</kbd></td>
+            </tr>
+            <tr>
+                <td><kbd>Heat Exchangers (even config)</kbd></td>
+                <td><kbd>{{nuclearData.reactorPower / nuclearData.heatExchangerPower*4}} * [Reactors - 1]</kbd></td>
+                <td><kbd>[H.E. Per Reactor * 4 * Reactors] - [H.E. Per Reactor * 4]</kbd></td>
+            </tr>
+            <tr>
+                <td><kbd>Turbines</kbd></td>
+                <td><kbd>{{nuclearData.heatExchangerPower/nuclearData.turbinePower | number}} * Heat Exchangers</kbd></td>
+                <td><kbd>Heat Exchangers * H.E. Power({{nuclearData.heatExchangerPower}}MW) / Turbine Power({{nuclearData.turbinePower}}MW)</kbd></td>
+            </tr>
+            <tr>
+                <td><kbd>Pumps</kbd></td>
+                <td><kbd>{{nuclearData.waterPerTurbine/nuclearData.waterPerPump | number}} * Turbines</kbd></td>
+                <td><kbd>Turbines * Water Per Turbine({{nuclearData.waterPerTurbine}}) / Water Per Pump({{nuclearData.waterPerPump}})</kbd></td>
+            </tr>
+        </tbody>
+    </table>
+
+    <p><strong>Steam Tanks:</strong> 1 fuel cell creates 8 GJ per reactor (eg. 2 reactors put out 4 solo reactors worth of energy = 32 GJ).
         <br>Each tank can hold 2.425 GJ worth of steam, or 3.29 tanks per reactor.
     </p>
 

src/app/views/cheat-sheets/nuclear-power/nuclear-power.component.ts

@@ -48,6 +48,7 @@ export class NuclearPowerComponent implements OnInit {
                 this.cheatSheet = result.cheatSheet;
                 this.sheetData = result.data;
 
+                this.nuclearData.waterPerPump = 1200;
                 this.nuclearData.reactorPower = this.sheetData.reactorPowerMW;
                 this.nuclearData.heatExchangerPower = this.sheetData.heatExchangerPowerMW;
                 this.nuclearData.turbinePower = this.sheetData.turbinePowerMW;
@@ -107,7 +108,7 @@ export class NuclearPowerComponent implements OnInit {
         const heatExchangersPerReactor = reactorPower / heatExchangerPower;
         const waterPerTurbine = this.nuclearData.waterPerTurbine;
         const storageTanksPerReactor = this.nuclearData.storageTanksPerReactor;
-        const waterPerPump = 1200;
+        const waterPerPump = this.nuclearData.waterPerPump;
 
         // Set inital data that will be calculated
         let reactorConfig = '1';
@@ -174,6 +175,7 @@ interface NukeRatioData {
 }
 
 interface NuclearData {
+    waterPerPump: number;
     reactorPower: number;
     heatExchangerPower: number;
     turbinePower: number;