hokusai-zero 0.1.3 → 0.1.4

data/ui/examples/foobar.rb

@@ -12,216 +12,218 @@ require_relative "./tic_tac_toe"
 require "json"
 require "net/http"
 
-module Demo
-  # Block that represents a singular post
-  #
-  #  Displays post content, and throws in a game of Tic Tac Toe for good measure.
-  #
-  # Takes up full width on small viewport, centers on large viewport
-  # Duplication in the template can easily be extracted into a separate block
-  class Post < Hokusai::Block
-    style <<~EOF
-    [style]
-    textStyle {
-      color: rgb(243, 243, 243);
-    }
-    EOF
-    
-    template <<~EOF
-      [template]
-      hblock
-        vblock.about { width="80" :background="about_background" }
-          image {
-            width="80"
-            height="80" 
-            :source="about_image_source" 
-          }
-          label { ...textStyle :content="post_author_name" size="9" }
-        vblock.content
-          text { ...textStyle  markdown="true" :content="post_title" size="20" }
-          text { 
-            :content="post_body"
-            :padding="text_padding"
-            size="17 
-            ...textStyle
-            @height_updated="text_height_updated"
-          }
-          tic_tac_toe { height="400" width="400" }
-    EOF
-
-    # Mandatory props
-    computed! :entry
-    computed! :index
-
-    # injects the screen type from the provisioned value
-    # and aliases it to :media_type
-    inject :screen_type, :media_type
-
-    uses(
-      hblock: Hokusai::Blocks::Hblock,
-      vblock: Hokusai::Blocks::Vblock,
-      image: Hokusai::Blocks::Image,
-      text: Hokusai::Blocks::Text,
-      label: Hokusai::Blocks::Label,
-      empty: Hokusai::Blocks::Empty,
-      tic_tac_toe: TicTacToe::App
-    )
-    #text { @height_updated="save_height" :padding="text_padding" :content="content" :color="label_color" }
-
-    # This block is rendered inside a scrollable panel
-    # in between a `clip begin` and `clip end` command
+module Demos
+  module Demo
+    # Block that represents a singular post
     #
-    # `Hokusai.can_render(canvas) will tell us if this block will even be visible`
-    # If not visible, I won't waste memory / cpu to render
-    def render(canvas)
-      if Hokusai.can_render(canvas)
-        yield(canvas)
+    #  Displays post content, and throws in a game of Tic Tac Toe for good measure.
+    #
+    # Takes up full width on small viewport, centers on large viewport
+    # Duplication in the template can easily be extracted into a separate block
+    class Post < Hokusai::Block
+      style <<~EOF
+      [style]
+      textStyle {
+        color: rgb(243, 243, 243);
+      }
+      EOF
+      
+      template <<~EOF
+        [template]
+        hblock
+          vblock.about { width="80" :background="about_background" }
+            image {
+              width="80"
+              height="80" 
+              :source="about_image_source" 
+            }
+            label { ...textStyle :content="post_author_name" size="9" }
+          vblock.content
+            text { ...textStyle  markdown="true" :content="post_title" size="20" }
+            text { 
+              :content="post_body"
+              :padding="text_padding"
+              size="17 
+              ...textStyle
+              @height_updated="text_height_updated"
+            }
+            tic_tac_toe { height="400" width="400" }
+      EOF
+
+      # Mandatory props
+      computed! :entry
+      computed! :index
+
+      # injects the screen type from the provisioned value
+      # and aliases it to :media_type
+      inject :screen_type, :media_type
+
+      uses(
+        hblock: Hokusai::Blocks::Hblock,
+        vblock: Hokusai::Blocks::Vblock,
+        image: Hokusai::Blocks::Image,
+        text: Hokusai::Blocks::Text,
+        label: Hokusai::Blocks::Label,
+        empty: Hokusai::Blocks::Empty,
+        tic_tac_toe: TicTacToe::App
+      )
+      #text { @height_updated="save_height" :padding="text_padding" :content="content" :color="label_color" }
+
+      # This block is rendered inside a scrollable panel
+      # in between a `clip begin` and `clip end` command
+      #
+      # `Hokusai.can_render(canvas) will tell us if this block will even be visible`
+      # If not visible, I won't waste memory / cpu to render
+      def render(canvas)
+        if Hokusai.can_render(canvas)
+          yield(canvas)
+        end
       end
-    end
 
-    def small_viewport
-      media_type == :small
-    end
-
-    def post_index
-      index.to_s
-    end
+      def small_viewport
+        media_type == :small
+      end
 
-    def post_body
-      entry.content
-    end
+      def post_index
+        index.to_s
+      end
 
-    def post_title
-      @post_title ||= "_#{entry.title.upcase}_ - #{DateTime.now.strftime("%m/%d/%Y %H:%M %p")}"
-    end
+      def post_body
+        entry.content
+      end
 
-    def post_author_name
-      @post_author_name ||= entry.id.even? ? "Adeline" : "Skinnyjames"
-    end
+      def post_title
+        @post_title ||= "_#{entry.title.upcase}_ - #{DateTime.now.strftime("%m/%d/%Y %H:%M %p")}"
+      end
 
-    def about_image_source
-      @about_image_source ||= entry.id.even? ? "#{__dir__}/assets/addy.png" : "#{__dir__}/assets/baby_sean.png"
-    end
+      def post_author_name
+        @post_author_name ||= entry.id.even? ? "Adeline" : "Skinnyjames"
+      end
 
-    # Cache the color so that it isn't recomputing at `O(n) complexity`
-    #
-    # TODO: extract styling / prop declaration into separate template
-    def about_background
-      @author_background ||= Hokusai::Color.new(155,155,155,20)
-    end
+      def about_image_source
+        @about_image_source ||= entry.id.even? ? "#{__dir__}/assets/addy.png" : "#{__dir__}/assets/baby_sean.png"
+      end
 
-    # Cache the text padding
-    def text_padding
-      @text_padding ||= Hokusai::Padding.new(20, 5, 20, 5)
-    end
+      # Cache the color so that it isn't recomputing at `O(n) complexity`
+      #
+      # TODO: extract styling / prop declaration into separate template
+      def about_background
+        @author_background ||= Hokusai::Color.new(155,155,155,20)
+      end
 
-    # `height_updated` handler for the text node
-    #
-    # Since panels are just blocks, and have no insight to the height of their children
-    # I will update the height of this post dynamically based on the height of the rendered text
-    def text_height_updated(height)
-      # tic tac toe height + about node height || content height + padding
-      @height = 400 + [80, height].max + 80
-    end
+      # Cache the text padding
+      def text_padding
+        @text_padding ||= Hokusai::Padding.new(20, 5, 20, 5)
+      end
 
-    def on_mounted
-      text_height_updated(0)
-    end
+      # `height_updated` handler for the text node
+      #
+      # Since panels are just blocks, and have no insight to the height of their children
+      # I will update the height of this post dynamically based on the height of the rendered text
+      def text_height_updated(height)
+        # tic tac toe height + about node height || content height + padding
+        @height = 400 + [80, height].max + 80
+      end
 
-    # Lifecycle hook
-    #
-    # `height` and `width` are the only special props
-    # they are used by the layout rendered to compute the canvas
-    #
-    # We will set it after the block is updated on each iteration of the event loop
-    def after_updated
-      node.meta.set_prop(:height, @height) if @height != node.meta.get_prop(:height)
-    end
-  end
+      def on_mounted
+        text_height_updated(0)
+      end
 
-  # Plain old ruby class
-  PostEntry = Struct.new(:id, :title, :content)
-
-  # Entrypoint Block
-  # Nothing is special about this block - any block can be used as an entrypoint
-  #
-  # NOTE: Scrollbars, panels, and other basic functions are also plain blocks
-  class App < Hokusai::Block
-    style <<~EOF
-    [style]
-    main {
-      background: rgb(34, 38, 57);
-    }
-
-    panelStyle {
-      scroll_color: rgb(30, 30, 163);
-      scroll_background: rgb(15, 11, 48);
-    }
-    EOF
-
-    template <<~EOF
-      [template]
-      vblock { ...main }
-        stock { height="150" }
-        panel { ...panelStyle }
-          [for="post in posts"]
-            post {
-              :key="key(post)"
-              :index="index"
-              :entry="post"
-            }
-    EOF
-
-    # keys map to template node names
-    # values map to blocks
-    uses(
-      hblock: Hokusai::Blocks::Hblock,
-      vblock: Hokusai::Blocks::Vblock,
-      label: Hokusai::Blocks::Label,
-      panel: Hokusai::Blocks::Panel,
-      text: Hokusai::Blocks::Text,
-      stock: StockDecider::App, # some app to chart stock prices for a friend
-      post: Post,
-    )
-
-    # methods can be accessed in computed props
-    attr_accessor :posts
-
-    # initializer override
-    def initialize(**args)
-      @posts = []
-
-      super
+      # Lifecycle hook
+      #
+      # `height` and `width` are the only special props
+      # they are used by the layout rendered to compute the canvas
+      #
+      # We will set it after the block is updated on each iteration of the event loop
+      def after_updated
+        node.meta.set_prop(:height, @height) if @height != node.meta.get_prop(:height)
+      end
     end
 
-    # loop state can be passed to methods
-    def key(entry)
-      entry.id
-    end
+    # Plain old ruby class
+    PostEntry = Struct.new(:id, :title, :content)
 
-    # lifecycle hook
-    # `on_mounted`
-    # `before_updated`
-    # `after_updated`
-    # `on_destroy`
-    def on_mounted
-      uri = URI("https://jsonplaceholder.typicode.com/posts")
-      res = JSON.parse(Net::HTTP.get(uri), symbolize_names: true)
+    # Entrypoint Block
+    # Nothing is special about this block - any block can be used as an entrypoint
+    #
+    # NOTE: Scrollbars, panels, and other basic functions are also plain blocks
+    class App < Hokusai::Block
+      style <<~EOF
+      [style]
+      main {
+        background: rgb(34, 38, 57);
+      }
+
+      panelStyle {
+        scroll_color: rgb(30, 30, 163);
+        scroll_background: rgb(15, 11, 48);
+      }
+      EOF
+
+      template <<~EOF
+        [template]
+        vblock { ...main }
+          stock { height="150" }
+          panel { ...panelStyle }
+            [for="post in posts"]
+              post {
+                :key="key(post)"
+                :index="index"
+                :entry="post"
+              }
+      EOF
+
+      # keys map to template node names
+      # values map to blocks
+      uses(
+        hblock: Hokusai::Blocks::Hblock,
+        vblock: Hokusai::Blocks::Vblock,
+        label: Hokusai::Blocks::Label,
+        panel: Hokusai::Blocks::Panel,
+        text: Hokusai::Blocks::Text,
+        stock: StockDecider::App, # some app to chart stock prices for a friend
+        post: Post,
+      )
+
+      # methods can be accessed in computed props
+      attr_accessor :posts
+
+      # initializer override
+      def initialize(**args)
+        @posts = []
+
+        super
+      end
 
-      self.posts = res.map { |json| PostEntry.new(json[:id], json[:title], json[:body]) }.freeze
+      # loop state can be passed to methods
+      def key(entry)
+        entry.id
+      end
 
-      # can access details about this block
-      #
-      # get the node count
-      puts node.meta.node_count
-      # show the ast
-      puts dump
+      # lifecycle hook
+      # `on_mounted`
+      # `before_updated`
+      # `after_updated`
+      # `on_destroy`
+      def on_mounted
+        uri = URI("https://jsonplaceholder.typicode.com/posts")
+        res = JSON.parse(Net::HTTP.get(uri), symbolize_names: true)
+
+        self.posts = res.map { |json| PostEntry.new(json[:id], json[:title], json[:body]) }.freeze
+
+        # can access details about this block
+        #
+        # get the node count
+        puts node.meta.node_count
+        # show the ast
+        puts dump
+      end
     end
   end
 end
 
 # Backends include Raylib and SDL2
-Hokusai::Backends::SDLBackend.run(Demo::App) do |config|
+Hokusai::Backends::SDLBackend.run(Demos::Demo::App) do |config|
   # backend specific configuration
   config.width = 600
   config.height = 500

data/ui/examples/forum/file.rb

@@ -0,0 +1,54 @@
+module Demos
+  module Forum
+    class FileBlock < Hokusai::Block
+      style <<~EOF
+      [style]
+      file {
+        height: 20;
+      }
+      
+      icon {
+        width: 14;
+        height: 14;
+      }
+
+      itemStyle {
+        color: rgb(247, 247, 247);
+        size: 14;
+        padding: padding(3.0, 0.0, 3.0, 5.0);
+      }
+      EOF
+
+      template <<~EOF
+      [template]
+        hblock.file { ...file :background="compute_background" }
+          image { ...icon :source="item_image" }
+          text { ...itemStyle :content="item.name" }
+      EOF
+
+      computed! :item
+      computed! :index
+
+      uses(
+        hblock: Hokusai::Blocks::Hblock,
+        image: Hokusai::Blocks::Image,
+        text: Hokusai::Blocks::Text,
+      )
+
+      def compute_background
+        index.odd? ? nil : Hokusai::Color.new(255, 255, 255,20)
+      end
+
+      def item_image
+        asset = {
+          audio: "audio-x-generic.png",
+          image: "image-x-generic.png",
+          app: "package-x-generic.png",
+          video: "video-x-generic.png",
+        }[item.type] || "text-x-generic.png"
+
+        "#{__dir__}/../assets/icons/#{asset}"
+      end
+    end
+  end
+end

data/ui/examples/forum/music.rb

@@ -0,0 +1,76 @@
+module Demos
+  module Forum
+    class MusicBlock < Hokusai::Block
+      template <<~EOF
+      [template]
+        empty {
+          cursor="pointer"
+          @click="update_player"
+        }
+      EOF
+
+      uses(
+        hblock: Hokusai::Blocks::Hblock,
+        empty: Hokusai::Blocks::Empty
+      )
+
+      attr_accessor :started, :duration, :ticks, :head
+
+      def initialize(**args)
+        super
+        @started = false
+        @duration = 300
+        @head = 0
+        @ticks = 0
+      end
+
+      def update_player(event)
+        self.started = true
+      end
+
+      def control
+        started ? "#{__dir__}/../assets/icons/media-playback-pause.png" : "#{__dir__}/../assets/icons/media-playback-start.png"
+      end
+
+      def render(canvas)
+        if started
+          if self.ticks >= 60
+            self.head += 1
+            self.ticks = 0
+          end
+
+          if head >= duration
+            self.started = false
+            self.head = 0
+            self.ticks = 0
+          end
+
+          self.ticks += 1
+        end
+
+        draw do
+          start = canvas.x + 20
+          canvas.y += 6.0
+          padding = 4.0
+
+          # draw controls
+          image(control, canvas.x, canvas.y, 15.0, 15.0)
+
+          # draw line
+          rect(start, canvas.y + 3.0 + padding, canvas.width, 2.0) do |command|
+            command.color = Hokusai::Color.new(244,244,244)
+          end
+
+          # draw the playhead
+          ix = head * canvas.width / duration
+          rect(start + ix, canvas.y + padding, 2.0, 10.0) do |command|
+            command.color = Hokusai::Color.new(244,244,244)
+          end
+
+
+          yield canvas
+        end
+      end
+    end
+  end
+end

data/ui/examples/forum/post.rb

@@ -0,0 +1,146 @@
+module Demos
+  module Forum
+    class PostBlock < Hokusai::Block
+      style <<~EOF
+      [style]
+      authorBlock {
+        width: 100;
+      }
+
+      authorLabel {
+        size: 12;
+        color: rgb(244,244,244);
+      }
+
+      authorImage {
+        width: 60;
+        height: 60;
+      }
+      
+      outlineBottom {
+        outline: outline(0.0, 0.0, 2.0, 0.0);
+        outline_color: rgb(244, 244, 244);
+      }
+
+      postText {
+        color: rgb(244, 244, 244);
+      }
+
+      postTitle {
+        size: 35;
+        markdown: false;
+        font: "dohyeon";
+        padding: padding(0.0, 0.0, 0.0, 0.0);
+      }
+
+      postBody {
+        size: 17;
+        markdown: true;
+      }
+
+      actions {
+        height: 30;
+      }
+
+      postDate {
+        size: 14;
+      }
+      
+      viewLabel {
+        color: rgb(231, 236, 154);
+        content: "View Replies (20)";
+        size: 15;
+      }
+
+      rightPad {
+        padding: padding(0.0, 20.0, 20.0, 0.0);
+        cursor: "pointer";
+      }
+
+      replyLabel {
+        color: rgb(231, 236, 154);
+        content: "Reply";
+        size: 15;
+      }
+      EOF
+      
+      template <<~EOF
+      [template]
+        hblock
+          vblock#author { ...authorBlock }
+            image {
+              :source="post.author_image"
+              ...authorImage
+            }
+            label {
+              :content="post.author_name"
+              ...authorLabel
+            }
+          vblock#post
+            text.title {
+              ...postText
+              ...postTitle
+              :content="post.title"
+              :height="post_title_height"
+              @height_updated="post_title_height_updated"
+            }
+            text.date {
+              ...postText
+              ...postDate
+              :content="post.date"
+            }
+            text.body {
+              ...postText
+              ...postBody
+              :content="post.body"
+              :height="post_height"
+              @height_updated="post_height_updated"
+            }
+            [if="post_has_app"]
+              variable { :script="post.app" @height_updated="app_height_updated"}
+            hblock.actions {
+              ...actions
+            }
+              label { ...viewLabel ...rightPad }
+              label { ...replyLabel ...rightPad }
+      EOF
+
+      uses(
+        vblock: Hokusai::Blocks::Vblock,
+        hblock: Hokusai::Blocks::Hblock,
+        text: Hokusai::Blocks::Text,
+        image: Hokusai::Blocks::Image,
+        label: Hokusai::Blocks::Label,
+        hblock: Hokusai::Blocks::Hblock,
+        variable: Hokusai::Blocks::Variable
+      )
+
+      computed! :post
+      computed! :index
+
+      attr_reader :post_height, :post_title_height, :app_height
+
+      def post_has_app
+        !post.app.nil?
+      end
+
+      def app_height_updated(height)
+        @app_height = height
+      end
+
+      def post_title_height_updated(height)
+        @post_title_height = height
+      end
+
+      def post_height_updated(height)
+        @post_height = height + 50
+      end
+
+      def after_updated
+        height = (@post_height || 100) + (@post_title_height || 90) + (@app_height || 0) + 50
+        node.meta.set_prop(:height, height)
+        emit("height_updated", height, index)
+      end
+    end
+  end
+end