Added terrain objects system

qkmaxware · Oct 7, 2021 · ef149f8 · ef149f8
1 parent f87adb8
commit ef149f8
Show file tree

Hide file tree

Showing 19 changed files with 475 additions and 16 deletions.
diff --git a/Pages/Index.razor → Pages/MiniIndex.razor b/Pages/Index.razor → Pages/MiniIndex.razor
@@ -1,4 +1,5 @@
 @page "/"
+@page "/mini"
 
 <div class="w3-center w3-padding no-print">
     <a href="#" onclick="window.print()">print</a> this page to get your minis <select @bind="baseSelection"><option value="Y">with a base</option><option value="N">without base</option></select>.
@@ -36,16 +37,11 @@
             <MiniDrawer Mini=mini WithBase=@printWithBase></MiniDrawer>
         }
     }
-    <div class="w3-center w3-padding">
-        <b>Instructions</b>
-        <p>
-            Print out miniatures the cut out each one along the solid black lines. Fold each miniature along the dotted lines so that the artwork is able to stand vertically on its base.
-        </p>
-    </div>
+    <Instructions></Instructions>
 </div>
 
 <div class="w3-center w3-padding no-print" style="position: fixed; bottom: 0; left: 0; right: 0;">
-    Confused? Read the complete instructions <a href="help" target="_blank">here</a>.
+    Confused? Read the complete instructions <a href="mini/help" target="_blank">here</a>.
 </div>
 
 <MiniEditor @ref=editor OnChange=StateHasChanged></MiniEditor>
@@ -59,7 +55,7 @@
     private string baseSelection = "Y";
     private bool printWithBase => baseSelection == "Y";
 
-    public List<Mini> minis = new List<Mini> {};
+    public static List<Mini> minis = new List<Mini> {};
 
     private void createMini() {
         var mini = new Mini {
@@ -70,7 +66,7 @@
             },
             Replicas = 1,
         };
-        this.minis.Add(mini);
+        minis.Add(mini);
         editor?.Edit(mini);
     }
 

diff --git a/Pages/Instructions.razor → Pages/MiniInstructions.razor b/Pages/Instructions.razor → Pages/MiniInstructions.razor
@@ -1,10 +1,10 @@
-@page "/help"
+@page "/mini/help"
 
 <div class="w3-padding">
     <div class="w3-container">
         <h1>How To Use</h1>
         <p class="w3-container">
-            This document is intended to help you understand how to use the Papercraft Mini-Maker application.
+            This document is intended to help you understand how to use the Papercraft Mini-Maker application when designing miniatures or gameplay tokens.
         </p>
         <h2>Introduction</h2>
         <p class="w3-container">

diff --git a/Pages/TerrainIndex.razor b/Pages/TerrainIndex.razor
@@ -0,0 +1,78 @@
+@page "/terrain"
+
+<div class="w3-center w3-padding no-print">
+    <a href="#" onclick="window.print()">print</a> this page to get your terrain.
+</div>
+
+<div class="w3-row no-print">
+    @foreach (var mini in minis) {
+        <div class="w3-col l2 m3 s12 w3-padding">
+            <div class="w3-border w3-round-xlarge">    
+                <div class="w3-center w3-padding w3-large">
+                    @mini.Name @if(mini.Replicas > 1) { <small> (x@(mini.Replicas))</small> }
+                </div>
+                <div class="w3-center" style="height: 240px;">
+                    <img src="@mini.Art.Url" class="pixelart"/>
+                </div>
+                <div class="w3-right-align">
+                    <button class="w3-button" @onclick=@(() => editMini(mini))>Edit</button>
+                    <button class="w3-button w3-text-red" @onclick=@(() => deleteMini(mini))>Delete</button>
+                </div>
+            </div>
+        </div>
+    }
+    <div class="w3-col l2 m3 s12 w3-padding">
+        <div class="w3-button w3-round-xlarge w3-display-container" @onclick=createMini style="border: 1px dashed white; width:100%; height: 320.8px">    
+            <div class="w3-display-middle w3-center w3-xlarge">
+                New<br>
+                +
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="w3-row print">
+    @foreach (var mini in minis) {
+        for (var i = 0; i < mini.Replicas; i++) {
+            <TerrainDrawer Terrain=mini></TerrainDrawer>
+        }
+    }
+    <Instructions></Instructions>
+</div>
+
+<div class="w3-center w3-padding no-print" style="position: fixed; bottom: 0; left: 0; right: 0;">
+    Confused? Read the complete instructions <a href="terrain/help" target="_blank">here</a>.
+</div>
+
+
+<TerrainEditor @ref=editor OnChange=StateHasChanged></TerrainEditor>
+<DeleteConfirmation @ref=delete></DeleteConfirmation>
+
+@code {
+    public static List<Terrain> minis = new List<Terrain> {};
+
+    private TerrainEditor editor;
+    private DeleteConfirmation delete;
+    private void createMini() {
+         var mini = new Terrain {
+            Name = "New Wall " + (minis.Count + 1),
+            Kind = TerrainKind.Wall,
+            Art = new TerrainArt {
+                Url = string.Empty
+            },
+            Length = 3,
+            Height = 0.5f,
+            Replicas = 1,
+        };
+        minis.Add(mini);
+        editor?.Edit(mini);
+    }
+
+    private void editMini(Terrain mini) {
+        editor?.Edit(mini);
+    }
+
+    private void deleteMini(Terrain mini) {
+        this.delete.AskForConfirmation(() => { minis.Remove(mini); StateHasChanged(); });
+    }
+}
diff --git a/Pages/TerrainInstructions.razor b/Pages/TerrainInstructions.razor
@@ -0,0 +1,78 @@
+@page "/terrain/help"
+
+
+<div class="w3-padding">
+    <div class="w3-container">
+        <h1>How To Use</h1>
+        <p class="w3-container">
+            This document is intended to help you understand how to use the Papercraft Mini-Maker application when designing map or terrain elements.
+        </p>
+        <h2>Introduction</h2>
+        <p class="w3-container">
+            A terrain element is a gameplay token commonly used in tabletop gaming, from tabletop roleplaying games to wargames and used to provide a visual reference of things in the environment in which the game characters are in. Usually these miniatures are plastic figurines such as rocks, trees, or building. However, these pastic miniatures can be quite costly especially if one is in need of purchasing large quantities of them. Papercraft miniatures are cheep alternatives. These miniatures are static images that have been printed out and folded so that they can stand on their own paper base. This application is designed to assist those who wish to use papercraft miniatures for their tabletop gaming. It automates the layout of user artwork such that when printed it is easy to cut and fold the paper to create the miniature.
+        </p>
+        <h2>Creation</h2>
+        <div class="w3-container">
+            <h3>1. Create a new miniature</h3>
+            <p class="w3-container">
+                To begin creating a new paper miniature simply click the large <b>New +</b> button on the main page. This will open a popup dialog with all the options you have available for the attributes of this miniature.
+            </p>
+            <h3>2. Name your mini</h3>
+            <p class="w3-container">
+                Provide a name for your miniature. For terrain miniatures this is only used for your own reference and is not printed.
+            </p>
+            <h3>3. Terrain element type</h3>
+            <p class="w3-container">
+                This application supports a lot of different types of terrain elements. Walls stand vertically, clips are hung on walls to provide details like doors and windows, platforms are folded to be raised above the ground, and floors are flat details to be placed on the floor such as carpets. Select the type of terrain object you would like to create. 
+            </p>
+            <div class="w3-panel w3-margin w3-padding w3-round-large w3-red">
+                <b>Notice</b> This will change the way the object is printed as well as the folds required to complete the mini.
+            </div>
+            <h3>4. Select a size</h3>
+            <p class="w3-container">
+                Provide the size of the printed miniature. These sizes are multiples of the standard 1inch squares used in many tabletop games. 
+            </p>
+            <div class="w3-panel w3-margin w3-padding w3-round-large w3-red">
+                <b>Notice</b> Not all terrain types will used all dimensions. For instance, floor tiles that are meant to be flat will ignore the height.
+            </div>
+            <h3>5. Replicate</h3>
+            <p class="w3-container">
+                Select the number of replicas to print. For unique terrain leave this at a default value of 1. For cases where you want to print multiple of the same terrain (such as walls) then adjust this as you see fit.    
+            </p>
+            <h3>6. Choose artwork</h3>
+            <p class="w3-container">
+                The last step in creating a papercraft miniature is to choose the artwork that is displayed on the miniature. When selecting artwork you can either choose an image from a web-accessible location (like google search) by providing the URL to the image file. Alternatively you can upload your own image to use for the artwork. These images are not uploaded to any server, instead javascript locally converts the image to a Data URL and uses that instead. 
+            </p>
+            <h3>7. Confirm</h3>
+            <p class="w3-container">
+                To confirm your settings, simply press the <b>Done</b> button at the bottom of the popup dialog window.    
+                You may create as many miniatures as you want. When printed, they will all be put on the same document in order to save on paper rather than printing each on their own page.
+            </p>
+        </div>
+        <h2>Editing/Changing</h2>
+        <div class="w3-container">
+            On the main page, click on the <b>Edit</b> button under any miniature's image. This will open the same dialog window as with creating a miniature, but instead of creating a new miniature, you can edit the values of the exisiting one.
+        </div>
+        <h2>Assembly</h2>
+        <div class="w3-container">
+            <h3>1. Print</h3>
+            <p class="w3-container">
+                To build your configured miniatures, simply print the web-page. A dropdown is available at the top of the page allowing you to choose if the printed minis will be printed with or without a base. Using clever CSS tricks, the printed version of the page not have the icons and buttons that you see in the web-browser, but rather the paper miniatures themselves laid out in a way that makes them easy to fold and assemble. The app will attempt to put as many miniautures on the same page as possible.
+            </p>
+            <h3>2. Cut</h3>
+            <p class="w3-container">
+                Once printed, simply cut the miniatures out along the solid lines that border each miniature.
+            </p>
+            <h3>3. Fold</h3>
+            <p class="w3-container">
+                The dotted lines on each miniature represent where you should fold them. Each miniature is laid out vertically so that only horizonal folds across the horizonal axis of the paper are required.
+            </p>
+            <h4>4. Glue</h4>
+            <p class="w3-container">
+                It is recommended that you should glue any touching blank paper once the folding has been completed.
+            </p>
+            <h4>5. Enjoy!</h4>
+        </div>
+
+    </div>
+</div>
diff --git a/Shared/Instructions.razor b/Shared/Instructions.razor
@@ -0,0 +1,6 @@
+<div class="w3-center w3-padding">
+    <b>Instructions</b>
+    <p>
+        Print out miniatures the cut out each one along the solid black lines. Fold each miniature along the dotted lines so that the artwork is able to stand vertically on its base.
+    </p>
+</div>
diff --git a/Shared/MainLayout.razor b/Shared/MainLayout.razor
@@ -1,8 +1,17 @@
 @inherits LayoutComponentBase
+@inject NavigationManager nav
 
 <div class="w3-main">
     <header class="w3-bar no-print">
         <strong class="w3-bar-item">Papercraft Mini-Maker</strong>
+        <div class="w3-right">
+            <NavLink class="w3-bar-item w3-button" href="mini" Match="NavLinkMatch.Prefix" ActiveClass="bg">
+                Miniatures
+            </NavLink>
+            <NavLink class="w3-bar-item w3-button" href="terrain" Match="NavLinkMatch.Prefix" ActiveClass="bg">
+                Terrain
+            </NavLink>
+        </div>
     </header>
     @Body
 </div>
diff --git a/Shared/TerrainDrawer.razor b/Shared/TerrainDrawer.razor
@@ -0,0 +1,73 @@
+@if (Terrain != null) {
+if (Terrain.Kind == TerrainKind.Wall) {
+<div class="solid" style="width: @(Terrain.Length)in;">
+    <div class="cut-top cut-left cut-right" style="width: 100%; height: 0.5in;"></div>
+    <div class="cut-left cut-right fold-top fold-bottom" style="height: @(Terrain.Height)in;">
+        <div class="fill print-bg bg-vfill-hrepeat yflip" style="background-image: url('@Terrain.Art.Url');"></div>
+    </div>
+    <div class="cut-left cut-right fold-top fold-bottom" style="height: @(Terrain.Height)in;">
+        <div class="fill print-bg bg-vfill-hrepeat" style="background-image: url('@Terrain.Art.Url');"></div>
+    </div>
+    <div class="cut-bottom cut-left cut-right" style="width: 100%; height: 0.5in;"></div>
+</div>
+} else if (Terrain.Kind == TerrainKind.Clip) {
+<div class="solid" style="width: @(Terrain.Length)in;">
+    <div class="cut-left cut-right cut-top fold-bottom" style="height: @(Terrain.Height)in;">
+        <div class="fill print-bg bg-vfill-hrepeat" style="background-image: url('@Terrain.Art.Url');"></div>
+    </div>
+
+    <div class="fold-top cut-left cut-right print-bg w3-light-grey w3-center" style="height: @(Terrain.HalfHeight)in;">
+        no-glue
+    </div>
+    <div class="fold-bottom cut-left cut-right" style="height: @(Terrain.HalfHeight)in;">
+
+    </div>
+
+    <div class="fold-bottom fold-top cut-left cut-right" style="height: @(Terrain.HalfHeight)in;">
+
+    </div>
+    <div class="fold-bottom fold-top cut-left cut-right" style="height: @(Terrain.HalfHeight)in;">
+
+    </div>
+
+    <div class="fold-top cut-left cut-right" style="height: @(Terrain.HalfHeight)in;">
+
+    </div>
+    <div class="fold-bottom cut-left cut-right print-bg w3-light-grey w3-center" style="height: @(Terrain.HalfHeight)in;">
+        no-glue
+    </div>
+
+    <div class="cut-left cut-right fold-top cut-bottom" style="height: @(Terrain.Height)in;">
+        <div class="fill print-bg bg-vfill-hrepeat yflip" style="background-image: url('@Terrain.Art.Url');"></div>
+    </div>
+</div>
+} else if (Terrain.Kind == TerrainKind.Floor) {
+<div class="solid fit-image" style="width: @(Terrain.Length)in; height: @(Terrain.Length)in;">
+    <img src="@(Terrain.Art.Url)" class="pixelart">
+</div>
+}else if (Terrain.Kind == TerrainKind.Platform) {
+<div class="solid">
+    <div style="display: flex;">
+        <div class="solid cut-left cut-top fold-right cut-bottom" style="width: @(Terrain.Height)in; height: @(Terrain.Height)in;"></div>
+        <div class="solid fold-left fold-right cut-top fold-bottom" style="width: @(Terrain.Length)in; height: @(Terrain.Height)in;"></div>
+        <div class="solid cut-right cut-top fold-left cut-bottom" style="width: @(Terrain.Height)in; height: @(Terrain.Height)in;"></div>
+    </div>
+    <div style="display: flex;">
+        <div class="solid cut-left cut-top fold-right cut-bottom" style="width: @(Terrain.Height)in; height: @(Terrain.Length)in;"></div>
+        <div class="solid fold-left fold-right fold-top fold-bottom fill-image" style="width: @(Terrain.Length)in; height: @(Terrain.Length)in;">
+            <img src="@(Terrain.Art.Url)" class="pixelart">
+        </div>
+        <div class="solid cut-right cut-top fold-left cut-bottom" style="width: @(Terrain.Height)in; height: @(Terrain.Length)in;"></div>
+    </div>
+    <div style="display: flex;">
+        <div class="solid cut-left cut-top fold-right cut-bottom" style="width: @(Terrain.Height)in; height: @(Terrain.Height)in;"></div>
+        <div class="solid fold-left fold-right fold-top cut-bottom" style="width: @(Terrain.Length)in; height: @(Terrain.Height)in;"></div>
+        <div class="solid cut-right cut-top fold-left cut-bottom" style="width: @(Terrain.Height)in; height: @(Terrain.Height)in;"></div>
+    </div>
+</div>
+}
+}
+
+@code {
+    [Parameter] public Terrain Terrain {get; set;}
+}
diff --git a/Shared/TerrainEditor.razor b/Shared/TerrainEditor.razor
@@ -0,0 +1,79 @@
+<div class="w3-modal @showModalCss">
+    <div class="w3-modal-content w3-round-xlarge">
+        <header class="w3-container w3-center w3-xlarge">
+            Edit Terrain Part
+        </header>
+        @if (mini != null) {
+        <div class="w3-container bg">
+            <label>Name</label>
+            <input class="w3-input w3-margin-bottom" @bind=@mini.Name style="background-color:inherit; color:inherit;">
+            <label>Terrain Type</label>
+            <div class="w3-row-padding" style="background-color:inherit; color:inherit;">
+                <div class="w3-col s6" style="background-color:inherit; color:inherit;">
+                    <select @bind=@mini.Kind class="w3-input w3-margin-bottom" style="background-color:inherit; color:inherit;">
+                        @foreach (TerrainKind kind in Enum.GetValues(typeof(TerrainKind))){
+                            <option value="@kind">@kind</option>
+                        }
+                    </select>
+                </div>
+                <div class="w3-col s6">
+                    @mini.Kind.Description()
+                </div>
+            </div>
+            <label>Size (tiles)</label>
+            <div class="w3-row">
+                <div class="w3-col s3 w3-right-align" style="padding-top: 10px;">
+                    <label>Length</label>
+                </div>
+                <div class="w3-col s3">
+                    <input type=number class="w3-input w3-margin-bottom" @bind=@mini.Length style="background-color:inherit; color:inherit;">
+                </div>
+                <div class="w3-col s3 w3-right-align" style="padding-top: 10px;">
+                    <label>Height</label>
+                </div>
+                <div class="w3-col s3">
+                    <input type=number class="w3-input w3-margin-bottom" @bind=@mini.Height style="background-color:inherit; color:inherit;">
+                </div>
+            </div>
+            <label>Replicas</label>
+            <input type="number" class="w3-input w3-margin-bottom" @bind=@mini.Replicas style="background-color:inherit; color:inherit;">
+
+            <div class="w3-margin-top w3-margin-bottom">
+                <div class="w3-row">
+                    <div class="w3-button tab-active">Art</div>
+                </div>
+                <div class="w3-padding" style="background-color: #2D232E;">
+                    <label>URL</label>
+                    <input class="w3-input" @bind=@mini.Art.Url style="background-color:inherit; color:inherit;">
+                    <div class="w3-center w3-padding">
+                        OR
+                    </div>
+                    <FilePicker Accept="image/*" AsDataUrl=true OnFileLoad=@((url) => { mini.Art.Url = url; StateHasChanged(); })></FilePicker>
+                </div>
+            </div>
+        </div>
+        <footer class="w3-container w3-center">
+            <button class="w3-button" @onclick=save>Done</button>
+        </footer>
+        }
+    </div>
+</div>
+
+@code {
+    [Parameter] public Action OnChange {get; set;}
+    private Terrain mini;
+
+    private bool isOpen = false;
+    private string showModalCss => isOpen ? "w3-show" : "w3-hide";
+
+    public void Edit(Terrain mini) {
+        this.mini = mini;
+        this.isOpen = true;
+        StateHasChanged();
+    }
+
+    public void save() {
+        OnChange?.Invoke();
+        this.isOpen = false;
+    }
+}