Add Laundromat minigame

sharkiller · Feb 14, 2024 · 5a4e7cc · 5a4e7cc
1 parent 291e4e2
commit 5a4e7cc
Show file tree

Hide file tree

Showing 6 changed files with 521 additions and 0 deletions.
diff --git a/nopixel_minigame/4.0/index.html b/nopixel_minigame/4.0/index.html
@@ -40,6 +40,7 @@
 </head>
 <body>
 <div class="credits">
+    <a href="laundromat/">Laundromat Minigame</a><br>
     <a href="roof_running/">Roof Running Minigame</a><br><br>
     <a href="../">NoPixel 3.0 Minigames</a><br><br>
     Whisper me on Twitch <b>@Sh4rkill3r</b> or Discord <b>sharkiller</b><br>

diff --git a/nopixel_minigame/4.0/laundromat/favicon.ico b/nopixel_minigame/4.0/laundromat/favicon.ico
diff --git a/nopixel_minigame/4.0/laundromat/index.html b/nopixel_minigame/4.0/laundromat/index.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <title>NoPixel Laundromat Minigame</title>
+    <meta name="description" content="Play the NoPixel Laundromat Minigame and match the correct colors.">
+    <link rel="canonical" href="https://sharkiller.ddns.net/nopixel_minigame/4.0/laundromat/" />
+    <meta name="viewport" content="width=device-width, initial-scale=0.4">
+    <link rel="icon" type="image/png" href="favicon.ico" sizes="32x32" />
+    <link rel="stylesheet" type="text/css" href="minigame.css?v=20240213">
+    <script src="https://unpkg.com/[email protected]/konva.min.js"></script>
+    <script defer src="minigame.js?v=20240213"></script>
+    <script> // Microsoft Bing
+        (function(c,l,a,r,i,t,y){
+            c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+            t=l.createElement(r);t.async=true;t.src="https://www.clarity.ms/tag/9twm8m8r4i?ref=bwt";
+            y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+        })(window, document, "clarity", "script", "9twm8m8r4i");
+    </script>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-52394643-1"></script>
+    <script> // Google Analytics
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'UA-52394643-1');
+    </script>
+</head>
+<body>
+    <h1 class="title">NoPixel Laundromat Minigame</h1>
+    <h3 class="description">
+        Play the NoPixel Laundromat Minigame and match the correct colors.
+        <br><br>
+        <u>How to play:</u> Rotate the dots with ← and → or A and D to match the outer circle color.<br>
+    </h3>
+    <div class="streaks">
+        STREAK: <span class="streak">0</span> <span class="fa">&#xf233;</span> MAX STREAK: <span class="max_streak">0</span>
+        <br>TIME: <span class="time">0.000</span> <span class="fa">&#xf2f2;</span> BEST TIME: <span class="best_time">0.000</span>
+    </div>
+    <div class="options">
+        <div class="option speed">
+            <label for="speed">Speed:</label>
+            <input id="speed" type="range" value="10" min="7" max="30" autocomplete="off">
+            <div class="speed_value">10s</div>
+        </div>
+    </div>
+    <div class="minigame">
+        <div class="splash"><div class="fa hacker">&#xf11b;</div>Lockpick... Unlock each lock...</div>
+        <div class="game-canvas hidden" id="game-canvas"></div>
+    </div>
+    <div class="restart"><button class="btn_again">AGAIN!</button></div>
+    <div class="credits">
+        Whisper me on Twitch <b>@Sh4rkill3r</b> or Discord <b>sharkiller</b><br>
+        <div class="donate">
+            <span>
+                I maintain these minigames in my spare time, free of ads and available to everyone.<br>
+                If you wish to donate to dedicate more time is very appreciated.
+            </span><br>
+            <a href="https://www.paypal.com/donate/?hosted_button_id=Z9D2F35BDMBBW" target="_blank">
+                <img src="../../paypal.png" alt="Paypal" height="70">
+            </a><br>
+        </div>
+        See also:<br>
+        <b>&gt;Laundromat Minigame&lt;</b><br>
+        <a href="../roof_running/">Roof Running Minigame</a><br><br>
+        <a href="../../">NoPixel 3.0 Minigames</a><br><br>
+        <div xmlns:cc="https://creativecommons.org/ns#" xmlns:dct="https://purl.org/dc/terms/"><a property="dct:title" rel="cc:attributionURL" href="https://sharkiller.ddns.net/nopixel_minigame/">NoPixel Minigames</a> by <a rel="cc:attributionURL dct:creator" property="cc:attributionName" href="https://github.com/sharkiller">Sharkiller</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-nd/4.0/?ref=chooser-v1" target="_blank" rel="license noopener noreferrer" style="display:inline-block;">CC BY-NC-ND 4.0<img alt="CC" style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1"><img alt="BY" style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1"><img alt="NC" style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/nc.svg?ref=chooser-v1"><img alt="ND" style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/nd.svg?ref=chooser-v1"></a></div>
+    </div>
+</body>
+</html>
diff --git a/nopixel_minigame/4.0/laundromat/minigame.css b/nopixel_minigame/4.0/laundromat/minigame.css
@@ -0,0 +1,158 @@
+/*!
+ * Font Awesome Free 5.15.2 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ */
+@font-face {
+    font-family: "Font Awesome 5 Free";
+    font-style: normal;
+    font-weight: 900;
+    font-display: block;
+    src: url(https://use.fontawesome.com/releases/v5.15.2/webfonts/fa-solid-900.eot);
+    src: url(https://use.fontawesome.com/releases/v5.15.2/webfonts/fa-solid-900.eot?#iefix) format("embedded-opentype"),
+         url(https://use.fontawesome.com/releases/v5.15.2/webfonts/fa-solid-900.woff2) format("woff2"),
+         url(https://use.fontawesome.com/releases/v5.15.2/webfonts/fa-solid-900.woff) format("woff"),
+         url(https://use.fontawesome.com/releases/v5.15.2/webfonts/fa-solid-900.ttf) format("truetype"),
+         url(https://use.fontawesome.com/releases/v5.15.2/webfonts/fa-solid-900.svg#fontawesome) format("svg")
+}
+
+.fa, .fas {
+    font-family: "Font Awesome 5 Free", sans-serif;
+    font-weight: 900
+}
+
+/*!
+ * Game
+ */
+
+body{
+    background-color: #15181d;
+    font-family: sans-serif;
+}
+
+.title{
+    text-align: center;
+    color: white;
+}
+.description{
+    text-align: center;
+    color: gray;
+}
+.description sub{
+    font-style: italic;
+}
+
+.streaks {
+    display: block;
+    margin: 40px auto;
+    text-align: center;
+    font-size: 30px;
+    font-weight: bold;
+    text-transform: uppercase;
+    color: white;
+    width: -moz-fit-content;
+    width: fit-content;
+    background-color: #028000;
+    padding: 12px;
+    border-radius: 18px;
+}
+.best_time,
+.time {
+    display: inline-block;
+    width: 100px;
+}
+.streaks .fa {
+    padding: 0 10px;
+}
+.options{
+    font-weight: bold;
+    text-align: center;
+    margin: 0 auto 10px;
+}
+.option{
+    display: inline-block;
+    color: white;
+    font-weight: bold;
+    text-align: center;
+    width: -moz-fit-content;
+    width: fit-content;
+    height: 20px;
+    background-color: #20282e;
+    padding: 10px 20px;
+    margin: 0 auto 10px;
+    border-radius: 6px;
+}
+.option.speed input{
+    vertical-align: text-top;
+}
+.speed_value{
+    display: inline-block;
+    width: 18px;
+    text-align: right;
+}
+.dots_value{
+    display: inline-block;
+    width: 40px;
+    text-align: center;
+}
+.minigame{
+    margin: 0 auto 20px;
+    width: 540px;
+    min-width: 540px;
+    max-width: 540px;
+    height: 540px;
+    min-height: 540px;
+    max-height: 540px;
+    background-color: #232832;
+}
+.splash{
+    display: inline-block;
+    width: 100%;
+    margin: 220px auto;
+    text-align: center;
+    color: white;
+    font-size: 16px;
+    user-select: none;
+}
+.splash .hacker{
+    font-size: 65px;
+    margin-bottom: 30px;
+}
+.game-canvas{
+    margin: 0;
+    background-color: #0c2332;
+}
+.hidden {
+    display: none;
+}
+.restart{
+    text-align: center;
+}
+.btn_again {
+    padding: 6px 15px;
+    font-weight: bold;
+}
+.credits{
+    text-align: center;
+    color: gray;
+    margin-top: 40px;
+}
+.credits a{
+    color: #ccc;
+}
+.credits b{
+    color: white;
+}
+.credits .fas{
+    color: red;
+}
+.credits .donate{
+    margin: 20px 0;
+}
+.credits .coin{
+    font-weight: bold;
+    color: white;
+}
+.credits .wallet{
+    font-family: monospace;
+    font-size: 20px;
+}