kame-remocon 0.2.2 → 0.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 739470f51dedff9d33f47a0f0c8d011e2e090f2ebad37139f7aeb900c8e84593
|
|
4
|
+
data.tar.gz: 385eb802c17457fbc46b00c3fb8039d7493238d0657e767e86ab5cabb5072f4f
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: b835c9f5b53323be80dbc73347fed450befc9758183cc7d4eceb9ef5b0530065c06633cfdcf0c3536ee55fe1ae1fcf70b5d8990a5df8ca86b6e49e603a7f0946
|
|
7
|
+
data.tar.gz: 2f0c2f8eb75c95260fa55098b4fd88cefdad1b70ac9ec7915b413d385b4a394c1e52c631349817b194da9161c7d119dde719b8dc3600a85495e6244b2af1c0e8
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
body {
|
|
2
|
+
background-color: #f0f4f8;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.content {
|
|
6
|
+
margin: 0 auto;
|
|
7
|
+
width: 824px;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.wrap-canvas {
|
|
11
|
+
display: inline-block;
|
|
12
|
+
float: left;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.wrap-canvas canvas {
|
|
16
|
+
width: 400px;
|
|
17
|
+
height: 400px;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.wrap-code-text {
|
|
21
|
+
width: 400px;
|
|
22
|
+
height: 400px;
|
|
23
|
+
display: inline-block;
|
|
24
|
+
margin-left: 24px;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.wrap-code-text textarea {
|
|
28
|
+
width: 100%;
|
|
29
|
+
height: 100%;
|
|
30
|
+
box-sizing: border-box;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.exec-button {
|
|
34
|
+
text-align: right;
|
|
35
|
+
width: 100%;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.exec-button button {
|
|
39
|
+
width: 200px;
|
|
40
|
+
font-size: 24px;
|
|
41
|
+
font-weight: bold;
|
|
42
|
+
text-decoration: none;
|
|
43
|
+
display: inline-block;
|
|
44
|
+
text-align: center;
|
|
45
|
+
padding: 8px 0 10px;
|
|
46
|
+
color: #fff;
|
|
47
|
+
background-color: #49a9d4;
|
|
48
|
+
border-radius: 5px;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
ul {
|
|
52
|
+
list-style: none;
|
|
53
|
+
padding-left: 1em;
|
|
54
|
+
}
|
|
@@ -64,16 +64,29 @@ class Kame::Remocon::Opal::AppView
|
|
|
64
64
|
program = @program
|
|
65
65
|
render_image = @state[:render_image]
|
|
66
66
|
bg_color = @state[:bg_color]
|
|
67
|
+
|
|
67
68
|
div do
|
|
68
|
-
h2(nil,
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
69
|
+
h2(nil, "タートルグラフィックスに挑戦！！")
|
|
70
|
+
div do
|
|
71
|
+
Kame::Remocon::Opal::CanvasView.el(onMounted: -> canvas { mounted(canvas) }, render_image: render_image, bg_color: bg_color)
|
|
72
|
+
div({class: "wrap-code-text"}, textarea({style: {width: "400px", height: "400px"}, ref: :program}, program))
|
|
73
|
+
end
|
|
74
|
+
Hyalite.create_element(:p, {class: "exec-button"}, button({onClick: -> { exec }, name: "exec"}, "実行する"))
|
|
75
|
+
|
|
76
|
+
div do
|
|
77
|
+
h2(nil, "設定")
|
|
78
|
+
ul do
|
|
79
|
+
li do
|
|
80
|
+
input({type: :checkbox, checked: true, id: :wait, ref: :wait})
|
|
81
|
+
label({for: :wait}, "描く過程を表示する")
|
|
82
|
+
end
|
|
83
|
+
li do
|
|
84
|
+
input({type: :checkbox, checked: true, id: :bg_color, ref: :bg_color, onClick: -> {set_background}})
|
|
85
|
+
label({for: :bg_color}, "黒背景")
|
|
86
|
+
end
|
|
87
|
+
end
|
|
88
|
+
#button({onClick: -> { create_image }, name: "create_image"}, "画像を作成")
|
|
89
|
+
end
|
|
77
90
|
end
|
|
78
91
|
end
|
|
79
92
|
end
|
|
@@ -21,7 +21,7 @@ class Kame::Remocon::Opal::CanvasView
|
|
|
21
21
|
|
|
22
22
|
bg_color = @props[:bg_color]
|
|
23
23
|
|
|
24
|
-
div do
|
|
24
|
+
div({class: "wrap-canvas"}) do
|
|
25
25
|
canvas(width: "400", height: "400", id: :canvas, ref: :canvas, style: {"background-color": bg_color})
|
|
26
26
|
if image
|
|
27
27
|
img(src: image, style: {"background-color": bg_color})
|
data/lib/kame/remocon/version.rb
CHANGED