Created PRD

stuart-bradley · Feb 8, 2024 · 9d1a6f2 · 9d1a6f2
1 parent e3e620c
commit 9d1a6f2
Show file tree

Hide file tree

Showing 3 changed files with 186 additions and 0 deletions.
diff --git a/documentation/images/catan-randomiser-js-wireframe.png b/documentation/images/catan-randomiser-js-wireframe.png
diff --git a/documentation/images/catan_randomiser_js_wireframe.drawio b/documentation/images/catan_randomiser_js_wireframe.drawio
@@ -0,0 +1,154 @@
+<mxfile host="app.diagrams.net" modified="2024-02-08T10:44:56.482Z" agent="Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:122.0) Gecko/20100101 Firefox/122.0" etag="sJPh1zEOC69bpC9gUotY" version="23.1.2" type="device">
+  <diagram name="Page-1" id="pBX5FRhIZJ2iEP_oFzGw">
+    <mxGraphModel dx="1434" dy="746" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
+      <root>
+        <mxCell id="0" />
+        <mxCell id="1" parent="0" />
+        <mxCell id="QbdXmMKhoKUVBJRGlNqv-1" value="" style="strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.containers.browserWindow;rSize=0;strokeColor=#666666;strokeColor2=#008cff;strokeColor3=#c4c4c4;mainText=,;recursiveResize=0;" vertex="1" parent="1">
+          <mxGeometry x="40" y="80" width="760" height="1040" as="geometry" />
+        </mxCell>
+        <mxCell id="QbdXmMKhoKUVBJRGlNqv-2" value="Page 1" style="strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.containers.anchor;fontSize=17;fontColor=#666666;align=left;whiteSpace=wrap;" vertex="1" parent="QbdXmMKhoKUVBJRGlNqv-1">
+          <mxGeometry x="60" y="12" width="110" height="26" as="geometry" />
+        </mxCell>
+        <mxCell id="QbdXmMKhoKUVBJRGlNqv-3" value="https://www.catan-randomiser-js.com/eb1e0fd2-89ad-44cc-955f-76c299517da1" style="strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.containers.anchor;rSize=0;fontSize=17;fontColor=#666666;align=left;" vertex="1" parent="QbdXmMKhoKUVBJRGlNqv-1">
+          <mxGeometry x="130" y="60" width="250" height="26" as="geometry" />
+        </mxCell>
+        <mxCell id="QbdXmMKhoKUVBJRGlNqv-5" value="" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="190" y="210" width="440" height="890" as="geometry" />
+        </mxCell>
+        <mxCell id="QbdXmMKhoKUVBJRGlNqv-6" value="" style="whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="210" y="230" width="400" height="310" as="geometry" />
+        </mxCell>
+        <mxCell id="QbdXmMKhoKUVBJRGlNqv-10" value="" style="shape=image;html=1;verticalAlign=top;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;imageAspect=0;aspect=fixed;image=https://cdn0.iconfinder.com/data/icons/phosphor-regular-vol-3/256/hexagon-128.png" vertex="1" parent="1">
+          <mxGeometry x="340" y="330" width="40" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="QbdXmMKhoKUVBJRGlNqv-11" value="" style="shape=image;html=1;verticalAlign=top;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;imageAspect=0;aspect=fixed;image=https://cdn0.iconfinder.com/data/icons/phosphor-regular-vol-3/256/hexagon-128.png" vertex="1" parent="1">
+          <mxGeometry x="370" y="330" width="40" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="QbdXmMKhoKUVBJRGlNqv-12" value="" style="shape=image;html=1;verticalAlign=top;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;imageAspect=0;aspect=fixed;image=https://cdn0.iconfinder.com/data/icons/phosphor-regular-vol-3/256/hexagon-128.png" vertex="1" parent="1">
+          <mxGeometry x="400" y="330" width="40" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="QbdXmMKhoKUVBJRGlNqv-13" value="" style="shape=image;html=1;verticalAlign=top;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;imageAspect=0;aspect=fixed;image=https://cdn0.iconfinder.com/data/icons/phosphor-regular-vol-3/256/hexagon-128.png" vertex="1" parent="1">
+          <mxGeometry x="430" y="330" width="40" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="QbdXmMKhoKUVBJRGlNqv-24" value="" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="210" y="560" width="400" height="510" as="geometry" />
+        </mxCell>
+        <mxCell id="QbdXmMKhoKUVBJRGlNqv-25" value="" style="shape=image;html=1;verticalAlign=top;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;imageAspect=0;aspect=fixed;image=https://cdn0.iconfinder.com/data/icons/phosphor-regular-vol-3/256/hexagon-128.png" vertex="1" parent="1">
+          <mxGeometry x="356" y="354" width="40" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="QbdXmMKhoKUVBJRGlNqv-26" value="" style="shape=image;html=1;verticalAlign=top;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;imageAspect=0;aspect=fixed;image=https://cdn0.iconfinder.com/data/icons/phosphor-regular-vol-3/256/hexagon-128.png" vertex="1" parent="1">
+          <mxGeometry x="384" y="354" width="40" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="QbdXmMKhoKUVBJRGlNqv-27" value="" style="shape=image;html=1;verticalAlign=top;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;imageAspect=0;aspect=fixed;image=https://cdn0.iconfinder.com/data/icons/phosphor-regular-vol-3/256/hexagon-128.png" vertex="1" parent="1">
+          <mxGeometry x="414" y="354" width="40" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="QbdXmMKhoKUVBJRGlNqv-28" value="" style="shape=image;html=1;verticalAlign=top;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;imageAspect=0;aspect=fixed;image=https://cdn0.iconfinder.com/data/icons/phosphor-regular-vol-3/256/hexagon-128.png" vertex="1" parent="1">
+          <mxGeometry x="444" y="355" width="40" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="QbdXmMKhoKUVBJRGlNqv-29" value="" style="shape=image;html=1;verticalAlign=top;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;imageAspect=0;aspect=fixed;image=https://cdn0.iconfinder.com/data/icons/phosphor-regular-vol-3/256/hexagon-128.png" vertex="1" parent="1">
+          <mxGeometry x="327" y="356" width="40" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="QbdXmMKhoKUVBJRGlNqv-30" value="" style="shape=image;html=1;verticalAlign=top;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;imageAspect=0;aspect=fixed;image=https://cdn0.iconfinder.com/data/icons/phosphor-regular-vol-3/256/hexagon-128.png" vertex="1" parent="1">
+          <mxGeometry x="341" y="379" width="40" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="QbdXmMKhoKUVBJRGlNqv-31" value="" style="shape=image;html=1;verticalAlign=top;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;imageAspect=0;aspect=fixed;image=https://cdn0.iconfinder.com/data/icons/phosphor-regular-vol-3/256/hexagon-128.png" vertex="1" parent="1">
+          <mxGeometry x="371" y="379" width="40" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="QbdXmMKhoKUVBJRGlNqv-32" value="" style="shape=image;html=1;verticalAlign=top;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;imageAspect=0;aspect=fixed;image=https://cdn0.iconfinder.com/data/icons/phosphor-regular-vol-3/256/hexagon-128.png" vertex="1" parent="1">
+          <mxGeometry x="313" y="380" width="40" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="QbdXmMKhoKUVBJRGlNqv-33" value="" style="shape=image;html=1;verticalAlign=top;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;imageAspect=0;aspect=fixed;image=https://cdn0.iconfinder.com/data/icons/phosphor-regular-vol-3/256/hexagon-128.png" vertex="1" parent="1">
+          <mxGeometry x="400" y="379" width="40" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="QbdXmMKhoKUVBJRGlNqv-34" value="" style="shape=image;html=1;verticalAlign=top;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;imageAspect=0;aspect=fixed;image=https://cdn0.iconfinder.com/data/icons/phosphor-regular-vol-3/256/hexagon-128.png" vertex="1" parent="1">
+          <mxGeometry x="430" y="379" width="40" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="QbdXmMKhoKUVBJRGlNqv-35" value="" style="shape=image;html=1;verticalAlign=top;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;imageAspect=0;aspect=fixed;image=https://cdn0.iconfinder.com/data/icons/phosphor-regular-vol-3/256/hexagon-128.png" vertex="1" parent="1">
+          <mxGeometry x="460" y="380" width="40" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="QbdXmMKhoKUVBJRGlNqv-36" value="" style="shape=image;html=1;verticalAlign=top;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;imageAspect=0;aspect=fixed;image=https://cdn0.iconfinder.com/data/icons/phosphor-regular-vol-3/256/hexagon-128.png" vertex="1" parent="1">
+          <mxGeometry x="356" y="307" width="40" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="QbdXmMKhoKUVBJRGlNqv-37" value="" style="shape=image;html=1;verticalAlign=top;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;imageAspect=0;aspect=fixed;image=https://cdn0.iconfinder.com/data/icons/phosphor-regular-vol-3/256/hexagon-128.png" vertex="1" parent="1">
+          <mxGeometry x="384" y="307" width="40" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="QbdXmMKhoKUVBJRGlNqv-38" value="" style="shape=image;html=1;verticalAlign=top;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;imageAspect=0;aspect=fixed;image=https://cdn0.iconfinder.com/data/icons/phosphor-regular-vol-3/256/hexagon-128.png" vertex="1" parent="1">
+          <mxGeometry x="414" y="307" width="40" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="QbdXmMKhoKUVBJRGlNqv-39" value="" style="shape=image;html=1;verticalAlign=top;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;imageAspect=0;aspect=fixed;image=https://cdn0.iconfinder.com/data/icons/phosphor-regular-vol-3/256/hexagon-128.png" vertex="1" parent="1">
+          <mxGeometry x="328" y="405" width="40" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="QbdXmMKhoKUVBJRGlNqv-40" value="" style="shape=image;html=1;verticalAlign=top;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;imageAspect=0;aspect=fixed;image=https://cdn0.iconfinder.com/data/icons/phosphor-regular-vol-3/256/hexagon-128.png" vertex="1" parent="1">
+          <mxGeometry x="356" y="404" width="40" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="QbdXmMKhoKUVBJRGlNqv-41" value="" style="shape=image;html=1;verticalAlign=top;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;imageAspect=0;aspect=fixed;image=https://cdn0.iconfinder.com/data/icons/phosphor-regular-vol-3/256/hexagon-128.png" vertex="1" parent="1">
+          <mxGeometry x="385" y="404" width="40" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="QbdXmMKhoKUVBJRGlNqv-42" value="" style="shape=image;html=1;verticalAlign=top;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;imageAspect=0;aspect=fixed;image=https://cdn0.iconfinder.com/data/icons/phosphor-regular-vol-3/256/hexagon-128.png" vertex="1" parent="1">
+          <mxGeometry x="415" y="404" width="40" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="QbdXmMKhoKUVBJRGlNqv-43" value="" style="shape=image;html=1;verticalAlign=top;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;imageAspect=0;aspect=fixed;image=https://cdn0.iconfinder.com/data/icons/phosphor-regular-vol-3/256/hexagon-128.png" vertex="1" parent="1">
+          <mxGeometry x="444" y="405" width="40" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="QbdXmMKhoKUVBJRGlNqv-44" value="" style="shape=image;html=1;verticalAlign=top;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;imageAspect=0;aspect=fixed;image=https://cdn0.iconfinder.com/data/icons/phosphor-regular-vol-3/256/hexagon-128.png" vertex="1" parent="1">
+          <mxGeometry x="344" y="429" width="40" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="QbdXmMKhoKUVBJRGlNqv-45" value="" style="shape=image;html=1;verticalAlign=top;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;imageAspect=0;aspect=fixed;image=https://cdn0.iconfinder.com/data/icons/phosphor-regular-vol-3/256/hexagon-128.png" vertex="1" parent="1">
+          <mxGeometry x="372" y="429" width="40" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="QbdXmMKhoKUVBJRGlNqv-46" value="" style="shape=image;html=1;verticalAlign=top;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;imageAspect=0;aspect=fixed;image=https://cdn0.iconfinder.com/data/icons/phosphor-regular-vol-3/256/hexagon-128.png" vertex="1" parent="1">
+          <mxGeometry x="400" y="429" width="40" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="QbdXmMKhoKUVBJRGlNqv-47" value="" style="shape=image;html=1;verticalAlign=top;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;imageAspect=0;aspect=fixed;image=https://cdn0.iconfinder.com/data/icons/phosphor-regular-vol-3/256/hexagon-128.png" vertex="1" parent="1">
+          <mxGeometry x="430" y="429" width="40" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="QbdXmMKhoKUVBJRGlNqv-48" value="" style="shape=image;html=1;verticalAlign=top;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;imageAspect=0;aspect=fixed;image=https://cdn0.iconfinder.com/data/icons/phosphor-regular-vol-3/256/hexagon-128.png" vertex="1" parent="1">
+          <mxGeometry x="357" y="454" width="40" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="QbdXmMKhoKUVBJRGlNqv-49" value="" style="shape=image;html=1;verticalAlign=top;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;imageAspect=0;aspect=fixed;image=https://cdn0.iconfinder.com/data/icons/phosphor-regular-vol-3/256/hexagon-128.png" vertex="1" parent="1">
+          <mxGeometry x="385" y="454" width="40" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="QbdXmMKhoKUVBJRGlNqv-50" value="" style="shape=image;html=1;verticalAlign=top;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;imageAspect=0;aspect=fixed;image=https://cdn0.iconfinder.com/data/icons/phosphor-regular-vol-3/256/hexagon-128.png" vertex="1" parent="1">
+          <mxGeometry x="415" y="454" width="40" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="QbdXmMKhoKUVBJRGlNqv-51" value="Large Landmass" style="strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.forms.comboBox;strokeColor=#999999;fillColor=#ddeeff;align=left;fillColor2=#aaddff;mainText=;fontColor=#666666;fontSize=17;spacingLeft=3;" vertex="1" parent="1">
+          <mxGeometry x="228" y="740" width="352" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="QbdXmMKhoKUVBJRGlNqv-53" value="&lt;font style=&quot;font-size: 18px;&quot;&gt;Randomisation Algorithm&lt;/font&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
+          <mxGeometry x="228" y="700" width="210" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="QbdXmMKhoKUVBJRGlNqv-54" value="" style="strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.forms.rrect;rSize=0;strokeColor=#999999;fillColor=#ffffff;recursiveResize=0;" vertex="1" parent="1">
+          <mxGeometry x="228" y="610" width="362" height="70" as="geometry" />
+        </mxCell>
+        <mxCell id="QbdXmMKhoKUVBJRGlNqv-55" value="Seafarers" style="strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.forms.rrect;rSize=0;fillColor=#eeeeee;strokeColor=#999999;gradientColor=#cccccc;align=left;spacingLeft=4;fontSize=17;fontColor=#666666;labelPosition=right;" vertex="1" parent="QbdXmMKhoKUVBJRGlNqv-54">
+          <mxGeometry x="8" y="7.5" width="15" height="15" as="geometry" />
+        </mxCell>
+        <mxCell id="QbdXmMKhoKUVBJRGlNqv-57" value="Cities and Knights" style="strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.forms.checkbox;rSize=0;resizable=0;fillColor=#aaaaaa;strokeColor=#444444;gradientColor=#666666;align=left;spacingLeft=4;fontSize=17;fontColor=#008cff;labelPosition=right;" vertex="1" parent="QbdXmMKhoKUVBJRGlNqv-54">
+          <mxGeometry x="8" y="40" width="15" height="15" as="geometry" />
+        </mxCell>
+        <mxCell id="QbdXmMKhoKUVBJRGlNqv-59" value="&lt;div align=&quot;left&quot;&gt;&lt;font style=&quot;font-size: 18px;&quot;&gt;Expansions&lt;/font&gt;&lt;/div&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
+          <mxGeometry x="228" y="585" width="210" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="QbdXmMKhoKUVBJRGlNqv-62" value="&lt;div style=&quot;font-size: 18px;&quot; align=&quot;left&quot;&gt;&lt;font style=&quot;font-size: 18px;&quot;&gt;Number of Players&lt;/font&gt;&lt;/div&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
+          <mxGeometry x="231" y="790" width="210" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="QbdXmMKhoKUVBJRGlNqv-63" value="" style="strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.forms.rrect;rSize=0;strokeColor=#999999;fillColor=#ffffff;recursiveResize=0;" vertex="1" parent="1">
+          <mxGeometry x="228" y="830" width="362" height="90" as="geometry" />
+        </mxCell>
+        <mxCell id="QbdXmMKhoKUVBJRGlNqv-64" value="4 Players" style="shape=ellipse;rSize=0;fillColor=#eeeeee;strokeColor=#999999;gradientColor=#cccccc;html=1;align=left;spacingLeft=4;fontSize=17;fontColor=#666666;labelPosition=right;" vertex="1" parent="QbdXmMKhoKUVBJRGlNqv-63">
+          <mxGeometry x="8" y="40" width="15" height="15" as="geometry" />
+        </mxCell>
+        <mxCell id="QbdXmMKhoKUVBJRGlNqv-66" value="6 Players" style="shape=ellipse;rSize=0;fillColor=#aaaaaa;strokeColor=#444444;gradientColor=#666666;html=1;align=left;spacingLeft=4;fontSize=17;fontColor=#008cff;labelPosition=right;" vertex="1" parent="QbdXmMKhoKUVBJRGlNqv-63">
+          <mxGeometry x="8" y="67.5" width="15" height="15" as="geometry" />
+        </mxCell>
+        <mxCell id="QbdXmMKhoKUVBJRGlNqv-67" value="" style="shape=ellipse;fillColor=#444444;strokeColor=none;html=1;" vertex="1" parent="QbdXmMKhoKUVBJRGlNqv-66">
+          <mxGeometry x="3" y="3" width="9" height="9" as="geometry" />
+        </mxCell>
+        <mxCell id="QbdXmMKhoKUVBJRGlNqv-70" value="Generate" style="strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.buttons.button;strokeColor=#666666;fontColor=#ffffff;mainText=;buttonStyle=round;fontSize=17;fontStyle=1;fillColor=#008cff;whiteSpace=wrap;" vertex="1" parent="1">
+          <mxGeometry x="220" y="960" width="370" height="90" as="geometry" />
+        </mxCell>
+      </root>
+    </mxGraphModel>
+  </diagram>
+</mxfile>
diff --git a/documentation/product_requirements_document.md b/documentation/product_requirements_document.md
@@ -0,0 +1,32 @@
+# Product Requirements Document (PRD)
+
+This document outlines the high level requirements that this project needs to be considered feature complete for
+Version 1.
+
+## Description
+
+The Catan Randomiser application should be a web application accessible over the internet that allows a user to generate
+visual representations of a Settlers of Catan board for use when setting up the physical game.
+
+## User Stories
+
+- US1: A user should be able to generate a Settlers of Catan board based on their physical setup (expansions,
+  number of players, etc).
+- US2: A user should be able to share generated boards via a unique URL that is generated for each board.
+
+## Wireframe
+
+![Draw.io mockup of the expected UI for the Catan Randomiser](images/catan-randomiser-js-wireframe.png)
+
+The UI for this project should consist of an image of the final board, as well as a form that includes the following
+fields:
+
+1. Select which expansions a player has.
+2. Select the randomisation algorithm (may change based on 1.).
+3. Select the number of players.
+4. A button to generate a new field.
+
+This wireframe is missing the following functionality that should be included:
+
+- Colour coding of the board, and a way for the user to determine how colours match to physical board pieces
+  (e.g.) a legend or tooltips, etc.