ResultGenerator/form.html at master · pon-sandbox/ResultGenerator · GitHub

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>