hokusai-zero 0.1.1

data/ui/examples/counter.rb

@@ -0,0 +1,123 @@
+require_relative "../src/hokusai"
+require_relative "../src/hokusai/backends/raylib"
+
+class Counter < Hokusai::Block
+  style <<~EOF
+  [style]
+  additionStyles {
+    background: rgb(214, 49, 24);
+    rounding: 0.0;
+    outline: outline(1,4,4,1);
+    outline_color: rgb(216, 26, 137);
+  }
+
+  additionLabel {
+    size: 40;
+    color: rgb(255,255,255);
+  }
+
+  subtractStyles {
+    background: rgb(0, 85, 170);
+    rounding: 0.0;
+  }
+
+  subtractLabel {
+    size: 50;
+    color: rgb(255,255,255);
+  }
+
+  scrollbar {
+    width: 25;
+    control_height: 100;
+    control_padding: 5;
+    control_rounding: 5;
+  }
+  EOF
+
+  template <<-EOF
+  [template]
+    hblock { @keypress="update_keys"}
+      vblock
+        hblock
+          label#count {
+            :content="count"
+            size="130" 
+            :color="count_color"
+          }
+        hblock
+          vblock#add { ...additionStyles }
+            label { 
+              content="Add"
+              @click="increment" 
+              ...additionLabel 
+            }
+          vblock#subtract { ...subtractStyles }
+            label { 
+              content="Subtract"
+              @click="decrement" 
+              ...subtractLabel 
+            }
+      [if="count_positive"]
+        scrollbar { ...scrollbar }
+  EOF
+
+  uses(
+    vblock: Hokusai::Blocks::Vblock,
+    hblock: Hokusai::Blocks::Hblock,
+    label: Hokusai::Blocks::Label,
+    scrollbar: Hokusai::Blocks::Scrollbar,
+    image: Hokusai::Blocks::Image
+  )
+
+  attr_accessor :count, :keys
+
+  def count_positive
+    count > 0
+  end
+
+  def modal
+    !keys.empty?
+  end
+
+  def update_keys(event)
+    @keys << event.char
+  end
+
+  def increment(event)
+    self.count += 1
+  end
+
+  def decrement(event)
+    self.count -= 1
+  end
+
+  def count_color
+    self.count > 0 ? [0,0,255] : [255,0,0]
+  end
+
+  def initialize(**args)
+    @count = 0
+    @keys = ""
+    super(**args)
+  end
+end
+
+Hokusai::Backends::RaylibBackend.run(Counter) do |config|
+  # config.after_load do
+  #   # Note: how to load a font...
+  #   # Thank you to Vladimir Nikolic - https://www.1001fonts.com/users/vladimirnikolic/
+  #   font = Hokusai::Backends::RaylibBackend::Font.from("#{__dir__}/icecold.ttf")
+  #   Hokusai.fonts.register "icecold", font
+  #   Hokusai.fonts.activate "icecold"
+  # end
+
+  config.after_load do
+    font = Hokusai::Backends::RaylibBackend::Font.from_ext("#{__dir__}/assets/OpenSans-Regular.ttf", 160)
+    Hokusai.fonts.register "opensans", font
+    Hokusai.fonts.activate "opensans"
+  end
+
+  config.width = 500
+  config.height = 500
+  config.title = "Counter application"
+end

data/ui/examples/dynamic.rb

@@ -0,0 +1,147 @@
+# dependencies
+require_relative "../src/hokusai"
+require_relative "../src/hokusai/backends/sdl2"
+require_relative "../src/hokusai/backends/raylib"
+require_relative "./stock"
+require_relative "./tic_tac_toe"
+
+module Dynamic
+  class Block < Hokusai::Block
+    template <<~EOF
+    [template]
+      empty
+    EOF
+
+    uses(empty: Hokusai::Blocks::Empty)
+
+    computed! :script
+
+    def on_mounted
+      klass = eval(script)
+
+      raise Hokusai::Error.new("Class #{klass} is not a Hokusai::Block") unless klass.ancestors.include?(Hokusai::Block)
+
+      node.meta.set_child(0, klass.mount)
+    end
+  end
+
+  class App < Hokusai::Block
+    style <<~EOF
+    [style]
+    mainStyle {
+      background: rgb(8, 8, 8);
+    }
+
+    appText {
+      content: "Address Lookup";
+      size: 30;
+      color: rgb(222,222,222);
+    }
+    EOF
+
+    template <<~EOF
+    [template]
+      vblock {
+        ...mainStyle
+      }
+        text { ...appText }
+        variable { :script="script" }
+    EOF
+
+    uses(
+      vblock: Hokusai::Blocks::Vblock,
+      text: Hokusai::Blocks::Text,
+      variable: Dynamic::Block,
+    )
+
+    def script
+      <<~RUBY
+        require "rest-client"
+        require "uri"
+
+        class TestDynamic < Hokusai::Block
+          style <<~EOF
+          [style]
+          inputStyle {
+            background: rgb(18, 18, 18);
+            text_color: rgb(244,244,244);
+            size: 25;
+            height: 80;
+            outline: outline(1,0,1,0);
+            outline_color: rgb(222,222,222);
+          }
+
+          textStyle {
+            color: rgb(225, 228, 224);
+            size: 23;
+            cursor: "manual";
+            padding: padding(5, 20, 0, 20);
+            markdown: true;
+          }
+
+          buttonStyle {
+            size: 20;
+            content: "Open in Maps";
+          }
+          EOF
+          
+          template <<~EOF
+          [template]
+          input {
+            ...inputStyle
+            @change="geocode"
+          }
+          hblock
+            [if="response"]
+              panel
+                text {
+                  ...textStyle
+                  :content="content"
+                }
+          EOF
+
+          uses(
+            hblock: Hokusai::Blocks::Hblock,
+            text: Hokusai::Blocks::Text,
+            input: Hokusai::Blocks::Input,
+            panel: Hokusai::Blocks::Panel,
+            button: Hokusai::Blocks::Button
+          )
+
+          attr_reader :response
+
+          def geocode(address)
+            uri = "https://geoffrey.skinnyjames.net/api/v1/us/geocode/\#{URI.encode_uri_component(address)}"
+            @response = JSON.parse(RestClient.get(uri).body, symbolize_names: true)          
+          end
+
+          def content
+            @response&.reduce("") do |memo, payload|
+              link = "https://maps.google.com/maps?q=\#{payload[:latitude]}+\#{payload[:longitude]}"
+
+              memo << "Address: [\#{payload[:address_number]} \#{payload[:street_name]} (\#{payload[:postal_community]}, \#{payload[:state]})](\#{link})\n"
+              memo << "  **Latitude:** _\#{payload[:latitude]}_, **Longitude:** _\#{payload[:longitude]}_\n"
+              memo << "  [Some link](https://google.com)\n\n"
+            end || "Placeholder"
+          end
+        end
+
+        TestDynamic
+      RUBY
+    end
+  end
+end
+
+Hokusai::Backends::SDLBackend.run(Dynamic::App) do |config|
+  # backend specific configuration
+  config.width = 600
+  config.height = 500
+  config.title = "Dynamic Application"
+
+  config.after_load do
+    # most heavy logic, including text wrapping calculations are implemented in C
+    font = Hokusai::Backends::SDLBackend::Font.from("#{__dir__}/assets/OpenSans-Regular.ttf")
+    Hokusai.fonts.register "opensans", font
+    Hokusai.fonts.activate "opensans"
+  end
+end

data/ui/examples/foobar.rb

@@ -0,0 +1,236 @@
+# frozen_string_literal: true
+
+# dependencies
+require_relative "../src/hokusai"
+require_relative "../src/hokusai/backends/sdl2"
+require_relative "../src/hokusai/backends/raylib"
+require_relative "./stock"
+require_relative "./tic_tac_toe"
+
+# can use ruby stdlib
+# or any library in the ruby ecosystem
+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
+    #
+    # `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
+
+    def small_viewport
+      media_type == :small
+    end
+
+    def post_index
+      index.to_s
+    end
+
+    def post_body
+      entry.content
+    end
+
+    def post_title
+      @post_title ||= "_#{entry.title.upcase}_ - #{DateTime.now.strftime("%m/%d/%Y %H:%M %p")}"
+    end
+
+    def post_author_name
+      @post_author_name ||= entry.id.even? ? "Adeline" : "Skinnyjames"
+    end
+
+    def about_image_source
+      @about_image_source ||= entry.id.even? ? "#{__dir__}/assets/addy.png" : "#{__dir__}/assets/baby_sean.png"
+    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
+
+    # Cache the text padding
+    def text_padding
+      @text_padding ||= Hokusai::Padding.new(20, 5, 20, 5)
+    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
+
+    def on_mounted
+      text_height_updated(0)
+    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
+
+  # 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
+    end
+
+    # loop state can be passed to methods
+    def key(entry)
+      entry.id
+    end
+
+    # 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
+
+# Backends include Raylib and SDL2
+Hokusai::Backends::SDLBackend.run(Demo::App) do |config|
+  # backend specific configuration
+  config.width = 600
+  config.height = 500
+  config.title = "Demo Application"
+
+  config.after_load do
+    # most heavy logic, including text wrapping calculations are implemented in C
+    font = Hokusai::Backends::SDLBackend::Font.from("#{__dir__}/assets/OpenSans-Regular.ttf")
+    Hokusai.fonts.register "opensans", font
+    Hokusai.fonts.activate "opensans"
+  end
+end

data/ui/examples/stock.rb

@@ -0,0 +1,115 @@
+require_relative "../src/hokusai"
+require_relative "../src/hokusai/backends/raylib"
+require_relative "../src/hokusai/backends/sdl2"
+require_relative "./stock_decider/option"
+
+# aim for over 24 percent sort by percentage first
+# 3 week = 1 option premium * 100 shares / 12
+module StockDecider
+  # Expecting a data prop in the form of
+  #
+  class StackedBar < Hokusai::Block
+    COLORS = {
+      :week_3 => [157, 221, 117],
+      :week_4 => [117, 157, 221],
+      :week_5 => [221, 180, 117]
+    }
+
+    template <<~EOF
+      [template]
+        virtual
+    EOF
+
+    uses(
+      vblock: Hokusai::Blocks::Vblock,
+      label: Hokusai::Blocks::Label
+    )
+
+    computed! :data
+
+    def symbol
+      data[0]
+    end
+
+    def render(canvas)
+      key, weeks = data
+      theight = canvas.height - 50
+      draw do
+        weeks.reject(&:nil?).sort { |a, b| b <=> a }.each_with_index do |percent, idx|
+          color = COLORS["week_#{idx + 3}".to_sym]
+          height = (theight * percent) / 100
+          y = canvas.y + theight - height
+
+          rect(canvas.x, y , 150, height) do |command|
+            command.color = Hokusai::Color.convert(color)
+            command.outline = Hokusai::Outline.convert("4,4, 0, 0")
+            command.outline_color = Hokusai::Color.convert("0,0,0,110")
+          end
+
+          text("Week #{idx + 3} (#{percent.round(2)})", canvas.x + 2, y + 10) do |command|
+            command.size = 12
+          end
+        end
+
+        text(symbol, canvas.x + 12, theight + 5) do |command|
+          command.size = 25
+          command.color = Hokusai::Color.new(233,233,233,255)
+        end
+      end
+
+      canvas.x -= 100
+      yield canvas
+    end
+  end
+
+  class App < Hokusai::Block
+    template <<~EOF
+      [template]
+        vblock { background="84,23,77" padding="0,20,0,20"}
+          hblock { padding="0,20,0,20"}
+            [for="data in attractive_options"]
+              stackedbar { :key="key(index)" :data="data" }
+    EOF
+
+    uses(
+      vblock: Hokusai::Blocks::Vblock,
+      hblock: Hokusai::Blocks::Hblock,
+      stackedbar: StackedBar
+    )
+
+    def attractive_options
+      @options.to_a
+    end
+
+    def key(index)
+      "Key_#{index}"
+    end
+
+    def on_mounted
+      puts ["mounted"]
+      add_ticker("TSLA")
+      add_ticker("OXY")
+      add_ticker("DG")
+    end
+
+    def add_ticker(sym)
+      ticker_opts = Option.from_ticker(sym)
+      w3 = ticker_opts.select { |a| a.attractive?(3) }.sort_by { |a| a.percent(3) }.last
+      w4 = ticker_opts.select { |a| a.attractive?(4) }.sort_by { |a| a.percent(4) }.last
+      w5 = ticker_opts.select { |a| a.attractive?(5) }.sort_by { |a| a.percent(5) }.last
+      @options[sym] = [w3&.percent(3), w4&.percent(4), w5&.percent(5)]
+      puts @options[sym]
+    end
+
+    def initialize(**args)
+      @options = {}
+      super
+    end
+  end
+end
+# #
+# Hokusai::Backends::SDLBackend.run(StockDecider::App) do |config|
+#   config.width = 500
+#   config.height = 500
+#   config.title = "Loop application"
+# end

data/ui/examples/stock_decider/option.rb

@@ -0,0 +1,74 @@
+require 'json'
+require 'date'
+require "rest-client"
+
+module StockDecider
+  class Option
+    URL = "https://cdn.cboe.com/api/global/delayed_quotes/options"
+    def self.from_ticker(sym)
+      res = RestClient.get("#{URL}/#{sym.upcase}.json").body
+      data = JSON.parse(res, symbolize_names: true)[:data]
+      data[:options].map do |option|
+        new(option, data[:current_price])
+      end
+    end
+
+    def initialize(payload, current)
+      @current_price = current
+      @payload = payload
+    end
+
+    def option
+      @payload[:option]
+    end
+
+    def cycles(weeks)
+      52 / weeks
+    end
+
+    def name
+      option
+    end
+
+    def attractive?(weeks)
+      datespan > weeks - 1 && datespan < weeks + 1
+    end
+
+    def datespan
+      (expiration - DateTime.now).to_i / 7
+    end
+
+    def percent(weeks)
+      (@current_price * cycles(weeks)) / strike
+    end
+
+    def type
+      call? ? "Call" : "Put"
+    end
+
+    def call?
+      option.scan(/([CP])\d+$/)[0][0] == "C"
+    end
+
+    def expiration
+      value = option.scan(/^[A-Za-z]+(\d+)/)[0][0]
+      year = "20#{value[0..1]}".to_i
+      month = value[2..3].to_i
+      day = value[4..5].to_i
+
+      DateTime.new(year, month, day)
+    end
+
+    def strike
+      option.scan(/\d+$/)[0].to_i / 1000
+    end
+
+    def code
+      option.scan(/^[A-Za-z]+/)[0]
+    end
+
+    def put?
+      !call?
+    end
+  end
+end