hokusai-zero 0.1.3 → 0.1.4

data/ui/examples/forum.rb

@@ -0,0 +1,198 @@
+require_relative "../src/hokusai"
+require_relative "../src/hokusai/backends/raylib"
+require_relative "../src/hokusai/backends/sdl2"
+
+require "ostruct"
+require_relative "./forum/post"
+require_relative "./forum/file"
+require_relative "./forum/music"
+
+module Demos
+  module Forum
+    class App < Hokusai::Block
+      style <<~EOF
+      [style]
+      app {
+        outline: outline(1.0, 1.0, 1.0, 1.0);
+        outline_color: rgb(64, 70, 101);
+        background: rgb(39, 43, 62);
+        rounding: 0.02;
+      }
+
+      appTitle {
+        content: "Skettinet v3";
+        font: "dohyeon";
+        color: rgb(255, 255, 255);
+        size: 20;
+        cursor: "pointer";
+        padding: padding(7.0, 0.0, 7.0, 20.0);
+      }
+
+      recentsLabel {
+        content: "Recent Uploads";
+        font: "dohyeon";
+        size: 30;
+        color: rgb(255, 255, 255);
+      }
+
+      appTitleContainer {
+        height: 100;
+      }
+
+      titlebar {
+        height: 36;
+        outline: outline(0.0, 0.0, 2.0, 0.0);
+        outline_color: rgb(49, 55, 78);
+        background_drag: rgb(49, 55, 78);
+        cursor: "pointer";
+      }
+      
+      panelStyle {
+        scroll_color: rgb(85, 92, 120);
+        scroll_background: rgb(39, 43, 62);
+      }
+
+      ernestImage {
+        height: 80;
+        width: 30;
+        source: "assets/ernest.gif";
+      }
+      EOF
+
+      template <<~EOF
+      [template]
+      vblock {
+        ...app
+      }
+        titlebar { 
+          ...titlebar 
+        }
+          label { 
+            ...appTitle
+          }
+        panel#app { ...panelStyle }
+          vblock { :height="50.0" }
+          hblock { :height="forum_height" }
+            hblock { :width="margin_width" }
+            vblock { :width="panel_width" }
+              [for="post in posts"]
+                post {
+                  @height_updated="update_forum_height"
+                  :width="panel_width"
+                  :index="index"
+                  :key="index"
+                  :post="post"
+                }
+            vblock.recents
+              hblock.header { width="100" }
+                image { ...ernestImage }
+                vblock { width="20" }
+                vblock { width="300" }
+                  text { ...recentsLabel }
+                  music { height="50" }
+                  [for="item in files"]
+                    file { height="30" :item="item" :key="index" :index="index" }
+
+      EOF
+
+      uses(
+        vblock: Hokusai::Blocks::Vblock,
+        hblock: Hokusai::Blocks::Hblock,
+        post: Forum::PostBlock,
+        file: Forum::FileBlock,
+        music: Forum::MusicBlock,
+        panel: Hokusai::Blocks::Panel,
+        dynamic: Hokusai::Blocks::Dynamic,
+        text: Hokusai::Blocks::Text,
+        label: Hokusai::Blocks::Label,
+        titlebar: Hokusai::Blocks::Titlebar::OSX,
+        image: Hokusai::Blocks::Image
+      )
+
+      def update_forum_height(height, index)
+        @indicies ||= {}
+        @indicies[index] = height
+      end
+
+      def forum_height
+        @indicies&.values&.sum || 0.0
+      end
+
+      def on_resize(canvas)
+        if canvas.width <= 800
+          @panel_width = canvas.width - 50
+          @margin_width = 25.0
+        else
+          @panel_width = 900
+          @margin_width = (canvas.width - 800) / 2
+        end
+      end
+
+      def margin_width
+        @margin_width || 0.0
+      end
+
+      def panel_width
+        @panel_width || 800
+      end
+
+      def files
+        @files ||= (1..10).to_a.map do |i|
+          file = OpenStruct.new
+          file.type = [:video, :audio, :app, nil, :image].sample
+          file.name = ["hello.mp3", "thing.png", "what.mp4", "yeah"].sample
+          file
+        end
+      end
+
+      def posts
+        @posts ||= (1..10).to_a.map do |i|
+          post = OpenStruct.new
+          post.author_image = ["#{__dir__}/assets/baby_sean.png", "#{__dir__}/assets/addy.png"].sample
+          post.author_name = "Baby Sean"
+          post.title = ["Hello World", "My neon jeans", "How to eat a sandwich without killing yourself"].sample
+          post.date = "January 4th @ 10.00 am"
+          post.body = <<~EOF
+            Lorem markdownum vigor concutiens iter frondes, [non spes
+            parente](http://www.et.com/mirantiesse) isque, in defunctum concrescere ultima!
+            Corpus nepotis tristique isti forsitan respicit o invenit, cur ope in sit 
+            [eat](http://stringebat.io/). At equus *ullam sua efflant* ludat, silvas
+            Achilles, nata aere, modo [Amazone pectore](http://minustantum.com/).
+
+            Mea tolerare [iussi plumbo](http://perpetiarcorpora.net/pertimuit): ad otia,
+            requiris procis, ne illa rore glaebam, velis. Vero creatum Perseus dextrum at
+            sterilem telum amensque aliis sermone et pyram meruisse Titania furiosior
+            laterum fuit, fata. Qua exstitit aberat sunt dea nequeam concentu raptae Phrygia
+            relictis ferebat hoc fuit videtur reddita spectare ignotissima *amorem fugit
+            crines*. Oscula Tectaphon.
+          EOF
+          
+          post
+        end
+      end
+    end
+  end
+end
+
+Hokusai::Backends::RaylibBackend.run(Demos::Forum::App) do |config|
+  config.after_load do
+    font = Hokusai::Backends::RaylibBackend::Font.from("#{__dir__}/assets/Inter-Regular.ttf")
+    Hokusai.fonts.register "inter", font
+    Hokusai.fonts.activate "inter"
+
+    font = Hokusai::Backends::RaylibBackend::Font.from_ext("#{__dir__}/assets/Delius-Regular.ttf", 160)
+    Hokusai.fonts.register "dohyeon", font
+  end 
+
+  config.fps = 40
+  config.width = 800
+  config.height = 500
+  config.title = "Counter application"
+
+  # config.window_config_flags = SDL::WINDOW_RESIZABLE | SDL::WINDOW_BORDERLESS
+
+  config.config_flags = Raylib::FLAG_WINDOW_RESIZABLE | Raylib::FLAG_VSYNC_HINT | Raylib::FLAG_WINDOW_TRANSPARENT
+  config.window_state_flags = Raylib::FLAG_WINDOW_RESIZABLE | Raylib::FLAG_WINDOW_UNDECORATED | Raylib::FLAG_WINDOW_TRANSPARENT
+  config.background = Raylib::BLANK
+end
+

data/ui/examples/spreadsheet/csv.rb

@@ -0,0 +1,261 @@
+module Demos
+  module Spreadsheet
+    class Cell < Hokusai::Block
+      style <<~EOF
+      [style]
+      cellStyle {
+        outline: outline(0.0, 1.0, 0.0, 0.0);
+        outline_color: rgb(49, 55, 78);
+      }
+
+      cellInputStyle {
+        padding: padding(5.0, 5.0, 5.0, 5.0);
+        size: 20;
+        text_color: rgb(244, 244, 244);
+      }
+      EOF
+
+      template <<~EOF
+      [template]
+        vblock { ...cellStyle :background="cell_background" }
+          input { 
+            ...cellInputStyle
+            @modified="emit_modified"
+            @change="emit_changed_cell"
+            @height_updated="update_height"
+            :initial="cell_content"
+          }
+      EOF
+
+      computed :cell, default: nil
+      computed! :row_index
+      computed! :index
+
+      uses(
+        vblock: Hokusai::Blocks::Vblock,
+        text: Hokusai::Blocks::Text,
+        input: Hokusai::Blocks::Input
+      )
+
+      def cell_content
+        cell.nil? ? "" : cell
+      end
+
+      def cell_background
+        node.meta.focused ? Hokusai::Color.new(27, 31, 50,255) : nil
+      end
+
+      def emit_modified
+        emit("cell_modified", index)
+      end
+
+      def emit_changed_cell(value)
+        if value =~ /^=/
+          value = value.gsub('=', '')
+          positions = value.split("-")
+
+          emit("cell_forumla", index, *positions)
+        else
+          emit("cell_updated", index, value)
+        end
+      end
+
+      def update_height(height)
+        @height = height
+        node.meta.set_prop(:height, height)
+
+        emit("height_updated", height, index)
+      end
+
+      def height
+        @height || 0.0
+      end
+    end
+    
+    class Row < Hokusai::Block
+      style <<~EOF
+      [style]
+      rowStyle {
+        outline: outline(0.0, 0.0, 1.0, 0.0);
+        outline_color: rgb(49, 55, 78);
+      }
+      EOF
+
+      template <<~EOF
+      [template]
+        hblock { ...rowStyle }
+          [for="cell in row"]
+            cell {
+              @cell_forumla="emit_formula"
+              @cell_modified="emit_modified_cell"
+              @cell_updated="emit_changed_cell"
+              @height_updated="update_height"
+              :cell="cell"
+              :height="max_height"
+              :index="index"
+              :key="cell_key(index)"
+            }
+
+      EOF
+
+      computed! :row
+      computed! :index
+
+      uses(
+        hblock: Hokusai::Blocks::Hblock,
+        cell: Spreadsheet::Cell
+      )
+
+      def emit_formula(target, cell_1, cell_2)
+        emit("cell_formula", index, target, cell_1, cell_2)
+      end
+
+      def emit_modified_cell(cell_index)
+        emit("cell_modified", index, cell_index)
+      end
+
+      def emit_changed_cell(cell_index, value)
+        emit("cell_updated", index, cell_index, value)
+      end
+
+      def max_height
+        @heights ||= {}
+        @heights.values.max || 30.0
+      end
+
+      def update_height(height, idx)
+        @heights ||= {}
+        @heights[idx] = height
+
+        node.meta.set_prop(:height, max_height)
+      end
+
+      def cell_key(index)
+        "cell-#{index}"
+      end
+    end
+
+    class CSV < Hokusai::Block
+      style <<~EOF
+      [style]
+      csvTitle {
+        color: rgb(233, 233, 233);
+        height: 40.0;
+      }
+
+      panelStyle {
+        outline: outline(1.0, 1.0, 1.0, 1.0);
+        outline_color: rgb(49, 55, 78);
+      }
+      
+      headerStyle {
+        color: rgb(233, 233, 233);
+        size: 14;
+        padding: padding(7.0, 4.0, 7.0, 4.0);
+      }
+      outliner {
+        outline: outline(0.0, 1.0, 1.0, 1.0);
+        outline_color: rgb(49, 55, 78);
+      }
+      EOF
+
+      template <<~EOF
+      [template]
+        hblock { ...csvTitle }
+          [for="header in headers"]
+            hblock { ...outliner :key="row_header(index)" }
+              label { ...headerStyle :content="get_header(index)" }
+        panel { ...panelStyle }
+          [for="row in rows"]
+            row {
+              @cell_formula="formula"
+              @cell_modified="change_cell"
+              @cell_updated="update_cell"
+              :row="row"
+              :index="index"
+              :key="row_key(index)" 
+            }
+      EOF
+
+      uses(
+        hblock: Hokusai::Blocks::Hblock,
+        panel: Hokusai::Blocks::Panel,
+        row: Spreadsheet::Row,
+        label: Hokusai::Blocks::Label
+      )
+
+      computed! :csv
+
+      def change_cell(rowi, celli)
+        emit("modified")
+      end
+
+      def get_header(index)
+        headers[index] || ""
+      end
+
+      def formula(row_index, target, pos1, pos2)      
+        memo = 0
+
+        srow, scol = pos1.split(":")
+        erow, ecol = pos2.split(":")
+
+        (srow.to_i..erow.to_i).each do |idx|
+          memo += csv[idx][scol.to_i].to_i
+        end
+
+        csv[row_index + 1][target] = memo
+      end
+
+      def update_cell(row_index, cell_index, value)
+        if csv[row_index + 1].nil?
+          csv[row_index + 1] = empty_row
+        end
+
+        csv[row_index + 1][cell_index] = value
+
+        emit("update", csv)
+      end
+
+      def rows
+        (1..row_count).map do |rindex|
+          row = csv[rindex] || Array.new(column_count, nil)
+
+          (0..column_count).map do |cindex|
+            row[cindex] || ""
+          end
+        end
+      end
+
+      def empty_row
+        Array.new(headers.size - 1, nil)
+      end
+
+      def column_count
+        csv.to_a.map(&:size).max
+      end
+
+      def row_count
+        csv.to_a.size
+      end
+
+      def headers
+        csv.to_a[0]
+      end
+
+      def headers
+        (0..column_count).map do |cindex|
+          csv[0][cindex] || nil
+        end
+      end
+
+      def row_header(index)
+        "header-#{index}"
+      end
+
+      def row_key(index)
+        "row-#{index}"
+      end
+    end
+  end
+end

data/ui/examples/spreadsheet.rb

@@ -0,0 +1,138 @@
+require_relative "../src/hokusai"
+require_relative "../src/hokusai/backends/raylib"
+require_relative "../src/hokusai/backends/sdl2"
+
+require_relative "./spreadsheet/csv"
+require "csv"
+
+require "ostruct"
+
+module Demos
+  module Spreadsheet
+    class App < Hokusai::Block
+      style <<~EOF
+      [style]
+      app {
+        outline: outline(1.0, 1.0, 1.0, 1.0);
+        outline_color: rgb(64, 70, 101);
+        background: rgb(39, 43, 62);
+        rounding: 0.02;
+      }
+
+      titlebar {
+        height: 36;
+        outline: outline(0.0, 0.0, 2.0, 0.0);
+        outline_color: rgb(49, 55, 78);
+        background_drag: rgb(49, 55, 78);
+        cursor: "pointer";
+      }
+
+      appTitle {
+        content: "Spreadsheet Demo";
+        font: "dohyeon";
+        color: rgb(255, 255, 255);
+        size: 20;
+        cursor: "pointer";
+        padding: padding(7.0, 0.0, 7.0, 20.0);
+      }
+      EOF
+
+      template <<~EOF
+      [template]
+      vblock { ...app }
+        titlebar { ...titlebar }
+          label { ...appTitle }
+          label { ...appTitle size="14" content="somecsv.csv" }
+          label { ...appTitle size="14" :content="status" }
+        [if="has_spreadsheet"]
+          csv { @modified="set_status" :csv="spreadsheet" @keypress="handle_keypress" }
+      EOF
+
+      uses(
+        vblock: Hokusai::Blocks::Vblock,
+        hblock: Hokusai::Blocks::Hblock,
+        panel: Hokusai::Blocks::Panel,
+        text: Hokusai::Blocks::Text,
+        label: Hokusai::Blocks::Label,
+        titlebar: Hokusai::Blocks::Titlebar::OSX,
+        image: Hokusai::Blocks::Image,
+        csv: Spreadsheet::CSV
+      )
+
+      attr_reader :spreadsheet
+
+      def initialize(**args)
+        super
+        @status = :unchanged
+      end
+
+      def set_status
+        @status = :changed
+      end
+
+      def handle_keypress(event)
+        case event
+        when proc(&:ctrl), proc(&:super)
+          if event.char == "s"
+            save
+          end
+        end
+      end
+
+      def save
+        File.open("somecsv.csv", "wb") do |io|
+          io << spreadsheet.to_a.map(&:to_csv).join("")
+        end
+        @status = :saved
+      end
+
+      def status
+        case @status
+        when :changed
+          "(Modified)"
+        when :saved
+          "(Saved)"
+        else
+          "(Not Modified)"
+        end
+      end
+
+      def has_spreadsheet
+        !@spreadsheet.nil?
+      end
+
+      def on_mounted
+        if File.exist?("somecsv.csv")
+          @spreadsheet = ::CSV.read("somecsv.csv", headers: false)
+        else
+          @spreadsheet = ::CSV.parse(<<~EOF, headers: false)
+          Name,Department,Salary
+          Bob,Engineering,1000
+          Jane,Sales,2000
+          John,Management,5000
+          EOF
+        end
+      end
+    end
+  end
+end
+
+Hokusai::Backends::RaylibBackend.run(Demos::Spreadsheet::App) do |config|
+  config.after_load do
+    font = Hokusai::Backends::RaylibBackend::Font.from("#{__dir__}/assets/Inter-Regular.ttf")
+    Hokusai.fonts.register "inter", font
+    Hokusai.fonts.activate "inter"
+
+    font = Hokusai::Backends::RaylibBackend::Font.from_ext("#{__dir__}/assets/Delius-Regular.ttf", 160)
+    Hokusai.fonts.register "dohyeon", font
+  end 
+
+  config.fps = 60
+  config.width = 800
+  config.height = 500
+  config.title = "Spreadsheet application"
+
+  config.config_flags = Raylib::FLAG_WINDOW_RESIZABLE | Raylib::FLAG_VSYNC_HINT | Raylib::FLAG_WINDOW_TRANSPARENT
+  config.window_state_flags = Raylib::FLAG_WINDOW_RESIZABLE | Raylib::FLAG_WINDOW_UNDECORATED | Raylib::FLAG_WINDOW_TRANSPARENT
+  config.background = Raylib::BLANK
+end