✨

data.json

@@ -1,12 +1,21 @@
 {
     "words": [
         ["Ansem",0],
+        ["Terra",0],
+        ["Terranort",0],
         ["Xehanort",0],
         ["Xemnas",0],
-        ["Terranort",0],
+
-        ["Terra",0],
+        ["apprentice",1],
-        ["Seeker",1],
+        ["darkness",1],
-        ["Darkness",1],
+        ["seeker",1],
-        ["Wise",4]
+
+        ["killed",3],
+        ["possessed",3],
+
+        ["wise",4]
+    ],
+    "pages": [
+        "[Xehanort/0] [possessed/3] [Terra/0], which created [Terra/0]-[Xehanort/0], also known as [Terranort/0]. He became an [apprentice/1] to [Ansem/0] the [wise/4], and eventually split into the nobody [Xemnas/0] and the heartless [Ansem/0], [seeker/1] of [darkness/1]."
     ]
 }

main.py

@@ -3,34 +3,52 @@ from enum import Enum
 import json
 import pygame
 from pygame import Vector2
+import re
 
 
 # Colors
-BACKGROUND_COLOR = "#FCF5E5"
+BACKGROUND_COLOR = "#d7bfa0"
-PAGE_BORDER_COLOR = "#756A4F"
+PAGE_BORDER_COLOR = "#c19d62"
-WORD_BORDER_COLOR = "#FAE7A2"
+WORD_BORDER_COLOR = "#fffcf2"
+WORD_SHADOW_COLOR = "#000000"
 
 # Drawing constants
-SCREEN_WIDTH = 1280
+SCREEN_WIDTH = 2560
-SCREEN_HEIGHT = 720
+SCREEN_HEIGHT = 1440
-PAGE_MARGIN = 10
+PAGE_MARGIN = 20
 
-PAGE_BORDER_RADIUS = 20
+PAGE_BORDER_RADIUS = 40
-PAGE_BORDER_WIDTH = 10
+PAGE_BORDER_WIDTH = 20
 
-WORD_WIDTH = 125
+TAB_WIDTH = 150
-WORD_HEIGHT = 35
+TAB_HEIGHT = 80
-WORD_MARGIN = 8
-WORD_BORDER_RADIUS = 15
-WORD_BORDER_WIDTH = 3
-WORD_FONT_SIZE = 15
 
-GRID_WIDTH = 4
+WORD_WIDTH = 228
+WORD_HEIGHT = 60
+WORD_MARGIN = 16
+WORD_BORDER_RADIUS = 30
+WORD_BORDER_WIDTH = 6
+WORD_FONT_SIZE = 30
+WORD_SHADOW_SIZE = 5
+
+GRID_WIDTH = 5
 GRID_HEIGHT = 10
 
 WORD_PAGE_WIDTH = PAGE_BORDER_WIDTH*2+(WORD_WIDTH+WORD_MARGIN)*GRID_WIDTH+WORD_MARGIN
 WORD_PAGE_HEIGHT = SCREEN_HEIGHT-PAGE_MARGIN*2
 
+TEXT_PAGE_POS = Vector2(WORD_PAGE_WIDTH+PAGE_MARGIN*2,TAB_HEIGHT+PAGE_MARGIN*2)
+TEXT_PAGE_WIDTH = SCREEN_WIDTH-(WORD_PAGE_WIDTH+PAGE_MARGIN*3)
+TEXT_PAGE_HEIGHT = SCREEN_HEIGHT-(TAB_HEIGHT+PAGE_MARGIN*3)
+
+TEXT_MARGIN = 20
+TEXT_TOP_MARGIN = 30
+TEXT_WIDTH = TEXT_PAGE_WIDTH - TEXT_MARGIN*2
+TEXT_HEIGHT = TEXT_PAGE_HEIGHT - TEXT_MARGIN*2
+
+WORD_SLOT_SPACING = " "*12
+WORD_SLOT_NUDGING = 15
+
 class WordColor(Enum):
     Red = 0     # Names
     Green = 1   # Nouns
@@ -40,11 +58,11 @@ class WordColor(Enum):
 
     def color(self):
         return [
-            "#ff0000",
+            "#b03334",
-            "#00bb00",
+            "#6a5f31",
-            "#00ff00",
+            "#4b7a28",
-            "#0000ff",
+            "#297cb7",
-            "#aaaaaa"
+            "#767978"
         ][self.value]
 
 @dataclass
@@ -69,7 +87,7 @@ class WordSlot():
     position: Vector2
     word: None|Word = None
 
-def draw_page(page: Page, screen: pygame.surface.Surface):
+def draw_page(page: Page, screen: pygame.surface.Surface, font: pygame.font.Font):
     pygame.draw.rect(
         screen,
         page.color,
@@ -88,6 +106,15 @@ def draw_page(page: Page, screen: pygame.surface.Surface):
         PAGE_BORDER_WIDTH, PAGE_BORDER_RADIUS
     )
 
+    if page.text is not None:
+        for i, t in enumerate(page.text):
+            text = font.render(t,False,"#000000")
+            # x,y = text.get_size()
+            screen.blit(text,(
+                page.position.x + PAGE_BORDER_WIDTH + TEXT_MARGIN,
+                page.position.y + PAGE_BORDER_WIDTH + TEXT_MARGIN + TEXT_TOP_MARGIN + i*(WORD_FONT_SIZE+TEXT_TOP_MARGIN)
+            ))
+
 def draw_word_slot(word_slot: WordSlot, screen: pygame.surface.Surface):
     pos = word_slot.page.position+word_slot.position
 
@@ -108,28 +135,29 @@ def draw_word_slot(word_slot: WordSlot, screen: pygame.surface.Surface):
         border_radius=WORD_BORDER_RADIUS
     )
 
-    pygame.draw.rect(
-        screen,
-        WORD_BORDER_COLOR,
-        pygame.Rect(
-            pos.x,
-            pos.y,
-            WORD_WIDTH,WORD_HEIGHT
-        ),
-        WORD_BORDER_WIDTH, WORD_BORDER_RADIUS
-    )
-
 def draw_word(word: Word, screen: pygame.surface.Surface, font: pygame.font.Font):
     pos = word.page.position+word.position
 
+    pygame.draw.rect(
+        screen,
+        WORD_SHADOW_COLOR,
+        pygame.Rect(
+            pos.x,
+            pos.y + WORD_SHADOW_SIZE,
+            WORD_WIDTH,
+            WORD_HEIGHT
+        ),
+        border_radius=WORD_BORDER_RADIUS
+    )
+
     pygame.draw.rect(
         screen,
         word.color.color(),
         pygame.Rect(
-            pos.x + WORD_BORDER_WIDTH,
+            pos.x + WORD_BORDER_WIDTH//2,
-            pos.y + WORD_BORDER_WIDTH,
+            pos.y + WORD_BORDER_WIDTH//2,
-            WORD_WIDTH - WORD_BORDER_WIDTH*2,
+            WORD_WIDTH - WORD_BORDER_WIDTH,
-            WORD_HEIGHT - WORD_BORDER_WIDTH*2
+            WORD_HEIGHT - WORD_BORDER_WIDTH
         ),
         border_radius=WORD_BORDER_RADIUS
     )
@@ -156,12 +184,26 @@ def main(data: dict):
     pygame.init()
     pygame.font.init()
     font = pygame.font.SysFont("Comic Code",WORD_FONT_SIZE,True)
-    screen = pygame.display.set_mode((SCREEN_WIDTH, SCREEN_HEIGHT),pygame.RESIZABLE)
+    screen = pygame.display.set_mode((1280, 720),pygame.RESIZABLE)
+    drawer = pygame.surface.Surface((SCREEN_WIDTH, SCREEN_HEIGHT))
     clock = pygame.time.Clock()
     running = True
 
     word_page = Page(True,BACKGROUND_COLOR,None,Vector2(PAGE_MARGIN,PAGE_MARGIN),Vector2(WORD_PAGE_WIDTH,WORD_PAGE_HEIGHT))
-    pages = [word_page]
+    pages = [word_page] + [
+        Page(
+            False,
+            BACKGROUND_COLOR,
+            [p],
+            TEXT_PAGE_POS,
+            Vector2(TEXT_PAGE_WIDTH,TEXT_PAGE_HEIGHT)
+        ) for p in data["pages"]
+    ]
+    if len(pages) > 1:
+        pages[1].visible = True
+        visible_page = 1
+    else:
+        visible_page = 0
 
     word_slots: list[WordSlot] = []
     for y in range(GRID_HEIGHT):
@@ -175,13 +217,48 @@ def main(data: dict):
                 )
             ))
 
+    def add_to_text(text,word,space=" "):
+        width, _ = font.size(text[-1]+space+word)
+        if width > TEXT_WIDTH:
+            return text+[word]
+        else:
+            text[-1] += space+word
+            return text
+
+    for p in pages[1:]:
+        new_text = [""]
+        text_words = p.text[0].split(" ")
+        for w in text_words:
+            res = re.findall(r"\[(.*?)\/(\d)\](.)?",w)
+            if res == []:
+                new_text = add_to_text(new_text,w)
+            else:
+                if new_text[0] != "":
+                    new_text = add_to_text(new_text,"")
+
+                for slot in res:
+                    new_text = add_to_text(new_text,WORD_SLOT_SPACING+slot[2],"")
+                    height = WORD_FONT_SIZE*len(new_text)
+                    width, _ = font.size(new_text[-1])
+                    pos = Vector2(
+                        TEXT_MARGIN + width - WORD_WIDTH,
+                        TEXT_MARGIN + height - WORD_HEIGHT//2 + TEXT_TOP_MARGIN*len(new_text)
+                    )
+                    print(new_text[-1] != WORD_SLOT_SPACING+slot[2])
+                    if new_text[-1] != WORD_SLOT_SPACING+slot[2]:
+                        pos.x += WORD_SLOT_NUDGING
+                    else:
+                        print(len(new_text[-1]),width)
+                    word_slots.append(WordSlot(WordColor(int(slot[1])),p,pos))
+
+        p.text = new_text
+
     words = []
     for i,w in enumerate(data["words"]):
         slot = word_slots[i]
         word = Word(w[0],WordColor(w[1]),word_page,Vector2(slot.position.x,slot.position.y))
         slot.word = word
         words.append(word)
-    # print(words)
 
     while running:
         for event in pygame.event.get():
@@ -189,28 +266,32 @@ def main(data: dict):
                 running = False
 
         # fill the screen with a color to wipe away anything from last frame
-        screen.fill("#4d2905")
+        drawer.fill("#4d2905")
 
         # RENDER YOUR GAME HERE
         for p in pages:
             if not p.visible:
                 continue
 
-            draw_page(p, screen)
+            draw_page(p, drawer, font)
 
         # drawing word slots
         for w in word_slots:
             if not w.page.visible or w.color is None:
                 continue
 
-            draw_word_slot(w, screen)
+            draw_word_slot(w, drawer)
 
         # drawing words
         for w in words:
             if not w.page.visible:
                 continue
 
-            draw_word(w, screen, font)
+            draw_word(w, drawer, font)
+
+        # Draw everything to the screen
+        frame = pygame.transform.scale(drawer,screen.get_size())
+        screen.blit(frame,frame.get_rect())
 
         # flip() the display to put your work on screen
         pygame.display.flip()