Add validations and distance type

app.py

@@ -6,7 +6,6 @@ import io
 
 app = Flask(__name__)
 
-# Original values dictionary
 VALUES = {
     "five_to_go": {
         "t1": {"len_a": 3100, "len_h": 9100, 'width': 250, 'height': 250, 'elevation': 0, 'stop_plate': False,
@@ -110,6 +109,29 @@ VALUES = {
     }
 }
 
+def calculate_distance(desired_wall_length, stage, size):
+    wall_extra_space_for_paper = 297 if size == 'a3' else 210
+
+    distance = 1
+    step = 1000
+
+    while True:
+        targets = [f't{i}' for i in range(1, 6)]
+        target_info = [_target_info(distance, stage, size, target) for target in targets]
+
+        wall_length = target_info[-1]['position'] + wall_extra_space_for_paper
+
+        if abs(wall_length - desired_wall_length) <= 0.5:
+            break
+        if wall_length > desired_wall_length:
+            distance -= step
+            step = step / 10
+            continue
+        distance += step;
+        if distance > 7000:
+            break
+
+    return distance
 
 def _target_info(distance, stage, size, target):
     values = VALUES[stage][target]
@@ -160,10 +182,13 @@ def index():
 
 @app.route('/generate-pdf', methods=['POST'])
 def generate_pdf():
-    distance = int(request.form.get('distance', 0))
+    distance = int(request.form.get('distance', 1) or 1)
     distance_in_mm = distance * 10
     stage = request.form.get('stage')
     size = request.form.get('size')
+    distance_type = request.form.get('distance_type')
+    if distance_type == 'wall':
+        distance_in_mm = calculate_distance(distance_in_mm, stage, size)
 
     targets = [f't{i}' for i in range(1, 6)]
     target_info = [_target_info(distance_in_mm, stage, size, target) for target in targets]
@@ -177,7 +202,7 @@ def generate_pdf():
 
     rendered_html = render_template(
         'pdf_template.html',
-        distance=distance,
+        distance=distance_in_mm/10,
         size=size,
         stage=stage,
         target_info=target_info,

templates/index.html

@@ -6,11 +6,6 @@
     <title>Paper Challenge</title>
     <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp,container-queries"></script>
     <style>
-        /* Hide the radio buttons */
-        input[type="radio"] {
-            display: none;
-        }
-
         /* Style the labels to act like buttons */
         label {
             display: block;
@@ -37,7 +32,6 @@
         label img {
             width: 100%;
             height: auto;
-            max-height: 150px; /* Limit image height */
         }
 
         /* Style the text below images */
@@ -75,25 +69,43 @@
     </div>
     <h2 class="my-10 mx-auto text-center font-bold text-xl">Wygeneruj tor</h2>
     <form class="" action="/generate-pdf" method="post">
-        <div class="mb-6 max-w-2xl mx-auto">
-            <h2>Odległość od ściany [cm]</h2>
-            <input type="number" id="distance" name="distance"
-                   class="w-full p-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400" required>
+        <div class="mb-6 max-w-2xl mx-auto mt-10">
+            <h2>Rodzaj ograniczenia</h2>
+            <div id="size" class="flex place-content-center">
+                <label for="floor"
+                       class="cursor-pointer border-2 border-transparent rounded-lg overflow-hidden transition-all hover:border-blue-400">
+                    <img src="{{ url_for('static', filename='images/floor.png') }}" alt="Odległość od ściany"
+                         class="w-40 h-auto">
+                <input type="radio" id="floor" name="distance_type" value="floor" required>
+                </label>
+
+                <label for="wall"
+                       class="cursor-pointer border-2 border-transparent rounded-lg overflow-hidden transition-all hover:border-blue-400">
+                    <img src="{{ url_for('static', filename='images/wall.png') }}" alt="Długość ściany"
+                         class="w-40 h-auto">
+                <input type="radio" id="wall" name="distance_type" value="wall" required>
+                </label>
+
+            </div>
+            <div class="mb-6 max-w-2xl mx-auto">
+                <h2>dystans [cm]</h2>
+                <input type="number" id="distance" name="distance" min="100" max="700" class="w-full p-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400" required>
+            </div>
         </div>
         <div class="mb-6 max-w-2xl mx-auto mt-10">
             <h2>Format druku</h2>
             <div id="size" class="flex place-content-center">
-                <input type="radio" id="a4" name="size" value="a4" class="absolute inset-0 opacity-0" required>
                 <label for="a4"
                        class="cursor-pointer border-2 border-transparent rounded-lg overflow-hidden transition-all hover:border-blue-400">
                     <img src="{{ url_for('static', filename='images/a4.png') }}" alt="A4 (210mm x 297mm)"
-                         class="w-24 h-auto">
+                         class="w-40 h-auto">
+                <input type="radio" id="a4" name="size" value="a4" required>
                 </label>
-                <input type="radio" id="a3" name="size" value="a3" class="absolute inset-0 opacity-0">
                 <label for="a3"
                        class="cursor-pointer border-2 border-transparent rounded-lg overflow-hidden transition-all hover:border-blue-400">
                     <img src="{{ url_for('static', filename='images/a3.png') }}" alt="A3 (297mm x 420mm)"
-                         class="w-24 h-auto">
+                         class="w-40 h-auto">
+                <input type="radio" id="a3" name="size" value="a3" required>
                 </label>
             </div>
         </div>
@@ -102,61 +114,61 @@
             <h2>Tor</h2>
             <div id="stage" class="grid grid-cols-1 gap-4">
                 <div>
-                    <input type="radio" id="five_to_go" name="stage" value="five_to_go" required>
                     <label for="five_to_go">
                         <p>Five To Go</p>
                         <img src="{{ url_for('static', filename='images/five_to_go.png') }}" alt="Five To Go">
+                        <input type="radio" id="five_to_go" name="stage" value="five_to_go" required>
                     </label>
                 </div>
                 <div>
-                    <input type="radio" id="showdown_left" name="stage" value="showdown_left">
                     <label for="showdown_left">
                         <p>Showdown (left box)</p>
                         <img src="{{ url_for('static', filename='images/showdown_left.png') }}"
                              alt="Showdown (left box)">
+                    <input type="radio" id="showdown_left" name="stage" value="showdown_left">
                     </label>
                 </div>
                 <div>
-                    <input type="radio" id="showdown_right" name="stage" value="showdown_right">
                     <label for="showdown_right">
                         <p>Showdown (right box)</p>
                         <img src="{{ url_for('static', filename='images/showdown_right.png') }}"
                              alt="Showdown (right box)">
+                        <input type="radio" id="showdown_right" name="stage" value="showdown_right">
                     </label>
                 </div>
                 <div>
-                    <input type="radio" id="smoke_and_hope" name="stage" value="smoke_and_hope">
                     <label for="smoke_and_hope">
                         <p>Smoke & Hope</p>
                         <img src="{{ url_for('static', filename='images/smoke_and_hope.png') }}" alt="Smoke & Hope">
+                        <input type="radio" id="smoke_and_hope" name="stage" value="smoke_and_hope">
                     </label>
                 </div>
                 <div>
-                    <input type="radio" id="accelerator" name="stage" value="accelerator">
                     <label for="accelerator">
                         <p>Accelerator</p>
                         <img src="{{ url_for('static', filename='images/accelerator.png') }}" alt="Accelerator">
+                       <input type="radio" id="accelerator" name="stage" value="accelerator">
                     </label>
                 </div>
                 <div>
-                    <input type="radio" id="pendulum" name="stage" value="pendulum">
                     <label for="pendulum">
                         <p>Pendulum</p>
                         <img src="{{ url_for('static', filename='images/pendulum.png') }}" alt="Pendulum">
+                        <input type="radio" id="pendulum" name="stage" value="pendulum">
                     </label>
                 </div>
                 <div>
-                    <input type="radio" id="speed_option" name="stage" value="speed_option">
                     <label for="speed_option">
                         <p>Speed Option</p>
                         <img src="{{ url_for('static', filename='images/speed_option.png') }}" alt="Speed Option">
+                        <input type="radio" id="speed_option" name="stage" value="speed_option">
                     </label>
                 </div>
                 <div>
-                    <input type="radio" id="roundabout" name="stage" value="roundabout">
                     <label for="roundabout">
                         <p>Roundabout</p>
                         <img src="{{ url_for('static', filename='images/roundabout.png') }}" alt="RoundAbout">
+                        <input type="radio" id="roundabout" name="stage" value="roundabout">
                     </label>
                 </div>
             </div>

templates/pdf_template.html

@@ -82,7 +82,7 @@
         {% endfor %}
     </div>
 
-    <p>Minimalna długość ściany: {{ wall_length/10 }}cm</p>
+    <p>Wymagana długość ściany: {{ wall_length/10 }}cm</p>
     <p>Odległość od ściany: {{ distance }}cm</p>
     <p>Przygotowanie toru:</p>
     <ul>
@@ -122,132 +122,3 @@
 
 </body>
 </html>
-
-{#<!doctype html>#}
-{#<html lang="en">#}
-{#<head>#}
-{#    <meta charset="UTF-8">#}
-{#    <meta name="viewport" content="width=device-width, initial-scale=1.0">#}
-{#    <title>Paper Challenge - {{ stage.split('_') | map('capitalize') | join(' ') }} - {{ distance }} cm#}
-{#        - {{ size|capitalize }}</title>#}
-{#    <style>#}
-{#        @page {#}
-{#            size: {{ size }};#}
-{#            margin: 5mm;#}
-{#        }#}
-{##}
-{#        body {#}
-{#            font-family: sans-serif;#}
-{#            margin-top: 0;#}
-{#        }#}
-{##}
-{#        h1, h2 {#}
-{#            text-align: center;#}
-{#            margin-top: 20mm;#}
-{#        }#}
-{##}
-{#        .page-break {#}
-{#            page-break-after: always;#}
-{#        }#}
-{##}
-{#        .target {#}
-{#            margin: 0 auto;#}
-{#            background-color: dodgerblue;#}
-{#            position: absolute;#}
-{#            top: 0%;#}
-{#            left: 50%;#}
-{#            transform: translate(-50%, -50%);#}
-{##}
-{#        }#}
-{##}
-{#        .circle {#}
-{#            border-radius: 50%;#}
-{#        }#}
-{##}
-{#        .post {#}
-{#            margin: auto;#}
-{#            background-color: black;#}
-{#            position: relative;#}
-{#        }#}
-{##}
-{#        .elevator {#}
-{#            position: absolute;#}
-{#            bottom: 0;#}
-{#            left: 50%;#}
-{#            transform: translate(-50%, 0);#}
-{#        }#}
-{##}
-{#        .stop-plate {#}
-{#            background-color: red !important;#}
-{#        }#}
-{##}
-{#        .mounting-point {#}
-{#            height: 10mm;#}
-{#            width: 0.5mm;#}
-{#            background-color: #ccc;#}
-{#            margin: auto;#}
-{#        }#}
-{##}
-{#        .mounting-info {#}
-{#            font-size: xx-small;#}
-{#            color: #ccc;#}
-{#        }#}
-{##}
-{#        .preview {#}
-{#            position: relative;#}
-{#            display: block;#}
-{#            border-bottom: solid 1px black;#}
-{#            border-top: solid 1px black;#}
-{#            width: 100%;#}
-{#            height: 75mm;#}
-{#        }#}
-{##}
-{#        .preview-post {#}
-{#            position: absolute;#}
-{#        }#}
-{#    </style>#}
-{#</head>#}
-{#<body>#}
-{#<div>#}
-{#    <h1>Paper Challenge</h1>#}
-{#    <h2>{{ stage.split('_') | map('capitalize') | join(' ') }}</h2>#}
-{#    <div class="preview">#}
-{#        {% for target in preview_target_info %}#}
-{#            <div class="post preview-post {% if target.stop_plate %} stop-plate {% endif %}"#}
-{#                 style="top: {{ 50 - target.post_height }}mm; left: {{ target.position + 3 }}mm; width: {{ target.post_width }}mm; height: {{ target.height }}mm;">#}
-{#                <div class="target {% if target.width == target.height %} circle {% endif %}"#}
-{#                     style="width: {{ target.width }}mm; height: {{ target.height }}mm"></div>#}
-{#            </div>#}
-{#        {% endfor %}#}
-{#    </div>#}
-{#    <p>Minimalna długość ściany: {{ wall_length/10 }}cm</p>#}
-{#    <p>Odległość od ściany: {{ distance }}cm</p>#}
-{#    <p>Przygotowanie toru:</p>#}
-{#    <ul>#}
-{#        <li>Umieść z lewej strony ściany pierwszy cel ze znacznikiem "punkt ZERO"</li>#}
-{#        <li>Wyznacz pole startowe {{ box_position }}cm od punktu "zero"</li>#}
-{#        <li>Upewnij się, że pole startowe znjaduje się w dogodnym miejscu, pomieszczenia, tak aby nic nie przeszkazdało#}
-{#            w swobodnym dobyciu i składaniu do celów na całej szerokości ściany#}
-{#        </li>#}
-{#        <li>W razie potrzeby dostosuj pierwszy cel wraz z punktem ZERO i powtórz dwa powyższe kroki</li>#}
-{#        <li>Umieść na ścianie pozostałe cele zgodnie z odległościami podanymi na znacznikach pozycji na dole każdego celu. Upewnij się, że wszystkie cele są umieszczone w jednej linii równoległej do podłoża</li>#}
-{#    </ul>#}
-{##}
-{#</div>#}
-{# <div class="page-break"></div>#}
-{#{% for target in target_info %}#}
-{#    <div class="page-break"></div>#}
-{#    <div class="elevator">#}
-{#        <div class="post {% if target.stop_plate %} stop-plate {% endif %}" style="width: {{ target.post_width }}mm; height: {{ target.post_height }}mm;">#}
-{#             <div class="target {% if target.width == target.height %} circle {% endif %}" style="width: {{ target.width }}mm; height: {{ target.height }}mm"></div>#}
-{#        </div>#}
-{#        {% if target.target == 't1' %}#}
-{#            <div class="mounting-info">punkt ZERO ({{ stage.split('_') | map('capitalize') | join(' ') }})</div>#}
-{#        {% else %}#}
-{#            <div class="mounting-info">{{ target.position / 10 }}cm from 0 point ({{ stage.split('_') | map('capitalize') | join(' ') }})</div>#}
-{#        {% endif %}#}
-{#        <div class="mounting-point"></div>#}
-{#    </div>#}
-{#{% endfor %}#}
-{#</body>#}
-{#</html>#}