Blue Railroads now have proper contract address.

.vscode/launch.json

@@ -51,6 +51,24 @@
             "name": "Seed Phrase Dice",
             "runtimeExecutable": "npm",
             "runtimeArgs": ["run", "seed-dice"]
+        },
+        {
+            "type": "node",
+            "name": "Fetch Video Metadata",
+            "runtimeExecutable": "npm",
+            "runtimeArgs": ["run", "fetch-video-metadata"]
+        },
+        {
+            "type": "node",
+            "name": "Download Videos",
+            "runtimeExecutable": "npm",
+            "runtimeArgs": ["run", "download-videos"]
+        },
+        {
+            "type": "node",
+            "name": "Get Time Data",
+            "runtimeExecutable": "npm",
+            "runtimeArgs": ["run", "get-time-data"]
         }
     ]
 }

src/build_logic/chaindata_db.js

@@ -2,6 +2,7 @@ import fs from 'fs';
 import path from 'path';
 import { stringify } from "./utils.js"
 import { getProjectDirs } from "./locations.js";
+import { setStoneContractAddress, blueRailroadContractAddress, revealerContractAddress } from './constants.js';
 
 
 export function serializeChainData(chainData) {
@@ -30,6 +31,9 @@ export function deserializeChainData() {
     const chain_data_json_path = path.resolve(chain_data_dir, 'chainData.json');
     const chainDataJson = fs.readFileSync(chain_data_json_path, 'utf8');
     const parsedChainData = JSON.parse(chainDataJson);
+    parsedChainData.setStoneContractAddress = setStoneContractAddress;
+    parsedChainData.blueRailroadContractAddress = blueRailroadContractAddress;
+    parsedChainData.revealerContractAddress = revealerContractAddress;
     return parsedChainData;
 }
 

src/build_logic/download_videos.js

@@ -3,10 +3,11 @@ import path from 'path';
 import ora from 'ora';
 import cliProgress from 'cli-progress';
 import { downloadVideos } from './discord_video_fetcher.js';
-import { fetchedAssetsDir } from './constants.js';
-import { blueRailroadContractAddress } from 'js/constants.js';
+import { getProjectDirs } from './locations.js';
+import { blueRailroadContractAddress } from './constants.js';
 
 async function main() {
+    const { fetchedAssetsDir } = getProjectDirs();
     const spinner = ora('Reading metadata').start();
 
     try {

src/build_logic/webpack.cryptograss.common.js

@@ -10,7 +10,7 @@ import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import { runPrimaryBuild } from './primary_builder.js';
 
 const skipChainData = process.env.SKIP_CHAIN_DATA;
-const { outputPrimarySiteDir, outputPrimaryRootDir, outputDistDir, siteDir } = getProjectDirs();
+const { outputPrimarySiteDir, outputPrimaryRootDir, outputDistDir, siteDir, srcDir } = getProjectDirs();
 
 await runPrimaryBuild(skipChainData, "cryptograss.live");
 
@@ -68,8 +68,8 @@ export default {
                     noErrorOnMissing: true
                 },
                 {
-                    from: 'src/fetched_assets',
-                    to: 'assets',
+                    from: path.resolve(srcDir, 'fetched_assets'),
+                    to: path.resolve(outputDistDir, 'assets/fetched'),
                     globOptions: {
                         dot: true,
                         gitignore: true,

src/build_logic/webpack.justinholmes.common.js

@@ -51,8 +51,8 @@ export default {
                     to: path.resolve(outputDistDir, 'assets')
                 },
                 {
-                    from: 'src/fetched_assets',
-                    to: 'assets',
+                    from: path.resolve(srcDir, 'fetched_assets'),
+                    to: path.resolve(outputDistDir, 'assets/fetched'),
                     globOptions: {
                         dot: true,
                         gitignore: true,

src/sites/cryptograss.live/templates/pages/index.njk

@@ -1,4 +1,32 @@
 {% extends '../base.njk' %}
 {% block main %}
-hello world
+
+<div class="blue-railroad-grid">
+                {% for tokenId, data in chainData.blueRailroads %}
+                    <div class="blue-railroad-card semi-transparent-bg">
+                        <div class="card-header">
+                            <div class="owner-section">
+                                <div class="owner-address" data-address="{{ data.owner }}">
+                                    {{ data.owner }}
+                                </div>
+                                <small class="text-muted">Token #{{ tokenId }}</small>
+                            </div>
+                        </div>
+                        {% if data.video_url %}
+                            <div class="video-container">
+                                <video controls preload="metadata">
+                                    <source src="/assets/fetched/10-{{ chainData.blueRailroadContractAddress}}-{{ tokenId }}.mp4" 
+                                            type="{{ data.content_type }}">
+                                    Your browser does not support the video tag.
+                                </video>
+                            </div>
+                        {% else %}
+                            <div class="no-video-message">
+                                No video available
+                            </div>
+                        {% endif %}
+                    </div>
+                {% endfor %}
+            </div>
+
 {% endblock %}

src/sites/justinholmes.com/styles/styles-common.css

@@ -640,4 +640,83 @@ nav a img {
 
 .long-form-aside .caption {
     font-size: .8em;
+}
+
+
+.blue-railroad-section {
+    padding: 2rem;
+}
+
+.blue-railroad-intro {
+    border-radius: 8px;
+    margin-top: 1rem;
+}
+
+.blue-railroad-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+    gap: 2rem;
+    padding: 1rem 0;
+}
+
+.blue-railroad-card {
+    border-radius: 8px;
+    overflow: hidden;
+    transition: transform 0.2s;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.blue-railroad-card:hover {
+    transform: translateY(-5px);
+}
+
+.blue-railroad-card .card-header {
+    padding: 1rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.blue-railroad-card .video-container {
+    position: relative;
+    padding-top: 56.25%; /* 16:9 Aspect Ratio */
+}
+
+.blue-railroad-card video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.blue-railroad-card .btn {
+    margin: 1rem;
+}
+
+.owner-section {
+    padding: 1rem;
+    text-align: center;
+}
+
+.owner-address {
+    font-family: 'Inconsolata', monospace;
+    font-size: 1.1em;
+    color: #7692ff;
+    word-break: break-all;
+    margin-bottom: 0.5rem;
+}
+
+.video-container {
+    position: relative;
+    padding-top: 56.25%; /* 16:9 Aspect Ratio */
+}
+
+.video-container video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    background: rgba(0, 0, 0, 0.2);
 }