This repository was archived by the owner on Apr 9, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathform.html
More file actions
137 lines (132 loc) · 4.96 KB
/
form.html
File metadata and controls
137 lines (132 loc) · 4.96 KB
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>ResultGenerator</title>
<meta name="Keywords" content=" ">
<meta name="Description" content=" ">
<meta name="robots" content="noindex,nofollow">
<link rel="stylesheet" type="text/css" href="css/uikit.css">
<script src="js/uikit.js"></script>
<!-- スタイルは特に影響無いです -->
<style type="text/css">
html {
background: #eee;
}
body {
background: #fff;
box-shadow: 0 0 3px #ddd;
width: 600px;
margin: 0 auto;
padding: 20px;
}
header {
text-align: center;
border-bottom: 1px solid #ddd;
padding: 0 0 10px 0;
margin-bottom: 10px;
}
.module {
border-bottom: 1px solid #ddd;
padding-bottom: 10px;
margin-bottom: 10px;
}
.module h2 {
text-align: center;
}
.btn {
text-align: center;
}
.canvas {
text-align: center;
}
footer {
text-align: center;
font-size: 80%;
color: #999;
}
.standings {
width: 80%;
margin: 0 auto;
max-width: 600px;
}
</style>
<!-- 今回はEaselJSのみ使用します-->
<script src="https://code.createjs.com/easeljs-0.8.2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script id="script" type="text/javascript" src="my.js"
data-param='<?php echo json_safe_encode($results);?>' data-fighters='<?php echo json_safe_encode($fighters);?>'>
</script>
<script src="image-picker/image-picker.js"></script>
<link rel="stylesheet" type="text/css" href="image-picker/image-picker.css">
</head>
<body>
<header>
<h1>スマブラ大会結果ジェネレータ</h1>
</header>
<div class="module">
<h2>大会情報</h2>
<dl class="table">
<form action="/" method="post">
<dt>URL</dt>
<dd><input class="uk-input uk-width-5-6" type="text" name="url" id="url" placeholder="大会名" value="<?= $url ?>" /><input class="uk-button uk-button-default uk-width-1-6" type='submit' value='変更'></dd>
</form>
<dt>タイトル</dt>
<dd><input class="uk-input" type="text" name="title" id="title" placeholder="大会名" value="<?= $title ?>" /></dd>
<dt>情報</dt>
<dd><input class="uk-input" type="text" name="info" id="info" placeholder="大会情報" value="<?= $total_entrants ?> entrants - 都道府県, 地方 (Japan) [月/日]" /></dd>
<dt>参加者</dt>
<?php foreach ($results as $key => $value) { ?>
<div class="uk-container">
<dd class="standings">
<input class="uk-input uk-form-width-xsmall" type="text" name="player<?= $key ?>" id="player<?= $key ?>" placeholder="1" size="3" value="<?= $value['rank'] ?>" /><input class="uk-input uk-form-width-medium" type="text" name="player<?= $key ?>_name" id="player<?= $key ?>_name" placeholder="1" value="<?= $value['name'] ?>" />
<a id="characters" class="uk-button uk-button-default" href="#player<?= $key ?>_characters" tag="player<?= $key ?>_characters" uk-toggle>Characters</a>
<div id="player<?= $key ?>_characters" uk-modal>
<div class="uk-modal-dialog">
<div class="picker uk-modal-body" uk-overflow-auto>
<?php foreach($fighters as $fighter): ?>
<h2 class="uk-modal-title"><?= $fighter['name'] ?></h2>
<select id="player<?= $key ?>_character<?= $fighter['id'] ?>" name="player<?= $key ?>_character<?= $fighter['id'] ?>" class="player<?= $key ?>_characters uk-width-expand">
<option value=""></option>
<?php for($i = 0;$i < $fighter['color']; $i++): ?>
<option data-img-src="stockicons/<?= $fighter['slug'] ?>_<?= str_pad($i+1, 2, '0', STR_PAD_LEFT) ?>.png" value="stockicons/<?= $fighter['slug'] ?>_<?= str_pad($i+1, 2, '0', STR_PAD_LEFT) ?>.png"></option>
<?php endfor; ?>
</select>
<?php endforeach; ?>
</div>
<div class="uk-modal-footer uk-text-right">
<button class="uk-button uk-button-default uk-modal-close" type="button">閉じる</button>
</div>
</div>
</dd>
</div>
<?php } ?>
</dl>
<div class="btn">
<button class="uk-button uk-button-default" id="update">画像生成</button>
</div>
</div>
<div class="module">
<h2>結果</h2>
<div class="canvas">
<!-- width,heightは必須 -->
<canvas id="result" width="427" height="<?= 194+$height+30 ?>"></canvas>
</div>
<div class="btn">
<button class="uk-button uk-button-default" id="save">画像として保存</button>
</div>
</div>
<script type="text/javascript">
var done = [];
$('[id=characters]').on('click', function() {
var tag = $(this, "[id=characters]").attr("tag");
if(!done[tag]){
$("select."+tag).imagepicker({
hide_select: false,
});
done[tag] = true;
}
});
</script>
</body>
</html>