diff --git a/katas/BerlinClock/solutions/blehner78/README.md b/katas/BerlinClock/solutions/blehner78/README.md new file mode 100644 index 0000000..4524148 --- /dev/null +++ b/katas/BerlinClock/solutions/blehner78/README.md @@ -0,0 +1,17 @@ +# Berlin Clock draft +One try of solving the Berlin Clock with some HTML/CSS/Javascript. I have +decided to keep it as simple as possible by getting the current time +through the window object. + +## Dependencies +jquery + +## Demo +index.html + +## Features +Hide the info box by uncommenting the display: none line within the +css/styles.css file + +## Author +Bernhard Lehner diff --git a/katas/BerlinClock/solutions/blehner78/css/style.css b/katas/BerlinClock/solutions/blehner78/css/style.css new file mode 100644 index 0000000..9dc1ac1 --- /dev/null +++ b/katas/BerlinClock/solutions/blehner78/css/style.css @@ -0,0 +1,152 @@ +/** + * Styles for the Berlin Clock + **/ + +body { + font-family: Arial, sans-serif; +} +h1 { + font-size: 40px; + font-weight: bold; + margin: 0; + padding: 20px 0 12px 0; + color: #333; +} +p { + margin: 0; + padding: 0; + color: #333; +} + +.content { + display:flex; + vertical-align: middle; + height: 100%; +} + +/** + * CLOCK + **/ +.clock { + width: 320px; + height: auto; + margin: auto; + position: relative; + background: #ffffff; +} +.seconds_row { + display: block; + width: 80px; + height: 80px; + background-color: #fff; + margin: auto; + border-radius: 50%; + border: 16px solid #ddd; + margin-bottom: 12px; +} + #second { + position: relative; + width: 80px; + height: 80px; + background-color: yellow; + border-radius: 50%; + } +.five_hours_row, .one_hour_row, .five_minutes_row, .one_minute_row { + display: block; + position: relative; + width: 100%; + min-height: 60px; + border-radius: 12px; + padding: 18px 0px 6px 6px; + background-color: #ddd; + margin-bottom: 12px; + overflow: hidden; + text-align: center; +} +.col { + display: inline-block; + background-color: #fff; + margin-right: 6px; + width: 20%; + height: 48px; + border-radius: 6px; +} +.col11 { + display: inline-block; + background-color: #fff; + margin-right: 6px; + width: 5%; + height: 48px; + border-radius: 6px; +} +.hb4 { + display: block; + width: auto; + height: 48px; + background-color: red; + border-radius: 6px; +} +.mb4 { + display: block; + width: auto; + height: 48px; + background-color: yellow; + border-radius: 6px; +} +.mb11 { + display: block; + width: auto; + height: 48px; + background-color: yellow; + border-radius: 6px; +} +.mb11.red { + background-color: red; +} + + + +/** + * INFOBLOCK + * Add display none to the class infoblock to hide it + **/ + +.infoblock { + width: 280px; + margin:auto; + position: absolute; + background-color: #efefef; + right:20px; + bottom:20px; + border-radius: 12px; + overflow: hidden; + color: #888; + /*display:none;*/ +} +#row0 { + position: relative; + padding: 6px 12px 8px; + background-color: #ddd; +} +#row1 { + position: relative; + padding: 6px 12px 8px; +} +#row2 { + position: relative; + padding: 6px 12px 8px; + background-color: #ddd; +} +#row3 { + position: relative; + padding: 6px 12px 8px; +} +#row4 { + position: relative; + padding: 6px 12px 8px; + background-color: #ddd; +} +#row5 { + position: relative; + padding: 6px 12px 8px; +} \ No newline at end of file diff --git a/katas/BerlinClock/solutions/blehner78/index.html b/katas/BerlinClock/solutions/blehner78/index.html new file mode 100644 index 0000000..36a60f6 --- /dev/null +++ b/katas/BerlinClock/solutions/blehner78/index.html @@ -0,0 +1,67 @@ + + + Berlin Clock + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + + + + + diff --git a/katas/BerlinClock/solutions/blehner78/js/clock.js b/katas/BerlinClock/solutions/blehner78/js/clock.js new file mode 100644 index 0000000..9386ad5 --- /dev/null +++ b/katas/BerlinClock/solutions/blehner78/js/clock.js @@ -0,0 +1,68 @@ +// format time +function formatHour(hour) { + return hour + ' hour' + ((hour != 1) ? 's' : ''); +} + +function formatMinute(minute) { + return minute + ' minute' + ((minute != 1) ? 's' : ''); +} + +// draw clock +function drawClock() { + window.setInterval(function () { + // time instance + var time = new Date(); + // variables + var seconds = time.getSeconds(); + var minutes = time.getMinutes(); + var hours = time.getHours(); + // current time + var currentTime = hours + ':' + ((minutes < 10) ? '0' : '') + minutes; + $('#currentTime').html(currentTime); + + //transform lights + setLight('second', seconds % 2); + setLight('hour05', hours >= 5); + setLight('hour10', hours >= 10); + setLight('hour15', hours >= 15); + setLight('hour20', hours >= 20); + setLight('hour01', (hours % 5) >= 1); + setLight('hour02', (hours % 5) >= 2); + setLight('hour03', (hours % 5) >= 3); + setLight('hour04', (hours % 5) >= 4); + setLight('minute05', minutes >= 5); + setLight('minute10', minutes >= 10); + setLight('minute15', minutes >= 15); + setLight('minute20', minutes >= 20); + setLight('minute25', minutes >= 25); + setLight('minute30', minutes >= 30); + setLight('minute35', minutes >= 35); + setLight('minute40', minutes >= 40); + setLight('minute45', minutes >= 45); + setLight('minute50', minutes >= 50); + setLight('minute55', minutes >= 55); + setLight('minute01', (minutes % 5) >= 1); + setLight('minute02', (minutes % 5) >= 2); + setLight('minute03', (minutes % 5) >= 3); + setLight('minute04', (minutes % 5) >= 4); + + // info rows + $('#row0').html('1st row::: ' + seconds +' seconds') + $('#row1').html('2nd row::: 5 hours × ' + Math.floor(hours / 5) + + ' = ' + formatHour(5 * Math.floor(hours / 5))); + $('#row2').html('3rd row::: ' + formatHour(hours % 5)); + $('#row3').html('4th row::: ' + ' 5 minutes × ' + Math.floor(minutes / 5) + + ' = ' + formatMinute(5 * Math.floor(minutes / 5))); + $('#row4').html('5th row::: ' + formatMinute(minutes % 5)); + $('#row5').html('

' + currentTime + '

CURRENT TIME

'); + }, 100); +} + +// set light +function setLight(id, visible) { + if (visible) { + $('#' + id).show(); + } else { + $('#' + id).hide(); + } +} diff --git a/katas/LangtonAnt/solutions/blehner78/README.md b/katas/LangtonAnt/solutions/blehner78/README.md new file mode 100644 index 0000000..4916fb7 --- /dev/null +++ b/katas/LangtonAnt/solutions/blehner78/README.md @@ -0,0 +1,11 @@ +# Langton Ant draft +One try of solving the Langton Ant with PHP + +## Dependencies +PHP + +## Demo +index.php + +## Author +Bernhard Lehner diff --git a/katas/LangtonAnt/solutions/blehner78/css/style.css b/katas/LangtonAnt/solutions/blehner78/css/style.css new file mode 100644 index 0000000..7ef5072 --- /dev/null +++ b/katas/LangtonAnt/solutions/blehner78/css/style.css @@ -0,0 +1,72 @@ +/** + * Styles for the Langtons Ant + **/ + +body { + font-family: Arial, sans-serif; +} +h1 { + font-size: 40px; + font-weight: bold; + margin: 0; + padding: 20px 0 12px 0; + color: #333; +} +p { + margin: 0; + padding: 0; + color: #333; +} + +.content { + display:flex; + vertical-align: middle; + height: 100%; +} +.langtonsant { + width: 400px; + height: 400px; + margin: auto; + position: relative; + background: #ffffff; + border: 12px solid #dedede; +} +.langtonsant img { + width: 100%; + height: 100%; +} + +/** + * INFOBLOCK + * Add display none to the class infoblock to hide it + **/ + +.infoblock { + width: 280px; + margin:auto; + position: absolute; + background-color: #efefef; + right:20px; + bottom:20px; + border-radius: 12px; + overflow: hidden; + color: #888; + padding:20px; + /*display:none;*/ +} +.infoblock p { + padding: 6px 12px 8px; +} + + + +.antCanvas { + position: relative; + display: block; + margin: auto; + border: 12px solid #dedede; +} +.pixel { + position: absolute; + display: inline-block; +} \ No newline at end of file diff --git a/katas/LangtonAnt/solutions/blehner78/index.php b/katas/LangtonAnt/solutions/blehner78/index.php new file mode 100644 index 0000000..33d9781 --- /dev/null +++ b/katas/LangtonAnt/solutions/blehner78/index.php @@ -0,0 +1,151 @@ +"; + for($x = 0; $x < width; $x++){ + for($y = 0; $y < height; $y++){ + if(isset($antgrid[$x][$y])){ + $pagecontent .= ""; + //$step_count++; + } + } + } + $pagecontent .= ""; + $pagecontent .= "
"; + $pagecontent .= "

Ant Grid: w=".width." h=".height."

"; + $pagecontent .= "

Pixel Size: ".pixelsize."

"; + $pagecontent .= "

Steps: ".$step_count."

"; + $pagecontent .= "
"; + + echo $pagecontent; + +} + +/** + * ADDITIONAL CREATE IMG FUNCTION TO PROOF THE OUTPUT + **/ +function createImage($x,$y,$dir) { + while(0 <= $x && $x <= width && 0 <= $y && $y <= height){ + if(isset($antgrid[$x][$y])){ + unset($antgrid[$x][$y]); + $dir = ($dir +3) % 4; + } else { + $antgrid[$x][$y] = true; + $dir = ($dir + 1) % 4; + } + switch($dir){ + case 0: $y++; break; + case 1: $x--; break; + case 2: $y--; break; + case 3: $x++; break; + } + } + $image = imagecreatetruecolor(width, height); + $white = imagecolorallocate($image, 255, 255, 255); + $black = imagecolorallocate($image, 40, 40, 40); + imagefilledrectangle($image, 0, 0, width, height, $white); + for($x = 0; $x < width; $x++){ + for($y = 0; $y < height; $y++){ + if(isset($antgrid[$x][$y])){ + imagesetpixel($image, $x, $y, $black); + } + } + } + + // SAVE IMAGE + imagepng($image, langtonsant_image); + imagedestroy($image); +} + + +/** + * Would have been the preferred solution to come up with an object oriented solution + * Just a rough sketch did not found the time to create it properly - please apologize + */ + +/* +require_once(__DIR__."/src/Ant.php"); +require_once(__DIR__."/src/Antgrid.php"); + +$grid = new Antgrid(200,200); +$ant = new Ant($grid); + +$i=0; +while(true) { + $ant->step(); + $i++; +} +*/ + +// + + + + +?> + + + <?=title?> + + + +
+ +
+
+ + \ No newline at end of file diff --git a/katas/LangtonAnt/solutions/blehner78/src/Ant.php b/katas/LangtonAnt/solutions/blehner78/src/Ant.php new file mode 100644 index 0000000..ea321df --- /dev/null +++ b/katas/LangtonAnt/solutions/blehner78/src/Ant.php @@ -0,0 +1,76 @@ +antgrid = $antgrid; + $this->x = (int) ($antgrid->getWidth() / 2); + $this->y = (int) ($antgrid->getHeight() / 2); + $this->direction = 0; + $this->steps = 0; + } + + public function step() + { + if($this->antgrid->isActive($this->x, $this->y)) { + $this->turnRight(); + } else { + $this->turnLeft(); + } + $this->antgrid->toggle($this->x, $this->y); + $this->makeMove(); + $this->steps++; + } + + private function turnRight() + { + $this->direction = $this->modulo($this->direction + 1, 4); + } + + private function turnLeft() + { + $this->direction = $this->modulo($this->direction - 1, 4); + } + + private function makeMove() + { + switch ($this->compass[$this->direction]) { + case 'NORTH': + $this->y++; + break; + case 'EAST': + $this->x++; + break; + case 'SOUTH': + $this->y--; + break; + case 'WEST': + $this->x--; + break; + } + + $this->x = $this->modulo($this->x, $this->antgrid->getWidth()); + $this->y = $this->modulo($this->y, $this->antgrid->getHeight()); + } + + private function modulo($a, $b) + { + $a %= $b; + if($a<0) { + $a += abs($b); + } + + return $a; + } + +} \ No newline at end of file diff --git a/katas/LangtonAnt/solutions/blehner78/src/Antgrid.php b/katas/LangtonAnt/solutions/blehner78/src/Antgrid.php new file mode 100644 index 0000000..13e3ed7 --- /dev/null +++ b/katas/LangtonAnt/solutions/blehner78/src/Antgrid.php @@ -0,0 +1,40 @@ +width = $width; + $this->height = $height; + $this->canvas = array(); + } + + public function isActive(int $x, int $y): bool + { + return $this->canvas->get($x, $y); + } + + public function toggle(int $x, int $y): void + { + $this->canvas->toggle($x, $y); + } + + public function getWidth(): int + { + return $this->width; + } + + public function getHeight(): int + { + return $this->height; + } + + // drawCanvas + // exportImage +} \ No newline at end of file