Updated theming, added dangerous (red) button style, replaced Simulator edit_line with edit_box, tweaked various styles

This commit is contained in:
2020-06-16 00:08:56 -05:00
parent 79b53fdd7a
commit b19826d51f
10 changed files with 142 additions and 111 deletions

4
.gitignore vendored
View File

@@ -1 +1,3 @@
data/config.json
data/config.json
data/settings.json
data/simulator.rb

View File

@@ -14,13 +14,13 @@ module TAC
background [TAC::Palette::TIMECRAFTERS_PRIMARY, TAC::Palette::TIMECRAFTERS_SECONDARY]
# title
flow width: 0.9 do
label @title
flow width: 0.855 do
label @title, text_size: THEME_SUBHEADING_TEXT_SIZE
end
# Buttons
flow width: 0.1 do
button "X", text_size: 24 do
flow width: 0.145 do
button get_image("#{TAC::ROOT_PATH}/media/icons/cross.png"), image_width: 24, **THEME_DANGER_BUTTON do
close
end
end

View File

@@ -3,9 +3,9 @@ module TAC
class AlertDialog < Dialog
def build
background Gosu::Color::GRAY
label @options[:message], text_size: 18
label @options[:message]
button "Close", width: 1.0, text_size: 18 do
button "Close", width: 1.0 do
close
end
end

View File

@@ -3,13 +3,13 @@ module TAC
class ConfirmDialog < Dialog
def build
background Gosu::Color::GRAY
label @options[:message], text_size: 18
label @options[:message]
flow width: 1.0 do
button "Cancel", width: 0.475, text_size: 18 do
button "Cancel", width: 0.475 do
close
end
button "Okay", width: 0.475, text_size: 18 do
button "Okay", width: 0.475 do
close
@options[:callback_method].call

View File

@@ -4,21 +4,21 @@ module TAC
def build
background Gosu::Color::GRAY
flow width: 1.0 do
label "Name", width: 0.25, text_size: 18
@name = edit_line @options[:renaming] ? @options[:renaming].name : "", width: 0.70, text_size: 18
label "Name", width: 0.25
@name = edit_line @options[:renaming] ? @options[:renaming].name : "", width: 0.70
end
@name_error = label "", text_size: 18, color: TAC::Palette::TACNET_CONNECTION_ERROR
@name_error = label "", color: TAC::Palette::TACNET_CONNECTION_ERROR
@name_error.hide
flow width: 1.0 do
button "Cancel", width: 0.475, text_size: 18 do
button "Cancel", width: 0.475 do
close
end
accept_label = @options[:renaming] ? "Update" : "Add"
accept_label = @options[:accept_label] if @options[:accept_label]
button accept_label, width: 0.475, text_size: 18 do
button accept_label, width: 0.475 do
if @name.value.strip.empty?
@name_error.value = "Name cannot be blank.\nName cannot only be whitespace."
@name_error.show

View File

@@ -7,17 +7,17 @@ module TAC
@type = @options[:variable].type if @options[:variable]
label "Name"
@name_error = label "Error", text_size: 18, color: TAC::Palette::TACNET_CONNECTION_ERROR
@name_error = label "Error", color: TAC::Palette::TACNET_CONNECTION_ERROR
@name_error.hide
@name = edit_line @options[:variable] ? @options[:variable].name : "", text_size: 18
@name = edit_line @options[:variable] ? @options[:variable].name : ""
label "Type"
@type_error = label "Error", text_size: 18, color: TAC::Palette::TACNET_CONNECTION_ERROR
@type_error = label "Error", color: TAC::Palette::TACNET_CONNECTION_ERROR
@type_error.hide
# TODO: Add dropdown menus to CyberarmEngine
flow width: 1.0 do
[:float, :double, :integer, :long, :string, :boolean].each do |btn|
button btn, text_size: 18 do
button btn do
@type = btn
@value_container.show
end
@@ -26,17 +26,17 @@ module TAC
@value_container = stack width: 1.0 do
label "Value"
@value_error = label "Error", text_size: 18, color: TAC::Palette::TACNET_CONNECTION_ERROR
@value_error = label "Error", color: TAC::Palette::TACNET_CONNECTION_ERROR
@value_error.hide
@value = edit_line @options[:variable] ? @options[:variable].value : "", text_size: 18
@value = edit_line @options[:variable] ? @options[:variable].value : ""
end
flow width: 1.0 do
button "Cancel", width: 0.475, text_size: 18 do
button "Cancel", width: 0.475 do
close
end
button @options[:variable] ? "Update" : "Add", width: 0.475, text_size: 18 do |b|
button @options[:variable] ? "Update" : "Add", width: 0.475 do |b|
if valid?
if @options[:variable]
@options[:callback_method].call(@options[:variable], @name.value.strip, @type, @value.value.strip)

View File

@@ -9,36 +9,36 @@ module TAC
stack width: 1.0, height: 1.0 do
stack width: 1.0, height: 0.1, border_thickness: 1, border_color: [0, 0, Gosu::Color::BLACK, 0] do
background [TAC::Palette::TIMECRAFTERS_PRIMARY, TAC::Palette::TIMECRAFTERS_SECONDARY]
background THEME_HEADER_BACKGROUND
flow width: 1.0, height: 1.0 do
stack width: 0.60 do
label TAC::NAME, color: Gosu::Color::BLACK, bold: true
label TAC::NAME, bold: true, text_size: THEME_HEADING_TEXT_SIZE
flow width: 1.0 do
flow width: 0.3 do
label "Group: ", text_size: 18
@active_group_label = label "", text_size: 18
label "Group: "
@active_group_label = label ""
end
flow width: 0.3 do
label "Action: ", text_size: 18
@active_action_label = label "", text_size: 18
label "Action: "
@active_action_label = label ""
end
flow width: 0.395 do
button get_image("#{TAC::ROOT_PATH}/media/icons/right.png"), image_width: 18, margin_left: 10, tip: "Simulator" do
button get_image("#{TAC::ROOT_PATH}/media/icons/right.png"), image_width: THEME_ICON_SIZE, margin_left: 10, tip: "Simulator" do
push_state(Simulator)
end
button get_image("#{TAC::ROOT_PATH}/media/icons/menuList.png"), image_width: 18, margin_left: 10, tip: "Manage presets" do
button get_image("#{TAC::ROOT_PATH}/media/icons/menuList.png"), image_width: THEME_ICON_SIZE, margin_left: 10, tip: "Manage presets" do
push_state(ManagePresets)
end
button get_image("#{TAC::ROOT_PATH}/media/icons/save.png"), image_width: 18, margin_left: 10, tip: "Save config to disk" do
button get_image("#{TAC::ROOT_PATH}/media/icons/save.png"), image_width: THEME_ICON_SIZE, margin_left: 10, tip: "Save config to disk" do
window.backend.save_config
end
button get_image("#{TAC::ROOT_PATH}/media/icons/export.png"), image_width: 18, margin_left: 10, tip: "Upload local config to remote, if connected." do
button get_image("#{TAC::ROOT_PATH}/media/icons/export.png"), image_width: THEME_ICON_SIZE, margin_left: 10, tip: "Upload local config to remote, if connected." do
window.backend.upload_config
end
button get_image("#{TAC::ROOT_PATH}/media/icons/import.png"), image_width: 18, margin_left: 10, tip: "Download remote config, if connected." do
button get_image("#{TAC::ROOT_PATH}/media/icons/import.png"), image_width: THEME_ICON_SIZE, margin_left: 10, tip: "Download remote config, if connected." do
window.backend.download_config
end
end
@@ -49,15 +49,15 @@ module TAC
stack width: 0.5 do
label "TACNET v#{TACNET::Packet::PROTOCOL_VERSION}", color: TAC::Palette::TACNET_PRIMARY, text_shadow: true, text_shadow_size: 1, text_shadow_color: Gosu::Color::BLACK
flow width: 1.0 do
@tacnet_hostname = edit_line "#{window.backend.config.configuration.hostname}", text_size: 18, width: 0.5, margin_right: 0
@tacnet_hostname = edit_line "#{window.backend.config.configuration.hostname}", width: 0.5, margin_right: 0
@tacnet_hostname.subscribe(:changed) do |caller, value|
window.backend.config.configuration.hostname = value
window.backend.config_changed!
end
label ":", text_size: 18, margin: 0, padding: 0, padding_top: 3
label ":", margin: 0, padding: 0, padding_top: 3
@tacnet_port = edit_line "#{window.backend.config.configuration.port}", text_size: 18, width: 0.2, margin_left: 0
@tacnet_port = edit_line "#{window.backend.config.configuration.port}", width: 0.2, margin_left: 0
@tacnet_port.subscribe(:changed) do |caller, value|
window.backend.config.configuration.port = Integer(value)
window.backend.config_changed!
@@ -66,9 +66,9 @@ module TAC
end
stack width: 0.499 do
@tacnet_status = label "Not Connected", background: TAC::Palette::TACNET_NOT_CONNECTED, width: 1.0, text_size: 18, padding: 5, margin_top: 2, border_thickness: 1, border_color: Gosu::Color::GRAY
@tacnet_status = label "Not Connected", background: TAC::Palette::TACNET_NOT_CONNECTED, width: 1.0, padding: 5, margin_top: 2, border_thickness: 1, border_color: Gosu::Color::GRAY
flow width: 1.0 do
@tacnet_connection_button = button "Connect", width: 0.475, text_size: 18 do
@tacnet_connection_button = button "Connect", width: 0.475 do
case window.backend.tacnet.status
when :connected, :connecting
window.backend.tacnet.close
@@ -76,7 +76,7 @@ module TAC
window.backend.tacnet.connect(@tacnet_hostname.value, @tacnet_port.value)
end
end
button get_image("#{TAC::ROOT_PATH}/media/icons/information.png"), image_width: 18, width: 0.475 do
button get_image("#{TAC::ROOT_PATH}/media/icons/information.png"), image_width: THEME_ICON_SIZE, width: 0.475 do
push_state(Dialog::AlertDialog, title: "TACNET Status", message: window.backend.tacnet.full_status)
end
end
@@ -86,14 +86,14 @@ module TAC
end
flow width: 1.0, height: 0.9 do
background THEME_CONTENT_BACKGROUND
stack width: 0.333, height: 1.0, border_thickness: 1, border_color: [0, Gosu::Color::BLACK, 0, 0] do
background TAC::Palette::GROUPS_PRIMARY
flow do
label "Groups"
button get_image("#{TAC::ROOT_PATH}/media/icons/plus.png"), image_width: 18, tip: "Add group" do
label "Groups", text_size: THEME_SUBHEADING_TEXT_SIZE
button get_image("#{TAC::ROOT_PATH}/media/icons/plus.png"), image_width: THEME_ICON_SIZE, tip: "Add group" do
push_state(TAC::Dialog::NamePromptDialog, title: "Create Group", list: window.backend.config.groups, callback_method: method(:create_group))
end
button get_image("#{TAC::ROOT_PATH}/media/icons/button2.png"), image_width: 18, tip: "Clone currently selected group" do
button get_image("#{TAC::ROOT_PATH}/media/icons/button2.png"), image_width: THEME_ICON_SIZE, tip: "Clone currently selected group" do
if @active_group
push_state(Dialog::NamePromptDialog, title: "Clone Group", renaming: @active_group, accept_label: "Clone", list: window.backend.config.groups, callback_method: proc { |group, name|
clone = TAC::Config::Group.from_json( JSON.parse( @active_group.to_json, symbolize_names: true ))
@@ -105,24 +105,23 @@ module TAC
})
end
end
button get_image("#{TAC::ROOT_PATH}/media/icons/save.png"), image_width: 18, tip: "Save group as preset"
button get_image("#{TAC::ROOT_PATH}/media/icons/save.png"), image_width: THEME_ICON_SIZE, tip: "Save group as preset"
end
@groups_list = stack width: 1.0 do
end
end
stack width: 0.333, height: 1.0, border_thickness: 1, border_color: [0, Gosu::Color::BLACK, 0, 0] do
background TAC::Palette::ACTIONS_PRIMARY
flow do
label "Actions"
button get_image("#{TAC::ROOT_PATH}/media/icons/plus.png"), image_width: 18, tip: "Add action" do
label "Actions", text_size: THEME_SUBHEADING_TEXT_SIZE
button get_image("#{TAC::ROOT_PATH}/media/icons/plus.png"), image_width: THEME_ICON_SIZE, tip: "Add action" do
if @active_group
push_state(TAC::Dialog::NamePromptDialog, title: "Create Action", list: @active_group.actions, callback_method: method(:create_action))
else
push_state(TAC::Dialog::AlertDialog, title: "Error", message: "Unable to create action,\nno group selected.")
end
end
button get_image("#{TAC::ROOT_PATH}/media/icons/button2.png"), image_width: 18, tip: "Clone currently selected action" do
button get_image("#{TAC::ROOT_PATH}/media/icons/button2.png"), image_width: THEME_ICON_SIZE, tip: "Clone currently selected action" do
if @active_action
clone = TAC::Config::Action.from_json( JSON.parse( @active_action.to_json, symbolize_names: true ))
clone.name = "#{clone.name}_copy"
@@ -143,17 +142,16 @@ module TAC
})
end
end
button get_image("#{TAC::ROOT_PATH}/media/icons/save.png"), image_width: 18, tip: "Save action as preset"
button get_image("#{TAC::ROOT_PATH}/media/icons/save.png"), image_width: THEME_ICON_SIZE, tip: "Save action as preset"
end
@actions_list = stack width: 1.0 do
end
end
stack width: 0.331, height: 1.0 do
background TAC::Palette::VARIABLES_PRIMARY
flow do
label "Variables"
button get_image("#{TAC::ROOT_PATH}/media/icons/plus.png"), image_width: 18, tip: "Add variable" do
label "Variables", text_size: THEME_SUBHEADING_TEXT_SIZE
button get_image("#{TAC::ROOT_PATH}/media/icons/plus.png"), image_width: THEME_ICON_SIZE, tip: "Add variable" do
if @active_action
push_state(TAC::Dialog::VariableDialog, title: "Create Variable", callback_method: method(:create_variable))
else
@@ -283,9 +281,11 @@ module TAC
groups = window.backend.config.groups
@groups_list.clear do
groups.each do |group|
flow width: 1.0 do
button group.name, text_size: 18, width: 0.855 do
groups.each_with_index do |group, i|
flow width: 1.0, padding_left: THEME_ITEM_PADDING, padding_right: THEME_ITEM_PADDING, padding_top: THEME_ITEM_PADDING, padding_bottom: THEME_ITEM_PADDING do
background i.even? ? THEME_EVEN_COLOR : THEME_ODD_COLOR
button group.name, width: 0.855 do
@active_group = group
@active_group_label.value = group.name
@active_action = nil
@@ -295,10 +295,10 @@ module TAC
@variables_list.clear
end
button get_image("#{TAC::ROOT_PATH}/media/icons/wrench.png"), image_width: 18, tip: "Edit group" do
button get_image("#{TAC::ROOT_PATH}/media/icons/wrench.png"), image_width: THEME_ICON_SIZE, tip: "Edit group" do
push_state(Dialog::NamePromptDialog, title: "Rename Group", renaming: group, list: window.backend.config.groups, callback_method: method(:update_group))
end
button get_image("#{TAC::ROOT_PATH}/media/icons/trashcan.png"), image_width: 18, tip: "Delete group" do
button get_image("#{TAC::ROOT_PATH}/media/icons/trashcan.png"), image_width: THEME_ICON_SIZE, tip: "Delete group", **THEME_DANGER_BUTTON do
push_state(Dialog::ConfirmDialog, title: "Are you sure?", message: "Delete group and all\nof its actions and variables?", callback_method: proc { delete_group(group) })
end
end
@@ -310,19 +310,23 @@ module TAC
actions = group.actions
@actions_list.clear do
actions.each do |action|
flow width: 1.0 do
button action.name, text_size: 18, width: 0.855 do
actions.each_with_index do |action, i|
flow width: 1.0, padding_left: THEME_ITEM_PADDING, padding_right: THEME_ITEM_PADDING, padding_top: THEME_ITEM_PADDING, padding_bottom: THEME_ITEM_PADDING do
background i.even? ? THEME_EVEN_COLOR : THEME_ODD_COLOR
button action.name, width: 0.8 do
@active_action = action
@active_action_label.value = action.name
populate_variables_list(action)
end
button get_image("#{TAC::ROOT_PATH}/media/icons/wrench.png"), image_width: 18, tip: "Edit action" do
toggle_button tip: "Enable action"
button get_image("#{TAC::ROOT_PATH}/media/icons/wrench.png"), image_width: THEME_ICON_SIZE, tip: "Edit action" do
push_state(Dialog::NamePromptDialog, title: "Rename Action", renaming: action, list: @active_group.actions, callback_method: method(:update_action))
end
button get_image("#{TAC::ROOT_PATH}/media/icons/trashcan.png"), image_width: 18, tip: "Delete action" do
button get_image("#{TAC::ROOT_PATH}/media/icons/trashcan.png"), image_width: THEME_ICON_SIZE, tip: "Delete action", **THEME_DANGER_BUTTON do
push_state(Dialog::ConfirmDialog, title: "Are you sure?", message: "Delete action and all\nof its variables?", callback_method: proc { delete_action(action) })
end
end
@@ -335,22 +339,15 @@ module TAC
@variables_list.clear do
variables.each_with_index do |variable, i|
stack width: 1.0 do
background TAC::Palette::VARIABLES_PRIMARY if i.even?
background TAC::Palette::VARIABLES_SECONDARY if i.odd?
flow width: 1.0, padding_left: THEME_ITEM_PADDING, padding_right: THEME_ITEM_PADDING, padding_top: THEME_ITEM_PADDING, padding_bottom: THEME_ITEM_PADDING do
background i.even? ? THEME_EVEN_COLOR : THEME_ODD_COLOR
flow width: 1.0 do
label variable.name, text_size: 18, width: 0.855
button get_image("#{TAC::ROOT_PATH}/media/icons/wrench.png"), image_width: 18, tip: "Edit variable" do
push_state(Dialog::VariableDialog, title: "Edit Variable", variable: variable, callback_method: method(:update_variable))
end
button get_image("#{TAC::ROOT_PATH}/media/icons/trashcan.png"), image_width: 18, tip: "Delete variable" do
push_state(Dialog::ConfirmDialog, title: "Are you sure?", message: "Delete variable?", callback_method: proc { delete_variable(variable) })
end
button "#{variable.name} [Type: #{variable.type}, Value: #{variable.value}]", width: 0.925, tip: "Edit variable" do
push_state(Dialog::VariableDialog, title: "Edit Variable", variable: variable, callback_method: method(:update_variable))
end
button get_image("#{TAC::ROOT_PATH}/media/icons/trashcan.png"), image_width: THEME_ICON_SIZE, tip: "Delete variable", **THEME_DANGER_BUTTON do
push_state(Dialog::ConfirmDialog, title: "Are you sure?", message: "Delete variable?", callback_method: proc { delete_variable(variable) })
end
label "Type: #{variable.type}, Value: #{variable.value}", text_size: 18
end
end
end

View File

@@ -5,9 +5,9 @@ module TAC
theme(THEME)
stack width: 1.0, height: 0.1 do
background [TAC::Palette::TIMECRAFTERS_PRIMARY, TAC::Palette::TIMECRAFTERS_SECONDARY]
label "#{TAC::NAME} ― Manage Presets", text_size: 28, color: Gosu::Color::BLACK
button "Close", text_size: 18 do
background THEME_HEADER_BACKGROUND
label "#{TAC::NAME} ― Manage Presets", bold: true, text_size: THEME_HEADING_TEXT_SIZE
button "Close" do
pop_state
end
end
@@ -18,13 +18,13 @@ module TAC
label "Group Presets"
# TAC::Storage.group_presets.each do |preset|
%w{ Hello World How Are You }.each do |preset|
button preset, width:1.0, text_size: 18
button preset, width:1.0
end
label "Action Presets"
# TAC::Storage.action_presets.each do |preset|
%w{ Hello World How Are You }.each do |preset|
button preset, width:1.0, text_size: 18
button preset, width:1.0
end
end

View File

@@ -5,9 +5,9 @@ module TAC
theme(THEME)
stack width: 1.0, height: 0.1 do
background [TAC::Palette::TIMECRAFTERS_PRIMARY, TAC::Palette::TIMECRAFTERS_SECONDARY]
label "#{TAC::NAME} ― Simulator", text_size: 28, color: Gosu::Color::BLACK
button "Close", text_size: 18 do
background THEME_HEADER_BACKGROUND
label "#{TAC::NAME} ― Simulator", bold: true, text_size: THEME_HEADING_TEXT_SIZE
button "Close" do
pop_state
end
end
@@ -21,20 +21,24 @@ module TAC
background Gosu::Color.new(0x88_ff8800)
flow width: 1.0, height: 0.05 do
button get_image("#{TAC::ROOT_PATH}/media/icons/right.png"), image_width: 18, width: 0.49 do
@simulation = TAC::Simulator::Simulation.new(source_code: @source_code.value, field_container: @field_container)
@simulation.__start
button get_image("#{TAC::ROOT_PATH}/media/icons/right.png"), image_width: THEME_ICON_SIZE, width: 0.49 do
begin
@simulation = TAC::Simulator::Simulation.new(source_code: @source_code.value, field_container: @field_container)
@simulation.__start
rescue SyntaxError, NameError, NoMethodError, TypeError, ArgumentError => e
push_state(Dialog::AlertDialog, title: "#{e.class}", message: e)
end
end
button get_image("#{TAC::ROOT_PATH}/media/icons/stop.png"), image_width: 18, width: 0.49 do
button get_image("#{TAC::ROOT_PATH}/media/icons/stop.png"), image_width: THEME_ICON_SIZE, width: 0.49 do
@simulation.__queue.clear if @simulation
end
button get_image("#{TAC::ROOT_PATH}/media/icons/save.png"), image_width: 18, width: 0.49
button get_image("#{TAC::ROOT_PATH}/media/icons/save.png"), image_width: THEME_ICON_SIZE, width: 0.49
@simulation_status = label "", text_size:18
@simulation_status = label ""
end
stack width: 1.0, height: 0.95 do
@source_code = edit_line "backward 100; turn 90; forward 100; turn -90; forward 100; turn -90; forward 100", width: 1.0, height: 1.0, text_size: 18
@source_code = edit_box "backward 100\nturn 90\nforward 100\nturn -90\nforward 100\nturn -90\nforward 100", width: 1.0, height: 1.0
end
end
end

View File

@@ -1,22 +1,50 @@
module TAC
THEME = {
Label: {
font: "#{TAC::ROOT_PATH}/media/fonts/DejaVuSansCondensed.ttf",
text_size: 28
},
Button: {
background: TAC::Palette::TIMECRAFTERS_PRIMARY,
border_thickness: 1,
border_color: Gosu::Color.new(0xff_111111),
hover: {
background: TAC::Palette::TIMECRAFTERS_SECONDARY,
},
active: {
background: TAC::Palette::TIMECRAFTERS_TERTIARY
}
},
EditLine: {
caret_color: Gosu::Color.new(0xff_434343)
}
}
Label: {
font: "#{TAC::ROOT_PATH}/media/fonts/DejaVuSansCondensed.ttf",
text_size: 18,
color: Gosu::Color.new(0xee_ffffff),
},
Button: {
background: TAC::Palette::TIMECRAFTERS_PRIMARY,
border_thickness: 1,
border_color: Gosu::Color.new(0xff_111111),
hover: {
background: TAC::Palette::TIMECRAFTERS_SECONDARY,
},
active: {
background: TAC::Palette::TIMECRAFTERS_TERTIARY,
}
},
EditLine: {
caret_color: Gosu::Color.new(0xff_434343),
},
ToggleButton: {
width: 18,
checkmark_image: "#{TAC::ROOT_PATH}/media/icons/checkmark.png",
},
}
THEME_DANGER_BUTTON = {
color: Gosu::Color.new(0xff_ffffff),
background: Gosu::Color.new(0xff_800000),
hover: {
background: Gosu::Color.new(0xff_600000),
},
active: {
background: Gosu::Color.new(0xff_c00000),
}
}
THEME_ICON_SIZE = 18
THEME_HEADING_TEXT_SIZE = 32
THEME_SUBHEADING_TEXT_SIZE = 28
THEME_ITEM_PADDING = 8
THEME_EVEN_COLOR = Gosu::Color.new(0xff_606060)
THEME_ODD_COLOR = Gosu::Color.new(0xff_202020)
THEME_CONTENT_BACKGROUND = Gosu::Color.new(0x88_007f3f)
THEME_HEADER_BACKGROUND = [
TAC::Palette::TIMECRAFTERS_PRIMARY, TAC::Palette::TIMECRAFTERS_PRIMARY,
TAC::Palette::TIMECRAFTERS_SECONDARY, TAC::Palette::TIMECRAFTERS_SECONDARY,
]
end