aim-game/index.html at main · RaymondFallon/aim-game · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151

<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" media="all" href="./index.css">
        <script src="https://cdn.tailwindcss.com"></script>
        <script type="module">
            import { Application, Controller } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js"
            window.Stimulus = Application.start()

            Stimulus.register("aim", class extends Controller {
              static targets = [ "input", "output", "playerScreenname", "warnLevelOutput" ]

              initialize() {
                this.warnLevel = 0
              }

              addMessage(msg, is_outgoing) {
                let screenname = is_outgoing ? this.screennamePlayer() : this.screennameComp()
                let klass = is_outgoing ? 'outgoing' : 'incoming'
                this.outputTarget.innerHTML += `<div class="chat-msg">
                                                  <span class="screenname ${klass}">${screenname}:&nbsp;</span>
                                                  <span class="msg-body">
                                                    ${msg}
                                                  </span>
                                                </div>`
                this.outputTarget.scrollTop = this.outputTarget.scrollHeight;
              }

              exportViaEmail() {
                  let href = "mailto:"
                    + "?subject=" + encodeURIComponent('Temporary Default Subject')
                    + "&body=" + encodeURIComponent(this.outputTarget.innerText);
                  window.open(href, '_blank')
              }

              randomPhrase() {
                  let phrases = ["What’s Up by 4 Non Blondes", "Runaway Train by Soul Asylum", "Cryin’ by Aerosmith", "Mr. Jones by Counting Crows", "Mmm Mmm Mmm Mmm by Crash Test Dummies", "Dreams by The Cranberries", "Fade Into You by Mazzy Star", "Ordinary World by Duran Duran", "Laid by James", "Disarm by The Smashing Pumpkins", "Found Out About You by Gin Blossoms", "Come Undone by Duran Duran", "Linger by The Cranberries", "Hey Jealousy by Gin Blossoms", "Everybody Hurts by R.E.M.", "The River of Dreams by Billy Joel", "Come to My Window by Melissa Etheridge", "Two Princes by Spin Doctors", "Heart-Shaped Box by Nirvana", "That’s the Way Love Goes by Janet Jackson", "Livin’ on the Edge by Aerosmith", "Are you Gonna Go My Way by Lenny Kravitz", "Right Here by SWV", "Cats in the Cradle by Ugly Kid Joe", "If by Janet Jackson", "Whatta Man by Salt n Pepa", "UNITY by Queen Latifah", "Breathe Again by Toni Braxton", "Shoop by Salt n Pepa", "It Was a Good Day by Ice Cube", "Slam by Onyx", "Zombie by The Cranberries", "Black Hole Sun by Soundgarden", "Kiss from a Rose by Seal", "Buddy Holly by Weezer", "Ode to My Family by The Cranberries", "Mary Jane’s Last Dance by Tom Petty and the Heartbreakers", "About a Girl by Nirvana", "Cantaloop (Flip Fantasia) by Us3", "Closer by Nine Inch Nails", "Glycerine by Bush", "When I Come Around by Green Day", "Shine by Collective Soul", "Because of Love by Janet Jackson", "Basket Case by Green Day", "Regulate by Warren G feat. Nate Dogg", "When Can I see You by Babyface", "Bring the Pain by Method Man", "Juicy by The Notorious B.I.G.", "I’ll Make Love to You by Boyz II Men", "I Wanna Be Down by Brandy", "Wonderwall by Oasis", "Waterfalls by TLC", "Hold Me, Thrill Me, Kiss Me, Kill Me by U2", "Just a Girl by No Doubt", "Bullet With Butterfly Wings by Smashing Pumpkins", "No More “I Love Yous” by Annie Lennox", "Spiderwebs by No Doubt", "Who Will Save Your Soul by Jewel", "Runaway by Janet Jackson", "Only Wanna Be With You by Hootie and the Blowfish", "Give Me One Reason by Tracy Chapman", "Creep by TLC", "Runnin’ by the Pharcyde", "Brown Sugar by D’Angelo", "The Sweetest Days by Vanessa Williams", "Shadowboxin’ by Gza", "Feel Me Flow by Naughty for Nature", "Freek’n You by Jodeci", "Don’t Speak by No Doubt", "Always Be My Baby by Mariah Carey", "Killing Me Softly With His Song by Fugees", "1979 by Smashing Pumpkins", "Novocaine for the Soul by Eels", "Lovefool by The Cardigans", "If It Makes You Happy by Sheryl Crow", "You Oughta Know by Alan’s Morissette", "What I Got by Sublime", "The Crossroads by Bone Thugs-N-Harmony", "Cold Rock a Party by MC Late", "Un-Break My Heart by Toni Braxton", "California Love by 2Pac", "No Diggity by Backstreet", "Doin’ It by LL Cool J", "Around the World by Daft Punk"]
                  return phrases[Math.floor(Math.random()*phrases.length)]
              }

              sendMessage() {
                  if (event.type == 'keydown' && event.key != 'Enter') {return}

                  // Add the player's message
                  this.addMessage(this.inputTarget.value, true)

                  // Add a response 1/3 of the time
                  //   if (Math.random() > .66) { this.addMessage(this.randomPhrase(), false) }
                  this.addMessage(this.randomPhrase(), false)

                  // Remove content from input
                  let me = this;
                  setTimeout(function(){me.inputTarget.value = ''}, 10)
              }

              screennameComp() {
                  return 'MysteryEnt'
              }

              screennamePlayer() {
                  if (this.playerScreennameTarget.value == '') {
                      return 'Me'
                  }
                  else { return this.playerScreennameTarget.value }
              }

              warn() {
                  this.warnLevel = Math.min(this.warnLevel + 5, 100)
                  console.log(`Warn level is ${this.warnLevel}`)
                  this.warnLevelOutputTarget.innerHTML = `${this.warnLevel}%`
              }
            })
          </script>
    </head>
    <body>
          <div id="game-window" data-controller="aim">
            <label id="player-screenname-label">
                Player Screenname:
                <input id="player-screenname-input"
                       type="text"
                       placeholder="Screenname..."
                       required="true"
                       data-aim-target="playerScreenname">
                </input>
            </label>
              <div id="aim-window">
                <div id="aim-window-header">
                    MysteryEnt - Instant Message
                </div>
                <div id="menu">
                    <span class="menu-item">File</span>
                    <span class="menu-item">Edit</span>
                    <span class="menu-item">Insert</span>
                    <span class="menu-item">People</span>
                    <span class="menu-item-warning">
                        MysteryEnt's Warning Level:
                        <span id='warn-level-output'
                              data-aim-target="warnLevelOutput">
                              0%
                        </span>
                    </span>
                </div>
                <div id="chat-output"
                     class="p-2 border-2"
                     data-aim-target="output">
                </div>
                <div id="aim-toolbar">
                    <div class="toolbar-item" id="toolbar-item-a1">A</div>
                    <div class="toolbar-item" id="toolbar-item-a2">A</div>
                    <div class="toolbar-item toolbar-separator"></div>
                    <div class="toolbar-item" id="toolbar-item-a3">A⤋</div>
                    <div class="toolbar-item" id="toolbar-item-a4">A</div>
                    <div class="toolbar-item" id="toolbar-item-a5">A⤊</div>
                    <div class="toolbar-item toolbar-separator"></div>
                    <div class="toolbar-item" id="toolbar-item-b">B</div>
                    <div class="toolbar-item" id="toolbar-item-i">I</div>
                    <div class="toolbar-item" id="toolbar-item-u">u</div>
                    <div class="toolbar-item toolbar-separator"></div>
                    <div class="toolbar-item" id="toolbar-item-link">link</div>
                    <div class="toolbar-item" id="toolbar-item-a">😎</div>
                </div>
                <textarea
                       id="chat-input"
                       rows="3"
                       data-aim-target="input"
                       data-action="keydown->aim#sendMessage"></textarea>
                <div id="action-btn-row">
                        <button id="msg-warn-btn"
                                class="action-btn"
                                data-action="aim#warn">
                            <div class="action-btn-symbol">⚡</div>
                            Warn
                        </button>
                        <button id="msg-warn-btn"
                                class="action-btn"
                                data-action="aim#exportViaEmail">
                            <div class="action-btn-symbol">✉</div>
                            eMail
                        </button>
                        <button id="msg-send-btn"
                                class="action-btn"
                                data-action="aim#sendMessage">
                            <div class="action-btn-symbol">➤</div>
                            Send
                        </button>
                </div>
              </div>
          </div>
    </body>
</html>