From f188e94e0cfbe048f8cf52f62850ad1d2e39745f Mon Sep 17 00:00:00 2001
From: Daniel Kluge <daniel-git@c0ntroller.de>
Date: Sat, 30 Jul 2022 17:48:18 +0200
Subject: [PATCH] Even more pingi

---
 lib/commands/definitions.ts | 27 +++++++++++++++++++++++--
 next.config.js              |  3 +++
 styles/Random.module.scss   | 40 +++++++++++++++++++++++++++++++++++++
 3 files changed, 68 insertions(+), 2 deletions(-)
 create mode 100644 styles/Random.module.scss

diff --git a/lib/commands/definitions.ts b/lib/commands/definitions.ts
index fe45e1f..2ec1361 100644
--- a/lib/commands/definitions.ts
+++ b/lib/commands/definitions.ts
@@ -1,6 +1,7 @@
 import type { Diary, Project } from "../content/types";
 import type { Command, Flag } from "./types";
 import Color from "color";
+import styles from "../../styles/Random.module.scss";
 
 function getCommandByName(name: string): Command | undefined {
     return commandList.find(cmd => cmd.name === name);
@@ -285,7 +286,10 @@ const color: Command = {
             switch(true) {
                 case color.hex().toLowerCase() === "#1f1e33": {
                     if (cmdIf.callbacks?.setModalHTML && cmdIf.callbacks?.setModalVisible) {
-                        cmdIf.callbacks?.setModalHTML('<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/w4U9S5eX3eY" title="YouTube video player" frameborder="0" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture" allowfullscreen></iframe>');
+                        cmdIf.callbacks?.setModalHTML(`
+                        <div class="${styles.modalVideoContainer}">
+                            <iframe width="100%" height="100%" src="https://www.youtube-nocookie.com/embed/w4U9S5eX3eY" title="YouTube video player" frameborder="0" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture" allowfullscreen></iframe>
+                        </div>`);
                         cmdIf.callbacks?.setModalVisible(true);
                     }
                     break;
@@ -343,8 +347,27 @@ const pingi: Command = {
     name: "pingi",
     desc: "<3",
     execute: (_flags, _args, _raw, cmdIf) => {
+        const pingiImg = [
+            "hJQFR4dpyyZskjmbAkvlnNYi",
+            "LjwTg8qftDGLDfYyNH5OMY6L",
+            "niaM6yPxKBQV8umkh0xpkbCH",
+            "7hcMiKlbn9QWNbwA3DFcpk6A",
+            "xFnQEWlO5jqvJ4lruK4C8zfq",
+            "CplNRTMYuwmSW8WH2UxCi5NU",
+            "oQ03IzrBkLwCwsUtdp3zn0nW",
+            "36zkZSuWmhAa89ErDR4myYW0",
+            "HZvdYHr4fqYRTkTn8zw4akjA",
+            "VdTAABUXCpo5Gom7aszQDw1c",
+            "zwIJwof4beiqDiy3PBkYmZYd"
+        ];
         if (cmdIf.callbacks?.setModalHTML && cmdIf.callbacks.setModalVisible) {
-            cmdIf.callbacks.setModalHTML('<img src="https://openai-labs-public-images-prod.azureedge.net/user-jomUNcw4rd0bDGfcOQUAbYNO/generations/generation-hJQFR4dpyyZskjmbAkvlnNYi/image.webp" />');
+            const img = pingiImg[Math.floor(Math.random()*pingiImg.length)];
+            cmdIf.callbacks.setModalHTML(`
+            <a href="https://labs.openai.com/s/${img}" target="_blank" rel="noreferrer" class="${styles.modalImageContainerSquare}">
+                <span class="${styles.imgLoading}">Loading cute image...</span>
+                <img src="https://openai-labs-public-images-prod.azureedge.net/user-jomUNcw4rd0bDGfcOQUAbYNO/generations/generation-${img}/image.webp" alt="Incredibly cute AI created image of a penguin and a rabbit." />
+            </a>
+            <small><i>Made with DALL-E</i></small>`);
             cmdIf.callbacks.setModalVisible(true);
         }
         return ["<3"];
diff --git a/next.config.js b/next.config.js
index 3dd7ef1..5e46f31 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,4 +1,7 @@
 /** @type {import('next').NextConfig} */
 module.exports = {
   reactStrictMode: true,
+  images: {
+    domains: ["openai-labs-public-images-prod.azureedge.net"]
+  }
 };
diff --git a/styles/Random.module.scss b/styles/Random.module.scss
new file mode 100644
index 0000000..ea6453b
--- /dev/null
+++ b/styles/Random.module.scss
@@ -0,0 +1,40 @@
+.modalImageContainerSquare {
+    width: 100%; 
+    height: 0; 
+    padding-bottom: 100%; 
+    display: block; 
+    position: relative;
+
+    img {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        border-radius: 5px
+    }
+
+    .imgLoading {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        display: block;
+    }
+}
+
+.modalVideoContainer {
+    width: 100%; 
+    height: 0;
+    padding-bottom: 56.25%;
+    display: block;
+    position: relative;
+
+    iframe {
+        position:absolute;
+        top:0;
+        left:0;
+        width:100%;
+        height:100%;
+    }
+}
\ No newline at end of file