Merge pull request 'WEB-3: pgn4Web Block' (#4) from develop into main

Reviewed-on: https://git.feigel.it/SFBadSteben/schachfreunde-badsteben/pulls/4

assets/css/fonts.css

@@ -0,0 +1,33 @@
+/* ubuntu-300 - latin */
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Ubuntu';
+    font-style: normal;
+    font-weight: 300;
+    src: url('../fonts/ubuntu-v20-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* ubuntu-regular - latin */
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Ubuntu';
+    font-style: normal;
+    font-weight: 400;
+    src: url('../fonts/ubuntu-v20-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* ubuntu-700 - latin */
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Ubuntu';
+    font-style: normal;
+    font-weight: 700;
+    src: url('../fonts/ubuntu-v20-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* roboto-regular - latin */
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    src: url('../fonts/roboto-v48-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}

content/4_verein/5_memoriam/blockpage.txt

@@ -7,31 +7,61 @@ Blocks:
 [
     {
         "content": {
-            "level": "h2",
+            "location": "kirby",
-            "text": "Dies ist ein Test!"
+            "image": [
+                "file://5jxq9scmokejnvjo"
+            ],
+            "src": "",
+            "alt": "",
+            "caption": "",
+            "link": "",
+            "ratio": "",
+            "crop": "false"
         },
-        "id": "eb2cb2e3-19f6-4c17-a786-723cdbc8f811",
+        "id": "21d51ee1-9e2c-4411-8f64-2437e02e2231",
         "isHidden": false,
-        "type": "heading"
+        "type": "image"
     },
     {
         "content": {
-            "fen": "rnbqkbnr/p1pp1ppp/1p2p3/8/3P1B2/5N2/PPP1PPPP/RN1QKB1R b KQkq - 1 3"
+            "text": "<p>Roland Martius war ein echter Macher, das Herz und der Dreh- und Angelpunkt seines Vereins. Mehr als drei Jahrzehnte kämpfte er am Brett. Als die SF Bad Steben kein geeignetes Spiellokal fanden, baute er kurzerhand einen Raum in seinem Privatanwesen zum Schachzimmer um. Erst im Jahr vor seinem Tod hatte der Bezirksverband sein schachliches Lebenswerk mit dem Ludwig-Schirner-Ehrenpreis gewürdigt.</p>"
         },
-        "id": "067a448c-31e5-411c-b342-f69519284394",
+        "id": "24e24e27-d4fc-49a4-bf29-ea8dae277b92",
         "isHidden": false,
-        "type": "fen"
+        "type": "text"
     },
     {
         "content": {
-            "fen": "8/8/8/2k5/4K3/8/8/8"
+            "text": "<p>Mit Roland verlieren wir nicht nur unseren 2. Vorsitzenden und Jugendleiter, sondern auch einen sehr aktiven Spieler - eine Lücke, die sich nur schwer schließen lässt!</p>"
         },
-        "id": "970b3cad-3f89-4f19-8be0-c702c522caf4",
+        "id": "426f0e59-7232-439e-b76a-bb825d0c5c02",
         "isHidden": false,
-        "type": "fen"
+        "type": "text"
+    },
+    {
+        "content": {
+            "text": "<p>Es soll hier aber auch ein schachliches Highlight aus Rolands Leben nicht unerwähnt bleiben. Roland gelang es 1992 bei einer Simultanveranstaltung GM Vlastimil Hort zu besiegen. Die Partie kann hier nachgespielt werden:</p>"
+        },
+        "id": "7446dc4c-0d1d-4080-82e2-a7b7fbf54463",
+        "isHidden": false,
+        "type": "text"
+    },
+    {
+        "content": {
+            "pgn": [
+                "file://zfnwwz74v2fdfx26"
+            ]
+        },
+        "id": "fb61c744-c18b-4b43-b1b1-fcb91602a9aa",
+        "isHidden": false,
+        "type": "pgn4web"
     }
 ]
 
 ----
 
+Herotext: In ehrender Erinnerung gedenken wir unserer verstorbenen Mitglieder, die sich mit Hingabe und Leidenschaft für den Verein eingesetzt haben. Ihr Erbe und ihre Beiträge zum Schachleben in Bad Steben werden stets in unseren Herzen weiterleben.
+
+----
+
 Uuid: ko01ys2cbv2pafa8

content/4_verein/5_memoriam/hort-martius.pgn.txt

@@ -0,0 +1 @@
+Uuid: zfnwwz74v2fdfx26

content/4_verein/5_memoriam/roland_memoriam.jpg.txt

@@ -0,0 +1,5 @@
+Uuid: 5jxq9scmokejnvjo
+
+----
+
+Template: blocks/image

site/blueprints/pages/blockpage.yml

@@ -37,4 +37,11 @@ fields:
             type: textarea
           image:
             label: Bild
+            type: files
+      - type: pgn4web
+        label: PGN-Datei
+        preview: fields
+        fields:
+          pgn:
+            label: PGN-Datei
             type: files

site/snippets/blocks/pgn4web.php

@@ -0,0 +1,35 @@
+<script>
+    SetPgnUrl("<?= $block->pgn()->toFile()->url() ?>");
+    SetImagePath("/assets/pgnviewer/images");
+    SetImageType("png");
+    SetHighlightOption(true);
+    SetGameSelectorOptions(null, false, 0, 0, 0, 15, 15, 0, 10);
+    SetCommentsIntoMoveText(false);
+    SetCommentsOnSeparateLines(false);
+    SetAutoplayDelay(1000);
+    SetAutostartAutoplay(false);
+    SetAutoplayNextGame(false);
+    SetInitialGame(1);
+    SetInitialVariation(0);
+    SetInitialHalfmove(0, false);
+    SetShortcutKeysEnabled(false);
+
+    SetLiveBroadcast(1, false, false, false, false);
+</script>
+
+
+<div class="gap-2 grid grid-cols-1 lg:grid lg:grid-cols-2 lg:px-8 max-w-7xl mx-auto px-4 py-8 sm:px-6 text-black">
+    <div>
+        <div class="w-full" id="GameBoard"></div>
+        <div class="hover:cursor-pointer" id="GameButtons"></div>
+    </div>
+    <div>
+        <div>
+            <div id="GameEvent" class="text-2xl py-2"></div>
+            <div id="GameWhite" class="text-xl pt-2"></div>
+            <div id="GameBlack" class="text-xl"></div>
+            <div id="GameResult" class="text-xl"></div>
+        </div>
+        <div id="GameText" class="py-2"></div>
+    </div>
+</div>

site/snippets/layout.php

@@ -8,7 +8,13 @@
 
         <?= css([
             'assets/css/styles.css',
-            'assets/css/chess.css'
+            'assets/css/chess.css',
+            'assets/css/pgn4web.css',
+            'assets/css/fonts.css',
+        ]) ?>
+
+        <?= js([
+            'assets/js/pgn4web.js'
         ]) ?>
 
         <link rel="shortcut icon" type="image/x-icon"

site/templates/blockpage.php

@@ -20,13 +20,12 @@ function fenToBoard($fen) {
     }
 
     return $board;
-} ?>
+}?>
-
 
 <?php
 snippet('layout', slots: true) ?>
 
-<?= $page->blocks()->toBlocks() ?>
+    <?= $page->blocks()->toBlocks() ?>
 
 <?php
-endsnippet() ?>
+endsnippet() ?>

src/css/input.css

@@ -1,6 +1,7 @@
 @import "tailwindcss";
 
 @theme {
+    --font-display: "Roboto", "sans-serif";
     --font-sans: 'Ubuntu', sans-serif;
     --font-serif: 'Roboto', sans-serif;
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
@@ -38,4 +39,23 @@
     --color-sf_grau-800: #404040;
     --color-sf_grau-900: #393939;
     --color-sf_grau-950: #323232;
+}
+
+@layer components {
+    p {
+        font-family: var(--font-serif);
+    }
+    h1 {
+        font-family: var(--font-sans);
+        font-size: var(--text-3xl);
+        font-weight: var(--font-weight-semibold);
+        padding-bottom: 1rem;
+    }
+    h2 {
+        font-family: var(--font-sans);
+        font-size: var(--text-xl);
+        font-weight: var(--font-weight-semibold);
+        padding-top: 0.7rem;
+        padding-bottom: 0.7rem;
+    }
 }