Skip to content

Commit

Permalink
Merge pull request #41 from taliyos/user-field-preview
Browse files Browse the repository at this point in the history 
Preview Field Fixes
  • Loading branch information
@patch-s
patch-s authored Dec 9, 2023
2 parents 230ebf9 + 80dd67b commit 0549396
Show file tree
Hide file tree
Showing 7 changed files with 277 additions and 332 deletions.
225 changes: 225 additions & 0 deletions data/Fields/fielddata.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,231 @@ void FieldData::setFieldType(FieldTypes type) {

FieldTypes FieldData::getFieldType() const { return fieldType; }

QString FieldData::generateHtml(const QString& content, const QString& content2, FieldData* data) {
QString newContent = content;
// 1 = wobble
if (data->hasFieldEffect(1))
newContent = "<effect type=\"wobble\">" + content + "</effect>";
// 2 = enlarge
else if (data->hasFieldEffect(2))
newContent = "<effect type=\"enlarge\">" + content + "</effect>";
// 3 = speedUp
else if (data->hasFieldEffect(3))
newContent = "<effect type=\"speedUp\">" + content + "</effect>";
// 4 = bold
else if (data->hasFieldEffect(4))
newContent = "<effect type=\"bold\">" + content + "</effect>";
// 5 = typed
else if (data->hasFieldEffect(5))
newContent = "<effect type=\"typed\">" + content + "</effect>";

if (newContent == content)
{
const map<pair<int,int>, list<int>> textEffects = data->getTextEffects();
int totalAddedChars = 0;
for(map<pair<int,int>,list<int>>::const_iterator it = textEffects.begin(); it != textEffects.end(); it++)
{
int start = it->first.first;
int end = it->first.second;
int tag = it->second.front();

QString string1 = "";
QString string2 = "</effect>";
if (tag == 1)
string1 = "<effect type=\"wobble\">";
else if (tag == 2)
string1 = "<effect type=\"enlarge\">";
else if (tag == 3)
string1 = "<effect type=\"speedUp\">";
else if (tag == 4)
string1 = "<effect type=\"bold\">";
else if (tag == 5)
string1 = "<effect type=\"typed\">";

newContent.insert(start + totalAddedChars, string1);
totalAddedChars += string1.length();
newContent.insert(end + totalAddedChars,string2);
totalAddedChars += string2.length();
}
}

QString base64Image;
QString fullHtml;

fullHtml += "<!DOCTYPE html>";
fullHtml += "<html><head><title>Dialogue Preview</title>";
fullHtml += R"(<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>)";
fullHtml += R"(
<script>
$(document).ready(function() {
applyEffectsFromTags();
});
function applyEffectsFromTags() {
// Check for the 'wobble' effect
$('effect[type="wobble"]').each(function() {
let content = $(this).text();
$(this).replaceWith('<span class="wobbled">' + content + '</span>');
});
// Check for the 'enlarge' effect
$('effect[type="enlarge"]').each(function() {
let content = $(this).text();
$(this).replaceWith('<span class="enlarged">' + content + '</span>');
});
// Check for the 'speedUp' effect
$('effect[type="speedUp"]').each(function() {
let content = $(this).text();
let wrappedContent = '';
let delay = 1;
let delayIncrement = 0.2;
for(let i = 0; i < content.length; i++) {
let char = content[i] === ' ' ? '&nbsp;' : content[i]; // Replace space with &nbsp;
wrappedContent += '<span style="animation-delay:' + delay + 's">' + char + '</span>';
delay += delayIncrement;
}
$(this).replaceWith('<span class="sped-up">' + wrappedContent + '</span>');
});
$('effect[type="typed"]').each(function() {
let content = $(this).text();
let wrappedContent = '';
let delay = 1;
let delayIncrement = 0.2;
for(let i = 0; i < content.length; i++) {
let char = content[i] === ' ' ? '&nbsp;' : content[i]; // Replace space with &nbsp;
wrappedContent += '<span style="animation-delay:' + delay + 's">' + char + '</span>';
delay += delayIncrement;
}
$(this).replaceWith('<span class="typed">' + wrappedContent + '</span>');
});
// Check for 'bold' effect
$('effect[type="bold"]').each(function() {
let content = $(this).text();
$(this).replaceWith('<span class="bold">' + content + '</span>');
});
}
</script>
<style>
.enlarged { font-size: 150%; }
@keyframes shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
20%, 40%, 60%, 80% { transform: translateX(10px); }
}
.wobbled {
display: inline-block;
animation: shake 0.5s infinite;
}
@keyframes flyInCharacter {
0% { transform: translateY(100%); opacity: 0; }
70% { transform: translateY(0); opacity: 1; }
100% { transform: translateY(0); opacity: 1; }
}
.sped-up span {
display: inline-block; /* makes spans sit side-by-side */
animation: flyInCharacter 2s infinite; /* Adjust time for how long you want the animation to last */
transform: translateY(100%);
opacity: 0;
}
@keyframes typing {
from {opacity: 0;}
to {opacity: 1;}
}
.typed span {
opacity: 0;
overflow: hidden;
display: inline-block;
animation: typing 0.05s forwards;
}
@keyframes bolden {
0%, 80%, 100% {font-weight: 300;}
20% {transition: font-weight 500ms ease-in-out; font-weight: 900;}
}
.bold {
display: inline-block;
animation: bolden 1.5s infinite;
}
</style>
)";

fullHtml += R"(
<style>
body {
background-image: url('data:image/jpg;base64,)" + base64Image + R"(');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
font-family: Arial, sans-serif;
height: 100vh;
overflow: hidden; // Hide any overflow content
margin: 12px;
}
.dialogue-container {
position: relative;
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: top;
align-items: left;
}
.dialogue-box {
background: white;
border-radius: 15px;
padding: 1rem;
width: 450px;
height: 160px;
box-shadow: 5px 5px rgba(0,0,0,0.2);
font-size: 24px;
margin: 0 auto;
margin-top: 10px;
}
.character-box {
background: white;
border-radius: 15px;
padding: 1rem;
width: 300px; /* Adjust width as necessary */
height: 20px; /* Adjust height as necessary */
box-shadow: 5px 5px rgba(0,0,0,0.2);
font-size: 24px;
z-index: 2;
}
</style>
)";

// ... (The rest of your styles remain the same)

fullHtml += "</head><body>";
fullHtml += R"(<div class='dialogue-container'>)"; // This wraps both boxes
if (content2 != "") fullHtml += R"(<div class='character-box'>)" + content2 + R"(</div>)";
fullHtml += R"(<div class='dialogue-box'>)" + newContent + R"(</div>)";
fullHtml += R"(</div>)"; // Close .dialogue-container
fullHtml += "</body></html>";

return fullHtml;
}


void FieldData::setText(string newText)
{
Expand Down
1 change: 1 addition & 0 deletions data/Fields/fielddata.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ class FieldData
~FieldData();
// accessors
const string getText();
static QString generateHtml(const QString& content, const QString& content2, FieldData* data);
// setters
void setText(string newText);
void setFieldType(FieldTypes type);
Expand Down
83 changes: 34 additions & 49 deletions widgets/editor/Fields/InputListField/inputlistfield.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,51 +21,8 @@ InputListField::InputListField(QWidget *parent) :
QString InputListField::generateHtml(const QString& content, const QString& content2, InputListData* textData) {

QString newContent = QString::fromStdString("");
// 1 = wobble
if (textData->hasFieldEffect(1))
newContent = "<effect type=\"wobble\">" + content + "</effect>";
// 2 = enlarge
else if (textData->hasFieldEffect(2))
newContent = "<effect type=\"enlarge\">" + content + "</effect>";
// 3 = speedUp
else if (textData->hasFieldEffect(3))
newContent = "<effect type=\"speedUp\">" + content + "</effect>";
// 4 = bold
else if (textData->hasFieldEffect(4))
newContent = "<effect type=\"bold\">" + content + "</effect>";
// 5 = typed
else if (textData->hasFieldEffect(5))
newContent = "<effect type=\"typed\">" + content + "</effect>";

if (newContent == content)
{
const map<pair<int,int>, list<int>> textEffects = textData->getTextEffects();
int totalAddedChars = 0;
for(map<pair<int,int>,list<int>>::const_iterator it = textEffects.begin(); it != textEffects.end(); it++)
{
int start = it->first.first;
int end = it->first.second;
int tag = it->second.front();

QString string1 = "";
QString string2 = "</effect>";
if (tag == 1)
string1 = "<effect type=\"wobble\">";
else if (tag == 2)
string1 = "<effect type=\"enlarge\">";
else if (tag == 3)
string1 = "<effect type=\"speedUp\">";
else if (tag == 4)
string1 = "<effect type=\"bold\">";
else if (tag == 5)
string1 = "<effect type=\"typed\">";

newContent.insert(start + totalAddedChars, string1);
totalAddedChars += string1.length();
newContent.insert(end + totalAddedChars,string2);
totalAddedChars += string2.length();
}
}
QList<QString> options = content.split('\n');
newContent = content;

QString base64Image;
QString fullHtml;
Expand Down Expand Up @@ -185,7 +142,6 @@ QString InputListField::generateHtml(const QString& content, const QString& cont
fullHtml += R"(
<style>
body {
background-image: url('data:image/jpg;base64,)" + base64Image + R"(');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
Expand Down Expand Up @@ -216,6 +172,32 @@ QString InputListField::generateHtml(const QString& content, const QString& cont
margin-top: 10px;
}
.dialogue-list {
background: #ECEFF1;
border-radius: 4px;
padding: 1rem;
width: 200px;
height: auto;
box-shadow: 5px 5px rgba(0,0,0,0.2);
font-size: 18px;
margin-top: 10px;
display: flex;
flex-direction: column;
gap: 8px;
}
.dialogue-item {
padding: 6px;
background: white;
border-radius: 4px;
}
.dialogue-item:hover {
background: #a3a3a3;
cursor: pointer;
}
.character-box {
background: #ECEFF1;
border-radius: 15px;
Expand All @@ -235,8 +217,11 @@ QString InputListField::generateHtml(const QString& content, const QString& cont

fullHtml += "</head><body>";
fullHtml += R"(<div class='dialogue-container'>)"; // This wraps both boxes
fullHtml += R"(<div class='dialogue-box'>)" + newContent + R"(</div>)";
fullHtml += R"(</div>)"; // Close .dialogue-container
fullHtml += R"(<div class='dialogue-list'>)";
for (int i = 0; i < options.count() - 1; i++) {
fullHtml += R"(<div class='dialogue-item'>)" + options[i] + R"(</div>)";
}
fullHtml += R"(</div></div>)"; // Close .dialogue-container
fullHtml += "</body></html>";

return fullHtml;
Expand All @@ -248,7 +233,7 @@ void InputListField::exportToBrowser() {
list<string> dataOptions = data->toList();
for(string s : dataOptions)
{
content += (QString::fromStdString(s));
content += (QString::fromStdString(s + "\n"));
}
emit previewRequested(content, nullptr, data);
}
Expand Down
Loading

0 comments on commit 0549396

Please sign in to comment.