Skip to content

Commit

Permalink
blabla
Browse files Browse the repository at this point in the history
  • Loading branch information
@skuqre
skuqre committed Dec 10, 2023
1 parent b2e1dcc commit 72029e1
Show file tree
Hide file tree
Showing 22 changed files with 773 additions and 2 deletions.
Binary file added public/blabla-example1.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/blabla/arrow.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/blabla/bot.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/blabla/bubbleshadow.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/blabla/chatbubble.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/blabla/mask.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/blabla/pfp/anis.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/blabla/pfp/neon .png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/blabla/pfp/rapi.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/blabla/r_bubbleshadow.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/blabla/r_chatbubble.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/blabla/shadow.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/blabla/top.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/images/dialogue/bgs/CommanderRoom.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/images/transparent.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
18 changes: 18 additions & 0 deletions src/components/BlablaDisplay.astro
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<div class='blabla-display'>
<canvas id="blabla-canvas" width="540" height="900"></canvas>
</div>

<style>
div.blabla-display {
display: flex;
width: 100%;
margin: 0;
touch-action: none;
}

canvas#blabla-canvas {
max-width: 90%;
max-height: 540px;
margin: auto;
}
</style>
318 changes: 318 additions & 0 deletions src/components/BlablaInput.astro
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,318 @@
---
---

<div class="input-fields">
<table>
<th>
Append
</th>
<tr>
<td>
<input
type="text"
id="charname"
autocomplete="off"
placeholder='Character name...'
/>
</td>
<td>
<button id="add">Add Chat</button>
</td>
<td rowspan="2" style="vertical-align: top;">
<input
type="color"
id="color"
autocomplete="off"
value="#ffffff"
style="top: 2px; position: relative;"
/>
</td>
</tr>
<tr>
<td>
<textarea
id="chatter"
autocomplete="off"
placeholder='What the character will be saying...'
style="top: -4px; position: relative;"
/>
</td>
<td style="vertical-align: top;">
<!-- <select id="size" name="Size">
<option value="100">100%</option>
<option value="75">75%</option>
<option value="50">50%</option>
<option value="25">25%</option>
<option value="10">10%</option>
</select> -->
</td>
</tr>
<tr>
<td colspan="3" class="wholerow">
<label class="whole-row" for="char-img-up">
Upload Character image...
<input type="file" id="char-img-up">
</label>
</td>
</tr>

<th>
Edit
</th>
<tr>
<td>
<input
type="text"
id="charname-edit"
autocomplete="off"
placeholder='Character name...'
/>
</td>
<td>
<button id="edit">Refresh</button>
</td>
<td rowspan="2" style="vertical-align: top;">
<input
type="color"
id="color-edit"
autocomplete="off"
value="#fea50a"
style="top: 2px; position: relative;"
/>
</td>
</tr>
<tr>
<td>
<textarea
id="chatter-edit"
autocomplete="off"
placeholder='What the character will be saying...'
style="top: -4px; position: relative;"
/>
</td>
<td style="vertical-align: top;">
<input type="number" id="message-index-edit" style="width: 78px; margin: 0; margin-bottom: 4px;" min="0" placeholder="Index..." />
</td>
</tr>
<tr>
<td colspan="3" class="wholerow">
<label class="whole-row" for="char-img-edit">
Change Character image...
<input type="file" id="char-img-edit">
</label>
</td>
</tr>

<th>
Chat
</th>
<tr>
<td>
<input
type="text"
id="chatname"
autocomplete="off"
placeholder='Chat Name'
/>
</td>
<td colspan="2">
<button id="arrow-toggle" style="width: 137px;">Arrow: ON</button>
</td>
</tr>
<tr>
<td colspan="1">
<input type="number" id="ypos" step="10" value="0" style="width: 256px; margin: 0; margin-left: 4px; margin-bottom: 4px;" placeholder="Global Y-Position Offset/Scroll" />
</td>
</tr>


<th>
Delete / Reset
</th>
<tr>
<td colspan="3" class="wholerow">
<label class="whole-row" id="del-late">
Delete last message...
</label>
</td>
</tr>
<tr>
<td>
<label class="whole-row" id="del-spec" >
Delete specific message...
</label>
</td>
<td colspan="2">
<input type="number" id="message-index" style="width: 126px; margin: 0; margin-bottom: 4px;" min="0" placeholder="Index..." />
</td>
</tr>
<tr>
<td colspan="3" class="wholerow">
<label class="whole-row" id="res-color">
Set Color to Commander's Color...
</label>
</td>
</tr>
</table>
</div>

<style>
div.input-fields {
width: fit-content;
margin: auto;
background-color: var(--darkerer);
border-radius: 4px;
box-shadow: 0 0 16px black;
}

div > table {
margin: auto;
}

input, textarea {
width: 256px;
height: 32px;
font-family: "pretendard";
padding: 4px;
padding-left: 8px;
margin: 4px;
outline: none;
border: 0;
background-color: var(--dark);
border-radius: 4px;
caret-color: white;
color: lightgray;
font-size: 16px;
}

textarea {
margin-bottom: -2px;
min-width: 256px;
max-width: 256px;
min-height: 32px;
resize: vertical;
}

input#subtext {
margin-top: 0;
}

select#size {
width: 90px;
height: 40px;
padding-left: 8px;
font-size: 16px;
background-color: var(--darker);
color: lightgray;
border: none;
border-radius: 4px;
font-family: 'pretendard', sans-serif;
}

button {
all: unset;
}

button:focus {
outline: revert;
}

input#color, input#color-edit {
width: 40px;
height: 90px;

margin: 0;
margin-right: 4px;
padding: 0px 2px;
}

button#add, button#edit, button#arrow-toggle {
width: 90px;
height: 40px;
background-color: var(--darker);
border-radius: 4px;
color: lightgray;
font-family: "pretendard";
text-align: center;

transition-property: color, background-color, box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;

margin-left: 0px;
margin-right: 4px;
}

button#add:hover, button#edit:hover, button#arrow-toggle:hover {
background-color: #f4d2594b;
color: white;
text-decoration: none;

transition-property: color, background-color, box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
}

input[type="file"] {
display: none;
}

label > input {
width: 24px;
height: 24px;
margin: 8px;
border-radius: 4px;
}

label {
height: 40px;
display: flex;
align-content: center;
justify-content: left;
}

label.whole-row {
width: calc(100% - 8px);
height: 30px;
background-color: var(--darker);
border-radius: 4px;
color: lightgray;
font-family: "pretendard";
text-align: center;

margin-left: 4px;
margin-bottom: 4px;

transition-property: color, background-color, box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
justify-content: center;
align-items: center;
}

label.whole-row:hover {
background-color: #f4d2594b;
color: white;
text-decoration: none;

transition-property: color, background-color, box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
}

#del-late {
user-select: none;
}

#del-spec {
height: 40px;
user-select: none;
}

th {
text-align: left;
padding-left: 8px;
padding-top: 8px;
}
</style>
2 changes: 1 addition & 1 deletion src/components/Credits.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
made by skuqre. more at <a href="https://skuqre.github.io">skuqre.github.io</a> | <a href="/nikke-font-generator/credits">credits</a> | <a href="https://github.com/skuqre/nikke-font-generator">source code</a>
</p>
<p>
<a href="/nikke-font-generator/dialogue">dialogue generator</a> | <a href="/nikke-font-generator/">logo generator</a> | <a href="/nikke-font-generator/update-log">update log</a>
<a href="/nikke-font-generator/dialogue">dialogue generator</a> | <a href="/nikke-font-generator/">logo generator</a> | <a href="/nikke-font-generator/blabla">blabla generator</a> | <a href="/nikke-font-generator/update-log">update log</a>
</p>
</div>

Expand Down
36 changes: 36 additions & 0 deletions src/pages/blabla.astro
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
---
import '../components/GlobalStyle.astro';
import BlablaDisplay from '../components/BlablaDisplay.astro';
import BlablaInput from '../components/BlablaInput.astro';
import Credits from '../components/Credits.astro';
import Anise from '../components/Anise.astro';
---

<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/png" href="/nikke-font-generator/favicon.png" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Barely Accurate NIKKE Blabla Generator</title>

<meta name="description" content="(BETA) Create a spoof of a Blabla chat from NIKKE easily!">
<meta name="keywords" content="nikke">
<meta name="theme-color" content="#f4d259">

<meta name="twitter:title" content="Barely Accurate NIKKE BlaBla Generator">
<meta name="twitter:description" content="Create a spoof of a Blabla chat from NIKKE easily!">
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:image:src" content="/nikke-font-generator/blabla-example1.png" />
</head>
<body>
<h1>Barely Accurate NIKKE Blabla Generator (BETA)</h1>
<BlablaDisplay />
<p><i>Generated output you see may be barely accurate to inaccurate to official media.<br>Click the image for a fast download!</i></p>
<BlablaInput />
<Credits />
<Anise />

<script src="../scripts/blabla.js"></script>
</body>
</html>
Loading

0 comments on commit 72029e1

Please sign in to comment.