From 9f9714baec0dc4757b0f22b8f935775e0013fbc2 Mon Sep 17 00:00:00 2001
From: "Kreinsen, Moritz" <moritz.kreinsen@uni-hamburg.de>
Date: Sun, 12 Mar 2023 20:01:37 +0000
Subject: [PATCH] Update scripts.js, index.php
---
index.php | 43 +++++++++++++++++++++++++------------------
scripts.js | 2 +-
2 files changed, 26 insertions(+), 19 deletions(-)
diff --git a/index.php b/index.php
index 596a5c4..6c29c72 100644
--- a/index.php
+++ b/index.php
@@ -12,38 +12,45 @@
<section class="memory-game">
<div class="memory-card" data-framework="A">
<?php
- $text = 'Dies ist ein Testtext!';
- $style = 'background-color: #FFCCCB';
+ $text = 'A longer text which should wrap automatically';
$width = 640 * 0.25 - 10;
$height = 640 * 0.33333 - 10;
$textSize = min($width, $height) * 0.4;
+ $style = 'background-color: #FFCCCB; font-size: ' . $textSize . 'px; font-family: sans-serif; fill: #000000; text-anchor: middle; dominant-baseline: middle; word-wrap: break-word; text-align: center;';
- // Text in mehrere Zeilen aufteilen
$words = explode(' ', $text);
- $lines = array('');
- $currentLine = 0;
+ $lines = [];
+ $currentLine = '';
+
foreach ($words as $word) {
- $testLine = $lines[$currentLine] . ' ' . $word;
+ $testLine = $currentLine . ' ' . $word;
$testWidth = $textSize * strlen($testLine) / 2;
- if ($testWidth > $width * 0.9) { // 90% der Breite für Zeilenumbruch verwenden
- $currentLine++;
- $lines[$currentLine] = $word;
+ if ($testWidth > $width) {
+ $lines[] = $currentLine;
+ $currentLine = $word;
} else {
- $lines[$currentLine] = $testLine;
+ $currentLine = $testLine;
}
}
- $text = implode("\n", $lines);
- // SVG-Code generieren
- $svg = "<svg xmlns='http://www.w3.org/2000/svg' width='$width' height='$height'>";
- $svg .= "<text x='50%' y='50%' text-anchor='middle' alignment-baseline='middle' font-size='$textSize'>";
- $svg .= $text;
- $svg .= "</text></svg>";
+ $lines[] = $currentLine;
+
+ $textElements = '';
+ $numLines = count($lines);
+ $lineHeight = $height / $numLines;
+ $yPos = $lineHeight / 2;
+ foreach ($lines as $line) {
+ $textElements .= "<text x='50%' y='$yPos' style='$style'>$line</text>";
+ $yPos += $lineHeight;
+ }
+
+ $svg = "<svg xmlns='http://www.w3.org/2000/svg' width='$width' height='$height'>$textElements</svg>";
$svgData = base64_encode($svg);
- $src = 'data:image/svg+xml;base64,'.$svgData;
+ $src = 'data:image/svg+xml;base64,' . $svgData;
$imgTag = "<img class='front-face' src='$src' alt='$text' style='$style'/>";
- echo $imgTag;
+
+ echo $imgTag;
?>
<!-- <img class="front-face" src="img/aurelia.svg" alt="Aurelia" style="background-color: #FFCCCB"/> -->
diff --git a/scripts.js b/scripts.js
index d8688e6..9e241c1 100644
--- a/scripts.js
+++ b/scripts.js
@@ -57,4 +57,4 @@ function resetBoard() {
});
})();
-cards.forEach(card => card.addEventListener('click', flipCard));
\ No newline at end of file
+cards.forEach(card => card.addEventListener('click', flipCard));
--
GitLab