Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <nav class="navbar navbar-expand-lg fixed-bottom navbar navbar-custom">
<!-- Header Title & Logo -->
<a href="#" class="navbar-brand h1 mb-0">
<a href="https://bookflic.com"><img src="https://assets.codepen.io/769788/image_3.png" style="width:150px" /></a>
<!-- Navbar -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
<span class="fa fa-bars"></span></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="btn btn-success" onClick="pageScroll()"><i class="far fa-arrow-alt-circle-down"></i>  </a> 
<a class="btn btn-danger" onClick="stopScroll()"> <i class="fa fa-pause"></i></a>
</li>
<li class="nav-item">
  <div class=player>
      <audio class=player_audio controls>
      </audio>
    </div>
</li>
<li class="nav-item">
<div class=tempo>
      <input class=tempo_input id=tempo_input type=range value=1 min=0.5 max=2 step=0.025>
</div>
<li class="nav-item">
<p> </p>
</li>
<li class="nav-item">
<a href="#" class="btn btn-primary"><i class="fa fa-angle-double-left"></i> Previous</a> <a href="#" class="btn btn-secondary">Next <i class="fa fa-angle-double-right"></i></a>
</li>
<li class="nav-item">
<p> </p>
</li>
<li class="nav-item">
<a class="btn btn-outline-info" onclick="topFunction()">↑</a>
</li>
</ul>
</nav>

<div class=group>
 <div class=url>
<!-- <label class=url_label for=url_input><span>Address</span></label> -->
<input id=url_input class=url_input type=url value="https://dl.dropboxusercontent.com/s/o0o9kdjxi5nu0m6/CombatFishing.mp3?dl=0">
</div>
 
<input id=upload_input class=upload_input type=file accept="audio/*">
</div>
</div>
<div class=group>
<div class=player>
<!-- <h3 class=player_display></h3> -->
<!-- <audio class=player_audio controls> -->
<track id=player-chords kind=captions srclang=en>
</audio>
</div>
<!-- <div class=tempo> -->
<!--  <label class=tempo_label for=tempo_input>Audio Speed</label> -->
<!-- <input class=tempo_input id=tempo_input type=range value=1 min=0.5 max=2 step=0.025> -->
<span class=tempo_display></span>
</div> 
</div>  

# COMBAT FISHING

## By Terry Hodges

It was almost midnight.  Half an August moon had risen in the east, casting a soft light on the dark waters of the Feather River.  Lt. James Halber, California Department of Fish and Game, lay on a high bank overlooking the Outlet Hole, a great water-filled depression large enough to contain a supermarket.  At that moment, Halber knew it contained over a thousand king salmon.  He scanned the rocky banks with his binoculars, confident that sooner or later the poachers would come.

The Outlet Hole was the confluence of the main Feather River with a large volume of river water that had been diverted several miles upstream for power generation and other purposes.  The diverted water made a spectacular reentrance into the main river here, tumbling in a whitewater cataract over a large concrete dam known as the Outlet Structure.

Upstream migrating salmon were confused at the Outlet Hole and would linger at this spot for weeks or months before finding their way to the spawning grounds upriver.  This provided a rare opportunity for anglers, honest or otherwise.  By day, the banks were lined with anglers, often by the hundreds, fishing shoulder to shoulder for the fat, tackle-busting fish that often weighed over 30 pounds.  By night, when the river was closed to salmon fishing, only the outlaws came.

It was a high-profile problem spot for the local wardens, many of whom almost lived there when the fish were in.  Halber himself had been working the Outlet Hole for nearly a quarter century and had learned a thing of two about outsmarting the salmon-poaching outlaws of which there seemed to be an unending supply.

Most of the salmon at the Outlet Hole stacked up near the base of the dam and were accessible only to anglers willing to illegally crawl past the **NO TRESPASSING** signs through holes in a chain link fence and walk out onto the concrete aprons.  The aprons were large tilted slabs, each the size of a tennis court, that protected the riverbanks on both sides of the dam.   It was dangerous business venturing onto the aprons, for it was like walking on the steeply pitched roof of a house.  A misstep could send an angler tumbling into the swift and turbulent waters to be swept out into the 18-foot-deep middle water of the hole.  Several had drowned there over the years, and many others had survived only because other anglers in boats rescued them.

Halber had witnessed a number of near drownings there.  He had once watched helplessly as an elderly angler tumbled in and was swept away.  The man could perhaps have tread water had he released the new fishing rod he clutched in one hand, but he refused to let go.  As two men in a small boat frantically pulled anchor to go after him, he went under.  When the boat arrived, only the tip of the fishing rod was visible above the surface.  A man in the boat grabbed the rod tip and carefully pulled it up, hand over hand, bringing up the still-attached but half-dead angler.

Another incident would forever haunt Halber.  A 16-year-old boy had proudly shown Halber his first-ever fishing license just before he and his friends hiked down a trail to the water's edge to try their luck.  Fifteen minutes later the boy was dead, claimed by the dangerous waters of the Outlet Hole. 

But most of what happened at the Outlet Hole was simply conflict between anglers.  The large numbers of both anglers and salmon brought out the absolute worst in people who fished there.  Anglers fought anglers over good casting spots along the bank.  Bank anglers fought boat anglers who anchored where they were casting.  Usually they hurled only verbal abuse at one another, but sometimes it was rocks or bottles.  Occasionally, they brandished firearms to make a point or they cast heavy jigs at each other with near-bullet velocities.  Fistfights were common, and the prevailing law there seemed to be survival of the fittest, the strong over the weak.  Some referred to it as "combat fishing."  Halber had seen it all and had occasionally intervened to keep the peace.

Perhaps the worst of the daylight violators were those in boats.  They felt a sense of invulnerability because they were out of immediate reach of the wardens who usually appeared along the banks.  These violators would use illegal snag gear─usually illegal lead jigs with large treble hooks or sometimes simply large treble hooks with attached lead weights─with the intent of simply cutting their lines should the wardens arrive in boats.  But it was a false sense of security, as Halber had proven only the day before.

Four men had been actively attempting to snag salmon from a 20-foot jet boat and had infuriated bank anglers by anchoring right where they had been casting, thus ruining their fishing.  The snaggers ignored requests by the shore anglers that they anchor farther out.  To make matters worse, the four snaggers were particularly aggressive and obnoxious men, and they threatened to come ashore and assault anyone who complained.

For over two hours, the four men snagged with apparent impunity, increasingly enraging the bank anglers.  They took two salmon during this time, each one snagged somewhere behind the head.  But the bank anglers were not the only witnesses to these illegal acts.  Up on a bluff overlooking the Outlet Hole, amid a dozen or so parked vehicles, Halber had been watching.  He peered through a powerful spotting scope mounted on a stout tripod, his uniform hidden beneath a non-uniform shirt.

With regularity, Halber jotted notes in a small notebook.  He noted, for instance, the times when each of the two snagged salmon had been netted and brought aboard and the locations on their bodies where the large hooks had pierced their flesh.  He included the physical descriptions of the violators who took each fish.  He had two of the four violators cold, with solid observations of violations, but the other two had not yet caught fish, and they were smart enough to keep their illegal gear out of sight below the surface.  Unwilling to settle for only two out of the four or to spend most of his day there getting the remaining two, Halber put his mind to the problem.

The *solution* to the problem arrived in the form of a young woman who parked her car near Halber.  She recognized him as a warden and inquired what he was watching so intently.  He explained about the violators in the jet boat, allowing her a peek at them through the spotting scope.  He also explained his need to get out to them.

"Maybe my father will take you out to them," she said.  "I'm here to go fishing with him.  He's out there right now in a boat.  He's gonna pick me up.  Do you want me to ask him?"

Halber readily agreed.

"If you wait here, I'll come and tell you."

Halber again agreed, and as she hurried down the trail to the water's edge, Halber went to his patrol truck for a few things.  He hurriedly stuffed his citation book, his binoculars and his uniform cap into a canvas shoulder bag, and he grabbed a two-piece fishing rod and reel that had once been abandoned by a fleeing poacher.  Halber often used the fishing outfit as a prop when he worked undercover.  He buttoned his civilian shirt to further hide his uniform, made sure that the shirttails obscured his gun belt, and he put on a bright, civilian ball cap.  He then hurried back in time to meet the young woman on her return trip up the trail.

"He said he'll do it," she said.  "He's been watching those guys, and he wants to help you get them.  He's waiting for you at the bottom of this trail."

Because the high bluff obscured much of the near bank from sight, Halber had not yet seen the girl's father or his boat.  But now, as Halber started down the trail and the shoreline came into his view, he was puzzled.  Expecting to see some suitable watercraft beached there, he found only a tiny wooden dinghy.  From Halber's point of view as he descended the trail, the sole occupant of the dinghy was hidden from sight beneath a large beach umbrella mounted upright near the dinghy's center.  With oars sticking out on either side, the craft had the appearance of a large water bug.

Upon reaching the bank, Halber could now see a small man beneath the umbrella, an oar handle in each hand.

"You must be the warden," said the oarsman as Halber approached.

"That's me," said Halber.  "I appreciate your offer to help, but don't you think I'll sink this thing?"

"We should be OK if you sit real still," said the oarsman.  "You sit in the back."

Halber gingerly climbed in and gently pushed off from the bank.  The dinghy rode dangerously low in the water on Halber's end while the oarsman's end barely touched the surface.  Halber eyed a flotation cushion as the oarsman pulled on the oars, and he felt absolutely ridiculous.   He sat, facing aft, like the "Grand Poopah" under his umbrella, fishing rod in hand, hesitant even to turn his head for a look.  But the oarsman knew his business and traversed the 40 yards of open water to where the jet boat was anchored.

As it happened, the outlaws were landing a salmon on the opposite side of the boat and were all facing away as the dinghy approached.  They failed to notice as the oarsman expertly spun the dinghy around placing Halber within arm's length of the jet boat's side.  Halber quietly stepped aboard as the snagged and netted salmon came aboard on the other side.  Halber had shed the civilian shirt, swapped hats and stood there in the jet boat in full uniform.  The four violators turned and recoiled in horror and disbelief, aghast that a game warden had magically appeared in their midst. 

"State game warden," said Halber.  "You men are under arrest.  Don't touch any of your gear."

About this time, some of the bank anglers noticed that a game warden had somehow appeared in the boat containing the obnoxious snaggers, and word spread swiftly.  Suddenly a loud and joyous cheer rang out from the bank anglers who waved and saluted Halber with absolute jubilation.

It was a clean sweep for Halber.  He had all four outlaws cold.  There were snag hooks on all four rods, one set of which was still impaled in the belly of the salmon that flopped on deck in the landing net.  Halber identified the boat's owner and ordered him to pull anchor and drive to the boat ramp, a quarter mile downriver.

"What if I refuse?" said the man, eyes narrowed, hands on his hips.

"If you refuse," said Halber, "I'll seize your boat into evidence, and you can go home tonight without it.  And if you resist me in any way, you'll go to jail in handcuffs."

With no further delay, the man pulled the anchor, fired the engine and headed the boat out of the Outlet Hole toward the boat ramp.  Again the bank anglers treated Halber to a thunderous cheer of approval.

            *                      *                      *                      *

Recalling the incident, Halber chuckled to himself as he lay there in the darkness.  Then movement caught his eye.  Two dark shapes had appeared immediately below him on the south apron,.  Reaching for his starlight scope, he snapped it on and trained it on the two silhouettes.  They instantly became two small men with fishing outfits, each trying hard to snag salmon.  Each man wore a ski mask, something Halber had never before encountered among salmon poachers.

As Halber watched, one of the men snagged a fish, which immediately ran downriver.  The snagger followed it, going waist-deep in the water to get around the lower end of the chain link fence at the edge of the apron.  He then picked his way through the large rocks and boulders at the water's edge as his battle with the large salmon took him farther downstream.  Soon he was beyond a stand of willows and out of sight of his companion.

Halber recognized this as his chance to snap up the remaining violator on the apron without alerting the other.  As Halber slipped through a gap in the fence along the top edge of the apron, he noted the distinctive silhouette of the man he now approached.  The man was small, barely over five feet tall.  He wielded a large surf-type fishing rod, and he wore his ball cap reversed, bill to the rear.  As Halber slipped up behind him, the man heard nothing but the roaring of the waterfall.

Halber, now on the far side of age 55, had learned that he could no longer win foot races with younger violators. So now, whenever possible, he chose to deny them the option of flight.  In this situation, that meant grabbing violators from behind.  To his victims, the shock of being grabbed in the night by something large produced a variety of physical reactions ranging from spectacular to disgusting.  But for Halber, there was no choice.

Halber edged closer, careful not to lose his footing on the steep incline.  When the man was within arm's reach and was rearing back to cast again, Halber sprang upon him.  As the man let out a strangled shriek, Halber pulled him backwards and down onto his fanny.

"State game warden!" Halber growled into the man's ear.  "Don't move!"

But the stricken violator was incapable of movement, his arms and legs having turned to jelly. 

When the man could again stand, Halber pulled off his ski mask and marched him up the apron, through the opening in the fence, and handcuffed him there.  But Halber now faced the problem of leaving the captured violator while he went after the other one.  The solution, however, was easy.  With Halber on this night was Ron Davis, a Fish and Game employee who worked at the Feather River Hatchery in Oroville.  Davis had requested a ride-along with Halber, and he had watched with fascination through the starlight scope as Halber had captured the first violator.   Now Halber had a job for him.

Addressing the violator and assisting him to a sitting position, Halber said, "You stay right here with Warden Davis."  Davis, of course, was not a warden, but the suspect didn't know this, and he did as Halber ordered, hardly moving a muscle for the next 15 minutes.

The next problem for Halber was to somehow get close enough to capture the remaining violator without a foot chase.  Recalling the distinctive silhouette of the first violator, Halber took up the man's large fishing rod.  Then, to complete the image, he took his uniform hat, a green ball cap bearing a cloth replica of the badge he wore on his chest, and reversed it on his head so that the bill was now backwards.  He then stalked off toward the apron.

Hurrying down the apron to the water's edge, Halber began casting.  He had snipped off the twin treble hooks of the snag rig, leaving only the weight.  While casting and retrieving the weight, Halber edged downstream along the bank.  He waded around the lower end of the fence, then worked his way slowly downriver.  Soon he spotted the second violator in the final stages of landing the big salmon.

Halber now proceeded more carefully, inching his way toward his quarry, casting and jerking the big rod like a salmon snagger do all the while.  He noticed the violator glance his way a time or two, but quickly return his attention to the salmon.  *It's working*! Halber thought.

As the big salmon, silvery in the moonlight, came flopping ashore tail first on the cobbles, Halber closed the gap.  The violator, on his knees now with the salmon, peered up as Halber approached.  Suddenly he realized his peril and gathered himself to bolt, but it was too late.  Halber charged the last few feet and was on the man like an avalanche, 240 pounds of aging game warden knocking him flat, crushing the fight out of him.

After applying his spare set of handcuffs, Halber dragged the man to his feet and pulled off the man's ski mask.

"Let's have a look at you," said Halber, directing the bright beam of a Stinger flashlight onto his face.  He was no one Halber recognized, just another violator, albeit a serious, calculating one.  Halber walked him carefully back to the apron, then up through the break in the fence to where Davis waited with the first suspect.

The rest was routine, the issuing of citations, and the photographing of suspects and evidence.  Because both suspects had good identification, Halber ultimately released them, one of them badly in need of a change of trousers.  Had they learned anything?  Halber thought it likely that the level of shock and fright they had both experienced on this night might well have cleansed them of any future outlaw ways.  But time alone would tell.

For Halber, the case would be filed away in that part of his brain reserved for fond memories, like his satisfying surprise capture the day before of the four obnoxious salmon snaggers in the jet boat.  For he would never forget the look of total bewilderment on the face of the second ski-masked violator just prior to his capture, puzzled that his companion had miraculously doubled in size.

<!-- <input id=url_input class=url_input type=url value="https://m.sivers.org/2020-02-DerekSivers-JordanParis.mp3"> -->

<script src="https://pubwriter.net/js/top.js">
              
            
!

CSS

              
                body {
  --spacing: .75rem;
  font-family: sans-serif;
  line-height: 1.5;
   text-align: left;
  margin: .75rem;
  padding-bottom: 2rem;
  color: hsl(269,19%,30%);
  background-color: hsla(32,100%,85%,.35);
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.4'/%3E%3C/filter%3E%3C/defs%3E%3C!-- %3Cpath filter='url(%23a)' opacity='.3' d='M0 0h1200v256H0z'/%3E--%3E%3Crect filter='url(%23a)' opacity='.3' width='100%25' height='100%25'/%3E%3C/svg%3E");
}
@media (min-width: 48em) {
  body {--spacing: 1rem;}
}
body * {box-sizing: border-box;}
h1, h2, h3 {font-weight:100;}
h1 {margin: 1em 0 .5em;}
.group {
  border: 1px solid #fff;
  background-color: rgba(255,255,255,.25);
  padding: .5rem 1rem;
  margin: 1rem auto;
}

.url {
  display: flex;
  width: 100%;
  margin: 1rem auto;
  opacity: 0;
}
[class*="_label"] {
  position: relative;
  white-space: nowrap;
  margin-right: .5em;
  min-width: 4em;
  
}
[class*="_label"] > span {
  display: block;
  position: relative;
  top: 50%;
  transform: translatey(-50%);
   opacity: 0;
}
[class*="_input"] {
  display: inline-block;
  line-height: 1;
  width: 100%;
  margin: 0;
  padding: .25rem .5rem;
  font: inherit;
  border: 1px solid #fff;
  background-color: rgba(255,255,255,.5);
/*   opacity: 0; */
  [class*="_input1"] {
  display: inline-block;
  line-height: 1;
  width: 100%;
  margin: 0;
  padding: .25rem .5rem;
  font: inherit;
  border: 1px solid #fff;
  background-color: rgba(255,255,255,.5);
  opacity: 0;
}


.upload {
  display: flex;
  width: 100%;
  margin: 1rem auto;
}

.player_audio {
  width: 100%;
}
.player_display {
  font-size: 1.25rem;
}
.tempo {
  display: flex;
  width: 100%;
  margin: 1rem auto;
}
.tempo_display {
  font-weight: 700;
  min-width: 3em;
  margin-left: .5em;
}

              
            
!

JS

              
                
const player = document.querySelector('.player_audio');
const playerDisplay = document.querySelector('.player_display');

const changeTempo = function () {
  player.playbackRate = tempoInput.value;
  tempoDisplay.textContent = tempoInput.value;
};

const changeSongURL = function (e) {
  player.src = urlInput.value;
  let filename = player.src.split('\\').pop().split('/').pop();
  playerDisplay.textContent = filename;
}

const changeSongFile = function (e) {
  const target = e.currentTarget;
  const file = target.files[0];
  let reader;

  if (target.files && file) {
    reader = new FileReader();
    reader.onload = function (e) {
      player.setAttribute('src', e.target.result);
      playerDisplay.textContent = file.name;
      // player.play(); // auto play on load
    }
    reader.readAsDataURL(file);
  }
};

// Get the song from:
const urlInput = document.getElementById('url_input');
urlInput.addEventListener("change", changeSongURL, false);


// Or upload an MP3:
const uploadInput = document.getElementById('upload_input');
uploadInput.addEventListener('change', changeSongFile, false);


// Playback tempo 
const tempoInput = document.getElementById('tempo_input');
tempoInput.addEventListener("change", changeTempo, false);
const tempoDisplay = document.querySelector('.tempo_display');
tempoDisplay.textContent = tempoInput.value;



// Chords from:
const vtt = document.getElementById('url_input').value.replace('.mp3', '.vtt');
const player_chords = document.getElementById('player-chords');

player_chords.src = vtt;
// player.src = urlInput.value;
changeSongURL();
changeTempo();
              
            
!
999px

Console