diff options
| author | davidovski <david@davidovski.xyz> | 2023-08-09 02:40:25 +0100 |
|---|---|---|
| committer | davidovski <david@davidovski.xyz> | 2023-08-09 02:40:25 +0100 |
| commit | c32244676379c7f23429446c574f19832518226e (patch) | |
| tree | 64f53023099098803c7caa6733707387558d11d6 | |
Initial commit
| -rw-r--r-- | README.md | 6 | ||||
| -rw-r--r-- | font.woff | bin | 0 -> 16288 bytes | |||
| -rw-r--r-- | index.php | 146 |
3 files changed, 152 insertions, 0 deletions
diff --git a/README.md b/README.md new file mode 100644 index 0000000..e0e9353 --- /dev/null +++ b/README.md @@ -0,0 +1,6 @@ +# cell grid + +small proof-of-concept site written in php with the goal to use no user-side scripting + +click on a cell on the grid and select a color for a collaborative pixel canvas + diff --git a/font.woff b/font.woff Binary files differnew file mode 100644 index 0000000..cc97383 --- /dev/null +++ b/font.woff diff --git a/index.php b/index.php new file mode 100644 index 0000000..0f844e9 --- /dev/null +++ b/index.php @@ -0,0 +1,146 @@ +<!DOCTYPE html> + +<?php + $GRID_SIZE = 64; + + $grid = json_decode(file_get_contents('array.json'), true); + if (empty($grid)) { + for($x = 0; $x < $GRID_SIZE; ++$x) { + $grid[$x] = array(); + for($y = 0; $y < $GRID_SIZE; ++$y) { + $grid[$x][$y] = "#ffffff"; + } + } + } + + if ($_SERVER['REQUEST_METHOD'] === 'POST') { + $pos = explode(",", $_POST["cell"]); + $grid[$pos[0]][$pos[1]] = $_POST["color"]; + + file_put_contents('array.json', json_encode($grid)); + } +?> + +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>cellgrid</title> + + <style> + + @font-face { + font-family: pixel; + src: url("font.woff") + } + + body { + background: #282a2e; + color: #c5c8c6; + font-family: pixel, Courier New, Verdana, Arial; + font-size: 1em; + text-align: center; + } + + .grid { + overflow: scroll; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + } + + #selector { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + + height: 0%; + + opacity: 0; + visibility: hidden; + float: right; + + transition: height 0.5s; + overflow: hidden; + white-space: nowrap; + padding: 1%; + background: #373b41; + } + + #selector:target { + height: 3em; + visibility: visible; + opacity: 1; + } + + input[type='radio'] { + opacity: 0; + height: 100%; + width: 100%; + margin: 0; + } + + input[type='radio']:checked { + opacity: 1; + } + + td { + position: relative; + width: 10px; + height: 10px; + } + + + table { + border: 0.1em solid black; + font-size: 1px; + width: 640px; + height: 640px; + } + + input[type="color"] { + width: 20px; + height: 20px; + } + + + + </style> + +</head> + +<body> + <form class="main" action="/" method="post"> + + <div class="grid"> + <table border="0" cellspacing="0" cellpadding="0"> + <?php + for($x = 0; $x < $GRID_SIZE; ++$x) { + echo("<tr>"); + for($y = 0; $y < $GRID_SIZE; ++$y) { + $id = "$x,$y"; + $color = $grid[$x][$y]; + echo "<td style='background-color:$color;>"; + echo "<label for='cell1'>"; + echo "<a href='#selector'>"; + echo "<input type='radio' name='cell' id='cell$id' value='$id'>"; + echo "</a>"; + echo "</label>"; + echo "</td>"; + } + echo("</tr>"); + } + ?> + </table> + </div> + + <div id="selector"> + <span>Select Color:</span> + <br> + <input type="color" id="color" name="color"> + <input type="submit" value="Submit"> + </div> + </form> +</body> +</html> |