~jagtalon/Alarm-Pup

7c8ac7303524df627f7563456eeb17fffc3f92eb — Jag Talon 1 year, 10 months ago 
Initial commit for Alarm Pup
patch browse .tar.gz 
22 files changed, 449 insertions(+), 0 deletions(-)

A .itch.toml
A alarm-pup.css
A assets/bark.mp3
A assets/frame-1.lpe
A assets/frame-1.png
A assets/frame-2.lpe
A assets/frame-2.png
A assets/icon.svg
A bin/Alarm Pup.dat
A bin/Alarm Pup.ico
A bin/windows/x32/.itch.toml
A bin/windows/x32/Alarm Pup.exe
A bin/windows/x32/utils/Create Start Menu.exe
A bin/windows/x64/.itch.toml
A bin/windows/x64/Alarm Pup.exe
A bin/windows/x64/utils/Create Start Menu.exe
A chrome.css
A dog.js
A main.htm
A scapp.exe
A timer.js
A utils/Create Start Menu.ahk

A  => .itch.toml +7 -0
@@ 1,7 @@
[[actions]]
name = "play"
path = "Alarm Pup.exe"

[[actions]]
name = "Add to Start Menu"
path = "utils/Create Start Menu.exe"
\ No newline at end of file


A  => alarm-pup.css +82 -0
@@ 1,82 @@
html { 
  overflow: none; 
  background: #111;
} 

body { 
  overflow: scroll-indicator; 
  color: #fff;
  flow: vertical;
  font-family: 'segoe ui', sans-serif;
} 

Timer {
  prototype: Timer url(timer.js);
  display: block;
}

Dog {
  prototype: Dog url(dog.js);
  display: block;
}

Dog img {
  display: block;
  width: 40%;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1rem;
}

.countdown {
  font-size: 6rem;
  font-weight: 600;
  text-align: center;
}

.button-container {
  flow: horizontal;
  border-spacing: 1rem;
}

.button-container > button {
  font-size: 1.5rem;
  width: 1*;
  background: #252525;
  border: none;
  border-radius: 0px;
  cursor: pointer;
  transition: background-color .15s ease-in-out;
}

.button-container > button:hover {
  background: #333;
}

.change-time {
  flow: horizontal;
  margin-bottom: 2rem;
  max-width: 150px;
  margin-left: auto;
  margin-right: auto;
  border-spacing: 1rem;
  line-height: 1;
}

.change-time > button {
  font-size: 1.5rem;
  font-weight: 600;
  width: 1*;
  text-align: center;
  border-radius: 10%;
  background: transparent;
  cursor: pointer;
  border: none;
  height: 1.5em;
}

.change-time > button:hover {
  transition: background-color .15s ease-in-out;
  background: #252525;
}
\ No newline at end of file


A  => assets/bark.mp3 +0 -0
A  => assets/frame-1.lpe +1 -0
@@ 1,1 @@
{"canvasWidth":16,"canvasHeight":16,"editorMode":"Basic","color0":"#810785","color1":"#b0f75d","color2":"#493f2d","color3":"#ffffff","color4":"#333333","nLayers":5,"layer3":{"canvasSize":[16,16],"canvas":{},"context":{"mozImageSmoothingEnabled":false},"isSelected":true,"isVisible":true,"isLocked":false,"menuEntry":{},"id":"layer1","name":"Layer 0"},"layer3ImageData":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAALtJREFUOE+1k+ENAyEIhR8rHQ7TCewInaEj1Am6jF2JBiMGbTxtmvqLg+N7D48jbB7mQwBCzpl8S/dwxmJmEQAhBJAIhID0SNQB+GDJr17BoNcYRZvKKYGoGzSAKoz2vKMYY22DTlJBNVw169sKMGBKqQmXYAcgt2cD0P3SAwzCzM21zlfzZVZf+3AwWlx92VOAKc/UNf8/B0bWG/cqNqLmxlq7TV/4GrBqXjr4GeAXabZUlh/r23/jbDfev6ub2uE5XM0AAAAASUVORK5CYII="}
\ No newline at end of file


A  => assets/frame-1.png +0 -0
A  => assets/frame-2.lpe +1 -0
@@ 1,1 @@
{"canvasWidth":16,"canvasHeight":16,"editorMode":"Basic","color0":"#810785","color1":"#b0f75d","color2":"#493f2d","color3":"#ffffff","color4":"#333333","nLayers":5,"layer4":{"canvasSize":[16,16],"canvas":{},"context":{"mozImageSmoothingEnabled":false},"isSelected":true,"isVisible":true,"isLocked":false,"menuEntry":{},"id":"layer1","name":"Layer 1"},"layer4ImageData":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAALdJREFUOE+1k4ENg0AIRT8rSbtLJ3CFztARehN0GVzpN1DvcjUqNqbE5O4gPD4EBQdt0IECwGzyo9nXY4+lqiSBy1UhFFCI8iwigyonsxQ0jiMh8A9xIWFm8YbTLYE44JOMoEQi5/MooLZYSmmK2yWD8P6K4iHgcVsHqGqbo/c3txe99rFVBTGkg7YLqJW3qrv/fwoq2dvpq3jV6lvG2jT7wM+ALDlVcBrQL9HWQlX/Mp7+RNlqvAGD85zbbcDSawAAAABJRU5ErkJggg=="}
\ No newline at end of file


A  => assets/frame-2.png +0 -0
A  => assets/icon.svg +115 -0
@@ 1,115 @@
<svg width="868" height="868" viewBox="0 0 868 868" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_203_61)">
<rect x="22" y="11" width="824" height="824" rx="184" fill="url(#paint0_linear_203_61)"/>
</g>
<rect x="514" y="463" width="39" height="39" fill="white"/>
<rect x="280" y="463" width="39" height="39" fill="white"/>
<rect x="124" y="190" width="39" height="39" fill="white" fill-opacity="0.7"/>
<rect x="514" y="112" width="39" height="39" fill="white" fill-opacity="0.7"/>
<rect x="514" y="151" width="39" height="39" fill="white" fill-opacity="0.7"/>
<rect x="475" y="346" width="39" height="39" fill="white" fill-opacity="0.7"/>
<rect x="553" y="112" width="39" height="39" fill="white" fill-opacity="0.7"/>
<rect x="709" y="190" width="39" height="39" fill="white" fill-opacity="0.7"/>
<rect x="553" y="151" width="39" height="39" fill="white" fill-opacity="0.7"/>
<rect x="163" y="229" width="39" height="39" fill="white" fill-opacity="0.7"/>
<rect x="163" y="268" width="39" height="39" fill="white" fill-opacity="0.7"/>
<rect x="202" y="307" width="39" height="39" fill="white" fill-opacity="0.7"/>
<rect x="202" y="346" width="39" height="39" fill="white" fill-opacity="0.7"/>
<rect x="163" y="658" width="39" height="39" fill="white" fill-opacity="0.7"/>
<rect x="280" y="658" width="39" height="39" fill="white" fill-opacity="0.7"/>
<rect x="514" y="658" width="39" height="39" fill="white" fill-opacity="0.7"/>
<rect x="592" y="658" width="39" height="39" fill="white" fill-opacity="0.7"/>
<rect x="358" y="346" width="39" height="39" fill="white" fill-opacity="0.7"/>
<rect x="397" y="346" width="39" height="39" fill="white" fill-opacity="0.7"/>
<rect x="280" y="424" width="39" height="39" fill="white" fill-opacity="0.7"/>
<rect x="319" y="424" width="39" height="39" fill="white" fill-opacity="0.7"/>
<rect x="358" y="424" width="39" height="39" fill="white" fill-opacity="0.7"/>
<rect x="436" y="424" width="39" height="39" fill="white" fill-opacity="0.7"/>
<rect x="241" y="346" width="39" height="39" fill="white"/>
<rect x="514" y="268" width="39" height="39" fill="white"/>
<rect x="553" y="268" width="39" height="39" fill="white"/>
<rect x="592" y="268" width="39" height="39" fill="white"/>
<rect x="514" y="229" width="39" height="39" fill="white"/>
<rect x="553" y="229" width="39" height="39" fill="white"/>
<rect x="592" y="229" width="39" height="39" fill="white"/>
<rect x="514" y="190" width="39" height="39" fill="white"/>
<rect x="553" y="190" width="39" height="39" fill="white"/>
<rect x="592" y="190" width="39" height="39" fill="white"/>
<rect x="592" y="151" width="39" height="39" fill="white"/>
<rect x="631" y="151" width="39" height="39" fill="white"/>
<rect x="670" y="151" width="39" height="39" fill="white"/>
<rect x="631" y="190" width="39" height="39" fill="white"/>
<rect x="670" y="190" width="39" height="39" fill="white"/>
<rect x="631" y="229" width="39" height="39" fill="white"/>
<rect x="670" y="229" width="39" height="39" fill="white"/>
<rect x="709" y="229" width="39" height="39" fill="white"/>
<rect x="514" y="307" width="39" height="39" fill="#FFCBF2"/>
<rect x="553" y="307" width="39" height="39" fill="#FFCBF2"/>
<rect x="592" y="307" width="39" height="39" fill="#FFCBF2"/>
<rect x="202" y="385" width="39" height="39" fill="white"/>
<rect x="241" y="385" width="39" height="39" fill="white"/>
<rect x="202" y="424" width="39" height="39" fill="white"/>
<rect x="241" y="424" width="39" height="39" fill="white"/>
<rect x="280" y="346" width="39" height="39" fill="white"/>
<rect x="319" y="346" width="39" height="39" fill="white"/>
<rect x="280" y="385" width="39" height="39" fill="white"/>
<rect x="397" y="424" width="39" height="39" fill="white"/>
<rect x="397" y="463" width="39" height="39" fill="white"/>
<rect x="436" y="463" width="39" height="39" fill="white"/>
<rect x="319" y="463" width="39" height="39" fill="white"/>
<rect x="358" y="463" width="39" height="39" fill="white"/>
<rect x="280" y="385" width="39" height="39" fill="white"/>
<rect x="202" y="463" width="39" height="39" fill="white"/>
<rect x="241" y="463" width="39" height="39" fill="white"/>
<rect x="202" y="502" width="39" height="39" fill="white"/>
<rect x="202" y="541" width="39" height="39" fill="white"/>
<rect x="319" y="385" width="39" height="39" fill="white"/>
<rect x="358" y="385" width="39" height="39" fill="white"/>
<rect x="397" y="385" width="39" height="39" fill="white"/>
<rect x="436" y="385" width="39" height="39" fill="white"/>
<rect x="436" y="346" width="39" height="39" fill="white"/>
<rect x="475" y="385" width="39" height="39" fill="white"/>
<rect x="475" y="424" width="39" height="39" fill="white"/>
<rect x="475" y="463" width="39" height="39" fill="white"/>
<rect x="514" y="346" width="39" height="39" fill="white"/>
<rect x="514" y="385" width="39" height="39" fill="white"/>
<rect x="514" y="424" width="39" height="39" fill="white"/>
<rect x="553" y="463" width="39" height="39" fill="white"/>
<rect x="553" y="346" width="39" height="39" fill="white"/>
<rect x="553" y="385" width="39" height="39" fill="white"/>
<rect x="553" y="424" width="39" height="39" fill="white"/>
<rect x="592" y="463" width="39" height="39" fill="white"/>
<rect x="592" y="346" width="39" height="39" fill="white"/>
<rect x="592" y="385" width="39" height="39" fill="white"/>
<rect x="592" y="424" width="39" height="39" fill="white"/>
<rect x="592" y="619" width="39" height="39" fill="white"/>
<rect x="592" y="502" width="39" height="39" fill="white"/>
<rect x="592" y="541" width="39" height="39" fill="white"/>
<rect x="592" y="580" width="39" height="39" fill="white"/>
<rect x="514" y="619" width="39" height="39" fill="white"/>
<rect x="514" y="502" width="39" height="39" fill="white"/>
<rect x="514" y="541" width="39" height="39" fill="white"/>
<rect x="514" y="580" width="39" height="39" fill="white"/>
<rect x="280" y="619" width="39" height="39" fill="white"/>
<rect x="319" y="502" width="39" height="39" fill="white"/>
<rect x="319" y="541" width="39" height="39" fill="white"/>
<rect x="280" y="580" width="39" height="39" fill="white"/>
<rect x="163" y="619" width="39" height="39" fill="white"/>
<rect x="163" y="580" width="39" height="39" fill="white"/>
<defs>
<filter id="filter0_d_203_61" x="0" y="0" width="868" height="868" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="11"/>
<feGaussianBlur stdDeviation="11"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.28 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_203_61"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_203_61" result="shape"/>
</filter>
<linearGradient id="paint0_linear_203_61" x1="434" y1="11" x2="434" y2="835" gradientUnits="userSpaceOnUse">
<stop stop-color="#7A83CE"/>
<stop offset="1" stop-color="#575A93"/>
</linearGradient>
</defs>
</svg>


A  => bin/Alarm Pup.dat +0 -0
A  => bin/Alarm Pup.ico +0 -0
A  => bin/windows/x32/.itch.toml +7 -0
@@ 1,7 @@
[[actions]]
name = "play"
path = "Alarm Pup.exe"

[[actions]]
name = "Add to Start Menu"
path = "utils/Create Start Menu.exe"
\ No newline at end of file


A  => bin/windows/x32/Alarm Pup.exe +0 -0
A  => bin/windows/x32/utils/Create Start Menu.exe +0 -0
A  => bin/windows/x64/.itch.toml +7 -0
@@ 1,7 @@
[[actions]]
name = "play"
path = "Alarm Pup.exe"

[[actions]]
name = "Add to Start Menu"
path = "utils/Create Start Menu.exe"
\ No newline at end of file


A  => bin/windows/x64/Alarm Pup.exe +0 -0
A  => bin/windows/x64/utils/Create Start Menu.exe +0 -0
A  => chrome.css +67 -0
@@ 1,67 @@
/* Code adapted from https://github.com/c-smile/sciter-js-sdk/tree/main/samples.sciter/applications.quark/mdview */

@media platform == "Windows" {

  html { 
    var(accent-color): window-accent-color; 
    border: window-frame-width solid transparent; 
  }

  html:owns-focus {
    border-color: morph(color(accent-color), opacity:50%);   
  }

  html > header { width:*; background-color: color(widget-back); color: color(widget-text); }

  html > header > window-buttons { display:block; flow:horizontal; width:max-content; height:*; }
  html > header > window-buttons > window-button { 
    behavior:clickable; 
    display:block; 
    height:*; 
    width:window-button-width; 
    foreground-size: 11dip;
    foreground-repeat: no-repeat;
    foreground-position:50% 50%;
    stroke:color(button-text);
    stroke-width:1dip;
    transition: background-color linear 100ms;
  }
  html > header > window-buttons > window-button:hover { 
    background:rgba(0,0,0,0.25);   
  }
  html > header > window-buttons > window-button[role="window-close"] { stroke-width:1.44dip; foreground-image: url(path:M0 0 L10 10 M10 0 L0 10); }
  html > header > window-buttons > window-button[role="window-close"]:hover { background:rgb(232,17,35); stroke:#fff; }

  html > header > window-buttons > window-button[role="window-maximize"] { foreground-image: url(path:M0 0 H10 V10 H0 Z); }
  html > header > window-buttons > window-button[role="window-maximize"]:hover { background:rgba(255,255,255,.5); }

  html[window-state="maximized"] { border-color:transparent; }
  html[window-state="maximized"] > header > window-buttons > window-button[role="window-maximize"] { foreground-image: url(path:M0 2 h8 v8 h-8 Z M2 2 v-2 h8 v8 h-2); }
  html > header > window-buttons > window-button[role="window-minimize"] { foreground-image: url(path:M0 0 M0 5 H10 M10 10); }
  html > header > window-buttons > window-button[role="window-minimize"]:hover { background:rgba(255,255,255,.5); }
}

html > header { width:*; flow:horizontal; height:window-caption-height; min-height:24px; margin:0; } 
html > header > window-caption { 
  display:block; 
  line-height:window-caption-height; 
  width:*; 
  color:color(button-text); 
  text-align:left;
  text-overflow:path-ellipsis;
  overflow-x:hidden;
  white-space: no-wrap;
  padding-left: 20px;
}

html[mode="pager"] button#home { visibility:hidden; }
html[mode="pager"] button#back { visibility:hidden; }
html[mode="pager"] button#fore { visibility:hidden; }
html[mode="pager"] button#daynight { visibility:hidden; }
html[mode="pager"] button#watch { visibility:hidden; }

frame { 
  size:*; 
  background-color: color(widget-back); 
  color: color(widget-text); 
}
\ No newline at end of file


A  => dog.js +24 -0
@@ 1,24 @@
export class Dog extends Element {
  componentDidMount() {
    this.frame = 1;
    this.image = "assets/frame-1.png";

    setInterval(() => {
      if (this.frame == 1) {
        this.image = "assets/frame-2.png";
        this.frame = 2;
      } else {
        this.image = "assets/frame-1.png";
        this.frame = 1;
      }

      this.render();
    }, 300);
    
    this.render();
  }

  render() {
    this.innerHTML = `<img src="${this.image}">`;
  }
}
\ No newline at end of file


A  => main.htm +18 -0
@@ 1,18 @@
<html window-icon="assets/icon.svg" window-width="440" window-height="434" theme="dark" window-frame="extended" window-resizable="no">
  <head>
    <title>Alarm Pup</title>
    <style src="chrome.css" />
    <style src="alarm-pup.css" />
  </head>
  <header>
    <window-caption role=window-caption>Alarm Pup</window-caption>
    <window-buttons>
      <window-button role="window-minimize"></window-button>
      <window-button role="window-close"></window-button>
    </window-buttons>
  </header>
  <body>
    <Dog></Dog>
    <Timer></Timer>
  </body>
</html>
\ No newline at end of file


A  => scapp.exe +0 -0
A  => timer.js +97 -0
@@ 1,97 @@
export class Timer extends Element {
  componentDidMount() {
    this.resetTime = 2700;
    this.time = this.resetTime;
    this.stopStartButton = "Start";
    this.intervalID = -1;

    this.render();
  }

  render() {
    let minutes = this.time > 0 ? Math.floor(this.time / 60) : 0;
    let seconds = this.time > 0 ? this.time % 60 : 0;

    this.content( 
      [
        <div>
          <div .countdown>{minutes.toString().padStart(2, "0")}:{seconds.toString().padStart(2, "0")}</div>
          <div .change-time>
            <button .plus>▲</button>
            <button .minus>▼</button>
          </div>
          <div .button-container>
            <button type="button" .stop-start>{this.stopStartButton}</button>
            <button type="button" .reset>Reset</button>
          </div>
        </div>
      ]);
  }

  ["on click at button.stop-start"](event, button) {
    if (this.intervalID === -1) {
      this.stopStartButton = "Stop";
      this.intervalID = setInterval(() => {
        // If we have more time left, shave off 1 sec.
        // Otherwise, we reset the clock and the button state.
        if (this.time > 0) {
          this.time -= 1;
        } else {
          this.stopStartButton = "Start";
          clearInterval(this.intervalID);
          this.intervalID = -1;
          this.time = this.resetTime;

          // Dog bark!
          dogBark();
        }

        this.render();
      }, 1000);
    } else {
      // We stop setInterval from running again
      // and we reset the state of the button.
      this.stopStartButton = "Start";
      clearInterval(this.intervalID);
      this.intervalID = -1;
    }

    this.render();
  }

  ["on click at button.reset"](event, button) {
    if (this.intervalID !== -1) {
      this.stopStartButton = "Start";
      clearInterval(this.intervalID);
      this.intervalID = -1;
    }
    this.time = this.resetTime;
    this.render();
  }

  ["on click at button.plus"](event, button) {
    if (this.intervalID === -1 && this.resetTime < 3600) {
      this.resetTime += 300;
      this.time = this.resetTime;
      this.render();
    }
  }

  ["on click at button.minus"](event, button) {
    if (this.intervalID === -1 && this.resetTime > 300) {
      this.resetTime -= 300;
      this.time = this.resetTime;
      this.render();
    }
  }
}

async function dogBark() {
  // From https://freesound.org/people/NachtmahrTV/sounds/553188/
  try {
    let audio = await Audio.load(__DIR__ + 'assets/bark.mp3');
    await audio.play();
  } catch (e) {
    console.log(e);
  }
}
\ No newline at end of file


A  => utils/Create Start Menu.ahk +23 -0
@@ 1,23 @@
#NoEnv  ; Recommended for performance and compatibility with future AutoHotkey releases.
#Warn  ; Enable warnings to assist with detecting common errors.
SendMode Input  ; Recommended for new scripts due to its superior speed and reliability.
SetWorkingDir %A_ScriptDir%  ; Ensures a consistent starting directory.

try {

  if FileExist("..\Alarm Pup.exe") {
    ; See if Alarm Pup.exe exists in the first place.
    ; We do this because FileCreateShortcut will create a link even if the .exe is not available.
    FileCreateShortcut, %A_ScriptDir%\..\Alarm Pup.exe, %A_Programs%\Alarm Pup.lnk
    MsgBox, ,Alarm Pup, Successfully created a shortcut for Alarm Pup in the Start Menu

  } else {
    ; Show a message if Alarm Pup.exe is not available.
    MsgBox, ,Alarm Pup, Sorry, Alarm Pup.exe seems to be missing.
  }

} catch e {
  ; There might be permission errors when creating new files,
  ; so let's show a message when that happens, too.
  MsgBox, ,Alarm Pup, We ran into an issue while creating a shortcut. %e%
}
\ No newline at end of file