Done Infi puzzle
[advent-of-code-17.git] / problems / infi.html
diff --git a/problems/infi.html b/problems/infi.html
new file mode 100644 (file)
index 0000000..aea5106
--- /dev/null
@@ -0,0 +1,316 @@
+<!DOCTYPE html>\r
+<html lang="en">\r
+<head>\r
+    <meta charset="UTF-8">\r
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">\r
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">\r
+    <meta name="favicon" content="./favicon.ico">\r
+\r
+    <title>Infi.nl - Advent of Code</title>\r
+\r
+    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-12357372-4"></script>\r
+    <script>\r
+        window.dataLayer = window.dataLayer || [];\r
+        function gtag() { dataLayer.push(arguments); }\r
+        gtag('js', new Date());\r
+        gtag('config', 'UA-12357372-4');\r
+    </script>\r
+\r
+    <style>\r
+        body {\r
+            margin: 0;\r
+            overflow: hidden;\r
+        }\r
+\r
+        html,\r
+        body,\r
+        .wrapper {\r
+            height: 100%;\r
+        }\r
+\r
+        .wrapper {\r
+            display: none;\r
+            overflow-y: auto;\r
+            padding: 0 50px;\r
+            background-image: url(wallpaper.png);\r
+            background-color: rgba(15, 15, 35, 0.7);\r
+            background-repeat: no-repeat;\r
+            background-size: cover;\r
+            background-position: center;\r
+            background-blend-mode: multiply;\r
+        }\r
+\r
+        .wrapper.show {\r
+            display: block;\r
+        }\r
+\r
+        h1,\r
+        p,\r
+        li,\r
+        a,\r
+        input,\r
+        label,\r
+        pre,\r
+        textarea {\r
+            font-family: Consolas, 'Courier New', "Lucida Console", Courier, Monaco, monospace, sans-serif;\r
+        }\r
+\r
+        p,\r
+        a,\r
+        pre,\r
+        input,\r
+        textarea {\r
+            font-size: 16px;\r
+        }\r
+\r
+        h1,\r
+        p,\r
+        li,\r
+        label {\r
+            color: #fefefe;\r
+        }\r
+\r
+        a {\r
+            color: #ff6e00;\r
+        }\r
+\r
+        h1 {\r
+            font-size: 21px;\r
+        }\r
+\r
+        pre {\r
+            color: #1a1a1a;\r
+            font-weight: 600;\r
+            display: inline-block;\r
+            margin: 0;\r
+            padding: 10px;\r
+            background-color: rgba(212, 212, 212, 0.8);\r
+            border-radius: 10px;\r
+        }\r
+\r
+        textarea {\r
+            padding: 20px;\r
+        }\r
+\r
+        img {\r
+            width: 300px;\r
+            margin-top: 20px;\r
+            margin-bottom: 40px;\r
+        }\r
+\r
+        form {\r
+            margin-top: 20px;\r
+        }\r
+\r
+        form#solutionFormA,\r
+        form#solutionFormB,\r
+        form#resultForm {\r
+            display: flex;\r
+        }\r
+\r
+        form#resultForm {\r
+            flex-flow: column nowrap;\r
+            max-width: 600px;\r
+        }\r
+\r
+        form#resultForm > div {\r
+            display: flex;\r
+            margin-bottom: 20px;\r
+        }\r
+\r
+        form#resultForm input {\r
+            flex: 1;\r
+        }\r
+\r
+        form#resultForm label {\r
+            flex: 0 0 200px;\r
+            align-self: center;\r
+        }\r
+\r
+        label {\r
+            color: #ff6e00;\r
+        }\r
+\r
+        input {\r
+            border: 0;\r
+            padding: 10px 20px;\r
+        }\r
+\r
+        input[type="submit"] {\r
+            border-radius: 0;\r
+            background: #ff6e00;\r
+        }\r
+\r
+        .footer {\r
+            margin-top: 20px;\r
+            max-width: 600px;\r
+            display: flex;\r
+            justify-content: space-between;\r
+        }\r
+\r
+        @media(min-width: 500px) {\r
+            h1 {\r
+                font-size: 28px;\r
+            }\r
+\r
+            p,\r
+            a,\r
+            li,\r
+            input {\r
+                font-size: 21px;\r
+            }\r
+\r
+            ul,\r
+            ol {\r
+                padding-left: 60px;\r
+            }\r
+        }\r
+\r
+        @media(max-width: 700px) {\r
+            .wrapper {\r
+                padding: 0 20px;\r
+            }\r
+\r
+            .footer {\r
+                flex-flow: column nowrap;\r
+            }\r
+\r
+            li {\r
+                font-size: 14px;\r
+            }\r
+\r
+            pre {\r
+                font-size: 10px;\r
+            }\r
+        }\r
+    </style>\r
+</head>\r
+\r
+<body>\r
+\r
+    <div id="partOne" class="wrapper">\r
+        <a href="https://infi.nl">\r
+            <img src="logo.png" alt="Het logo van Infi">\r
+        </a>\r
+\r
+        <h1>Welkom bij de Advent of Code puzzel van Infi!</h1>\r
+\r
+        <p>\r
+            Robots will eat your job!\r
+        </p>\r
+        <p>\r
+            Bij Infi houden wij niet van repetitief werk en dus proberen we dit jaar wat tijdrovende taken te automatiseren. Voor het uitdelen van de kerstcadeaus hebben wij daarom bezorgrobots gebouwd, zodat wij ons volledig kunnen richten op code committen en kerstborrels bezoeken.\r
+        </p>\r
+        <p>\r
+            Helaas zitten we pas op release 0.9, want we kwamen er achter dat soms meerdere robots op dezelfde plek uit kunnen komen en dat is natuurlijk niet efficiënt. We moeten dit snel oplossen door te bepalen hoe vaak deze situatie voorkomt, want het is al bijna de 25ste! Help jij mee?\r
+        </p>\r
+        <p>\r
+            Om te helpen met debuggen hebben we enkele logs beschikbaar gemaakt. Deze zijn in het volgende formaat opgeslagen:\r
+        </p>\r
+        <pre>[sx1,sy1][sx2,sy2](x1,y1)(x2,y2)(x1,y1)</pre>\r
+        <p>\r
+            Eerst vind je tussen de blokhaken de startposities van de robots. Let op: schaalbaarheid is belangrijk, dus het aantal robots is variabel! Vervolgens bevat het log de bewegingen die door de robots uitgevoerd zijn, in dezelfde volgorde als dat de robots zijn gedefinieerd.\r
+        </p>\r
+\r
+        <p>Voorbeeld:</p>\r
+        <pre>[0,0][1,1](1,0)(0,-1)(0,1)(-1,0)(-1,0)(0,1)(0,-1)(1,0)</pre>\r
+        <ol>\r
+            <li>Robot 1 begint op 0,0 en Robot 2 begint op 1,1</li>\r
+            <li>Robot 1 gaat naar 1,0 (0,0 + 1,0)</li>\r
+            <li>Robot 2 gaat naar 1,0 (1,1 + 0,-1)</li>\r
+            <li>Twee robots op dezelfde plek. Dat is niet goed.</li>\r
+            <li>Robot 1 gaat naar 1,1 (1,0 + 0,1)</li>\r
+            <li>Robot 2 gaat naar 0,0 (1,0 + -1,0)</li>\r
+            <li>Robot 1 gaat naar 0,1 (1,1 + -1,0)</li>\r
+            <li>Robot 2 gaat naar 0,1 (0,0 + 0,1)</li>\r
+            <li>Weer twee robots op dezelfde plek.</li>\r
+            <li>Robot 1 gaat naar 0,0 (0,1 + 0,-1)</li>\r
+            <li>Robot 2 gaat naar 1,1 (0,1 + 1,0)</li>\r
+        </ol>\r
+\r
+        <p>\r
+            Kun jij uitrekenen hoe vaak alle robots tegelijk op dezelfde plek uitkomen voor het volgende logbestand?\r
+        </p>\r
+\r
+        <a id="uidLink" target="_blank">Klik hier om de log te bekijken</a>\r
+\r
+        <form id="solutionFormA">\r
+            <input type="number" name="inputSolutionA" id="inputSolutionA">\r
+            <input type="submit" value="Stuur je antwoord op">\r
+        </form>\r
+\r
+        <div class="footer">\r
+            <a href="http://werkenbij.infi.nl">Kom bij ons werken!</a>\r
+            <a href="http://infi.nl">Bezoek onze coole website</a>\r
+        </div>\r
+    </div>\r
+\r
+    <div id="partTwo" class="wrapper">\r
+        <a href="https://infi.nl">\r
+            <img src="logo.png" alt="Het logo van Infi">\r
+        </a>\r
+\r
+        <h1>Breaking news: we zien een patroon!</h1>\r
+\r
+        <p>\r
+            Dit is heel gek: tijdens het doorspitten van de logs ontdekten we een vreemd patroon in de bewegingen van de robots. Het lijkt erop dat de robots slimmer zijn dan we dachten en dat ze tijdens hun werkzaamheden een patroon hebben gemaakt dat ons niet eerder was opgevallen. This could be the AI we’ve been looking for: kun jij het geheime bericht vinden?\r
+        </p>\r
+\r
+        <a id="uidLink" target="_blank">Klik hier om de log te bekijken</a>\r
+\r
+        <form id="solutionFormB">\r
+            <input type="number" name="inputSolutionB" id="inputSolutionB">\r
+            <input type="submit" value="Stuur je antwoord op">\r
+        </form>\r
+\r
+        <div class="footer">\r
+            <a href="http://werkenbij.infi.nl">Kom bij ons werken!</a>\r
+            <a href="http://infi.nl">Bezoek onze coole website</a>\r
+        </div>\r
+    </div>\r
+\r
+    <div id="result" class="wrapper">\r
+        <a href="https://infi.nl">\r
+            <img src="logo.png" alt="Het logo van Infi">\r
+        </a>\r
+\r
+        <h1>Eureka!</h1>\r
+\r
+        <p>\r
+            Met jouw hulp hebben we onze robots kunnen optimaliseren! Als je het onderstaande formulier invult en je bij de eerste 5 zit, dan belonen wij jou met een cool t-shirt!\r
+        </p>\r
+\r
+        <a href="https://goo.gl/forms/dBnQx5pD5iQMLm9D2">Klik hier om ons jouw oplossing te sturen</a>\r
+\r
+        <div class="footer">\r
+            <a href="http://werkenbij.infi.nl">Kom bij ons werken!</a>\r
+            <a href="http://infi.nl">Bezoek onze coole website</a>\r
+        </div>\r
+    </div>\r
+\r
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>\r
+    <script src="script.js"></script>\r
+\r
+    <!--\r
+\r
+    powered by\r
+                                        ///////////   /////\r
+                                        ////////////.  //////\r
+                                        /////            //*\r
+                                        /////\r
+    /////     *///////////////,      /////////////////////\r
+    /////    ///////////////////     /////////////////////\r
+    /////   //////         //////    /////           /////\r
+    /////   /////           /////    /////           /////\r
+    /////   /////           /////    /////           /////\r
+    /////   /////           /////    /////           /////\r
+    /////   /////           /////    /////           /////\r
+    /////   /////           /////    /////           /////\r
+    ///     ///             ///      ///             ///\r
+\r
+    https://infi.nl\r
+\r
+    -->\r
+\r
+</body>\r
+</html>\r