Mikescher/www.mikescher.com
1
0
Fork 0
Code Actions

blogview_euler_list

Browse Source
This commit is contained in:
Mike Schwörer 2017-12-31 17:53:59 +01:00
parent 3dcdd872c4
commit fdb08970e7
Signed by: Mikescher
GPG Key ID: D3C7172E0A70F8CF
12 changed files with 381 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
www/data/css/styles.css
View File

@ -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;

132
www/data/css/styles_blogview.scss
View File

@ -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; }
}

1
www/data/css/styles_config.scss
View File

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

1
www/data/css/styles_global.scss
View File

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

1
www/data/css/styles_header.scss
View File

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

BIN
www/data/images/github_band.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.6 KiB

105
www/fragments/blogview_euler_list.php Normal file
View File

@ -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>

2
www/fragments/eulerpanel.php
View File

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

2
www/fragments/header.php
View File

@ -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>

32
www/internals/base.php
View File

@ -26,3 +26,35 @@ function destructiveUrlEncode($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';
}
}

3
www/internals/euler.php
View File

@ -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;
}

5
www/pages/blog_view.php
View File

@ -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');
}
?>