Reorganize

Change labels, add multimedia formats
tanghoong · Aug 30, 2021 · 31abac0 · 31abac0
1 parent 17f8e6b
commit 31abac0
Show file tree

Hide file tree

Showing 8 changed files with 381 additions and 131 deletions.
diff --git a/ChatUIClass.php b/ChatUIClass.php
diff --git a/README.md b/README.md
@@ -1,16 +1,15 @@
-# PHP Chat UI
-PHP Class for simulate conversation dialog.
-
+# PHP Chat Block
+A dialogue chat block display component for php project.
 A UI component for conversational novel community.
-
+Date: 30 Aug, 2021
 Author: Tang Hoong
 
 # Screenshot
 
 ![](sample-02.png "sample")
 
 # Description
-Just dump the string format which same as sample.txt then ChatUIClass will render them perfect and nice.
+Just dump the string format which exactly same as sample.txt then ChatBlock will render them into perfect and nice chat blocks.
 
 # How
 Follow the format from sample.txt:
@@ -22,10 +21,10 @@ Snake: Wanna eat apple 苹果 🍎🍎🍎?
 ```
 then
 ```
-include 'ChatUIClass.php';
-$sample = file_get_contents('./sample.txt');
-$dialogue = new ChatUI($sample);
-echo $dialogue->read();
+include 'ChatBlock.php';
+$lines = file_get_contents('./chapter-1.txt');
+$cb = new ChatBlock($lines);
+echo $cb->read();
 ```
 become
 

diff --git a/composer.json b/composer.json
@@ -0,0 +1,15 @@
+{
+    "name": "tanghoong/php-chat-block",
+    "description": "an dialogue chat block display component for php project",
+    "type": "library",
+    "license": "MIT",
+    "authors": [
+        {
+            "name": "Tang Hoong",
+            "email": "[email protected]"
+        }
+    ],
+    "require": {
+        "php": ">=7.1"
+    }
+}
diff --git a/index.php → demo.php b/index.php → demo.php
@@ -1,6 +1,9 @@
 <?php
-include 'ChatUIClass.php';
+include './src/ChatBlock.php';
+use ChatBlock as ChatUI;
+
 $sample = file_get_contents('./sample.txt');
+// $sample = file_get_contents('./sample.2.txt');
 ?>
 
 
@@ -20,10 +23,10 @@
     </head>
     <body>
         <div class="container" id="chatUI">
-        <h1>Text Soap</h1>
+        <h1>打赏宣言#1</h1>
         <?php
-        $dialogue = new ChatUI($sample);
-        echo $dialogue->read();
+        $cb = new ChatUI($sample);
+        echo $cb->read();
         ?>
         </div>
     </body>

diff --git a/imessage.css b/imessage.css
@@ -203,4 +203,68 @@
 }
 .imessage .chat-name-them{
     text-align: left;
+}
+
+.imessage .text-center{
+  text-align: center;
+}
+
+.imessage .text-bold{
+  font-weight: bold;
+}
+
+.imessage .text-muted{
+  font-size: 12px;
+  margin: 5px;
+}
+
+.container-image{
+  padding: 30px;
+}
+
+.container-image img{
+  border-radius: 1.15rem;
+}
+.container-mp3{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: #000;
+  border-radius: 1.15rem;
+  line-height: 1.25;
+  padding: 0.5rem .875rem;
+  position: relative;
+  word-wrap: break-word;
+  font-size: 12px;
+  margin: 5px;
+}
+.container-youtube{
+  height: 300px;
+  width: 400px;
+  margin: 0px auto;
+}
+.container-youtube iframe{
+  border-radius: 1.15rem;
+}
+.container-decision{
+  display: flex;
+  justify-content: space-between;
+}
+
+.container-decision .decision-option{
+  cursor: pointer;
+  background-color: #e5e5ea;
+  color: #000;
+  border-radius: 1.15rem;
+  line-height: 1.25;
+  padding: 0.5rem .875rem;
+  margin: 0 auto 1rem;
+  position: relative;
+  word-wrap: break-word;
+  text-align: center;
+}
+
+.container-decision .decision-option:focus,
+.container-decision .decision-option:hover{
+  background-color: #bdbdbe;
 }
diff --git a/old/chat-ui.css b/old/chat-ui.css
@@ -0,0 +1,62 @@
+#chatUI{
+    padding: 10px;
+    background-color: white;
+}
+
+#chatUI .chat-header{
+    border-radius: 30px;    
+    width: 20px;
+    height: 20px;
+    margin: 3px;
+}
+
+#chatUI .chat-container{
+    white-space: pre-wrap;
+    border-radius: 5px;
+    margin: 10px;
+    padding: 5px;
+}
+
+#chatUI .chat-container-me{
+    background-color: #d5fdf0;    
+    margin-left: 40%;
+}
+
+#chatUI .chat-container-them{
+    background-color: #2db688;
+    margin-right: 40%;
+}
+
+#chatUI .chat-container .chat-name{
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+}
+#chatUI .chat-container .chat-name-me{
+    text-align: right;
+    justify-content: flex-end;
+}
+#chatUI .chat-container .chat-name-them{
+    text-align: left;
+}
+
+#chatUI .chat-container .chat-block{
+    margin: 5px 0px;
+}
+#chatUI .chat-container .chat-block-me{
+    text-align: right;
+}
+#chatUI .chat-container .chat-block-them{
+    text-align: left;
+}
+
+#chatUI .chat-block-system{
+    text-align: center;
+    white-space: pre-wrap;
+    margin-left: 20%;
+    margin-right: 20%;
+    background-color: #cccccc;
+    padding: 10px;
+    border-radius: 5px;
+    margin-bottom: 10px;
+}
diff --git a/sample.txt b/sample.txt
@@ -1,16 +1,27 @@
-Adam: https://i.imgur.com/pW71NE5.jpeg
-Eve: https://i.imgur.com/Jvh1OQm.jpeg
-Snake: https://i.imgur.com/FEiFVeO.png
+Adam: //i.imgur.com/pW71NE5.jpeg?color=red
+Eve: //i.imgur.com/Jvh1OQm.jpeg?color=blue
+Snake: //i.imgur.com/FEiFVeO.png?color=green
 ---
+Background: //filesamples.com/samples/audio/mp3/sample3.mp3
 Narator: Once upon a time...
 Snake: Wanna eat apple 苹果 🍎🍎🍎?
 Eve: Ya sure, why not? why not? why not? why not? why not? why not? why not? why not? why not? why not? why not?
 Narator: Eve took the apple and bite.
 Adam: Dont! Dont! Dont! Dont! Dont! Dont! Dont! Dont! Dont! 
 Snake: It is too late! hahaha!
-Narator: Thats why human have been cast away away away away away away away away away away away away away.
-Narator: Thats why human have been cast away.
-Narator: Thats why human have been cast away.
-Narator: Thats why human have been cast away.
-Narator: Thats why human have been cast away.
-Narator: end of the story.FIN.👍
+Tiger: It is too late! hahaha!
+Dog: It is too late! hahaha!
+Cat: It is too late! hahaha!
+Narator: Thats why human have been cast <u>away away away away away away away away away away away away away</u>.
+Narator: Thats why human have been cast <b>away</b>.
+Narator: Thats why human <a href="#here">Here</a> have been cast <i>away</i>.
+Narator: Thats why human <br>have been cast <b><i>away</i></b>.
+
+Narator: end of the story.FIN.👍
+
+
+Image: //i.imgur.com/pW71NE5.jpeg?color=red
+MP3: //filesamples.com/samples/audio/mp3/sample3.mp3
+Youtube: //www.youtube.com/embed/tgbNymZ7vqY?controls=0
+Decision: 左边,中间,右边,上面,下面
+