rokcoder-web
diff --git a/‎README.md‎
Lines changed: 1 addition & 1 deletion b/‎README.md‎
Lines changed: 1 addition & 1 deletion
diff --git a/‎data.js‎
Lines changed: 10 additions & 0 deletions b/‎data.js‎
Lines changed: 10 additions & 0 deletions
diff --git a/‎index.html‎
Lines changed: 4 additions & 5 deletions b/‎index.html‎
Lines changed: 4 additions & 5 deletions
diff --git a/‎projectViewer.js‎
Lines changed: 8 additions & 1 deletion b/‎projectViewer.js‎
Lines changed: 8 additions & 1 deletion
@@ -4,4 +4,4 @@ I wanted a [web page](https://www.rokcoder.com/scratch) to showcase selected Scr
 
 Although my site now incorporates a lot of PHP, this version is made entirely with JavaScript and HTML to make it easier to understand and host - I thought it was a landing page that others might enjoy using for their own projects.
 
-There are a few image files but the main body of code is contained in `index.html`, `rokcoder.css` (which contains a lot of garbage and a handful of useful stuff), `projectViewer.js` and `data.js`. To adapt this for your own website you only need to modify `data.js`. I think the format of that file is pretty self-evident.
+There are a few image files but the main body of code is contained in `index.html`, `rokcoder.css` (which contains a lot of garbage and a handful of useful stuff), `projectViewer.js` and `data.js`. To adapt this for your own website you only need to modify `data.js`.
@@ -1,3 +1,13 @@
+// Modify these lines to make the website your own
+const header = 'RokCoder Scratch Projects';
+const footer = 'All projects on this site were created in Scratch by <a href="https://scratch.mit.edu/users/RokCoder/">RokCoder</a>';
+const logo = 'img/rokcoder.gif';
+
+// TurboWarp is a branch of Scratch (by @GarboMuffin) with many speed and operational improvements
+const useTurboWarp = false;
+
+// The projects can be broken up into genres - by default I'm using Ports, Arcade, Games, Multiplayer and Other
+// Each project can have any accompanying informational tabs as shown below - for example, the Tyrian game will present tabs for overview, credits, instructions and controls
 const gameList = new Map([
  [
  'Ports', new Map([
 
@@ -8,7 +8,7 @@
 
 <head>
 
- <title>RokCoder Scratch Projects</title>
+ <title>Scratch Showcase</title>
  <link rel="icon" type="image/x-icon" href="img/favicon.ico">
 
  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
@@ -22,8 +22,8 @@
 
  <!-- Header line - title and RokCoder -->
  <div style="text-align: center; margin-bottom: 50px">
- <a href="../index.html"><img class='rokcoder' style='position:absolute; right:6px' src="img/rokcoder.gif"></a>
- <div class='shadow-text' style="font-size:54px; padding-top: 30px;">RokCoder's Scratch Projects</div>
+ <a href="../index.html"><img class='rokcoder' id='logo' style='position:absolute; right:6px'></a>
+ <div class='shadow-text' id="'header" style="font-size:54px; padding-top: 30px;">RokCoder's Scratch Projects</div>
  </div>
 
  <!-- Thumbnails -->
@@ -62,8 +62,7 @@
 
  <!-- Footer -->
  <div style="margin: auto; margin-top: 40px; padding: 8px; width: 60%; border-radius: 12px; background-color:cadetblue; font-size: 20px; color: black; border: solid black 4px; text-align: center;">
- <p>All projects on this site were created in Scratch by <a href="https://scratch.mit.edu/users/RokCoder/">RokCoder</a></p>
- <div>Note that this site uses TurboWarp to play the games. This does mean that multiplayer features and cloud high score tables will not work. To use those you can play any of <a href="https://scratch.mit.edu/users/RokCoder/projects/">RokCoder's shared projects</a> via the Scratch website</div>
+ <div id='footer'></div>
  </div>
 
  <script src="data.js"></script>
 
@@ -21,6 +21,10 @@ var previewData;
 
 $(document).ready(function () {
 
+ $('#header').html(header);
+ $('#footer').html(footer);
+ $('#logo').attr('src', logo);
+
  // Set to use first tabbed genre, preview image of first game in that genre and first tabbed details view for that game
  genre = gameList.keys().next().value;
  let firstThumbId = gameList.get(genre).keys().next().value;
@@ -225,6 +229,9 @@ function playGame() {
  previewImage.fadeOut('fast', function () {
 
  // Fire up the game
- turboWarp.append('<iframe id="test" src="https://turbowarp.org/' + thumbId + '/embed" width="499" height="416" allowtransparency="true" frameborder="0" scrolling="no" allowfullscreen></iframe>');
+ if (useTurboWarp)
+ turboWarp.append('<iframe id="test" src="https://turbowarp.org/' + thumbId + '/embed" width="499" height="416" allowtransparency="true" frameborder="0" scrolling="no" allowfullscreen></iframe>');
+ else
+ turboWarp.append('<iframe src="https://scratch.mit.edu/projects/' + thumbId + '/embed" allowtransparency="true" width="499" height="416" frameborder="0" scrolling="no" allowfullscreen></iframe>');
  });
 }
Original file line number	Diff line number	Diff line change
`@@ -4,4 +4,4 @@ I wanted a [web page](https://www.rokcoder.com/scratch) to showcase selected Scr`
`4`	`4`
`5`	`5`	`Although my site now incorporates a lot of PHP, this version is made entirely with JavaScript and HTML to make it easier to understand and host - I thought it was a landing page that others might enjoy using for their own projects.`
`6`	`6`
`7`		-There are a few image files but the main body of code is contained in `index.html`, `rokcoder.css` (which contains a lot of garbage and a handful of useful stuff), `projectViewer.js` and `data.js`. To adapt this for your own website you only need to modify `data.js`. I think the format of that file is pretty self-evident.
	`7`	+There are a few image files but the main body of code is contained in `index.html`, `rokcoder.css` (which contains a lot of garbage and a handful of useful stuff), `projectViewer.js` and `data.js`. To adapt this for your own website you only need to modify `data.js`.