Last active
October 20, 2025 01:05
-
-
Save skinnyjames/b510185c6bd83fd4e1a41324476ae429 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| class Demo < Hokusai::Block | |
| style <<~EOF | |
| [style] | |
| container { | |
| background: rgb(22, 22, 22); | |
| } | |
| menuStyle { | |
| height: 50.0; | |
| background: rgb(33,33,33); | |
| cursor: "pointer"; | |
| } | |
| iconStyle { | |
| background: rgb(33,33,33); | |
| color: rgb(222,222,222); | |
| outline: outline(0.0, 1.0, 1.0, 0.0); | |
| outline_color: rgb(75, 75, 75); | |
| size: 23; | |
| cursor: "pointer"; | |
| } | |
| iconStyle@hover { | |
| background: rgb(52, 52, 52); | |
| } | |
| iconStyle@mousedown { | |
| background: rgb(222,88,88); | |
| color: rgb(0, 0, 0); | |
| } | |
| displayStyle { | |
| height: 50.0; | |
| } | |
| pickerStyle { | |
| cursor: "default"; | |
| } | |
| pickerStyle@mousedown { | |
| cursor: "pointer"; | |
| } | |
| textStyle { | |
| size: 24; | |
| color: rgb(217, 217, 217); | |
| selection_color: rgb(54, 66, 84); | |
| selection_color_to: rgb(50, 86, 58); | |
| font: "default"; | |
| animate_selection: true; | |
| cursor: "ibeam"; | |
| } | |
| mainText { | |
| autoclip: false; | |
| } | |
| sliderStyle { | |
| size: 30.0; | |
| cursor: "pointer"; | |
| circle_color: rgb(243, 156, 227); | |
| min: 14; | |
| max: 40; | |
| step: 1; | |
| } | |
| sliderContainer { | |
| height: 50.0; | |
| outline: outline(1.0, 0.0, 0.0, 0.0); | |
| outline_color: rgb(74, 74, 74); | |
| } | |
| zoomIn { | |
| label: "Zoom in"; | |
| direction: "right"; | |
| } | |
| zoomOut { | |
| label: "Zoom out"; | |
| direction: "right"; | |
| } | |
| EOF | |
| template <<~EOF | |
| [template] | |
| vblock#app { ...container } | |
| hblock.menu { ...menuStyle } | |
| dropdown { :options="dropdown_options" } | |
| tooltip { label="Copy" } | |
| icon { ...iconStyle type="clipboard" @click="copy" } | |
| hblock | |
| vblock { width="200.0" } | |
| picker { ...pickerStyle @change="handle_color" } | |
| tooltip { ...zoomIn } | |
| icon#plus { ...iconStyle type="plus" @click="increase" } | |
| tooltip { ...zoomOut } | |
| icon#minus { ...iconStyle type="minus" @click="decrease" } | |
| hblock { ...menuStyle } | |
| dropup { :options="dropdown_other_options" z="3" } | |
| vblock | |
| selectable | |
| panel { :autoclip="false" :background="color" } | |
| vblock.display { ...displayStyle :height="display_height" } | |
| text { | |
| ...textStyle | |
| :size="size" | |
| :content="content" | |
| @change="change_content" | |
| :copy_text="make_copy" | |
| @copy="handle_copy" | |
| @height_updated="update_display_height" | |
| } | |
| vblock { ...sliderContainer } | |
| slider { ...sliderStyle @change="print_val" } | |
| EOF | |
| uses( | |
| dropup: Hokusai::Blocks::Dropup, | |
| dropdown: Hokusai::Blocks::Dropdown, | |
| vblock: Hokusai::Blocks::Vblock, | |
| hblock: Hokusai::Blocks::Hblock, | |
| empty: Hokusai::Blocks::Empty, | |
| picker: Hokusai::Blocks::ColorPicker, | |
| selectable: Hokusai::Blocks::Selectable, | |
| center: Hokusai::Blocks::Center, | |
| panel: Hokusai::Blocks::Panel, | |
| text: Hokusai::Blocks::Text, | |
| icon: Hokusai::Blocks::Icon, | |
| slider: Hokusai::Blocks::Slider, | |
| tooltip: Hokusai::Blocks::Tooltip | |
| ) | |
| attr_reader :display_height, :color, :size | |
| def initialize(**args) | |
| @size = 20 | |
| super | |
| end | |
| def print_val(size) | |
| # @size = size | |
| end | |
| def increase(_) | |
| @size += 1 | |
| end | |
| def decrease(_) | |
| @size -= 1 | |
| end | |
| def copy(event) | |
| @make_copy = true | |
| end | |
| def make_copy | |
| @make_copy || false | |
| end | |
| def change_content(content) | |
| @file = content | |
| end | |
| def handle_copy(copy) | |
| Hokusai.copy(copy.copy) | |
| @make_copy = false | |
| end | |
| def content | |
| @file ||= File.read("../../src/system.rb") | |
| @file | |
| end | |
| def dropdown_options | |
| ['Alabama','Alaska','Arizona','Arkansas','California','Colorado','Connecticut','Delaware','Florida','Georgia','Hawaii','Idaho','Illinois','Indiana','Iowa','Kansas','Kentucky','Louisiana','Maine','Maryland','Massachusetts','Michigan','Minnesota','Mississippi','Missouri','Montana','Nebraska','Nevada','New Hampshire','New Jersey','New Mexico','New York','North Carolina','North Dakota','Ohio','Oklahoma','Oregon','Pennsylvania','Rhode Island','South Carolina','South Dakota','Tennessee','Texas','Utah','Vermont','Virginia','Washington','West Virginia','Wisconsin','Wyoming'] | |
| end | |
| def dropdown_other_options | |
| %w[my name is jeff hahaha yeah who today is the day that you will win] | |
| end | |
| def handle_color(color) | |
| @color = color | |
| end | |
| def update_display_height(height) | |
| @display_height = height | |
| end | |
| end | |
| Hokusai::Backend.run(Demo) do |config| | |
| config.title = "Counter" | |
| config.fps = 60 | |
| config.width = 800 | |
| config.height = 500 | |
| config.after_load do | |
| Hokusai.fonts.register "default", Hokusai::Backend::Font.from_ext("OpenSans.ttf", 60) | |
| Hokusai.fonts.activate "default" | |
| Hokusai.fonts.register "icons", Hokusai::Backend::Font.from_ext("typicons.ttf", 60, Hokusai::Blocks::Icon::MAP.values.join("")) | |
| end | |
| end |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment