-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
186 lines (181 loc) · 6.42 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>「ナビつき！つくってわかる はじめてゲームプログラミング」風の何か</title>
<script type="module" src="dist/index.js"></script>
<style>
.container {
position: relative;
}
.containerElement {
width: 1280px;
height: 720px;
margin: 0 0.5em 0 0.5em;
position: absolute;
}
.menuBar {
margin: 1em 0.5em 0 0.5em;
--submenu-width: 8.5em;
--vertical-padding: 0.5em;
/* https://qiita.com/BEMU/items/0f500e0306471073ed63 */
letter-spacing: -0.4em;
}
.topItem {
text-align: center;
color: #FFFFFF;
font-weight: bold;
}
.topItem > img {
height: 15px;
}
.menuBar > .menu {
width: 3em;
border-color: var(--menu-color);
background-color: var(--menu-color);
padding: var(--vertical-padding) 1em;
letter-spacing: normal;
}
.menuBar > .menu > .submenu {
margin-top: var(--vertical-padding);
}
.menu {
display: inline-block;
position: relative;
width: var(--submenu-width);
cursor: pointer;
}
.menu a {
display: block;
}
.menu:hover > .submenu {
display: block;
z-index: 1;
}
.submenu > .menu:hover > .submenu {
display: block;
}
.submenu {
border-left: 3px solid var(--menu-color);
border-right: 3px solid var(--menu-color);
border-bottom: 3px solid var(--menu-color);
border-radius: 0px 5px 5px 5px;
display: none;
position: absolute;
left: 0px;
width: var(--submenu-width);
}
.submenu a {
border-top: 3px solid var(--menu-color);
color: var(--menu-color);
padding: 0.5em 0.5em 0.5em 1em;
background-color: #FFFFFF;
}
.submenu a:hover {
background-color: #FFEC00;
}
.submenu .submenu {
left: var(--submenu-width);
top: 0px;
}
.submenu > .menu > a:after {
text-align: right;
float: right;
content: "›";
font-weight: bold;
}
/* Other special menu items */
.menu.saveLoad {
--border-width: 3px;
border-top: var(--border-width) solid #000000;
border-right: var(--border-width) solid #000000;
background-color: #FFFFFF;
padding-top: calc(var(--vertical-padding) - var(--border-width) + 0.25px);
font-weight: normal;
color: #000000;
}
.saveLoad:hover {
background-image: linear-gradient(-45deg, #57E4FA 25%, #5FEDFC 25%, #5FEDFC 50%, #57E4FA 50%, #57E4FA 75%, #5FEDFC 75%);
background-size: 15px 15px;
}
.replay, .reedit {
background-image: linear-gradient(-45deg, #020303 25%, #303332 25%, #303332 50%, #020303 50%, #020303 75%, #303332 75%);
background-size: 15px 15px;
margin-right: 0.5em;
}
.replay:hover {
background-image: linear-gradient(-45deg, #FFF145 25%, #FFF149 25%, #FFF149 50%, #FFF145 50%, #FFF145 75%, #FFF149 75%);
}
.reedit:hover {
background-image: linear-gradient(-45deg, #07936B 25%, #259B74 25%, #259B74 50%, #07936B 50%, #07936B 75%, #259B74 75%);
}
/* Initial value for JavaScript*/
#js-stage, .js-showWhenPlay {
display: none;
}
</style>
</head>
<body>
<h1>「ナビつき！つくってわかる はじめてゲームプログラミング」風の何か</h1>
<div class="js-menuBars">
<div class="js-showWhenEdit menuBar">
<div class="menu topItem" style="--menu-color: #000000;" data-handler="play">▶</div>
<div class="menu" style="--menu-color: #FF004C;">
<a class="topItem">入力</a>
<div class="submenu">
<a data-handler="addClickInstruction">クリック</a>
<a data-handler="addCursorInstruction">マウスの移動</a>
<a data-handler="addConstInstruction">定数</a>
<a data-handler="addTickInstruction">時間の経過</a>
</div>
</div>
<div class="menu" style="--menu-color: #00AD7C;">
<a class="topItem">中間</a>
<div class="submenu">
<div class="menu">
<a>けいさん</a>
<div class="submenu">
<a data-handler="addArithmeticInstruction" data-argument="+">+</a>
<a data-handler="addArithmeticInstruction" data-argument="-">-</a>
<a data-handler="addArithmeticInstruction" data-argument="×">×</a>
<a data-handler="addArithmeticInstruction" data-argument="÷">÷</a>
</div>
</div>
<div class="menu">
<a>くらべる</a>
<div class="submenu">
<a data-handler="addComparisonInstruction" data-argument="=">=</a>
<a data-handler="addComparisonInstruction" data-argument="<"><</a>
<a data-handler="addComparisonInstruction" data-argument="≦">≦</a>
<a data-handler="addComparisonInstruction" data-argument=">">></a>
<a data-handler="addComparisonInstruction" data-argument="≧">≧</a>
</div>
</div>
<a data-handler="addCounterInstruction">カウンター</a>
<a data-handler="addNotInstruction">NOT</a>
<a data-handler="addAndInstruction">AND</a>
</div>
</div>
<div class="menu" style="--menu-color: #F55F00;">
<a class="topItem">モノ</a>
<div class="submenu">
<a data-handler="addObjectInstruction" data-argument="🐶">🐶 イヌ</a>
<a data-handler="addObjectInstruction" data-argument="😺">😺 ネコ</a>
<a data-handler="addObjectInstruction" data-argument="🙂">🙂 ヒト</a>
</div>
</div>
<div class="menu topItem saveLoad" data-handler="save">保存</div>
<div class="menu topItem saveLoad" data-handler="load">再開</div>
</div>
<div class="js-showWhenPlay menuBar">
<div class="menu topItem reedit" data-handler="reedit"><img src="imgs/reedit.svg" data-handler="reedit" alt="🖊"/></div>
<div class="menu topItem replay" data-handler="replay"><img src="imgs/replay.svg" data-handler="replay" alt="🔁"/></div>
</div>
</div>
<div class="container">
<verton-garage class="containerElement"></verton-garage>
<svg class="containerElement" id="js-stage" style="background-color: rgb(173, 251, 255);" xmlns="http://www.w3.org/2000/svg"></svg>
</div>
</body>
</html>