blogview_euler_list

www/data/css/styles.css

@@ -1,6 +1,7 @@
 body {
   background-color: #EEE;
-  color: #CCC; }
+  color: #CCC;
+  font-family: serif; }
 
 #content {
   padding-top: 64px;
@@ -53,6 +54,7 @@ body {
   width: 100%; }
 
 #headerdiv {
+  z-index: 999;
   background-color: #333;
   display: flex;
   border-bottom: 1px solid #111;
@@ -254,6 +256,103 @@ html, body {
   margin: 0 0 20px;
   border-left: 5px solid #CCC; }
 
+.mdtable_container {
+  overflow-x: auto; }
+
+.mdtable {
+  border-collapse: collapse;
+  text-align: left;
+  width: 100%;
+  border: 1px solid #666; }
+  .mdtable td, .mdtable th {
+    padding: 3px 10px; }
+  .mdtable thead th {
+    background-color: #7D7D7D;
+    color: #FFFFFF;
+    font-weight: bold;
+    border-left: 1px solid #444; }
+  .mdtable thead th:first-child {
+    border: none; }
+  .mdtable tbody td {
+    border-left: 1px solid #666;
+    font-weight: normal; }
+  .mdtable tbody .alt td {
+    background: #EBEBEB; }
+  .mdtable tbody td:first-child {
+    border-left: none; }
+  .mdtable tbody tr:last-child td {
+    border-bottom: none; }
+  .mdtable tbody tr:nth-child(odd) {
+    background-color: #ccc; }
+
+#PEB_tableProblems .PEB_tablerowProblems:hover {
+  background-color: #888; }
+#PEB_tableProblems .PEB_TC_Value {
+  font-family: Consolas, Monaco, "Courier New", Menlo, monospace; }
+#PEB_tableProblems .PEB_TC_Value:not(:hover) {
+  color: transparent;
+  -o-transition: .5s;
+  -ms-transition: .5s;
+  -moz-transition: .5s;
+  -webkit-transition: .5s;
+  transition: .5s; }
+#PEB_tableProblems .PEB_TC_Value:hover {
+  color: #333;
+  -o-transition: .5s;
+  -ms-transition: .5s;
+  -moz-transition: .5s;
+  -webkit-transition: .5s;
+  transition: .5s; }
+#PEB_tableProblems .PEB_TC_Time {
+  border-radius: 1px;
+  display: inline-block;
+  padding: 1px 6px;
+  min-width: 60px; }
+#PEB_tableProblems .PEB_TC_Timelevel_0 {
+  background-color: #0A0 !important; }
+#PEB_tableProblems .PEB_TC_Timelevel_1 {
+  background-color: #84FF0A !important; }
+#PEB_tableProblems .PEB_TC_Timelevel_2 {
+  background-color: #FF0 !important; }
+#PEB_tableProblems .PEB_TC_Timelevel_3 {
+  background-color: #F60 !important; }
+#PEB_tableProblems .PEB_TC_Timelevel_4 {
+  background-color: #F11 !important; }
+#PEB_tableProblems .PEB_TC_Size {
+  font-family: Consolas, Monaco, "Courier New", Menlo, monospace; }
+#PEB_tableProblems .PEB_TC_Size_93 {
+  float: right;
+  font-family: serif;
+  border-radius: 1px;
+  background-color: #0A0;
+  display: inline-block;
+  padding: 1px 6px; }
+#PEB_tableProblems .PEB_TC_Size_98 {
+  float: right;
+  font-family: serif;
+  border-radius: 1px;
+  background-color: #FF0;
+  display: inline-block;
+  padding: 1px 6px; }
+#PEB_tableProblems a {
+  color: #333;
+  display: block;
+  text-decoration: none; }
+#PEB_tableProblems .PEB_TC_Title a {
+  text-decoration: underline; }
+
+@media (max-width: 1199px) {
+  #PEB_tableProblems tr td:nth-child(1), #PEB_tableProblems tr th:nth-child(1) {
+    display: none; } }
+@media (max-width: 767px) {
+  #PEB_tableProblems tr td:nth-child(1), #PEB_tableProblems tr th:nth-child(1) {
+    display: none; }
+
+  #PEB_tableProblems tr td:nth-child(3), #PEB_tableProblems tr th:nth-child(3) {
+    display: none; }
+
+  #PEB_tableProblems tr td:nth-child(4), #PEB_tableProblems tr th:nth-child(4) {
+    display: none; } }
 .euler_pnl_base {
   display: inline-flex;
   flex-direction: column;

www/data/css/styles_blogview.scss

@@ -56,3 +56,135 @@
   border-left: 5px solid #CCC;
 }
 
+.mdtable_container {overflow-x: auto;}
+
+.mdtable {
+  border-collapse: collapse;
+  text-align: left;
+  width: 100%;
+  border: 1px solid #666;
+
+  td, th {
+    padding: 3px 10px;
+  }
+
+  thead th {
+    background-color: #7D7D7D;
+    color: #FFFFFF;
+    font-weight: bold;
+    border-left: 1px solid #444;
+  }
+
+  thead th:first-child {
+    border: none;
+  }
+
+  tbody td {
+    border-left: 1px solid #666;
+    font-weight: normal;
+  }
+
+  tbody .alt td {
+    background: #EBEBEB;
+  }
+
+  tbody td:first-child {
+    border-left: none;
+  }
+
+  tbody tr:last-child td {
+    border-bottom: none;
+  }
+
+  tbody tr:nth-child(odd) {
+    background-color: #ccc;
+  }
+
+}
+
+#PEB_tableProblems {
+  .PEB_tablerowProblems {  }
+  .PEB_tablerowProblems:hover {  background-color: #888;  }
+
+  .PEB_tablecellProblems {  }
+
+  .PEB_TC_Value { font-family: $FONT_CODE; }
+
+  .PEB_TC_Value:not(:hover) {
+    color: transparent;
+
+    -o-transition:.5s;
+    -ms-transition:.5s;
+    -moz-transition:.5s;
+    -webkit-transition:.5s;
+    transition:.5s;
+  }
+
+  .PEB_TC_Value:hover {
+    color: $COL_TEXT_DARK;
+
+    -o-transition:.5s;
+    -ms-transition:.5s;
+    -moz-transition:.5s;
+    -webkit-transition:.5s;
+    transition:.5s;
+  }
+
+  .PEB_TC_Time {
+    border-radius: 1px;
+
+    display: inline-block;
+    padding: 1px 6px;
+
+    min-width: 60px;
+  }
+
+  .PEB_TC_Timelevel_0 { background-color: #0A0 !important; }
+  .PEB_TC_Timelevel_1 { background-color: #84FF0A !important; }
+  .PEB_TC_Timelevel_2 { background-color: #FF0 !important; }
+  .PEB_TC_Timelevel_3 { background-color: #F60 !important; }
+  .PEB_TC_Timelevel_4 { background-color: #F11 !important; }
+
+  .PEB_TC_Size { font-family: $FONT_CODE; }
+
+  .PEB_TC_Size_93 {
+    float: right;
+    font-family: $FONT_DEFAULT;
+
+    border-radius: 1px;
+    background-color: #0A0;
+
+    display: inline-block;
+    padding: 1px 6px;
+  }
+
+  .PEB_TC_Size_98 {
+    float: right;
+    font-family: $FONT_DEFAULT;
+
+    border-radius: 1px;
+    background-color: #FF0;
+
+    display: inline-block;
+    padding: 1px 6px;
+  }
+
+  a {
+    color: #333;
+    display: block;
+    text-decoration: none;
+  }
+
+  .PEB_TC_Title a { text-decoration: underline; }
+
+}
+
+@media(max-width:1199px) {
+  #PEB_tableProblems tr td:nth-child(1), #PEB_tableProblems tr th:nth-child(1) { display: none; }
+}
+
+@media(max-width:767px) {
+  #PEB_tableProblems tr td:nth-child(1), #PEB_tableProblems tr th:nth-child(1) { display: none; }
+  #PEB_tableProblems tr td:nth-child(3), #PEB_tableProblems tr th:nth-child(3) { display: none; }
+  #PEB_tableProblems tr td:nth-child(4), #PEB_tableProblems tr th:nth-child(4) { display: none; }
+}

www/data/css/styles_config.scss

@@ -6,4 +6,5 @@ $COL_TEXT_DARK:    #333;
 $COL_TRANSPARENT:  #FFFFFF00;
 
 $FONT_HEADER: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
-$FONT_CODE: Consolas, Monaco, "Courier New", Menlo, monospace;
+$FONT_CODE: Consolas, Monaco, "Courier New", Menlo, monospace;
+$FONT_DEFAULT: serif;

www/data/css/styles_global.scss

@@ -3,6 +3,7 @@
 body {
   background-color: $COL_BACKGROUND;
   color: $COL_TEXT_NORMAL;
+  font-family: $FONT_DEFAULT;
 }
 
 #content {

www/data/css/styles_header.scss

@@ -1,6 +1,7 @@
 @import 'styles_config';
 
 #headerdiv {
+  z-index: 999;
   background-color: #333;
   display: flex;
   border-bottom: 1px solid #111;

www/fragments/blogview_euler_list.php

@@ -0,0 +1,105 @@
+<?php
+require_once (__DIR__ . '/../internals/base.php');
+require_once (__DIR__ . '/../internals/blog.php');
+require_once (__DIR__ . '/../internals/euler.php');
+require_once (__DIR__ . '/../extern/Parsedown.php');
+
+$problems = Euler::listAll();
+
+?>
+
+<div class="blogcontent bc_euler bc_markdown">
+
+    <div style="position: relative;">
+        <a href="https://github.com/Mikescher/Project-Euler_Befunge" style="position: absolute; top: 0; right: 0; border: 0;">
+            <img src="/data/images/github_band.png" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png">
+        </a>
+    </div>
+
+	<div class="bc_header">
+		<?php echo $post['date']; ?>
+	</div>
+
+	<div class="bc_data">
+        <p><a href="https://projecteuler.net/problems"><img src="https://projecteuler.net/profile/Mikescher.png" /></a></p>
+
+        <p>
+            A lot of you probably know <a href="https://projecteuler.net/">Project Euler</a>.<br />
+            For those who don't here a short explanation: Project Euler is a collection of mathematical/programming problems.
+            Most problems consist of finding a single number and are solved by writing a program in the programming language of your choice.
+        </p>
+        <p>
+            Most people solve these by using normal languages like C, Java, Phyton, Haskell etc.
+            But you can also go a step further and try solving it with a little bit more exotic languages.
+        </p>
+        <p>
+            So here are my solutions written in <a href="http://esolangs.org/wiki/Befunge">Befunge</a>
+        </p>
+        <blockquote>
+            <p>
+                <strong>Note:</strong><br />
+                Similar to most Befunge content on this site I only used the Befunge-93 instruction-set but ignored the 80x25 size restriction.<br />
+                Still I tries to keep the programs in the Befunge-93 grid size, but that wasn't possible for all. So I guess some programs are <i>technically</i> Befunge-98.
+            </p>
+        </blockquote>
+        <p>
+            I have a included javascript runner here, but for one I only enabled it for programs of reasonable sizes (a few soutions had source files in the megabyte range).<br/>
+            And also it's not the fastest interpreter and some solution take quite a while to finish.<br/>
+            I recommend using <a href="/programs/view/BefunUtils">BefunExec</a>. I specially made that interpreter for this project. It can run befunge code with around 6.5 MHz <i>(on my machine)</i>
+        </p>
+
+        <div class="mdtable_container">
+            <table id="PEB_tableProblems" class="mdtable">
+                <thead>
+                    <tr>
+                        <th>Number</th> <th>Title</th> <th>Time</th> <th>Size</th> <th>Solution (hover to reveal)</th>
+                    </tr>
+                </thead>
+
+                <tbody>
+                <?php
+                foreach ($problems as $problem)
+                {
+                    echo '<tr class="PEB_tablerowProblems">' . "\r\n";
+
+                    echo '<td class="PEB_tablecellProblems PEB_TC_Number">';
+                    echo '<a href="' . $problem['url'] . '">';
+                    echo $problem['number'];
+                    echo '</a>';
+                    echo '</td>' . "\r\n";
+
+					echo '<td class="PEB_tablecellProblems PEB_TC_Title">';
+					echo '<a href="' . $problem['url'] . '">';
+					echo htmlspecialchars($problem['title']);
+					echo '</a>';
+					echo '</td>' . "\r\n";
+
+					echo '<td class="PEB_tablecellProblems PEB_TC_Rating">';
+					echo '<a href="' . $problem['url'] . '">';
+					echo '<div class="PEB_TC_Time PEB_TC_Timelevel_' . $problem['rating'] . '">';
+					echo formatMilliseconds($problem['time']) . "</div></td>\r\n";
+					echo '</div>';
+					echo '</a>';
+					echo '</td>' . "\r\n";
+
+					echo '<td class="PEB_tablecellProblems PEB_TC_Size">';
+					echo '<a href="' . $problem['url'] . '">';
+					echo $problem['width'] . 'x' . $problem['height'];
+					echo '<div class="PEB_TC_Size_' . ($problem['is93'] ? '93' : '98') . '">';
+					echo ($problem['is93'] ? 'Bef-93' : 'Bef-98');
+					echo '</div>';
+					echo '</a>';
+					echo '</td>' . "\r\n";
+
+					echo '<td class="PEB_tablecellProblems PEB_TC_Value">';
+					echo number_format($problem['value'], 0, null, ',');
+					echo '</td>' . "\r\n";
+
+                    echo "</tr>\r\n";
+                }
+                ?>
+                </tbody>
+            </table>
+        </div>
+	</div>
+</div>

www/fragments/eulerpanel.php

@@ -1,5 +1,5 @@
 <?php
-	require __DIR__ . '/../internals/euler.php';
+	require_once(__DIR__ . '/../internals/euler.php');
 	
 	$euler = Euler::listAll();
 

www/fragments/header.php

@@ -5,7 +5,7 @@
 
 	<div class="tabrow">
 		<a class="tab" href="/">Home</a>
-		<a class="tab">Project Euler</a>
+		<a class="tab" href="/blog/1/Project_Euler_with_Befunge">Project Euler</a>
 		<a class="tab" href="/blog">Blog</a>
 		<a class="tab" href="/programs">Programs</a>
 		<a class="tab" href="/about">About</a>

www/internals/base.php

@@ -25,4 +25,36 @@ function destructiveUrlEncode($str) {
 	$str = str_replace('+', '_', $str);
 	$str = str_replace('.', '', $str);
 	return urlencode($str);
+}
+
+function formatMilliseconds($millis)
+{
+	if ($millis < 1000)
+	{
+		return $millis . 'ms';
+	}
+	else if ($millis < 10 * 1000)
+	{
+		return number_format($millis / (1000), 2) . 's';
+	}
+	else if ($millis < 60 * 1000)
+	{
+		return floor($millis / (1000)) . 's';
+	}
+	else if ($millis < 10 * 60 * 1000)
+	{
+		return floor($millis / (60 * 1000)) . 'min ' . floor(($millis % (60 * 1000)) / 1000) . 's';
+	}
+	else if ($millis < 60 * 60 * 1000)
+	{
+		return floor($millis / (60 * 1000)) . 'min';
+	}
+	else if ($millis < 10 * 60 * 60 * 1000)
+	{
+		return number_format($millis / (60 * 60 * 1000), 2) . ' hours';
+	}
+	else
+	{
+		return floor($millis / (60 * 60 * 1000)) . ' hours';
+	}
 }

www/internals/euler.php

@@ -6,6 +6,9 @@ class Euler
 	{
 		$a = require $f;
 		$a['rating'] = self::rateTime($a);
+		$a['url'] = '/blog/1/Project_Euler_with_Befunge/problem-' . str_pad($a['number'], 3, '0', STR_PAD_LEFT);
+		$a['canonical'] = "https://www.mikescher.com" . $a['url'];
+		$a['is93'] = ($a['width'] <= 80 AND $a['height'] <= 25);
 		return $a;
 	}
 

www/pages/blog_view.php

@@ -19,7 +19,7 @@ if ($post === NULL) httpError(404, 'blogpost not found');
 	<meta name="google-site-verification" content="pZOhmjeJcQbRMNa8xRLam4dwJ2oYwMwISY1lRKreSSs"/>
 	<link rel="icon" type="image/png" href="/data/images/favicon.png"/>
     <link rel="stylesheet" href="/data/css/styles.css"/>
-    <link rel="canonical" href="<?php echo $post['canonical']; ?>"/>
+    <link rel="canonical" href="<?php echo (($subview !== '') ? ($post['canonical']) : ($post['canonical'] . '/' . $subview)); ?>"/>
 </head>
 <body>
 <div id="mastercontainer">
@@ -48,7 +48,8 @@ if ($post === NULL) httpError(404, 'blogpost not found');
 
 		} elseif ($post['type'] === 'euler') {
 
-			include (__DIR__ . '/../fragments/blogview_euler.php');
+			if ($subview === '') include (__DIR__ . '/../fragments/blogview_euler_list.php');
+			else                 include (__DIR__ . '/../fragments/blogview_euler_single.php');
 
 		}
 		?>